ログイン画面

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

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

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

<div class="login-screen"> 内にあるすべての要素はオプションですが、ログインフォームのボイラープレートレイアウトとして使用できます。

ログイン画面を操作するための関連するアプリメソッドを見てみましょう。

app.loginScreen.create(parameters) - ログイン画面インスタンスを作成します。

parameters - object。ログイン画面パラメータを持つオブジェクト。

メソッドは、作成されたログイン画面のインスタンスを返します。

app.loginScreen.destroy(el) - ログイン画面インスタンスを破棄します。

el - HTMLElement または string (CSSセレクターを使用) または object。破棄するログイン画面要素またはログイン画面インスタンス。

app.loginScreen.get(el) - HTML要素でログイン画面インスタンスを取得します。

el - HTMLElement または string (CSSセレクターを使用)。ログイン画面要素。

メソッドは、ログイン画面のインスタンスを返します。

app.loginScreen.open(el, animate) - ログイン画面を開きます。

el - HTMLElement または string (CSSセレクターを使用)。開くログイン画面要素。
animate - boolean。アニメーション付きでログイン画面を開きます。

メソッドは、ログイン画面のインスタンスを返します。

app.loginScreen.close(el, animate) - ログイン画面を閉じます。

el - HTMLElement または string (CSSセレクターを使用)。閉じるログイン画面要素。
animate - boolean。アニメーション付きでログイン画面を閉じます。

メソッドは、ログイン画面のインスタンスを返します。

ログイン画面の作成に必要な使用可能なパラメータのリストを見てみましょう。

パラメータ	型	デフォルト	説明
el	HTMLElement string		ログイン画面要素。HTMLにすでにログイン画面要素があり、この要素を使用して新しいインスタンスを作成したい場合に便利です。
content	string		完全なログイン画面のHTMLレイアウト文字列。ログイン画面要素を動的に作成したい場合に便利です。
animate	boolean	true	ログイン画面を開閉するときにアニメーションを使用するかどうか。`.open()` および `.close()` メソッドで上書きできます。
containerEl	HTMLElement string		モーダルをマウントする要素 (デフォルトはアプリのルート要素)
on	object		イベントハンドラーを持つオブジェクト。例: `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 変数など) があります。

プロパティ
loginScreen.app	グローバルアプリインスタンスへのリンク
loginScreen.el	ログイン画面のHTML要素
loginScreen.$el	ログイン画面のHTML要素を持つDom7インスタンス
loginScreen.params	ログイン画面のパラメータ
loginScreen.opened	ログイン画面が開いているかどうかを示すブール値プロパティ
メソッド
loginScreen.open(animate)	ログイン画面を開きます。ここで animate - boolean (デフォルトは `true`) - アニメーション付きで開くかどうかを定義します。
loginScreen.close(animate)	ログイン画面を閉じます。ここで animate - boolean (デフォルトは `true`) - アニメーション付きで閉じるかどうかを定義します。
loginScreen.destroy()	ログイン画面を破棄します。
loginScreen.on(event, handler)	イベントハンドラーを追加します。
loginScreen.once(event, handler)	発生後に削除されるイベントハンドラーを追加します。
loginScreen.off(event, handler)	イベントハンドラーを削除します。
loginScreen.off(event)	指定されたイベントのすべてのハンドラーを削除します。
loginScreen.emit(event, ...args)	インスタンスでイベントを発生させます。

リンクの特別なクラスとデータ属性を使用して、必要なログイン画面（DOMにある場合）を開閉できます。

ログイン画面を開くには、任意のHTML要素（リンクが推奨）に "login-screen-open" クラスを追加する必要があります。
ログイン画面を閉じるには、任意のHTML要素（リンクが推奨）に "login-screen-close" クラスを追加する必要があります。
DOMに複数のログイン画面がある場合は、このHTML要素に追加の data-login-screen=".my-login-screen" 属性を使用して、適切なログイン画面を指定する必要があります。

上記の注記に従って

<!-- 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イベントを発生させ、アプリとログイン画面のインスタンスでイベントを発生させます。

DOMイベント

イベント	ターゲット	説明
loginscreen:open	ログイン画面要素<div class="login-screen">	ログイン画面が開くアニメーションを開始すると、イベントがトリガーされます。
loginscreen:opened	ログイン画面要素<div class="login-screen">	ログイン画面が開くアニメーションが完了すると、イベントがトリガーされます。
loginscreen:close	ログイン画面要素<div class="login-screen">	ログイン画面が閉じるアニメーションを開始すると、イベントがトリガーされます。
loginscreen:closed	ログイン画面要素<div class="login-screen">	ログイン画面が閉じるアニメーションが完了すると、イベントがトリガーされます。

ログイン画面のインスタンスは、自身のインスタンスとアプリインスタンスの両方でイベントを発生させます。アプリインスタンスのイベントには、loginScreen が先頭に付いた同じ名前が付けられます。

イベント	引数	ターゲット	説明
open	loginScreen	loginScreen	ログイン画面が開くアニメーションを開始すると、イベントがトリガーされます。引数として、イベントハンドラーはログイン画面のインスタンスを受け取ります。
loginScreenOpen	loginScreen	app
opened	loginScreen	loginScreen	ログイン画面が開くアニメーションが完了すると、イベントがトリガーされます。引数として、イベントハンドラーはログイン画面のインスタンスを受け取ります。
loginScreenOpened	loginScreen	app
close	loginScreen	loginScreen	ログイン画面が閉じるアニメーションを開始すると、イベントがトリガーされます。引数として、イベントハンドラーはログイン画面のインスタンスを受け取ります。
loginScreenClose	loginScreen	app
closed	loginScreen	loginScreen	ログイン画面が閉じるアニメーションが完了すると、イベントがトリガーされます。引数として、イベントハンドラーはログイン画面のインスタンスを受け取ります。
loginScreenClosed	loginScreen	app
beforeDestroy	loginScreen	loginScreen	ログイン画面インスタンスが破棄される直前に、イベントがトリガーされます。引数として、イベントハンドラーはログイン画面のインスタンスを受け取ります。
loginScreenBeforeDestroy	loginScreen	app

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

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

ログイン画面ページでは、ユーザーからナビゲーション要素を隠すために、追加の "no-navbar"、"no-toolbar"、および "no-swipeback" クラスがあることに注意してください。

CSS変数

以下は、関連するCSS変数 (CSSカスタムプロパティ) のリストです。

: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);
}

例

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

このドキュメントを改善する

このページで

ログイン画面レイアウト
ログイン画面のアプリメソッド
ログイン画面のパラメータ
ログイン画面のメソッドとプロパティ
リンクでログイン画面を制御する
ログイン画面のイベント

DOMイベント
アプリおよびログイン画面のインスタンスイベント

埋め込みログイン画面
CSS変数
例

ログイン画面

ログイン画面レイアウト

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

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

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

リンクでログイン画面を制御する

ログイン画面のイベント

DOMイベント

アプリおよびログイン画面のインスタンスイベント

埋め込みログイン画面

CSS変数

例