Skip to main content

Екран входу

Навігація

Екран входу

Techno4 поставляється з готовим до використання макетом екрана входу. Його можна використовувати всередині сторінки чи екрана входу (вбудованого) або як окремий модальний режим.

Макет екрана входу

Перш за все, розгляньмо макет окремого екрана входу. Він поводиться майже так само, як екран входу в систему:
<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>
Зауважте, що всі елементи, які ви бачите всередині <div class="login-screen">, є необов’язковими, але ви можете використовувати їх як шаблонний макет для своєї форми входу

Методи застосунку екрана входу

Давайте розглянемо пов’язані методи роботи з екраном входу:
app.loginScreen.create(parameters)- створити екземпляр екрана входу в систему

— parameters - object. - Об'єкт з параметрами екрана входу

Метод повертає створений екземпляр екрана входу в систему

aapp.loginScreen.destroy(el)- знищити екземпляр екрана входу в систему

— el - HTMLElement or string (with CSS Selector) or object -Елемент екрана входу або екземпляр екрана входу для знищення.

app.loginScreen.get(el)- отримати екземпляр екрана входу за допомогою елемента HTML

— el - HTMLElement or string (with CSS Selector). - Елемент екрана входу.

Метод повертає екземпляр екрана входу в систему

  • app.loginScreen.open(el, animate) — відкриває екран входу
    • el - HTMLElement or string (with CSS Selector). — Елемент екрана входу, який потрібно відкрити.
    • animate - boolean. — Відкрити екран входу з анімацією
    Метод повертає екземпляр екрана входу в систему
  • app.loginScreen.close(el, animate) — закриває екран входу
    • el - HTMLElement or string (with CSS Selector). — Елемент екрана входу, який потрібно закрити.
    • animate - boolean. — Закрити екран входу з анімацією
    Метод повертає екземпляр екрана входу в систему

Параметри екрана входу

Тепер давайте подивимося на список доступних параметрів, необхідних для створення екрана входу в систему:
ПараметрЗа замовчуваннямОписТип
el
Елемент екрана входу. Може бути корисним, якщо у вашому HTML-коді вже є елемент екрана входу в систему та ви хочете створити новий екземпляр за допомогою цього елемента
string
content
Рядок макета HTML повного екрана входу. Може бути корисним, якщо ви хочете динамічно створити елемент екрана входу
string
animate
true
Чи відкривати/закривати екран входу з анімацією чи ні. Може бути перезаписано в методах .open() і .close().
boolean
containerEl
Елемент для модального монтування (за замовчуванням кореневий елемент застосунку)
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
Посилання на глобальний екземпляр застосунку
object
loginScreen.el
Елемент HTML екрана входу
HTMLElement
loginScreen.$el
Екземпляр Dom64 з HTML-елементом екрана входу
HTMLElement
loginScreen.params
Параметри екрана входу
object
loginScreen.opened
Логічне значення, яке вказує, чи відкрито екран входу чи ні
function
Методи
МетодОписТип
loginScreen.open(animate)
Відкрити екран входу. Де
  • animate - boolean — (за замовчуванням true) - визначає, чи слід відкривати його з анімацією
function
loginScreen.close(animate)
Закрити екран входу. Де
  • animate - boolean — (за замовчуванням true) - визначає, чи слід закривати його з анімацією
function
loginScreen.destroy()
Знищити екран входу
function
loginScreen.on(event, handler)
Додати обробник подій
Event
loginScreen.once(event, handler)
Додати обробник подій, який буде видалено після запуску
Event
loginScreen.off(event, handler)
Видалити обробник подій
Event
loginScreen.off(event)
Видалити всі обробники для вказаної події
Event
loginScreen.emit(event, ...args)
Запустити подію на примірнику
Event

Керуйте екраном входу за допомогою посилань

Відкривати та закривати необхідні екрани входу (якщо вони є в DOM) можна за допомогою спеціальних класів і атрибутів даних за посиланнями:

— Щоб відкрити екран входу, нам потрібно додати клас «login-screen-open» до будь-якого елемента HTML (бажано для посилання)

— Щоб закрити екран входу, нам потрібно додати клас "login-screen-close" до будь-якого елемента HTML (бажано для посилання)

