Login Screen Vue Component

    Login Screen Vue component represents Login Screen component.

    Login Screen Components

    There are following components included:

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

    Login Screen Properties

    Prop Type Default Description
    <f7-login-screen> properties
    opened boolean false Allows to open/close Login Screen and set its initial state

    Login Screen Methods

    <f7-login-screen> methods
    .open(animate) Open login screen
    .close(animate) Close login screen

    Login Screen Events

    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

    Open And Close Login Screen

    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

    Access To Login Screen Instance

    You can access Login Screen initialized instance by accessing .f7LoginScreen component's property.

    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>
    
        <f7-list>
          <f7-list-item link="/login-screen-page/" title="As Separate Page"></f7-list-item>
        </f7-list>
    
        <f7-block>
          <f7-button raised big fill login-screen-open=".demo-login-screen">As Overlay</f7-button>
        </f7-block>
    
        <f7-block>
          <f7-button raised big fill @click="loginScreenOpened = true">Open Via Prop Change</f7-button>
        </f7-block>
    
        <f7-login-screen class="demo-login-screen" :opened="loginScreenOpened" @loginscreen:closed="loginScreenOpened = false">
          <f7-page login-screen>
            <f7-login-screen-title>Framework7</f7-login-screen-title>
            <f7-list form>
              <f7-list-item>
                <f7-label>Username</f7-label>
                <f7-input type="text" placeholder="Your username" @input="username = $event.target.value"></f7-input>
              </f7-list-item>
              <f7-list-item>
                <f7-label>Password</f7-label>
                <f7-input type="password" placeholder="Your password" @input="password = $event.target.value"></f7-input>
              </f7-list-item>
            </f7-list>
            <f7-list>
              <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>
      export default {
        data() {
          return {
            loginScreenOpened: false,
            username: '',
            password: '',
          };
        },
        methods: {
          signIn() {
            const self = this;
            const app = self.$f7;
    
            app.dialog.alert(`Username: ${self.username}<br>Password: ${self.password}`, () => {
              app.loginScreen.close();
            });
          },
        },
      };
    </script>

    Separate Login Screen Page

    <template>
      <f7-page no-toolbar no-navbar no-swipeback login-screen>
        <f7-login-screen-title>Framework7</f7-login-screen-title>
        <f7-list form>
          <f7-list-item>
            <f7-label>Username</f7-label>
            <f7-input type="text" placeholder="Your username" @input="username = $event.target.value"></f7-input>
          </f7-list-item>
          <f7-list-item>
            <f7-label>Password</f7-label>
            <f7-input type="password" placeholder="Your password" @input="password = $event.target.value"></f7-input>
          </f7-list-item>
        </f7-list>
        <f7-list>
          <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>
    </template>
    
    <script>
      export default {
        data() {
          return {
            username: '',
            password: '',
          };
        },
        methods: {
          signIn() {
            const self = this;
            const app = self.$f7;
            const router = self.$f7router;
            app.dialog.alert(`Username: ${self.username}<br>Password: ${self.password}`, () => {
              router.back();
            });
          },
        },
      };
    </script>