Skip to main content

Таблиця дій

Таблиця дій — це розсувна панель, яка пропонує користувачеві набір альтернатив щодо того, як продовжити виконання певного завдання. Ви також можете використовувати аркуші дій, щоб запропонувати користувачеві підтвердити потенційно небезпечну дію. Аркуш дій містить необов’язковий заголовок і одну або кілька кнопок, кожна з яких відповідає дії, яку потрібно виконати
Зверніть увагу, що не рекомендується використовувати Action Sheet на великих екранах (iPad). На великих екранах замість цього слід використовувати Popover.

Методи застосування таблиці дій

Давайте розглянемо пов’язані методи додатків для роботи з таблицею дій:

app.actions.create(parameters)- створити екземпляр Action Sheet

parameters - object. Об'єкт із параметрами таблиці дій

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

app.actions.destroy(el)- знищити екземпляр Action Sheet

el - HTMLElement or string (with CSS Selector) or object. Примірник елемента дії для знищення.

app.actions.get(el)- отримати екземпляр таблиці дій за допомогою елемента HTML

el - HTMLElement or string (за допомогою селектора CSS). Елемент Action Sheet.

Метод повертає екземпляр Action Sheet

app.actions.open(el, animate)- відкриває таблицю дій

el - HTMLElement or string (за допомогою селектора CSS).Елемент Action Sheet для відкриття

animate - boolean Відкрити таблицю дій з анімацією

Метод повертає екземпляр Action Sheet

app.actions.close(el, animate)- закриває таблицю дій

el - HTMLElement or string (за допомогою селектора CSS).Елемент Action Sheet для закриття

animate - boolean Закрити таблицю дій з анімацією

Метод повертає екземпляр Action Sheet

Параметри таблиці дій

Тепер давайте подивимося на список доступних параметрів, які нам потрібні для створення таблиці дій:
ПараметрЗа замовчуваннямОписТип
el
Елемент Action Sheet. Може бути корисним, якщо у вас уже є елемент Action Sheet у вашому HTML і ви хочете створити новий екземпляр за допомогою цього елемента
HTMLElement

string

content
Рядок HTML-вмісту повної таблиці дій. Може бути корисним, якщо ви хочете створити елемент таблиці дій із власним HTML
string
backdrop
true
Вмикає тло аркуша дій (темний напівпрозорий прошарок ззаду)
boolean
backdropEl
HTML-елемент або рядковий CSS-селектор спеціального елемента фону
HTMLElement

string

backdropUnique
false
Якщо ввімкнено, він створює унікальний елемент фону виключно для цього модалу
boolean
closeByBackdropClick
true
Якщо ввімкнено, таблиця дій закриватиметься після натискання фону
boolean
closeByOutsideClick
false
Якщо ввімкнено, аркуш дій буде закрито, якщо клацнути поза ним
boolean
closeOnEscape
false
Якщо ввімкнено, аркуш дій закриватиметься після натискання клавіші ESC
boolean
animate
true
Чи слід відкривати/закривати аркуш дій з анімацією чи ні. Може бути перезаписано в методах .open() і .close().
boolean
buttons
Групи/кнопки аркуша дій. У цьому випадку макет дій буде створено динамічно на основі переданих груп і кнопок. У випадку груп це має бути масив, де кожен елемент представляє масив із кнопками для групи.
array
grid
false
Вмикає макет кнопок сітки
boolean
convertToPopover
true
Якщо ввімкнено, аркуш дій буде перетворено на Popover на великих екранах або на комп’ютері з темою Aurora.
boolean
forceToPopover
false
Якщо ввімкнено, аркуш дій завжди перетворюватиметься на Popover.
boolean
targetEl
HTML-елемент або рядковий CSS-селектор цільового елемента. Потрібний, коли використовується перетворення на спливаюче зображення
HTMLElement

string

