Login Screen Vue Component

There are following components included:

f7-login-screen - login screen element
f7-login-screen-title - login screen title element

Prop	Type	Default	Description
<f7-login-screen> properties
opened	boolean	false	Allows to open/close Login Screen and set its initial state
animate	boolean		Whether the modal should be opened/closed with animation or not
container-el	HTMLElement string		Element to mount modal to (default to app root element)

Event	Description
<f7-login-screen> events
loginscreen:open	Event will be triggered when Login Screen starts its opening animation
loginscreen:opened	Event will be triggered after Login Screen completes its opening animation
loginscreen:close	Event will be triggered when Login Screen starts its closing animation
loginscreen:closed	Event will be triggered after Login Screen completes its closing animation

<template>
  <f7-page>
    <f7-login-screen v-model:opened="isOpened">
      ...
    </f7-login-screen>
    <p>Modal is opened: {{ isOpened }}</p>
  </f7-page>
</template>
<script>
  export default {
    data() {
      return {
        isOpened: false,
      };
    }
  };
</script>

In addition to Login Screen open()/close() methods, you can open and close it:

using Login Screen API
by passing true or false to its opened prop
by clicking on Link or Button with relevant login-screen-open property (to open it) and login-screen-close property to close it

Examples

<template>
  <f7-page>
    <f7-navbar title="Login Screen"></f7-navbar>
    <f7-block>
      <p>
        Framework7 comes with ready to use Login Screen layout. It could be used inside of page or
        inside of popup (Embedded) or as a standalone overlay:
      </p>
    </f7-block>

    <!-- example-hidden-start -->
    <f7-list strong inset-md outline-ios>
      <f7-list-item link="/login-screen-page/" title="As Separate Page"></f7-list-item>
    </f7-list>
    <!-- example-hidden-end -->

    <f7-block>
      <f7-button raised large fill login-screen-open=".demo-login-screen">As Overlay</f7-button>
    </f7-block>

    <f7-block>
      <f7-button raised large fill @click="loginScreenOpened = true"
        >Open Via Prop Change</f7-button
      >
    </f7-block>

    <f7-login-screen v-model:opened="loginScreenOpened" class="demo-login-screen">
      <f7-page login-screen>
        <f7-login-screen-title>Framework7</f7-login-screen-title>
        <f7-list form>
          <f7-list-input
            label="Username"
            type="text"
            placeholder="Your username"
            :value="username"
            @input="username = $event.target.value"
          ></f7-list-input>
          <f7-list-input
            label="Password"
            type="password"
            placeholder="Your password"
            :value="password"
            @input="password = $event.target.value"
          ></f7-list-input>
        </f7-list>
        <f7-list inset>
          <f7-list-button @click="signIn">Sign In</f7-list-button>
          <f7-block-footer
            >Some text about login information.<br />Lorem ipsum dolor sit amet, consectetur
            adipiscing elit.</f7-block-footer
          >
        </f7-list>
      </f7-page>
    </f7-login-screen>
  </f7-page>
</template>
<script>
import {
  f7Navbar,
  f7Page,
  f7LoginScreen,
  f7List,
  f7ListItem,
  f7Block,
  f7Button,
  f7LoginScreenTitle,
  f7BlockFooter,
  f7ListButton,
  f7ListInput,
  f7,
} from 'framework7-vue';

export default {
  components: {
    f7Navbar,
    f7Page,
    f7LoginScreen,
    f7List,
    f7ListItem,
    f7Block,
    f7Button,
    f7LoginScreenTitle,
    f7BlockFooter,
    f7ListButton,
    f7ListInput,
  },
  data() {
    return {
      loginScreenOpened: false,
      username: '',
      password: '',
    };
  },
  methods: {
    signIn() {
      const self = this;

      f7.dialog.alert(`Username: ${self.username}<br>Password: ${self.password}`, () => {
        f7.loginScreen.close();
      });
    },
  },
};
</script>

Improve this Doc

On this page

Login Screen Components
Login Screen Properties
Login Screen Events
Login Screen v-model
Open And Close Login Screen
Examples

Login Screen Vue Component

Login Screen Components

Login Screen Properties

Login Screen Events

Login Screen v-model

Open And Close Login Screen

Examples