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
<template>
<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
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>
</template>
<script>
export default {
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();
});
},
},
};