Навігація

Діалог

Методи діалогового додатка

• Створити екземпляр Dialog: app.dialog.create(parameters)

  • parameters — object. Об'єкт з параметрами діалогового вікна.

  Повертає: створений екземпляр Dialog.
• Знищити екземпляр Dialog: app.dialog.destroy(el)

  • el — HTMLElement | string (CSS-селектор) | object. Елемент діалогу або екземпляр діалогу для знищення.
• Отримати екземпляр Dialog: app.dialog.get(el)

  • el — HTMLElement | string (CSS-селектор). Елемент діалогу.

  Повертає: екземпляр Dialog.
• Відкрити діалог: app.dialog.open(el, animate)

  • el — HTMLElement | string (CSS-селектор). Елемент діалогу для відкриття.
  • animate — boolean. Відкрити діалогове вікно з анімацією.

  Повертає: екземпляр Dialog.
• Закрити діалог: app.dialog.close(el, animate)

  • el — HTMLElement | string (CSS-селектор). Елемент діалогу для закриття.
  • animate — boolean. Закрити діалогове вікно з анімацією.

  Повертає: екземпляр Dialog.

Параметри діалогу

var dialog = app.dialog.create({
  text: 'Hello World',
  on: {
    opened: function () {
      console.log('Dialog opened')
    }
  }
})

Параметри кнопки

Методи та властивості діалогового вікна

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

Методи

Події в діалоговому вікні

Події DOM

Події екземплярів програми та діалогового вікна

Комбінації клавіш для діалогового вікна

Параметри ярликів діалогового вікна

var app = new Techno4({
  dialog: {
    // встановити назву за замовчуванням для всіх ярликів діалогових вікон
    title: 'My App',
    // змінити стандартний текст кнопки "ОК".
    buttonOk: 'Done',
    ...
  }
});

Попередження

• Діалог попередження з власною назвою: app.dialog.alert(text, title, callback)

  • text — string. Текст попередження.
  • title — string. Заголовок діалогового вікна.
  • callback — function. Функція зворотного виклику, що виконується після натискання «Ok».

  Повертає: створений екземпляр Dialog.
• Діалог попередження за замовчуванням: app.dialog.alert(text, callback)

  • text — string. Текст попередження.
  • callback — function. Функція зворотного виклику після натискання кнопки «Ok».

  Повертає: створений екземпляр Dialog.

Підтвердження

• Діалог підтвердження з власною назвою: app.dialog.confirm(text, title, callbackOk, callbackCancel)

  • text — string. Текст діалогу підтвердження.
  • title — string. Заголовок діалогового вікна підтвердження.
  • callbackOk — function. Зворотний виклик при натисканні кнопки «Ok».
  • callbackCancel — function. Зворотний виклик при натисканні кнопки «Скасувати».

  Повертає: створений екземпляр Dialog.
• Діалог підтвердження за замовчуванням: app.dialog.confirm(text, callbackOk, callbackCancel)

  • text — string. Текст підтвердження із назвою за замовчуванням.
  • callbackOk — function. Зворотний виклик при натисканні «Ok».
  • callbackCancel — function. Зворотний виклик при натисканні «Скасувати».

  Повертає: створений екземпляр Dialog.

Запит

• Діалог запиту з власною назвою: app.dialog.prompt(text, title, callbackOk, callbackCancel, defaultValue)

  • text — string. Текст запиту.
  • title — string. Заголовок вікна запиту.
  • callbackOk — function(value). Виконується при натисканні «Ok» (отримує введене значення).
  • callbackCancel — function(value). Виконується при натисканні «Скасувати».
  • defaultValue — string. Значення текстового поля за замовчуванням.

  Повертає: створений екземпляр Dialog.
• Діалог запиту за замовчуванням: app.dialog.prompt(text, callbackOk, callbackCancel, defaultValue)

  • text — string. Текст діалогу запиту із заголовком за замовчуванням.
  • callbackOk — function(value). Виконується при «Ok».
  • callbackCancel — function(value). Виконується при «Скасувати».
  • defaultValue — string. Початкове значення поля.

  Повертає: створений екземпляр Dialog.