targetX
Горизонтальне зміщення віртуального цільового елемента від лівої сторони екрана. Потрібний, коли використовується перетворення на спливаюче зображення без використання реального цільового елемента (targetEl)
number
targetY
Вертикальне зміщення віртуального цільового елемента від верхньої частини екрана. Потрібний, коли використовується перетворення на спливаюче зображення без використання реального цільового елемента (targetEl)
number
targetWidth
0
Ширина віртуального цільового елемента (у пікселях). Потрібний, коли використовується перетворення на спливаюче зображення без використання реального цільового елемента (targetEl)
number
targetHeight
0
Висота віртуального цільового елемента (у пікселях). Потрібний, коли використовується перетворення на спливаюче зображення без використання реального цільового елемента (targetEl)
number
cssClass
Додаткове ім’я класу CSS, яке буде встановлено в елементі аркуша дій
string
onClick
Функція зворотного виклику, яка буде виконана після натискання кнопки «action sheet».
function (actions, e)
render
Спеціальна функція для рендерингу таблиці дій. Необхідно повернути таблицю дій html
function
renderPopover
Спеціальна функція для візуалізації Popover, коли використовується перетворення на Popover. Необхідно повернути Popover html
function
containerEl
Елемент для модального монтування (за замовчуванням кореневий елемент програми)
HTMLElement

string


ПараметрОписТип
on
Об'єкт з обробниками подій. Наприклад:
object
var actions = app.actions.create({
  buttons: [ /* ... */ ],
  on: {
    opened: function () {
      console.log('Action Sheet opened')
    }
  }
})
Зауважте, що всі наведені нижче параметри можна використовувати в глобальних параметрах програми у властивості дій, щоб установити значення за замовчуванням для всіх таблиць дій. Наприклад:
var app = new Techno4({
  actions: {
    convertToPopover: false,
    grid: true,
  }
});

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

Кожна кнопка в масиві кнопок має бути представлена як об’єкт із параметрами кнопки:
ПараметрЗа замовчуваннямОписТип
text
Рядок із текстом кнопки (може бути рядком HTML)
string
icon
HTML-рядок піктограми
string
bold
false
Вмикає жирний текст кнопки
boolean
color
Колір кнопки, один із кольорів за замовчуванням
string
bg
Колір фону кнопки, один із кольорів за замовчуванням
string
label
false
Якщо ввімкнено, він відображатиметься як мітка замість кнопки
boolean
disabled
false
Визначає, чи кнопка вимкнена чи ні.
boolean
close
true
Якщо ввімкнути, натискання кнопки закриє таблицю дій
boolean
onClick
Функція зворотного виклику, яка буде виконана після натискання цієї кнопки
function(actions, e)

Методи та властивості таблиці дій

Отже, щоб створити таблицю дій, ми повинні викликати: var actions = app.actions.create({ /* parameters */ })

Після цього у нас є його ініціалізований екземпляр (як змінна дій у прикладі вище) з корисними методами та властивостями:

Властивість Опис
actions.app
Посилання на глобальний екземпляр програми
actions.el
HTML-елемент таблиці дій
actions.$el
Екземпляр Dom7 з елементом HTML аркуша дій
actions.backdropEl
Елемент HTML фону
actions.$backdropEl
Екземпляр Dom7 із фоновим елементом HTML
actions.params
Параметри екземпляра таблиці дій
actions.opened
Логічне значення, яке вказує, чи відкрито аркуш дій чи ні

Методи

МетодОпис
actions.open(animate)
Відкриває таблицю дій. Де

animate - boolean (за замовчуванням true) - визначає, чи слід відкривати його з анімацією

actions.close(animate)
Закриває таблицю дій. Де

animate - boolean (за замовчуванням true) - визначає, чи потрібно його закривати з анімацією

actions.destroy()
Знищити таблицю дій
actions.on(event, handler)
Додати обробник подій
actions.once(event, handler)
Додати обробник подій, який буде видалено після запуску
actions.off(event, handler)
Видалити обробник подій
actions.off(event)
Видалити всі обробники для вказаної події
actions.emit(event, ...args)
Запустити дію на екземплярі

Таблиця контрольних дій із посиланнями

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

