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.

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 login-screen-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="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

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

Now let's look at list of available parameters we need to create Login Screen:

Parameter	Type	Default	Description
el	HTMLElement string		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
containerEl	HTMLElement string		Element to mount modal to (default to app root element)
on	object		Object with events handlers. For example: `var loginScreen = app.loginScreen.create({ content: '<div class="login-screen">...</div>', on: { opened: function () { console.log('Login Screen opened') } } })`

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 animate - boolean (by default `true`) - defines whether it should be opened with animation
loginScreen.close(animate)	Close login screen. Where animate - boolean (by default `true`) - defines whether it should be closed with animation
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

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 (preferred to link)
To close login screen we need to add "login-screen-close" class to any HTML element (preferred 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-bg"></div>
        <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>

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

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

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 login-screen-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">
                <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="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

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

:root {
  --f7-login-screen-blocks-max-width: 480px;
  --f7-login-screen-title-text-align: center;
  --f7-login-screen-title-text-color: inherit;
  --f7-login-screen-title-letter-spacing: 0;
}
.ios {
  --f7-login-screen-blocks-margin-vertical: 25px;
  --f7-login-screen-transition-timing-function: initial;
  --f7-login-screen-transition-duration: 400ms;
  --f7-login-screen-title-font-weight: 600;
  --f7-login-screen-title-font-size: 28px;
  --f7-login-screen-content-bg-color: #fff;
  --f7-login-screen-bg-color: #fff;
}
.ios .dark,
.ios.dark {
  --f7-login-screen-bg-color: #000;
  --f7-login-screen-content-bg-color: #000;
}
.md {
  --f7-login-screen-transition-duration: 600ms;
  --f7-login-screen-transition-timing-function: cubic-bezier(0, 1, 0.2, 1);
  --f7-login-screen-blocks-margin-vertical: 24px;
  --f7-login-screen-title-font-weight: 400;
  --f7-login-screen-title-font-size: 28px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-login-screen-content-bg-color: var(--f7-md-surface);
  --f7-login-screen-bg-color: var(--f7-md-surface);
}

Examples

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Login Screen</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block">
        <p>Framework7 comes with ready to use Login Screen layout. It could be used inside of page or inside of popup
          (Embedded) or as a standalone overlay:</p>
      </div>
      <!-- example-hidden-start -->
      <div class="list list-strong inset-md list-outline-ios links-list example-hidden">
        <ul>
          <li>
            <a href="/login-screen-page/">As Separate Page</a>
          </li>
        </ul>
      </div>
      <!-- example-hidden-end -->
      <div class="block">
        <a class="button button-raised button-large button-fill login-screen-open" data-login-screen=".login-screen">As
          Overlay</a>
      </div>
    </div>
    <div class="login-screen">
      <div class="page login-screen-page">
        <div class="page-content login-screen-content">
          <div class="login-screen-title">Framework7</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" id="demo-username-1" placeholder="Your 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" id="demo-password-1" placeholder="Your password" />
                      <span class="input-clear-button"></span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="list inset">
              <ul>
                <li><a class="list-button" @click=${signIn}>Sign In</a></li>
              </ul>
              <div class="block-footer">Some text about login information.<br />Lorem ipsum dolor sit amet, consectetur
                adipiscing elit.</div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $, $f7 }) => {
    const signIn = () => {
      var username = $('input#demo-username-1').val();
      var password = $('input#demo-password-1').val();
      $f7.dialog.alert('Username: ' + username + '<br />Password: ' + password, function () {
        $f7.loginScreen.close();
      })
    }

    return $render;
  };
</script>

Improve this Doc

On this page

Login Screen Layout
Login Screen App Methods
Login Screen Parameters
Login Screen Methods & Properties
Control Login Screen With Links
Login Screen Events

DOM Events
App and Login Screen Instance Events

Embedded Login Screen
CSS Variables
Examples

Login Screen

Login Screen Layout

Login Screen App Methods

Login Screen Parameters

Login Screen Methods & Properties

Control Login Screen With Links

Login Screen Events

DOM Events

App and Login Screen Instance Events

Embedded Login Screen

CSS Variables

Examples