Логін

• Діалог входу (Login) з власною назвою: app.dialog.login(text, title, callbackOk, callbackCancel)

  • text — string. Текст діалогу входу.
  • title — string. Заголовок вікна входу.
  • callbackOk — function(username, password). Виконується при «Ok».
  • callbackCancel — function(username, password). Виконується при «Скасувати».

  Повертає: створений екземпляр Dialog.
• Діалог входу за замовчуванням: app.dialog.login(text, callbackOk, callbackCancel)

  • text — string. Текст вікна входу із заголовком за замовчуванням.
  • callbackOk — function(username, password). Виконується при «Ok».
  • callbackCancel — function(username, password). Виконується при «Скасувати».

  Повертає: створений екземпляр Dialog.

Пароль

• Діалог пароля з власною назвою: app.dialog.password(text, title, callbackOk, callbackCancel)

  • text — string. Текст діалогу пароля.
  • title — string. Заголовок діалогового вікна пароля.
  • callbackOk — function(password). Виконується при «Ok».
  • callbackCancel — function(password). Виконується при «Скасувати».

  Повертає: створений екземпляр Dialog.
• Діалог пароля за замовчуванням: app.dialog.password(text, callbackOk, callbackCancel)

  • text — string. Текст вікна пароля із заголовком за замовчуванням.
  • callbackOk — function(password). Виконується при «Ok».
  • callbackCancel — function(password). Виконується при «Скасувати».

  Повертає: створений екземпляр Dialog.

Попередній завантажувач

• Діалог попереднього завантажувача (Preloader): app.dialog.preloader(title, color)

  • title — string. Додатково. Назва вікна завантажувача.
  • color — string. Додатково. Колір попереднього завантажувача (один із системних кольорів теми).

  Повертає: створений екземпляр Dialog.

Прогрес

• Діалог індикатора прогресу (Progress): app.dialog.progress(title, progress, color)

  • title — string. Додатково. Назва вікна прогресу.
  • progress — number. Значення прогресу від 0 до 100. Якщо число не передано, відображається нескінченний прогрес.
  • color — string. Додатково. Колір смуги прогресу.

  Повертає: створений екземпляр Dialog.

Змінні CSS

