Expand
Один розкривний блок для зауважень, деталей і додаткових налаштувань.
Expand залишає видимим короткий заголовок, а довгі пояснення розкриває
натисканням. Типово блок згорнутий. Лічильник у слоті trailing і тон
warning допомагають помітити зауваження ще до відкриття.
Приклад
Керування станом
Без v-model компонент сам зберігає відкритий стан; default-open
розкриває його під час створення. З v-model стан визначає батьківський
компонент — можна розгорнути або згорнути блок зовнішньою кнопкою.
Введений текст зберігається після згортання.
Вміст зберігається змонтованим, тому згортання не скидає введені дані.
Щоб починати зі згорнутого блоку при переході до іншого запису, задайте
:key="record.id" на UiExpand.
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
title* | string | — | Назва розкривного блоку. Слот title дозволяє доповнити її розміткою. |
size | smmd | "md" | Щільність заголовка та відступів вмісту. |
tone | neutralwarning | "neutral" | Тон заголовка; warning залишає зауваження помітними у згорнутому стані. |
modelValue | boolean | undefined | Відкритий стан через v-model. Без нього компонент керує станом сам. |
defaultOpen | boolean | false | Початково розкритий блок — лише в некерованому режимі. |
disabled | boolean | false | Заборонити перемикання заголовком. |
Події
| Назва | Payload | Опис |
|---|---|---|
update:modelValue | [open: boolean] | Запит на зміну відкритого стану. Використовуйте через `v-model`. |
Слоти
| Назва | Опис |
|---|---|
default | Вміст блоку. Зберігається змонтованим після згортання. |
title | Власний заголовок без вкладених кнопок або посилань. |
leading | Іконка ліворуч від заголовка. |
trailing | Лічильник або короткий статус праворуч, без інтерактивних елементів. |
Коли використовувати
- Довгий список зауважень із видимою кількістю повідомлень.
- Додаткові поля або деталі запису, які потрібні за запитом.
- Розкривне пояснення результату перевірки.
Для перенесення скопіюйте app/components/ui/UiExpand.vue, а також спільні
tokens.css і theme.css за інструкцією.
Додаткових компонентів або пакетів Expand не потребує.
Коли НЕ використовувати
- Для групи пов'язаних розділів із навігацією між заголовками використовуйте Accordion.
- Для помилки поточної дії, яку користувач має відразу прочитати.
- Для основної навігації або дій, приховання яких завадить роботі.
Доступність
Заголовок — нативна кнопка з aria-expanded і aria-controls.
Enter і Space перемикають стан; Tab переводить фокус до наступного елемента.
Не вкладайте кнопки чи посилання у слоти заголовка — розміщуйте їх у вмісті.
Згорнута панель має inert та aria-hidden, тому її поля й посилання
не потрапляють у клавіатурну навігацію. Якщо зовнішній v-model згортає
панель із фокусом усередині, фокус повертається на заголовок.
Висота анімується через CSS Grid без JS-вимірювань; prefers-reduced-motion
вимикає анімацію. Кольори використовують токени й працюють в обох темах.