НачалоОсновыКомпонентыТексты
Обзор
Кнопка Кнопка-иконка Кнопка с меню Группа кнопок Кнопка-переключатель Группа переключателей
Бейдж Баннер Пустое состояние Индикатор прогресса Кольцо прогресса Сообщение в разделе Скелетон Индикатор загрузки Уведомление
Field Поле ввода Textarea Number input Number stepper Search field OTP input Поле телефона Чекбокс Радиогруппа Переключатель Слайдер Карточка выбора Редактирование на месте
Select family Select Combobox Multiselect Country select Выбор даты Выбор периода Выбор времени Календарь Выбор эмодзи
Диалог Шторка Поповер Меню Подсказка
Боковая панель Навигационное меню Вкладки Сегментированный переключатель Хлебные крошки Пагинация Дерево
Таблица Таблица данных Аватар Группа аватаров Тег Иконка Изображение
Текст Prose Ссылка Блок кода Kbd
Аккордеон Раскрывающийся блок Разделитель Область прокрутки Разделитель панелей Соотношение сторон
Заголовок страницы

Аккордеон

Аккордеон — это стопка разделов. У каждого раздела есть заголовок, который показывает или скрывает его содержимое.

Стабильный Figma
ОбзорИспользованиеAPIДоступность
Shipping

Standard shipping arrives in 3 to 5 business days.

 Returns

Return any unworn item within 30 days for a full refund.

 
<tk-accordion>
  <tk-accordion-item open>
    <span slot="header">Shipping</span>
    <p>Standard shipping arrives in 3 to 5 business days.</p>
  </tk-accordion-item>
  <tk-accordion-item>
    <span slot="header">Returns</span>
    <p>Return any unworn item within 30 days for a full refund.</p>
  </tk-accordion-item>
</tk-accordion>

Анатомия

Часть Что это
tk-accordion стопка разделов; своей остановки Tab нет
tk-accordion-item один раздел
слот header название раздела
слот по умолчанию содержимое, видно, когда раздел открыт
part header заголовок вокруг кнопки
part trigger кнопка заголовка со стрелкой справа; одна остановка Tab
part panel область с содержимым

Открытый раздел ведёт себя как одна карточка: щелчок в любом месте содержимого закрывает его. Ссылки, кнопки, поля и выделенный текст внутри работают как обычно.

Один или несколько открытых

По умолчанию открыто может быть несколько разделов сразу. С single открыт только один: открытие раздела закрывает остальные. Закрыть открытый раздел можно всегда.

Can I change my plan?

Yes, at any time.

 Can I cancel?

Yes, from Billing.

 
<tk-accordion single>
  <tk-accordion-item open><span slot="header">Can I change my plan?</span><p>Yes, at any time.</p></tk-accordion-item>
  <tk-accordion-item><span slot="header">Can I cancel?</span><p>Yes, from Billing.</p></tk-accordion-item>
</tk-accordion>

Не используйте single, если разделы нужно сравнивать.

Состояния

Profile

Name, photo, and bio.

 Team settings

Roles and invites.

 
<tk-accordion>
  <tk-accordion-item open><span slot="header">Profile</span><p>Name, photo, and bio.</p></tk-accordion-item>
  <tk-accordion-item disabled><span slot="header">Team settings</span><p>Roles and invites.</p></tk-accordion-item>
</tk-accordion>

При наведении и нажатии подсвечивается строка заголовка, а у открытого раздела вся карточка. При фокусе с клавиатуры внутри строки заголовка появляется рамка.

  • open: раздел открыт с самого начала. Дальше аккордеон переключает его сам; свойство open можно читать и задавать из кода.
  • disabled: раздел нельзя открыть или закрыть, а заголовок выпадает из порядка Tab. Напишите в заголовке, почему раздел недоступен.

Управление вручную

Чтобы сначала загрузить содержимое или проверить условие, слушайте tk-toggle и вызовите preventDefault(), а когда всё готово, задайте open. В event.detail.open — состояние, в которое переходит раздел.

<tk-accordion-item id="reports"><span slot="header">Reports</span><div id="reports-body"></div></tk-accordion-item>
<script>
  const item = document.getElementById('reports');
  item.addEventListener('tk-toggle', async (e) => {
    if (!e.detail.open) return;
    e.preventDefault();
    await loadReports();
    item.open = true;
  });
</script>

Уровень заголовка

Каждый заголовок раздела — настоящий заголовок, по умолчанию третьего уровня. Задайте heading-level у tk-accordion, чтобы заголовки вписались в структуру страницы: под <h2> нужен 3. У отдельного раздела heading-level переопределяет уровень только для него.

Billing address

Used on invoices.

 
<tk-accordion heading-level="4">
  <tk-accordion-item><span slot="header">Billing address</span><p>Used on invoices.</p></tk-accordion-item>
</tk-accordion>