Picker Modal is a special overlay type which is similar to Picker/Calendar's overlay. Such modal allows to create custom picker overlays with custom content.
Login Screen Vue component represents Login Screen component.
<!-- Login Screen -->
<f7-login-screen>
<!-- Login Screen content goes here -->
</f7-login-screen>
Renders to:
<!-- Login Screen -->
<div class="login-screen">
<!-- Login Screen content goes here -->
</div>
According to Login Screen Layout here is the recommended Login Screen layout structure:
<f7-login-screen>
<f7-view>
<f7-pages>
<f7-page login-screen>
<f7-login-screen-title>My App</f7-login-screen-title>
<f7-list form>
<f7-list-item>
<f7-label>Username</f7-label>
<f7-input name="username" placeholder="Username"></f7-input>
</f7-list-item>
<f7-list-item>
<f7-label>Password</f7-label>
<f7-input name="password" type="password" placeholder="Password"></f7-input>
</f7-list-item>
</f7-list>
<f7-list>
<f7-list-button title="Sign In" close-login-screen></f7-list-button>
<f7-list-label>
<p>Click Sign In to close Login Screen</p>
</f7-list-label>
</f7-list>
</f7-page>
</f7-pages>
</f7-view>
</f7-login-screen>
Where:
<f7-login-screen-title>My App</f7-login-screen-title>
- additional component with Login Screen title<f7-page login-screen>
- additional boolean login-screen property on page component to add extra styling to page form elementsProp | Type | Description |
---|---|---|
theme | string | Login Screen theme color. One of default colors |
layout | string | Login Screen layout theme. One of default layout themes |
opened | boolean | Allows to open/close Login Screen and set its initial state |
.open(animated) | Open login screen |
.close(animated) | Close login screen |
Event | Description |
---|---|
loginscreen:open | Event will be triggered when Login Screen starts its opening animation |
loginscreen:opened | Event will be triggered after Login Screen completes its opening animation |
loginscreen:close | Event will be triggered when Login Screen starts its closing animation |
loginscreen:closed | Event will be triggered after Login Screen completes its closing animation |
You can control Login Screen state, open and closing it:
opened
propopen-login-screen
property (to open it) and close-login-screen
property to close it