Language: ENCN

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