ActionBar

Плаваюча панель дій над обраними записами або незбереженими змінами.

Панель з'являється, коли є над чим діяти: обрано записи в списку або форма має незбережені зміни. Видимість — похідний стан, тому це не v-model, а звичайний props open: закриває панель батько, прибравши причину.

Обрати всі

5 фото

Ваза «Теракота»2,4 МБ
Ваза «Кобальт»1,9 МБ
Чашка «Вершки»1,1 МБ
Миска «Шавлія»1,6 МБ
Тарілка «Ряба»1,3 МБ

Незбережені зміни

Та сама панель без лічильника — рядок «Незбережені зміни» з діями «Відкинути» і «Зберегти». Хрестик і Escape тут означають «відкинути»: подія dismiss одна, а сенс їй дає батько.

Назва магазину

Публічний профіль

Покупці бачать сторінку магазину в каталозі

У вузькій панелі

Розкладку обирає ширина, яку панелі дали, а не ширина екрана: смуга навколо неї — контейнер для запитів @container. Липка панель здебільшого живе в дравері чи бічній колонці, набагато вужчій за вікно, і медіазапит відповідав би там не на те питання.

Від 36rem (540px) — один ряд. Лічильник не стискається, а дії, що не вмістилися, переносяться всередині своєї групи.
Вужче — лічильник і хрестик угорі, дії окремим рядком на всю ширину під ними.
На телефоні (екран вужчий за md) рядок дій не переноситься, а гортається вбік: п'ять кнопок займають один ряд, а не половину екрана. На ширшому екрані рядок переноситься — мишею смугу з прихованим скролбаром легко не помітити.

Нові замовлення

№ 1042 · Ваза «Теракота»Олена К. · 1 240 ₴
№ 1043 · Чашка «Вершки» ×4Максим Д. · 1 520 ₴
№ 1044 · Миска «Шавлія»Ірина П. · 690 ₴
№ 1045 · Тарілка «Ряба» ×6Андрій С. · 2 280 ₴
№ 1046 · Ваза «Кобальт»Софія Л. · 1 180 ₴
№ 1047 · Набір «Сніданок»Тарас М. · 3 450 ₴
№ 1048 · Глечик «Льон»Наталія Г. · 980 ₴

замовлення обрано

sticky чи fixed

sticky (типово) — панель стоїть у потоці документа одразу після списку й прилипає до низу найближчої області прокрутки — вікна чи тіла дравера, — поки список видно. Tab доходить до неї природно, одразу після рядків. Ширину, а з нею й розкладку, панель бере від батька: у дравері на 400px вона складеться у два ряди навіть на широкому моніторі.
fixed — панель телепортується в <body> і висить над усім застосунком; ширину й розкладку тоді диктує вікно. Це потрібно для глобальних станів, але телепорт ставить панель у кінець документа: після вибору рядків клавіатурою до неї довгий шлях. Тому переносьте фокус методом focus().

Предок з overflow: hidden ламає sticky: такий контейнер стає власною областю прокрутки, і панель липне до нього, а не до екрана. Якщо обрізання потрібне для заокруглених кутів — беріть overflow-clip, він області прокрутки не створює.

API

Props

Назва	Тип	Типово	Опис
`open`*	`boolean`	—	Чи показано панель. Не `v-model`: видимість — похідний стан (є обрані рядки, є незбережені зміни), і закриває панель батько, прибравши причину, а не компонент сам.
`count`	`number`	`null`	Скільки записів обрано. Друкується пігулкою ліворуч і потрапляє в оголошення для скрінрідера. Без нього панель — просто рядок дій.
`label`	`string`	`undefined`	Текст ліворуч: «Незбережені зміни», «обрано». Коли задано `count`, стоїть одразу після числа.
`placement`	fixedsticky	`"sticky"`	`sticky` — панель живе у потоці документа одразу після списку й прилипає до низу екрана, поки список видно. Tab доходить до неї відразу після рядків. `fixed` — панель телепортується в `<body>` і висить над усім застосунком; тоді фокус переносьте методом `focus()`.
`ariaLabel`	`string`	`"Дії з обраними"`	Доступна назва панелі-регіону.
`dismissible`	`boolean`	`true`	Хрестик праворуч. Подія `dismiss` — «скасувати вибір» чи «відкинути зміни», залежно від того, що панель показує.

Події

Назва	Payload	Опис
`dismiss`	`[]`	Хрестик або Escape усередині панелі. Батько знімає вибір чи відкидає зміни — панель сама не ховається.

Слоти

Назва	Опис
`default`	Кнопки дій. У панелі від 36rem завширшки — праворуч в один ряд, у вужчій — окремим рядком під лічильником; на телефоні цей рядок не переноситься, а гортається вбік.
`summary`	Власний вміст лівої частини замість лічильника й `label`.

Доступно через ref

Назва	Тип	Опис
`focus`	`() => void`	Переносить фокус на першу дію панелі. Потрібен для `fixed`: телепорт ставить панель у кінець документа, і Tab до неї інакше довгий.

Коли використовувати

Масові дії над обраними записами: списки файлів, сітки фото, картки.
Незбережені зміни у формі налаштувань, яку легко покинути, не зберігши.

Коли НЕ використовувати

Для таблиці — у UiTable вже є слот selection-actions з тією самою роллю, прямо в шапці таблиці.
Для однієї дії над одним записом — кнопка в рядку або меню рядка.
Як місце для постійних дій сторінки — вони в UiPageHeader.

Доступність

Панель — role="region" з назвою (ariaLabel), тож скрінрідер знаходить її серед орієнтирів сторінки. Кількість обраного оголошує окремий постійно змонтований live-регіон: регіон, що з'являється разом зі своїм текстом, скрінрідери здебільшого пропускають.

Escape усередині панелі викликає dismiss і зупиняє подію — щоб він не закрив ще й модалку за панеллю. Хрестик дрібний (30px), тож на дотику його ціль добудовує невидима зона 45×45.

Порядок Tab від ширини не залежить: спершу дії, потім хрестик. У вузькій панелі хрестик стоїть угорі поруч із лічильником, але фокус до нього доходить після дій — так само, як у широкій, де він праворуч від них. У смузі, що гортається на телефоні, фокус сам докручує кнопку в поле зору, і кільце навколо неї не обрізається краєм смуги.