Плаваюча кнопка дії (ПКД)
Навігація
Плаваюча кнопка дії
Плаваюча кнопка дії (ПКД) використовується для рекламної дії. Вони відрізняються піктограмою в кружечку, що плаває над інтерфейсом користувача, і мають поведінку руху, яка включає трансформацію, запуск і передачу опорної точки.
Макет ПКД
Розташування плаваючої кнопки дії дуже просте. Просто поставте його як пряму дочірню сторінку
page або перегляд view:<!-- Page-->
<div class="page">
<!-- Navbar-->
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="center">Floating Action Button</div>
</div>
</div>
<!-- Floating Action Button -->
<div class="fab fab-right-bottom">
<a href="#">
<i class="icon t4-icons">plus</i>
</a>
</div>
<!-- Another Floating Action Button -->
<div class="fab fab-left-bottom">
<a href="#">
<i class="icon t4-icons">plus</i>
</a>
</div>
<!-- Scrollable Page Content-->
<div class="page-content">
<div class="block">
Lorem ipsum dolor sit amet, ....
</div>
</div>
</div>Положення ПКД налаштовується за допомогою додаткового класу
fab-[horizontal]-[vertical]. Доступні такі класи:
●fab-right-bottom
●fab-center-bottom
●fab-left-bottom
●fab-right-center
●fab-center-center
●fab-left-center
●fab-right-top
●fab-center-top
●fab-left-top
Кольори ПКД
ПКД підтримує всі кольори за замовчуванням. Щоб змінити її колір, просто додайте клас
color-[color] до елемента плаваючої кнопки дії:<!-- Red FAB -->
<div class="fab fab-left-top color-red"></div>
<!-- Green FAB -->
<div class="fab fab-right-bottom color-green"></div>Розширена ПКД
Розширений ПКД ширша і містить текстову позначку. Щоб створити розширену ПКД, нам потрібно додати додатковий клас
fab-extended до елемента ПКД і помістити його додатковий текст в елемент <div class="fab-text"> всередині:<!-- Additional fab-extended class -->
<div class="fab fab-extended fab-center-bottom">
<a href="#">
<i class="icon t4-icons">plus</i>
<!-- Element with FAB text -->
<div class="fab-text">Create</div>
</a>
</div>Швидкий набір
Плаваюча кнопка дії може викидати відповідні дії після натискання. Кнопка повинна залишатися на екрані після виклику меню. Натискання в тому самому місці має активувати дію, яку найчастіше використовують, або закрити відкрите меню.
У цьому випадку нам потрібно додати додатковий елемент із кнопками:
<div class="fab fab-right-bottom">
<a href="#">
<!-- First icon is visible when Speed Dial actions are closed -->
<i class="icon t4-icons">plus</i>
<!-- Second icon is visible when Speed Dial actions are opened -->
<i class="icon t4-icons">xmark</i>
</a>
<!-- Speed Dial action buttons -->
<div class="fab-buttons fab-buttons-bottom">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
</div>
</div>Розташування контейнера кнопок швидкого набору налаштовується за допомогою додаткового класу:
●fab-buttons-top- кнопки з’являться поверх ПКД
● fab-buttons-right - кнопки з’являться праворуч від ПКД
● fab-buttons-bottom - кнопки з’являться внизу ПКД
●fab-buttons-left - кнопки з’являться ліворуч від ПКД
●fab-buttons-center - навколо ПКД з’являться кнопки
● Зауважте, що кнопки швидкого набору відображатимуться у зворотному порядку
● Ви не повинні використовувати більш як 6 дій швидкого набору
● Ви повинні використовувати принаймні 3 дії швидкого набору
Швидкий набір з мітками
Кнопки швидкого набору також підтримують додаткові текстові мітки. У цьому випадку макет буде трохи розширений:
<div class="fab-buttons fab-buttons-bottom">
<!-- additional "fab-label-button" class on fab button -->
<a href="#" class="fab-label-button">
<!-- original button content -->
<span>1</span>
<!-- button label -->
<span class="fab-label">Action 1</span>
</a>
<a href="#" class="fab-label-button">
<span>2</span>
<span class="fab-label">Action 2</span>
</a>
...
</div>Швидкий набір із фоном
Також можна додати фон (напівпрозоре накладання) позаду ПКД, який стане видимим під час відкриття ПКД.
Щоб це запрацювало, нам просто потрібно додати елемент фону на той самий рівень, що й елемент ПКД:
<div class="page">
<!-- FAB backdrop -->
<div class="fab-backdrop"></div>
<!-- FAB -->
<div class="fab fab-right-bottom">
...
</div>
<div class="page-content">
...
</div>
</div>Перетворення ПКД
Існує також можливість для ПКД перетворюватися на будь-який видимий елемент на сторінці.
<div class="page">
<div class="navbar">...</div>
<!-- Toolbar has additional required "fab-morph-target" class -->
<div class="toolbar toolbar-bottom fab-morph-target">
...
</div>
<!-- FAB will morph to toolbar -->
<div class="fab fab-morph" data-morph-to=".toolbar">
<i class="icon t4-icons">plus</i>
</div>
<div class="page-content">
...
</div>
</div>Де,
● data-morph-to - додатковий атрибут на ПКД, де потрібно вказати селектор CSS цільового елемента. У цьому прикладі він вказує на панель інструментів
● fab-morph-target - додатковий необхідний клас для цільової трансформації ПКД, у цьому прикладі його додано на панель інструментів
Методи застосунку ПКД
Ми можемо використовувати наступні методи програми для керування ПКД:.
| Метод | Опис |
|---|---|
app.fab.open(fabEl, targetEl) | Відкрити дії/кнопки швидкого набору ПКД або перетворите їх на вказану ціль
● ● |
app.fab.close(fabEl) | Закрити дії/кнопки швидкого набору FAB або перетворити його назад із указаної цілі
● |
app.fab.close(fabEl) | Закрити дії/кнопки швидкого набору FAB або перетворити його назад із указаної цілі
● |
Події ПКД
ПКД запускатиме наступні події DOM на елементі ПКД:
| Подія | Об'єкт | Опис |
|---|---|---|
fab:open | FAB Element <div class="fab"> | Подія буде ініційована під час відкриття ПКД або коли віна перетворюється на цільовий елемент |
fab:close | FAB Element <div class="fab"> | Подія буде ініційована після закриття ПКД або коли він повертається з цільового елемента |
Керування ПКД за допомогою посилань
Відкривати і закривати потрібну ПКД (якщо віна є в DOM) можна за допомогою спеціальних класів і атрибутів даних за посиланнями:
Щоб відкрити дії швидкого набору ПКД, нам потрібно додати клас fab-open до будь-якого елемента HTML (бажано для посилання)
Щоб закрити швидкісний набір ПКД або перетворити ПКД назад із цільового, нам потрібно додати клас fab-close до будь-якого елемента HTML (бажано посилання)
Якщо у вас є більше однієї ПКД у DOM, вам потрібно вказати відповідний FAB за допомогою додаткового атрибута data-fab=".some-fab" у цьому елементі HTML
Змінні CSS
Нижче наведено список пов’язаних змінних CSS (спеціальні властивості CSS).
Зауважте, що коментовані змінні не вказано за замовчуванням, і в цьому випадку вони повертаються до їхніх значень.
:root {
--t4-fab-margin: 16px;
--t4-fab-text-color: #fff;
--t4-fab-extended-text-font-size: 14px;
--t4-fab-extended-text-padding: 0 20px;
--t4-fab-label-bg-color: #fff;
--t4-fab-label-text-color: #333;
--t4-fab-label-border-radius: 4px;
--t4-fab-label-padding: 4px 12px;
--t4-fab-label-font-size: inherit;
--t4-fab-button-size: 40px;
/* --t4-fab-pressed-bg-color: var(--t4-theme-color-shade); */
}
.ios {
--t4-fab-size: 50px;
--t4-fab-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.4);
--t4-fab-extended-size: 50px;
--t4-fab-extended-text-font-weight: 600;
--t4-fab-extended-text-letter-spacing: 0;
--t4-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
}
.md {
--t4-fab-size: 56px;
--t4-fab-box-shadow: var(--t4-elevation-6);
--t4-fab-extended-size: 48px;
--t4-fab-extended-text-font-weight: 500;
--t4-fab-extended-text-letter-spacing: 0.05em;
--t4-fab-label-box-shadow: var(--t4-elevation-3);
}
.aurora {
--t4-fab-size: 56px;
--t4-fab-box-shadow: var(--t4-elevation-6);
--t4-fab-extended-size: 48px;
--t4-fab-extended-text-font-weight: 600;
--t4-fab-extended-text-letter-spacing: 0;
--t4-fab-label-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
}
Приклади
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="title">Floating Action Button</div>
</div>
</div>
<div class="toolbar toolbar-bottom fab-morph-target">
<div class="toolbar-inner">
<a class="link fab-close">Link 1</a>
<a class="link fab-close">Link 2</a>
<a class="link fab-close">Link 3</a>
</div>
</div>
<div class="fab fab-left-top color-yellow">
<a href="#">
<i class="icon t4-icons if-not-md">plus</i>
<i class="icon t4-icons if-not-md">xmark</i>
<i class="icon material-icons md-only">add</i>
<i class="icon material-icons md-only">close</i>
</a>
<div class="fab-buttons fab-buttons-bottom">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
</div>
</div>
<div class="fab fab-right-top color-pink">
<a href="#">
<i class="icon t4-icons if-not-md">plus</i>
<i class="icon t4-icons if-not-md">xmark</i>
<i class="icon material-icons md-only">add</i>
<i class="icon material-icons md-only">close</i>
</a>
<div class="fab-buttons fab-buttons-left">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
</div>
</div>
<div class="fab fab-center-center color-green">
<a href="#">
<i class="icon t4-icons if-not-md">plus</i>
<i class="icon t4-icons if-not-md">xmark</i>
<i class="icon material-icons md-only">add</i>
<i class="icon material-icons md-only">close</i>
</a>
<div class="fab-buttons fab-buttons-center">
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
</div>
</div>
<div class="fab fab-left-bottom fab-morph" data-morph-to=".toolbar">
<a href="#">
<i class="icon t4-icons if-not-md">plus</i>
<i class="icon t4-icons if-not-md">xmark</i>
<i class="icon material-icons md-only">add</i>
<i class="icon material-icons md-only">close</i>
</a>
</div>
<div class="fab fab-right-bottom color-orange">
<a href="#">
<i class="icon t4-icons if-not-md">plus</i>
<i class="icon t4-icons if-not-md">xmark</i>
<i class="icon material-icons md-only">add</i>
<i class="icon material-icons md-only">close</i>
</a>
<div class="fab-buttons fab-buttons-top">
<a class="fab-label-button" href="#"><span>1</span><span class="fab-label">Action 1</span></a>
<a class="fab-label-button" href="#"><span>2</span><span class="fab-label">Action 2</span></a>
</div>
</div>
<div class="fab fab-extended fab-center-bottom color-red">
<a href="#">
<i class="icon t4-icons if-not-md">plus</i>
<i class="icon material-icons md-only">add</i>
<div class="fab-text">Create</div>
</a>
</div>
<div class="page-content">
<div class="block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae porta enim. Sed ultricies lacinia
mauris, non tincidunt sem eleifend eget. Duis convallis quis sem non volutpat. Morbi risus lorem, dapibus
et nulla ac, pharetra maximus elit. Etiam vitae lacus a dui hendrerit ornare vitae id est. Pellentesque ut
tortor id sem maximus lobortis at egestas nulla. Nulla pretium, nunc et porta ullamcorper, sem lorem
elementum massa, rhoncus ullamcorper odio dui vel mauris. Ut lobortis neque congue eros posuere blandit.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. In
sem dolor, tempus eu tellus quis, vulputate malesuada felis.</p>
<p>In iaculis nisi id ligula condimentum consequat. Fusce a massa lorem. Morbi id nisl ut tellus volutpat
pulvinar a vel dolor. Phasellus eu purus tincidunt augue hendrerit posuere. Ut bibendum tincidunt nisi,
sed cursus arcu pulvinar sed. Fusce accumsan ante et libero feugiat, congue maximus urna blandit. Nunc a
est eu urna auctor congue. Aenean euismod ipsum sed nulla pretium rutrum.</p>
<p>Nunc id augue libero. Donec quis metus risus. Donec posuere vulputate purus, a semper justo consectetur
at. Cras porta vestibulum pulvinar. Fusce in leo lacinia massa fringilla pellentesque ac sit amet sem.
Nullam accumsan ante leo, eu faucibus lorem iaculis in. Duis id gravida libero.</p>
<p>Nulla facilisi. Duis tempus egestas eros et venenatis. Maecenas dictum ipsum sem, vitae aliquam diam
viverra eget. Curabitur dui turpis, fermentum eleifend ornare id, pellentesque vitae metus. Duis a est
faucibus, maximus nunc feugiat, rutrum ipsum. Integer in odio nisl. Quisque tortor sem, sollicitudin eget
cursus nec, lobortis quis eros. Integer a sapien semper, vulputate ex at, tempor ante.</p>
<p>Donec at est ut quam pharetra fermentum. In auctor quam ut velit porttitor, sit amet convallis sapien
interdum. Suspendisse sed magna molestie purus iaculis ultrices. Ut convallis facilisis bibendum. Aenean
vitae velit quis felis congue aliquam vitae ac felis. Nulla ipsum augue, elementum quis venenatis
ullamcorper, auctor at augue. Vestibulum varius tortor sit amet mauris finibus, at consectetur leo dictum.
Duis a odio rutrum, efficitur orci a, congue ipsum. Nulla efficitur, velit non pellentesque pretium,
tellus tortor auctor purus, nec mollis mauris felis quis elit. Etiam efficitur eleifend mi, vel sagittis
neque auctor ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae porta enim. Sed ultricies lacinia
mauris, non tincidunt sem eleifend eget. Duis convallis quis sem non volutpat. Morbi risus lorem, dapibus
et nulla ac, pharetra maximus elit. Etiam vitae lacus a dui hendrerit ornare vitae id est. Pellentesque ut
tortor id sem maximus lobortis at egestas nulla. Nulla pretium, nunc et porta ullamcorper, sem lorem
elementum massa, rhoncus ullamcorper odio dui vel mauris. Ut lobortis neque congue eros posuere blandit.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. In
sem dolor, tempus eu tellus quis, vulputate malesuada felis.</p>
<p>In iaculis nisi id ligula condimentum consequat. Fusce a massa lorem. Morbi id nisl ut tellus volutpat
pulvinar a vel dolor. Phasellus eu purus tincidunt augue hendrerit posuere. Ut bibendum tincidunt nisi,
sed cursus arcu pulvinar sed. Fusce accumsan ante et libero feugiat, congue maximus urna blandit. Nunc a
est eu urna auctor congue. Aenean euismod ipsum sed nulla pretium rutrum.</p>
<p>Nunc id augue libero. Donec quis metus risus. Donec posuere vulputate purus, a semper justo consectetur
at. Cras porta vestibulum pulvinar. Fusce in leo lacinia massa fringilla pellentesque ac sit amet sem.
Nullam accumsan ante leo, eu faucibus lorem iaculis in. Duis id gravida libero.</p>
<p>Nulla facilisi. Duis tempus egestas eros et venenatis. Maecenas dictum ipsum sem, vitae aliquam diam
viverra eget. Curabitur dui turpis, fermentum eleifend ornare id, pellentesque vitae metus. Duis a est
faucibus, maximus nunc feugiat, rutrum ipsum. Integer in odio nisl. Quisque tortor sem, sollicitudin eget
cursus nec, lobortis quis eros. Integer a sapien semper, vulputate ex at, tempor ante.</p>
<p>Donec at est ut quam pharetra fermentum. In auctor quam ut velit porttitor, sit amet convallis sapien
interdum. Suspendisse sed magna molestie purus iaculis ultrices. Ut convallis facilisis bibendum. Aenean
vitae velit quis felis congue aliquam vitae ac felis. Nulla ipsum augue, elementum quis venenatis
ullamcorper, auctor at augue. Vestibulum varius tortor sit amet mauris finibus, at consectetur leo dictum.
Duis a odio rutrum, efficitur orci a, congue ipsum. Nulla efficitur, velit non pellentesque pretium,
tellus tortor auctor purus, nec mollis mauris felis quis elit. Etiam efficitur eleifend mi, vel sagittis
neque auctor ut.</p>
</div>
</div>З фоном
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner">
<div class="title">FAB Backdrop</div>
</div>
</div>
<div class="fab-backdrop"></div>
<div class="fab fab-right-bottom">
<a href="#">
<i class="icon t4-icons if-not-md">plus</i>
<i class="icon t4-icons if-not-md">xmark</i>
<i class="icon material-icons md-only">add</i>
<i class="icon material-icons md-only">close</i>
</a>
<div class="fab-buttons fab-buttons-top">
<a class="fab-label-button" href="#"><span>1</span><span class="fab-label">Action 1</span></a>
<a class="fab-label-button" href="#"><span>2</span><span class="fab-label">Action 2</span></a>
</div>
</div>
<div class="page-content">
<div class="block">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae porta enim. Sed ultricies lacinia
mauris, non tincidunt sem eleifend eget. Duis convallis quis sem non volutpat. Morbi risus lorem, dapibus
et nulla ac, pharetra maximus elit. Etiam vitae lacus a dui hendrerit ornare vitae id est. Pellentesque ut
tortor id sem maximus lobortis at egestas nulla. Nulla pretium, nunc et porta ullamcorper, sem lorem
elementum massa, rhoncus ullamcorper odio dui vel mauris. Ut lobortis neque congue eros posuere blandit.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. In
sem dolor, tempus eu tellus quis, vulputate malesuada felis.</p>
<p>In iaculis nisi id ligula condimentum consequat. Fusce a massa lorem. Morbi id nisl ut tellus volutpat
pulvinar a vel dolor. Phasellus eu purus tincidunt augue hendrerit posuere. Ut bibendum tincidunt nisi,
sed cursus arcu pulvinar sed. Fusce accumsan ante et libero feugiat, congue maximus urna blandit. Nunc a
est eu urna auctor congue. Aenean euismod ipsum sed nulla pretium rutrum.</p>
<p>Nunc id augue libero. Donec quis metus risus. Donec posuere vulputate purus, a semper justo consectetur
at. Cras porta vestibulum pulvinar. Fusce in leo lacinia massa fringilla pellentesque ac sit amet sem.
Nullam accumsan ante leo, eu faucibus lorem iaculis in. Duis id gravida libero.</p>
<p>Nulla facilisi. Duis tempus egestas eros et venenatis. Maecenas dictum ipsum sem, vitae aliquam diam
viverra eget. Curabitur dui turpis, fermentum eleifend ornare id, pellentesque vitae metus. Duis a est
faucibus, maximus nunc feugiat, rutrum ipsum. Integer in odio nisl. Quisque tortor sem, sollicitudin eget
cursus nec, lobortis quis eros. Integer a sapien semper, vulputate ex at, tempor ante.</p>
<p>Donec at est ut quam pharetra fermentum. In auctor quam ut velit porttitor, sit amet convallis sapien
interdum. Suspendisse sed magna molestie purus iaculis ultrices. Ut convallis facilisis bibendum. Aenean
vitae velit quis felis congue aliquam vitae ac felis. Nulla ipsum augue, elementum quis venenatis
ullamcorper, auctor at augue. Vestibulum varius tortor sit amet mauris finibus, at consectetur leo dictum.
Duis a odio rutrum, efficitur orci a, congue ipsum. Nulla efficitur, velit non pellentesque pretium,
tellus tortor auctor purus, nec mollis mauris felis quis elit. Etiam efficitur eleifend mi, vel sagittis
neque auctor ut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae porta enim. Sed ultricies lacinia
mauris, non tincidunt sem eleifend eget. Duis convallis quis sem non volutpat. Morbi risus lorem, dapibus
et nulla ac, pharetra maximus elit. Etiam vitae lacus a dui hendrerit ornare vitae id est. Pellentesque ut
tortor id sem maximus lobortis at egestas nulla. Nulla pretium, nunc et porta ullamcorper, sem lorem
elementum massa, rhoncus ullamcorper odio dui vel mauris. Ut lobortis neque congue eros posuere blandit.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. In
sem dolor, tempus eu tellus quis, vulputate malesuada felis.</p>
<p>In iaculis nisi id ligula condimentum consequat. Fusce a massa lorem. Morbi id nisl ut tellus volutpat
pulvinar a vel dolor. Phasellus eu purus tincidunt augue hendrerit posuere. Ut bibendum tincidunt nisi,
sed cursus arcu pulvinar sed. Fusce accumsan ante et libero feugiat, congue maximus urna blandit. Nunc a
est eu urna auctor congue. Aenean euismod ipsum sed nulla pretium rutrum.</p>
<p>Nunc id augue libero. Donec quis metus risus. Donec posuere vulputate purus, a semper justo consectetur
at. Cras porta vestibulum pulvinar. Fusce in leo lacinia massa fringilla pellentesque ac sit amet sem.
Nullam accumsan ante leo, eu faucibus lorem iaculis in. Duis id gravida libero.</p>
<p>Nulla facilisi. Duis tempus egestas eros et venenatis. Maecenas dictum ipsum sem, vitae aliquam diam
viverra eget. Curabitur dui turpis, fermentum eleifend ornare id, pellentesque vitae metus. Duis a est
faucibus, maximus nunc feugiat, rutrum ipsum. Integer in odio nisl. Quisque tortor sem, sollicitudin eget
cursus nec, lobortis quis eros. Integer a sapien semper, vulputate ex at, tempor ante.</p>
<p>Donec at est ut quam pharetra fermentum. In auctor quam ut velit porttitor, sit amet convallis sapien
interdum. Suspendisse sed magna molestie purus iaculis ultrices. Ut convallis facilisis bibendum. Aenean
vitae velit quis felis congue aliquam vitae ac felis. Nulla ipsum augue, elementum quis venenatis
ullamcorper, auctor at augue. Vestibulum varius tortor sit amet mauris finibus, at consectetur leo dictum.
Duis a odio rutrum, efficitur orci a, congue ipsum. Nulla efficitur, velit non pellentesque pretium,
tellus tortor auctor purus, nec mollis mauris felis quis elit. Etiam efficitur eleifend mi, vel sagittis
neque auctor ut.</p>
</div>
</div>
</div>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