— Якщо у вас більше одного екрана входу в DOM, вам потрібно вказати відповідний екран входу за допомогою додаткового атрибута data-login-screen=".my-login-screen" у цьому елементі HTML

Відповідно до примітки вище:

<!-- В атрибуті 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

ПодіяОб'єктОписТип
loginscreen:open
Елемент екрана входу

<div class="login-screen">

Подія буде запущена, коли на екрані входу почнеться початкова анімація
string
loginscreen:opened
Елемент екрана входу

<div class="login-screen">

Подію буде запущено після завершення анімації відкриття екрана входу
string
loginscreen:close
Елемент екрана входу

<div class="login-screen">

Подія буде ініційована, коли на екрані входу почнеться анімація закриття
string
loginscreen:closed
Елемент екрана входу

<div class="login-screen">

Подію буде запущено після завершення анімації на екрані входу
string

Події екземплярів застосунку та екрана входу

ПодіяАргументОписТип
open
loginScreen
Подія буде запущена, коли на екрані входу почнеться початкова анімація. Як аргумент обробник події отримує екземпляр екрана входу
null
loginScreenOpen
loginScreen
Подія буде запущена, коли на екрані входу почнеться початкова анімація. Як аргумент обробник події отримує екземпляр екрана входу
null
opened
loginScreen
Подію буде запущено після завершення анімації відкриття екрана входу. Як аргумент обробник події отримує екземпляр екрана входу
null
loginScreenOpened
loginScreen
Подію буде запущено після завершення анімації відкриття екрана входу. Як аргумент обробник події отримує екземпляр екрана входу
null
close
loginScreen
Подія буде ініційована, коли на екрані входу почнеться анімація закриття. Як аргумент обробник події отримує екземпляр екрана входу
null
loginScreenClose
loginScreen
Подія буде ініційована, коли на екрані входу почнеться анімація закриття. Як аргумент обробник події отримує екземпляр екрана входу
null
closed
loginScreen
Подію буде запущено після завершення анімації на екрані входу. Як аргумент обробник події отримує екземпляр екрана входу
null
loginScreenClosed
loginScreen
Подію буде запущено після завершення анімації на екрані входу. Як аргумент обробник події отримує екземпляр екрана входу
null
beforeDestroy
loginScreen
Подію буде запущено безпосередньо перед тим, як екземпляр екрана входу буде знищено. Як аргумент обробник події отримує екземпляр екрана входу
null
loginScreenBeforeDestroy
loginScreen
Подію буде запущено безпосередньо перед тим, як екземпляр екрана входу буде знищено. Як аргумент обробник події отримує екземпляр екрана входу
null

Вбудований екран входу

Також можна вставити екран входу в сторінку або спливаюче вікно. Давайте подивимося на приклад екрану входу всередину сторінки:
<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 {
  --t4-login-screen-blocks-max-width: 480px;
  /*
   --t4-login-screen-list-button-text-color: var(--t4-theme-color);
   */
  --t4-login-screen-title-text-align: center;
  --t4-login-screen-title-text-color: inherit;
  --t4-login-screen-title-letter-spacing: 0;
  --t4-login-screen-title-font-weight: 600;
  --t4-login-screen-title-font-size: 28px;
  --t4-login-screen-content-bg-color: #fff;
  --t4-login-screen-bg-color: #fff;
}
:root .dark,
:root.dark {
  --t4-login-screen-bg-color: #121212;
  --t4-login-screen-content-bg-color: #121212;
}
.ios {
  --t4-login-screen-blocks-margin-vertical: 25px;
}
.ios .dark,
.ios.dark {
  --t4-login-screen-bg-color: #000;
  --t4-login-screen-content-bg-color: #000;
}
.md {
  --t4-login-screen-blocks-margin-vertical: 24px;
}
.aurora {
  --t4-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>
          <!-- Відкрийте на екрані входу, який уже є в DOM-->
          <a href="#" class="button button-fill login-screen-open" data-login-screen=".login-screen">Open As
            Modal</a>
        </p>
        <p>
          <!-- Завантажити сторінку з екраном входу (login-screen-page.t4.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;
    // Екран входу в модальні події DOM
    $('.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>