Login Screen Vue Component

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

    Login Screen Properties

    Login Screen Events

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

    Access To Login Screen Instance

    Separate Login Screen Page

    1. <template>
    2.     <f7-login-screen-title>Framework7</f7-login-screen-title>
    3.     <f7-list form>
    4.       <f7-list-input
    5.         label="Username"
    6.         type="text"
    7.         placeholder="Your username"
    8.         :value="username"
    9.         @input="username = $event.target.value"
    11.       <f7-list-input
    12.         label="Password"
    13.         type="password"
    14.         placeholder="Your password"
    15.         :value="password"
    16.         @input="password = $event.target.value"
    17.       ></f7-list-input>
    18.     </f7-list>
    19.     <f7-list>
    20.       <f7-list-button @click="signIn">Sign In</f7-list-button>
    21.       <f7-block-footer>Some text about login information.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</f7-block-footer>
    22.     </f7-list>
    23. </template>
    25. <script>
    26.   export default {
    28.       return {
    29.         username: '',
    30.         password: '',
    31.       };
    32.     },
    33.     methods: {
    34.       signIn() {
    35.         const self = this;
    36.         const app = self.$f7;
    37.         const router = self.$f7router;
    38.         app.dialog.alert(`Username: ${self.username}<br>Password: ${self.password}`, () => {
    39.           router.back();
    40.         });
    41.       },
    42.     },
    43.   };