Таблиця дій
Методи застосування таблиці дій
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) | Відкриває таблицю дій. Де
● |
actions.close(animate) | Закриває таблицю дій. Де
● |
actions.destroy() | Знищити таблицю дій |
actions.on(event, handler) | Додати обробник подій |
actions.once(event, handler) | Додати обробник подій, який буде видалено після запуску |
actions.off(event, handler) | Видалити обробник подій |
actions.off(event) | Видалити всі обробники для вказаної події |
actions.emit(event, ...args) | Запустити дію на екземплярі |
Таблиця контрольних дій із посиланнями
●Щоб відкрити таблицю дій, нам потрібно додати клас «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 Події
Подія | Об'єкт | Опис |
---|---|---|
actions:open | Елемент таблиці дій <div class="actions-modal"> | Подію буде запущено, коли таблиц дій розпочне свою початкову анімацію |
actions:opened | Елемент таблиці дій <div class="actions-modal"> | Подію буде запущено після того, як таблиця дій завершить свою початкову анімацію |
actions:close | Елемент таблиці дій <div class="actions-modal"> | Подія буде ініційована, коли таблиця дій почне завершувати анімацію |
actions:closed | Елемент таблиці дій <div class="actions-modal"> | Подія буде ініційована після завершення анімації закриття таблиці дій |
Події екземплярів застосунку та таблиці дій
Подія | Аргумент | Опис | Об'єкт |
---|---|---|---|
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
: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>
Techno4 Framework
- Get Started
- Introduction
- Kitchen Sink
- Installation
- Package Structure
- App HTML Layout
- RTL Layout
- Initialize App
- Events
- Router Component
- Routes
- Store
- App/Core
- Accordion/Collapsible
- Action Sheet
- Area chart
- Autocomplete
- Badge
- Block/Content Block
- Breadcrumbs
- Button
- Calendar/Date Picker
- Cards
- Checkbox
- Chips
- Color Picker
- Contact List
- Data Table
- Dialog
- Floating action button
- Form
- Gauge
- Icons
- Inputs / Form Inputs
- Grid /Layout Grid
- Link
- List Button
- List View
- List Index
- Login Screen
- Menu List
- Messagebar
- Navbar
- Messages
- Notification
- Panel/Side Panels
- Photo Browser
- Picker
- Pie Chart
- Popover
- Popup
- Preloader
- Progressbar
- Pull to Refresh
- Radio
- Range Slider
- Searchbar