●Щоб відкрити таблицю дій, нам потрібно додати клас «actions-open» до будь-якого елемента HTML (бажано для посилання)

●Щоб закрити таблицю дій, нам потрібно додати клас «actions-close» до будь-якого елемента HTML (бажано для посилання)

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

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

<!-- In data-actions attribute we specify CSS selector of action sheet we need to open -->
<p><a href="#" data-actions=".my-actions" class="actions-open">Open Actions</a></p>

<!-- And somewhere in DOM -->
<div class="actions-modal my-actions">
  ...
</div>

Події таблиці дій

Таблиця дій запускатиме такі події DOM в елементі таблиці дій і події в екземплярі програми та таблиці дій:

DOM Події

ПодіяОб'єктОпис
actions:open
Елемент таблиці дій

<div class="actions-modal">

Подію буде запущено, коли таблиц дій розпочне свою початкову анімацію
actions:opened
Елемент таблиці дій

<div class="actions-modal">

Подію буде запущено після того, як таблиця дій завершить свою початкову анімацію
actions:close
Елемент таблиці дій

<div class="actions-modal">

Подія буде ініційована, коли таблиця дій почне завершувати анімацію
actions:closed
Елемент таблиці дій

<div class="actions-modal">

Подія буде ініційована після завершення анімації закриття таблиці дій

Події екземплярів застосунку та таблиці дій

Екземпляр Action Sheet запускає події як у себе, так і в екземплярі застосунку. Події екземпляра застосунку мають однакові назви з префіксом дій.
ПодіяАргументОписОб'єкт
open
actions
Подію буде запущено, коли таблиця дій розпочне свою початкову анімацію. Як аргумент обробник події отримує екземпляр таблиці дій
actions
actionsOpen
actions
Подію буде запущено, коли таблиця дій розпочне свою початкову анімацію. Як аргумент обробник події отримує екземпляр таблиці дій
app
opened
actions
Подію буде запущено після того, як таблиця дій завершить свою початкову анімацію. Як аргумент обробник події отримує екземпляр таблиці дій
actions
actionsOpened
actions
Подію буде запущено після того, як таблиця дій завершить свою початкову анімацію. Як аргумент обробник події отримує екземпляр таблиці дій
app
close
actions
Подія буде ініційована, коли таблиця дій почне завершувати анімацію. Як аргумент обробник події отримує екземпляр таблиці дій
actions
actionsClose
actions
Подія буде ініційована, коли таблиця дій почне завершувати анімацію. Як аргумент обробник події отримує екземпляр таблиці дій
app
closed
actions
Подія буде ініційована після завершення анімації закриття таблиці дій. Як аргумент обробник події отримує екземпляр таблиці дій
actions
actionsClosed
actions
Подія буде ініційована після завершення анімації закриття таблиці дій. Як аргумент обробник події отримує екземпляр таблиці дій
app
beforeDestroy
actions
Подія буде запущена безпосередньо перед тим, як екземпляр таблиці дій буде знищено. В якості аргументу обробник події отримує екземпляр таблиці дій
actions
actionsBeforeDestroy
actions
Подія буде запущена безпосередньо перед тим, як екземпляр таблиці дій буде знищено. В якості аргументу обробник події отримує екземпляр таблиці дій
app

