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

Раскрывающийся блок

Collapsible показывает или скрывает один блок содержимого по нажатию на кнопку.

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

Standard shipping arrives in 3 to 5 business days.

<tk-collapsible>
  <span slot="trigger">Show delivery details</span>
  <p>Standard shipping arrives in 3 to 5 business days.</p>
</tk-collapsible>

Анатомия

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

Кнопка шириной ровно со свой текст. Содержимое идёт под ней, от края элемента; его раскладку вы задаёте сами.

Состояния

Advanced options

Proxy and cache settings.

 Audit log

Sign-ins and exports.

<tk-collapsible open><span slot="trigger">Advanced options</span><p>Proxy and cache settings.</p></tk-collapsible>
<tk-collapsible disabled><span slot="trigger">Audit log</span><p>Sign-ins and exports.</p></tk-collapsible>

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

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

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

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

<tk-collapsible id="report"><span slot="trigger">Full report</span><div id="report-body"></div></tk-collapsible>
<script>
  const el = document.getElementById('report');
  el.addEventListener('tk-toggle', async (e) => {
    if (!e.detail.open) return;
    e.preventDefault();
    await loadReport();
    el.open = true;
  });
</script>

«Показать ещё» и «Свернуть»

Текст кнопки ваш. Чтобы менять его, обновляйте его по tk-toggle:

<tk-collapsible id="more"><span slot="trigger">Show more</span><p>The rest of the description.</p></tk-collapsible>
<script>
  const el = document.getElementById('more');
  el.addEventListener('tk-toggle', (e) => {
    el.querySelector('[slot="trigger"]').textContent = e.detail.open ? 'Show less' : 'Show more';
  });
</script>