-
Get Started
-
Events
-
Router / Navigation
-
Components
- App / Core
- Accordion / Collapsible
- Action Sheet / Actions
- Autocomplete
- Badge
- Block / Content Block
- Button
- Calendar / Datepicker
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Data Table
- Dialog
- Elevation
- Floating Action Button / FAB
- Form Data / Storage
- Gauge
- Grid / Layout Grid
- Icons
- Infinite Scroll
- Inputs / Form Inputs
- Lazy Load
- Link
- List View
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Notification
- Page
- Panel / Side Panels
- Photo Browser
- Picker
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable List
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Timeline
- Toast
- Toggle
- Toolbar / Tabbar
- Tooltip
- Video Intelligence (vi)
- View / Router
- Virtual List
-
Framework7 Icons
-
Styling
-
Dom7
-
Template7
-
Fast Clicks
-
Utilities
-
Plugins API
-
Lazy Modules
-
Custom Build
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 <div class="login-screen"> are optional, but you can use them as boilerplate layout for your Login form
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
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')
});