ログイン画面

Framework7には、すぐに使えるログイン画面のレイアウトが用意されています。このレイアウトは、ページやログイン画面の中（埋め込み）、またはスタンドアロンのモーダルとして使用することができます。

1.ログイン画面のレイアウト

まず最初に、スタンドアロンのLogin Screenレイアウトを見てみましょう。このレイアウトは、ログイン画面とほぼ同じように動作します。

<div class="login-screen">
  <!-- ビューページのデフォルトレイアウト -->
  <div class="view">
    <div class="page login-screen-page">
      <!-- page-contentには、ログイン画面の追加コンテンツがあります。 -->
      <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-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>

ログイン画面アプリのメソッド

ログイン画面に関連するアプリのメソッドを紹介します。

ログイン画面のパラメータ

ここでは、ログイン画面を作成するために必要なパラメータの一覧を見てみましょう。

var loginScreen = app.loginScreen.create({
  content: '<div class="login-screen">...</div>',
  on: {
    opened: function () {
      console.log('Login Screen opened')
    }
  }
})

ログイン画面のメソッドとプロパティ

ログイン画面を作成するためには、以下のメソッドを呼び出す必要があります。

var loginScreen = app.loginScreen.create({ /* parameters */ })

その後、初期化されたインスタンス（上記の例では、変数 loginScreen ）に、便利なメソッドとプロパティを設定します。

リンクによるログイン画面の制御

必要なログイン画面がDOMにあれば、リンクの特別なクラスとデータ属性を使って、開いたり閉じたりすることができます。

上記のメモによると

<!-- data-login-screen属性では、開くべきログイン画面のCSSセレクタを指定しています。 -->
<p><a href="#" data-login-screen=".my-login-screen" class="login-screen-open">Open Login Screen</a></p>

<!-- また、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">
            <!-- ログイン画面を閉じるためのリンク -->
            <a class="link login-screen-close">Close</a>
          </div>
        </div>
      </div>
    </div>
    <div class="page-content">
      ...
    </div>
  </div>
  ...
</div>

ログイン画面のイベント

ログイン画面では、以下のDOMイベントがログイン画面の要素で発生し、アプリとログイン画面のインスタンスでイベントが発生します。

DOM イベント

アプリとLogin Screenインスタンスのイベント

Login Screenインスタンスは、selfインスタンスとappインスタンスの両方にイベントを発行します。アプリインスタンスのイベントは、同じ名前でプレフィックスが loginScreen となっています。

埋め込み型ログイン画面

ログイン画面は、ページやポップアップに埋め込むこともできます。ページの中にログイン画面を埋め込む例を見てみましょう。

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

CSS Variables

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

:root {
  --f7-login-screen-blocks-max-width: 480px;
  /*
   --f7-login-screen-list-button-text-color: var(--f7-theme-color);
   */
  --f7-login-screen-title-text-align: center;
  --f7-login-screen-title-text-color: inherit;
  --f7-login-screen-title-letter-spacing: 0;
  --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;
}
:root .theme-dark,
:root.theme-dark {
  --f7-login-screen-bg-color: #121212;
  --f7-login-screen-content-bg-color: #121212;
}
.ios {
  --f7-login-screen-blocks-margin-vertical: 25px;
}
.ios .theme-dark,
.ios.theme-dark {
  --f7-login-screen-bg-color: #000;
  --f7-login-screen-content-bg-color: #000;
}
.md {
  --f7-login-screen-blocks-margin-vertical: 24px;
}
.aurora {
  --f7-login-screen-blocks-margin-vertical: 16px;
}

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Login Screen</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong">
        <p>
          <!-- Open in login screen that already in DOM-->
          <a href="#" class="button button-fill login-screen-open" data-login-screen=".login-screen">Open As
            Modal</a>
        </p>
        <p>
          <!-- Load page with login screen (login-screen-page.f7.html) -->
          <a href="/login-screen/" class="button button-fill">Open As Page</a>
        </p>
      </div>
    </div>
  </div>

  <div class="login-screen">
    <div class="view">
      <div class="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-wrap">
                      <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-wrap">
                      <input type="password" name="password" placeholder="Your password" />
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="list">
              <ul>
                <li><a class="list-button" href="#">Sign In</a></li>
              </ul>
              <div class="block-footer">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                <p><a class="link login-screen-close" href="#">Close Login Screen</a></p>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, ctx) => {
    const { $ } = ctx;
    // Login Screen-Modal DOM events
    $('.login-screen').on('loginscreen:open', function (e) {
      console.log('Login screen open')
    });
    $('.login-screen').on('loginscreen:opened', function (e) {
      console.log('Login screen opened')
    });
    $('.login-screen').on('loginscreen:close', function (e) {
      console.log('Login screen close')
    });
    $('.login-screen').on('loginscreen:closed', function (e) {
      console.log('Login screen closed')
    });

    

    return $render;
  }

</script>

<template>
  <div class="page no-navbar no-toolbar no-swipeback">
    <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-wrap">
                  <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-wrap">
                  <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="link back">Close Login Screen</a></p>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>