Login Screen Vue Component

Login Screen Components

There are following components included:

f7-login-screen - login screen element
f7-login-screen-title - login screen title element

Login Screen Properties

Prop	Type	Default	Description
<f7-login-screen> properties
opened	boolean	false	Allows to open/close Login Screen and set its initial state

Login Screen Methods

<f7-login-screen> methods
.open(animate)	Open login screen
.close(animate)	Close login screen

Login Screen Events

Event	Description
<f7-login-screen> events
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

In addition to Login Screen open()/close() methods, you can open and close it:

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

Access To Login Screen Instance

You can access Login Screen initialized instance by accessing .f7LoginScreen component's property.

Examples

<!-- Login Screen -->
<f7-login-screen>
  <!-- Login Screen title -->
  <f7-login-screen-title>Title</f7-login-screen-title>
  <!-- Login Screen content goes here -->
</f7-login-screen>

Renders to:

<!-- Login Screen -->
<div class="login-screen">
  <!-- Login Screen title -->
  <div class="login-screen-title">Title</div>
  <!-- Login Screen content goes here -->
</div>

Full Screen Layout

According to Login Screen Layout here is the recommended Login Screen layout structure:

<f7-login-screen>
  <f7-view>
    <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 type="text" placeholder="Your username"></f7-input>
        </f7-list-item>
        <f7-list-item>
          <f7-label>Password</f7-label>
          <f7-input type="password" placeholder="Your password"></f7-input>
        </f7-list-item>
      </f7-list>
      <f7-list>
        <f7-list-button login-screen-close>Sign In</f7-list-button>
        <f7-block-footer>Click Sign In to close Login Screen</f7-block-footer>
      </f7-list>
    </f7-page>
  </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