:root {
  --t4-dialog-button-text-color: var(--t4-theme-color);
  --t4-dialog-button-text-align: center;
  --t4-dialog-input-bg-color: #fff;
}
:root .dark,
:root.dark {
  --t4-dialog-text-color: #fff;
}
.ios {
  --t4-dialog-box-shadow: none;
  --t4-dialog-width: 270px;
  --t4-dialog-inner-padding: 16px;
  --t4-dialog-border-radius: 13px;
  --t4-dialog-text-align: center;
  --t4-dialog-font-size: 14px;
  --t4-dialog-title-text-color: inherit;
  --t4-dialog-title-font-size: 18px;
  --t4-dialog-title-font-weight: 600;
  --t4-dialog-title-line-height: inherit;
  --t4-dialog-button-font-size: 17px;
  --t4-dialog-button-height: 44px;
  --t4-dialog-button-letter-spacing: 0;
  --t4-dialog-button-font-weight: 400;
  --t4-dialog-button-text-transform: none;
  --t4-dialog-input-border-radius: 4px;
  --t4-dialog-input-font-size: 14px;
  --t4-dialog-input-height: 32px;
  --t4-dialog-input-border-width: 1px;
  --t4-dialog-input-placeholder-color: #a9a9a9;
  --t4-dialog-preloader-size: 34px;
  --t4-dialog-bg-color: rgba(255, 255, 255, 0.95);
  --t4-dialog-bg-color-rgb: 255, 255, 255;
  --t4-dialog-text-color: #000;
  --t4-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  --t4-dialog-input-border-color: rgba(0, 0, 0, 0.3);
  --t4-dialog-border-divider-color: rgba(0, 0, 0, 0.2);
}
.ios .dark,
.ios.dark {
  --t4-dialog-bg-color: rgba(45, 45, 45, 0.95);
  --t4-dialog-bg-color-rgb: 45, 45, 45;
  --t4-dialog-button-pressed-bg-color: rgba(0, 0, 0, 0.2);
  --t4-dialog-border-divider-color: rgba(255, 255, 255, 0.15);
  --t4-dialog-input-border-color: rgba(255, 255, 255, 0.15);
  --t4-dialog-input-bg-color: rgba(0, 0, 0, 0.5);
}
.md {
  --t4-dialog-box-shadow: var(--t4-elevation-24);
  --t4-dialog-width: 280px;
  --t4-dialog-inner-padding: 24px;
  --t4-dialog-border-radius: 4px;
  --t4-dialog-text-align: left;
  --t4-dialog-font-size: 16px;
  --t4-dialog-title-font-size: 20px;
  --t4-dialog-title-font-weight: 500;
  --t4-dialog-title-line-height: 1.3;
  --t4-dialog-button-font-size: 14px;
  --t4-dialog-button-height: 36px;
  --t4-dialog-button-letter-spacing: 0.05em;
  --t4-dialog-button-font-weight: 500;
  --t4-dialog-button-text-transform: uppercase;
  --t4-dialog-button-pressed-bg-color: rgba(var(--t4-theme-color-rgb), 0.15);
  --t4-dialog-input-border-radius: 0px;
  --t4-dialog-input-font-size: 16px;
  --t4-dialog-input-height: 36px;
  --t4-dialog-input-border-color: transparent;
  --t4-dialog-input-border-width: 0px;
  --t4-dialog-preloader-size: 32px;
  --t4-dialog-bg-color: #fff;
  --t4-dialog-text-color: rgba(0, 0, 0, 0.54);
  --t4-dialog-title-text-color: #212121;
  --t4-dialog-input-placeholder-color: rgba(0, 0, 0, 0.35);
}
.md .dark,
.md.dark {
  --t4-dialog-bg-color: #1c1c1d;
  --t4-dialog-title-text-color: #fff;
  --t4-dialog-input-bg-color: transparent;
  --t4-dialog-input-placeholder-color: rgba(255, 255, 255, 0.54);
}
.aurora {
  --t4-dialog-box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15), 0 25px 30px 0 rgba(0,0,0,0.35);
  --t4-dialog-width: 300px;
  --t4-dialog-inner-padding: 20px;
  --t4-dialog-border-radius: 8px;
  --t4-dialog-text-align: left;
  --t4-dialog-font-size: 14px;
  --t4-dialog-title-font-size: 18px;
  --t4-dialog-title-font-weight: 700;
  --t4-dialog-title-line-height: inherit;
  --t4-dialog-button-font-size: 14px;
  --t4-dialog-button-height: 36px;
  --t4-dialog-button-letter-spacing: 0;
  --t4-dialog-button-font-weight: 600;
  --t4-dialog-button-text-transform: uppercase;
  /*
  --t4-dialog-button-pressed-bg-color: var(--t4-theme-color-shade);
  --t4-dialog-button-hover-bg-color: var(--t4-theme-color-tint);
  */
  --t4-dialog-input-border-radius: 8px;
  --t4-dialog-input-font-size: 16px;
  --t4-dialog-input-height: 32px;
  --t4-dialog-input-border-width: 1px;
  --t4-dialog-preloader-size: 24px;
  --t4-dialog-bg-color: #fff;
  --t4-dialog-title-text-color: inherit;
  --t4-dialog-text-color: #000;
  --t4-dialog-button-text-color: #fff;
  --t4-dialog-input-border-color: rgba(0, 0, 0, 0.2);
  --t4-dialog-input-placeholder-color: rgba(0, 0, 0, 0.32);
}
.aurora .dark,
.aurora.dark {
  --t4-dialog-bg-color: #1c1c1d;
  --t4-dialog-title-text-color: #fff;
  --t4-dialog-input-bg-color: rgba(0, 0, 0, 0.25);
  --t4-dialog-input-placeholder-color: rgba(255, 255, 255, 0.54);
  --t4-dialog-input-border-color: rgba(255, 255, 255, 0.15);
}

