Login Screen Vue Component

• Login Screen Components
• Login Screen Properties
• Login Screen Methods
• Login Screen Events
• Open And Close Login Screen
• Access To Login Screen Instance
• Examples

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

Login Screen Methods

Login Screen Events

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-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>
          <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-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>
      <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>