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-коді вже є елемент екрана входу в систему та ви хочете створити новий екземпляр за допомогою цього елемента
HTMLElement

string

content
Рядок макета HTML повного екрана входу. Може бути корисним, якщо ви хочете динамічно створити елемент екрана входу
string
animate
true
Чи відкривати/закривати екран входу з анімацією чи ні. Може бути перезаписано в методах .open() і .close().
boolean
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
Екземпляр Dom7 з HTML-елементом екрана входу
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) можна за допомогою спеціальних класів і атрибутів даних за посиланнями:

● Щоб відкрити екран входу, нам потрібно додати клас «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">

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

<div class="login-screen">

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

<div class="login-screen">

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

<div class="login-screen">

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

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

ПодіяАргументОписОб'єкт
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 {
  --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>

Techno4 Framework