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

1. <template>
2. <f7-page>
3. <f7-navbar title="Login Screen"></f7-navbar>
4. <f7-block>
5. <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>
6. </f7-block>

8. <f7-list>
9. <f7-list-item link="/login-screen-page/" title="As Separate Page"></f7-list-item>
10. </f7-list>

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

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

20. <f7-login-screen class="demo-login-screen" :opened="loginScreenOpened" @loginscreen:closed="loginScreenOpened = false">
21. <f7-page login-screen>
22. <f7-login-screen-title>Framework7</f7-login-screen-title>
23. <f7-list form>
24. <f7-list-input
25. label="Username"
26. type="text"
27. placeholder="Your username"
28. :value="username"
29. @input="username = $event.target.value"
30. ></f7-list-input>
31. <f7-list-input
32. label="Password"
33. type="password"
34. placeholder="Your password"
35. :value="password"
36. @input="password = $event.target.value"
37. ></f7-list-input>
38. </f7-list>
39. <f7-list>
40. <f7-list-button @click="signIn">Sign In</f7-list-button>
41. <f7-block-footer>Some text about login information.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</f7-block-footer>
42. </f7-list>
43. </f7-page>
44. </f7-login-screen>
45. </f7-page>
46. </template>

48. <script>
49. export default {
50. data() {
51. return {
52. loginScreenOpened: false,
53. username: '',
54. password: '',
55. };
56. },
57. methods: {
58. signIn() {
59. const self = this;
60. const app = self.$f7;

62. app.dialog.alert(`Username: ${self.username}<br>Password: ${self.password}`, () => {
63. app.loginScreen.close();
64. });
65. },
66. },
67. };
68. </script>

Separate Login Screen Page

1. <template>
2. <f7-page no-toolbar no-navbar no-swipeback login-screen>
3. <f7-login-screen-title>Framework7</f7-login-screen-title>
4. <f7-list form>
5. <f7-list-input
6. label="Username"
7. type="text"
8. placeholder="Your username"
9. :value="username"
10. @input="username = $event.target.value"
11. ></f7-list-input>
12. <f7-list-input
13. label="Password"
14. type="password"
15. placeholder="Your password"
16. :value="password"
17. @input="password = $event.target.value"
18. ></f7-list-input>
19. </f7-list>
20. <f7-list>
21. <f7-list-button @click="signIn">Sign In</f7-list-button>
22. <f7-block-footer>Some text about login information.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</f7-block-footer>
23. </f7-list>
24. </f7-page>
25. </template>

27. <script>
28. export default {
29. data() {
30. return {
31. username: '',
32. password: '',
33. };
34. },
35. methods: {
36. signIn() {
37. const self = this;
38. const app = self.$f7;
39. const router = self.$f7router;
40. app.dialog.alert(`Username: ${self.username}<br>Password: ${self.password}`, () => {
41. router.back();
42. });
43. },
44. },
45. };
46. </script>