Приклади

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Dialog</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong">
        <p class="row">
          <button class="col button button-fill open-alert">Alert</button>
          <button class="col button button-fill open-confirm">Confirm</button>
          <button class="col button button-fill open-prompt">Prompt</button>
        </p>
        <p class="row">
          <button class="col button button-fill open-login">Login</button>
          <button class="col button button-fill open-password">Password</button>
        </p>
      </div>
      <div class="block-title">Vertical Buttons</div>
      <div class="block block-strong">
        <p>
          <button class="button button-fill open-vertical">Vertical Buttons</button>
        </p>
      </div>
      <div class="block-title">Preloader Dialog</div>
      <div class="block block-strong">
        <p class="row">
          <button class="col button button-fill open-preloader">Preloader</button>
          <button class="col button button-fill open-preloader-custom">Custom Title</button>
        </p>
      </div>
      <div class="block-title">Progress Dialog</div>
      <div class="block block-strong">
        <p class="row">
          <button class="col button button-fill open-progress">Determined</button>
          <button class="col button button-fill open-progress-infinite">Infinite</button>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $, $t4, $on }) => {
    $on('pageInit', () => {
      // Alert
      $('.open-alert').on('click', function () {
        $t4.dialog.alert('Hello');
      });

      // Confirm
      $('.open-confirm').on('click', function () {
        $t4.dialog.confirm('Are you feel good today?', function () {
          $t4.dialog.alert('Great!');
        });
      });

      // Prompt
      $('.open-prompt').on('click', function () {
        $t4.dialog.prompt('What is your name?', function (name) {
          $t4.dialog.confirm('Are you sure that your name is ' + name + '?', function () {
            $t4.dialog.alert('Ok, your name is ' + name);
          });
        });
      });

      // Login
      $('.open-login').on('click', function () {
        $t4.dialog.login('Enter your username and password', function (username, password) {
          $t4.dialog.alert('Thank you!<br>Username:' + username + '<br>Password:' + password);
        });
      });

      // Password
      $('.open-password').on('click', function () {
        $t4.dialog.password('Enter your password', function (password) {
          $t4.dialog.alert('Thank you!<br>Password:' + password);
        });
      });

      // Vertical Buttons
      $('.open-vertical').on('click', function () {
        $t4.dialog.create({
          title: 'Vertical Buttons',
          text: 'Dialog with vertical buttons',
          buttons: [
            {
              text: 'Button 1',
            },
            {
              text: 'Button 2',
            },
            {
              text: 'Button 3',
            },
          ],
          verticalButtons: true,
        }).open();
      });

      // Preloader
      $('.open-preloader').on('click', function () {
        $t4.dialog.preloader();
        setTimeout(function () {
          $t4.dialog.close();
        }, 3000);
      });

      // Preloader with custom text
      $('.open-preloader-custom').on('click', function () {
        $t4.dialog.preloader('My text...');
        setTimeout(function () {
          $t4.dialog.close();
        }, 3000);
      });

      // Progress
      $('.open-progress').on('click', function () {
        var progress = 0;
        var dialog = $t4.dialog.progress('Loading assets', progress);
        dialog.setText('Image 1 of 10');
        var interval = setInterval(function () {
          progress += 10;
          dialog.setProgress(progress);
          dialog.setText('Image ' + ((progress) / 10) + ' of 10');
          if (progress === 100) {
            clearInterval(interval);
            dialog.close();
          }
        }, 300)
      });

      // Progress Infinite
      $('.open-progress-infinite').on('click', function () {
        $t4.dialog.progress();
        setTimeout(function () {
          $t4.dialog.close();
        }, 3000);
      });
    })

    return $render;
  }
</script>