贊助商成為贊助商

登入畫面

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 - 物件。包含登入畫面參數的物件

方法傳回建立的登入畫面的執行個體

app.loginScreen.destroy(el)- 銷毀登入畫面執行個體

  • el - HTMLElement 或 字串（帶有 CSS 選擇器）或 物件。要銷毀的登入畫面元素或登入畫面執行個體。

app.loginScreen.get(el)- 透過 HTML 元素取得登入畫面執行個體

  • el - HTMLElement 或 字串（帶有 CSS 選擇器）。登入畫面元素。

方法傳回登入畫面的執行個體

app.loginScreen.open(el, animate)- 開啟登入畫面

  • el - HTMLElement 或 字串（帶有 CSS 選擇器）。要開啟的登入畫面元素。
  • animate - 布林值。以動畫開啟登入畫面。

方法傳回登入畫面的執行個體

app.loginScreen.close(el, animate)- 關閉登入畫面

  • el - HTMLElement 或 字串（帶有 CSS 選擇器）。要關閉的登入畫面元素。
  • animate - 布林值。以動畫關閉登入畫面。

方法傳回登入畫面的執行個體

登入畫面參數

現在我們來看建立登入畫面所需的可用參數清單

參數類型預設值說明
elHTMLElement
字串		登入畫面元素。如果你在 HTML 中已經有登入畫面元素，而且想要使用此元素建立新執行個體，這會很有用
內容字串完整的登入畫面 HTML 版面配置字串。如果你想要動態建立登入畫面元素，這會很有用
動畫布林值true登入畫面是否應該以動畫開啟/關閉。可以在 .open() 和 .close() 方法中覆寫
容器元素HTMLElement
字串		要將對話框掛載到的元素 (預設為 app 根元素)
開啟物件

包含事件處理常式的物件。例如

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連結到全域 app 執行個體
loginScreen.el登入畫面 HTML 元素
loginScreen.$el包含登入畫面 HTML 元素的 Dom7 執行個體
loginScreen.params登入畫面參數
loginScreen.opened布林值屬性，表示登入畫面是否已開啟
方法
loginScreen.open(animate)開啟登入畫面。其中
  • animate - 布林值 (預設為 true) - 定義是否應該以動畫開啟
loginScreen.close(animate)關閉登入畫面。其中
  • animate - 布林值 (預設為 true) - 定義是否應該以動畫關閉
loginScreen.destroy()銷毀登入畫面
loginScreen.on(event, handler)新增事件處理常式
loginScreen.once(event, handler)新增事件處理常式，在觸發後會移除
loginScreen.off(event, handler)移除事件處理常式
loginScreen.off(event)移除指定事件的所有處理常式
loginScreen.emit(event, ...args)在執行個體上觸發事件

可以使用連結上的特殊類別和資料屬性，開啟和關閉所需的登入畫面 (如果你在 DOM 中有這些登入畫面)

  • 要開啟登入畫面，我們需要將 "login-screen-open" 類別新增到任何 HTML 元素 (建議使用連結)

  • 要關閉登入畫面，我們需要將 "login-screen-close" 類別新增到任何 HTML 元素 (建議使用連結)

  • 如果你在 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 事件，以及在 app 和登入畫面執行個體上觸發事件

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 為字首。

事件參數目標說明
openloginScreenloginScreen當登入畫面開始開啟動畫時，將觸發事件。事件處理常式會將登入畫面實例接收為參數
loginScreenOpenloginScreenapp
openedloginScreenloginScreen當登入畫面完成開啟動畫後，將觸發事件。事件處理常式會將登入畫面實例接收為參數
loginScreenOpenedloginScreenapp
closeloginScreenloginScreen當登入畫面開始關閉動畫時，將觸發事件。事件處理常式會將登入畫面實例接收為參數
loginScreenCloseloginScreenapp
closedloginScreenloginScreen當登入畫面完成關閉動畫後，將觸發事件。事件處理常式會將登入畫面實例接收為參數
loginScreenClosedloginScreenapp
beforeDestroyloginScreenloginScreen當登入畫面實例即將被銷毀時，將觸發事件。事件處理常式會將登入畫面實例接收為參數
loginScreenBeforeDestroyloginScreenapp

嵌入式登入畫面

也可以將登入畫面嵌入頁面或快顯視窗中。我們來看一下頁面中的登入畫面範例

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

範例

login-screen.html
<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>
改善此文件
在此頁面上