Login Screen
Framework7 comes with ready to use Login Screen layout. It could be used inside of page or login screen (embedded) or as a standalone modal.
Login Screen Layout
First of all, let’s look at the standalone Login Screen layout. It behaves almost in the same way as Login Screen:
<div class="login-screen">
<!-- Default view-page layout -->
<div class="view">
<div class="page">
<!-- page-content has additional login-screen content -->
<div class="page-content login-screen-content">
<div class="login-screen-title">My App</div>
<!-- Login form -->
<form>
<div class="list">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Username</div>
<div class="item-input-wrap">
<input type="text" name="username" placeholder="Username">
<span class="input-clear-button"></span>
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Password</div>
<div class="item-input-wrap">
<input type="password" name="password" placeholder="Password">
<span class="input-clear-button"></span>
</div>
</div>
</li>
</ul>
</div>
<div class="list">
<ul>
<li>
<a href="#" class="item-link list-button">Sign In</a>
</li>
</ul>
<div class="block-footer">Some text with login information.</div>
</div>
</form>
</div>
</div>
</div>
</div>
Note that all elements you see inside of
Login Screen App Methods
Let’s look at related App methods to work with Login Screen:
app.loginScreen.create(parameters)- create Login Screen instance
- parameters - object. Object with login screen parameters
Method returns created Login Screen’s instance
app.loginScreen.destroy(el)- destroy Login Screen instance
- el - HTMLElement or string (with CSS Selector) or object. Login Screen element or Login Screen instance to destroy.
app.loginScreen.get(el)- get Login Screen instance by HTML element
- el - HTMLElement or string (with CSS Selector). Login Screen element.
Method returns Login Screen’s instance
app.loginScreen.open(el, animate)- opens Login Screen
- el - HTMLElement or string (with CSS Selector). Login Screen element to open.
- animate - boolean. Open Login Screen with animation.
Method returns Login Screen’s instance
app.loginScreen.close(el, animate)- closes Login Screen
- el - HTMLElement or string (with CSS Selector). Login Screen element to close.
- animate - boolean. Close Login Screen with animation.
Method returns Login Screen’s instance
Login Screen Parameters
Now let’s look at list of available parameters we need to create Login Screen:
Parameter | Type | Default | Description |
---|---|---|---|
el | HTMLElement | Login Screen element. Can be useful if you already have Login Screen element in your HTML and want to create new instance using this element | |
content | string | Full Login Screen HTML layout string. Can be useful if you want to create Login Screen element dynamically | |
animate | boolean | true | Whether the Login Screen should be opened/closed with animation or not. Can be overwritten in .open() and .close() methods |
on | object | Object with events handlers. For example:
|
Login Screen Methods & Properties
So to create Login Screen we have to call:
var loginScreen = app.loginScreen.create({ /* parameters */ })
After that we have its initialized instance (like loginScreen
variable in example above) with useful methods and properties:
Properties | |
---|---|
loginScreen.app | Link to global app instance |
loginScreen.el | Login Screen HTML element |
loginScreen.$el | Dom7 instance with login screen HTML element |
loginScreen.params | Login Screen parameters |
loginScreen.opened | Boolean prop indicating whether login screen is opened or not |
Methods | |
loginScreen.open(animate) | Open login screen. Where
|
loginScreen.close(animate) | Close login screen. Where
|
loginScreen.destroy() | Destroy login screen |
loginScreen.on(event, handler) | Add event handler |
loginScreen.once(event, handler) | Add event handler that will be removed after it was fired |
loginScreen.off(event, handler) | Remove event handler |
loginScreen.off(event) | Remove all handlers for specified event |
loginScreen.emit(event, …args) | Fire event on instance |
Control Login Screen With Links
It is possible to open and close required login screen (if you have them in DOM) using special classes and data attributes on links:
To open login screen we need to add “login-screen-open“ class to any HTML element (prefered to link)
To close login screen we need to add “login-screen-close“ class to any HTML element (prefered to link)
If you have more than one login screen in DOM, you need to specify appropriate login screen via additional data-login-screen=”.my-login-screen” attribute on this HTML element
According to above note:
<!-- In data-login-screen attribute we specify CSS selector of login screen we need to open -->
<p><a href="#" data-login-screen=".my-login-screen" class="login-screen-open">Open Login Screen</a></p>
<!-- And somewhere in DOM -->
<div class="login-screen my-login-screen">
<div class="view">
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title">Login Screen</div>
<div class="right">
<!-- Link to close login screen -->
<a class="link login-screen-close">Close</a>
</div>
</div>
</div>
</div>
<div class="page-content">
...
</div>
</div>
...
</div>
Login Screen Events
Login Screen will fire the following DOM events on login screen element and events on app and login screen instance:
DOM Events
Event | Target | Description |
---|---|---|
loginscreen:open | Login Screen Element<div class=”login-screen”> | Event will be triggered when Login Screen starts its opening animation |
loginscreen:opened | Login Screen Element<div class=”login-screen”> | Event will be triggered after Login Screen completes its opening animation |
loginscreen:close | Login Screen Element<div class=”login-screen”> | Event will be triggered when Login Screen starts its closing animation |
loginscreen:closed | Login Screen Element<div class=”login-screen”> | Event will be triggered after Login Screen completes its closing animation |
App and Login Screen Instance Events
Login Screen instance emits events on both self instance and app instance. App instance events has same names prefixed with loginScreen
.
Event | Arguments | Target | Description |
---|---|---|---|
open | loginScreen | loginScreen | Event will be triggered when Login Screen starts its opening animation. As an argument event handler receives login screen instance |
loginScreenOpen | loginScreen | app | |
opened | loginScreen | loginScreen | Event will be triggered after Login Screen completes its opening animation. As an argument event handler receives login screen instance |
loginScreenOpened | loginScreen | app | |
close | loginScreen | loginScreen | Event will be triggered when Login Screen starts its closing animation. As an argument event handler receives login screen instance |
loginScreenClose | loginScreen | app | |
closed | loginScreen | loginScreen | Event will be triggered after Login Screen completes its closing animation. As an argument event handler receives login screen instance |
loginScreenClosed | loginScreen | app | |
beforeDestroy | loginScreen | loginScreen | Event will be triggered right before Login Screen instance will be destroyed. As an argument event handler receives login screen instance |
loginScreenBeforeDestroy | loginScreen | app |
Embedded Login Screen
It is also possible to embed Login Screen into the page or popup. Let’s look on the example of Login Screen inside of page:
<div class="page no-navbar no-toolbar no-swipeback">
<div class="page-content login-screen-content">
<div class="login-screen-title">My App</div>
<form>
<div class="list">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Username</div>
<div class="item-input">
<input type="text" name="username" placeholder="Your username">
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Password</div>
<div class="item-input">
<input type="password" name="password" placeholder="Your password">
</div>
</div>
</li>
</ul>
</div>
<div class="list">
<ul>
<li><a href="#" class="item-link list-button">Sign In</a></li>
</ul>
<div class="block-footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><a href="#" class="close-login-screen">Close Login Screen</a></p>
</div>
</div>
</form>
</div>
</div>
Note that on login screen page we have additional “no-navbar”, “no-toolbar” and “no-swipeback” classes to hide navigation element from user
CSS Variables
Below is the list of related CSS variables (CSS custom properties).
Note that commented variables are not specified by default and their values is what they fallback to in this case.
:root {
--f7-login-screen-bg-color: #fff;
--f7-login-screen-content-bg-color: #fff;
--f7-login-screen-blocks-max-width: 480px;
/*
--f7-login-screen-list-button-text-color: var(--f7-theme-color);
*/
--f7-login-screen-title-text-align: center;
--f7-login-screen-title-text-color: inherit;
--f7-login-screen-title-letter-spacing: 0;
}
:root .theme-dark,
:root.theme-dark {
--f7-login-screen-bg-color: #171717;
--f7-login-screen-content-bg-color: transparent;
}
.ios {
--f7-login-screen-blocks-margin-vertical: 25px;
--f7-login-screen-title-font-size: 30px;
--f7-login-screen-title-font-weight: normal;
}
.md {
--f7-login-screen-blocks-margin-vertical: 24px;
--f7-login-screen-title-font-size: 34px;
--f7-login-screen-title-font-weight: normal;
}
.aurora {
--f7-login-screen-blocks-margin-vertical: 15px;
--f7-login-screen-title-font-size: 28px;
--f7-login-screen-title-font-weight: 500;
}
Examples
<body>
...
<div class="page-content">
<div class="block">
<p>
<!-- Open in login screen-modal that is already in DOM-->
<a href="#" class="button login-screen-open" data-login-screen=".login-screen">Open As Modal</a>
</p>
<p>
<!-- Load page with login screen-->
<a href="/login-screen/" class="button">Open As Page</a>
</p>
</div>
</div>
...
<div class="login-screen">
<div class="view">
<div class="page">
<div class="page-content login-screen-content">
<div class="login-screen-title">My App</div>
<form>
<div class="list">
<ul>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Username</div>
<div class="item-input-wrap">
<input type="text" name="username" placeholder="Your username">
</div>
</div>
</li>
<li class="item-content item-input">
<div class="item-inner">
<div class="item-title item-label">Password</div>
<div class="item-input-wrap">
<input type="password" name="password" placeholder="Your password">
</div>
</div>
</li>
</ul>
</div>
<div class="list">
<ul>
<li><a class="item-link list-button" href="#">Sign In</a></li>
</ul>
<div class="block-footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><a class="link login-screen-close" href="#">Close Login Screen</a></p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
...
</body>
var $$ = Dom7;
var app = new Framework7({
routes: [{
path: '/login-screen/',
/*
We can load it from url like:
url: 'login-screen.html'
But in this example we load it just from content string
*/
content: '\
<div class="page no-navbar no-toolbar no-swipeback">\
<div class="page-content login-screen-content">\
<div class="login-screen-title">My App</div>\
<form>\
<div class="list">\
...
</div>\
<div class="list">\
<ul>\
<li><a href="#" class="item-link list-button">Sign In</a></li>\
</ul>\
<div class="block-footer">\
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>\
<p><a href="#" class="link back">Close Login Screen</a></p>\
</div>\
</div>\
</form>\
</div>\
</div>'
}]
});
// Login Screen-Modal DOM events
$$('.login-screen').on('loginscreen:open', function (e, loginScreen) {
console.log('Login screen open')
});
$$('.login-screen').on('loginscreen:opened', function (e, loginScreen) {
console.log('Login screen opened')
});
$$('.login-screen').on('loginscreen:close', function (e, loginScreen) {
console.log('Login screen close')
});
$$('.login-screen').on('loginscreen:closed', function (e, loginScreen) {
console.log('Login screen closed')
});