Login Screen Vue Component

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.

Usage example

<!-- 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>

Full Login Screen Layout

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 elements

Properties

Prop	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

Methods

.open(animated)	Open login screen
.close(animated)	Close login screen

Events

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

Open and close Login Screen

You can control Login Screen state, open and closing it:

• using its JavaScript API
• by passing true or false to its opened prop
• by clicking on Link or Button with relevant open-login-screen property (to open it) and close-login-screen property to close it