Змінні CSS

Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
Зауважте, що коментовані змінні не вказано за замовчуванням, і в цьому випадку вони повертаються до їхніх значень.
:root {
  /*
  --t4-actions-button-text-color: var(--t4-theme-color);
  */
  --t4-actions-grid-button-font-size: 12px;
  --t4-actions-grid-button-text-color: #757575;
  --t4-actions-grid-button-icon-size: 48px;
}
:root .dark,
:root.dark {
  --t4-actions-label-text-color: rgba(255, 255, 255, 0.55);
}
.ios {
  --t4-actions-border-radius: 13px;
  --t4-actions-button-padding: 0px;
  --t4-actions-button-text-align: center;
  --t4-actions-button-height: 57px;
  --t4-actions-button-height-landscape: 44px;
  --t4-actions-button-font-size: 20px;
  --t4-actions-button-icon-size: 28px;
  --t4-actions-button-justify-content: center;
  --t4-actions-label-padding: 8px 10px;
  --t4-actions-label-font-size: 13px;
  --t4-actions-label-justify-content: center;
  --t4-actions-group-border-color: transparent;
  --t4-actions-group-margin: 8px;
  --t4-actions-bg-color: rgba(255, 255, 255, 0.95);
  --t4-actions-bg-color-rgb: 255, 255, 255;
  --t4-actions-button-border-color: rgba(0, 0, 0, 0.2);
  --t4-actions-button-pressed-bg-color: rgba(230, 230, 230, 0.9);
  --t4-actions-button-pressed-bg-color-rgb: 230, 230, 230;
  --t4-actions-label-text-color: #8a8a8a;
}
.ios .dark,
.ios.dark {
  --t4-actions-bg-color: rgba(45, 45, 45, 0.95);
  --t4-actions-bg-color-rgb: 45, 45, 45;
  --t4-actions-button-border-color: rgba(255, 255, 255, 0.15);
  --t4-actions-button-pressed-bg-color: rgba(50, 50, 50, 0.9);
  --t4-actions-button-pressed-bg-color-rgb: 50, 50, 50;
}
.md {
  --t4-actions-border-radius: 0px;
  --t4-actions-button-border-color: transparent;
  --t4-actions-button-padding: 0 16px;
  --t4-actions-button-text-align: left;
  --t4-actions-button-height: 48px;
  --t4-actions-button-height-landscape: 48px;
  --t4-actions-button-font-size: 16px;
  --t4-actions-button-icon-size: 24px;
  --t4-actions-button-justify-content: space-between;
  --t4-actions-label-padding: 12px 16px;
  --t4-actions-label-font-size: 16px;
  --t4-actions-label-justify-content: flex-start;
  --t4-actions-group-margin: 0px;
  --t4-actions-bg-color: #fff;
  --t4-actions-button-pressed-bg-color: #e5e5e5;
  --t4-actions-label-text-color: rgba(0, 0, 0, 0.54);
  --t4-actions-group-border-color: rgba(0, 0, 0, 0.12);
}
.md .dark,
.md.dark {
  --t4-actions-bg-color: #202020;
  --t4-actions-button-pressed-bg-color: #2e2e2e;
  --t4-actions-group-border-color: rgba(255, 255, 255, 0.15);
}
.aurora {
  --t4-actions-border-radius: 8px;
  --t4-actions-button-padding: 0 16px;
  --t4-actions-button-text-align: center;
  --t4-actions-button-height: 48px;
  --t4-actions-button-height-landscape: 48px;
  --t4-actions-button-font-size: 16px;
  --t4-actions-button-icon-size: 24px;
  --t4-actions-button-justify-content: space-between;
  --t4-actions-label-padding: 10px 16px;
  --t4-actions-label-font-size: 14px;
  --t4-actions-label-justify-content: center;
  --t4-actions-group-margin: 16px;
  --t4-actions-bg-color: #fff;
  --t4-actions-button-border-color: rgba(0, 0, 0, 0.12);
  --t4-actions-button-pressed-bg-color: #e5e5e5;
  --t4-actions-label-text-color: rgba(0, 0, 0, 0.5);
  --t4-actions-group-border-color: rgba(0, 0, 0, 0.1);
}
.aurora .dark,
.aurora.dark {
  --t4-actions-bg-color: #202020;
  --t4-actions-button-border-color: rgba(255, 255, 255, 0.15);
  --t4-actions-button-pressed-bg-color: #2e2e2e;
  --t4-actions-group-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">Action Sheet</div>
      </div>
    </div>

    <div class="page-content">
      <div class="block">
        <p>
          <a href="#" class="ac-1">One group, three buttons</a>
        </p>
        <p>
          <a href="#" class="ac-2">One group, title, three buttons</a>
        </p>
        <p>
          <a href="#" class="ac-3">Two groups</a>
        </p>
        <p>
          <a href="#" class="ac-4">Three groups</a>
        </p>
        <p>
          <a href="#" class="ac-5">With callbacks on click</a>
        </p>
        <p>
          <a href="#" class="ac-6">Actions grid</a>
        </p>
      </div>
    </div>

  </div>
</template>
<script>
  export default (props, { $, $t4, $on }) => {

    $on('pageInit', () => {
      //- One group, three buttons
      var ac1 = $t4.actions.create({
        buttons: [
          {
            text: 'Button1',
            bold: true
          },
          {
            text: 'Button2'
          },
          {
            text: 'Cancel',
            color: 'red'
          },
        ]
      })

      //- One group, title, three buttons
      var ac2 = $t4.actions.create({
        buttons: [
          {
            text: 'Do something',
            label: true
          },
          {
            text: 'Button1',
            bold: true
          },
          {
            text: 'Button2',
          },
          {
            text: 'Cancel',
            color: 'red'
          },
        ]
      });
      //- Two groups
      var ac3 = $t4.actions.create({
        buttons: [
          // First group
          [
            {
              text: 'Do something',
              label: true
            },
            {
              text: 'Button1',
              bold: true
            },
            {
              text: 'Button2',
            }
          ],
          // Second group
          [
            {
              text: 'Cancel',
              color: 'red'
            }
          ]
        ]
      });
      //- Three groups
      var ac4 = $t4.actions.create({
        buttons: [
          [
            {
              text: 'Share',
              label: true
            },
            {
              text: 'Mail',
            },
            {
              text: 'Messages',
            }
          ],
          [
            {
              text: 'Social share',
              label: true
            },
            {
              text: 'Facebook',
            },
            {
              text: 'Twitter',
            }
          ],
          [
            {
              text: 'Cancel',
              color: 'red'
            }
          ]
        ],
      });
      //- With callbacks on click
      var ac5 = $t4.actions.create({
        buttons: [
          {
            text: 'Button1',
            onClick: function () {
              $t4.dialog.alert('Button1 clicked')
            }
          },
          {
            text: 'Button2',
            onClick: function () {
              $t4.dialog.alert('Button2 clicked')
            }
          },
          {
            text: 'Cancel',
            color: 'red',
            onClick: function () {
              $t4.dialog.alert('Cancel clicked')
            }
          },
        ]
      });
      //- Actions Grid
      var ac6 = $t4.actions.create({
        grid: true,
        buttons: [
          [
            {
              text: 'Button 1',
              icon: '<img src="https://cdn.Techno4.io/placeholder/people-96x96-1.jpg" width="48"/>'
            },
            {
              text: 'Button 2',
              icon: '<img src="https://cdn.Techno4.io/placeholder/people-96x96-2.jpg" width="48">'
            },
            {
              text: 'Button 3',
              icon: '<img src="https://cdn.Techno4.io/placeholder/people-96x96-3.jpg" width="48">'
            },
          ],
          [
            {
              text: 'Button 1',
              icon: '<img src="https://cdn.Techno4.io/placeholder/fashion-96x96-4.jpg" width="48"/>'
            },
            {
              text: 'Button 2',
              icon: '<img src="https://cdn.Techno4.io/placeholder/fashion-96x96-5.jpg" width="48">'
            },
            {
              text: 'Button 3',
              icon: '<img src="https://cdn.Techno4.io/placeholder/fashion-96x96-6.jpg" width="48">'
            },
          ]
        ]
      });

      $('.ac-1').on('click', () => {
        ac1.open();
      });
      $('.ac-2').on('click', () => {
        ac2.open();
      });
      $('.ac-3').on('click', () => {
        ac3.open();
      });
      $('.ac-4').on('click', () => {
        ac4.open();
      });
      $('.ac-5').on('click', () => {
        ac5.open();
      });
      $('.ac-6').on('click', () => {
        ac6.open();
      });
    })

    return $render;
  }
</script>