Сворачиваемый блок

Сворачиваемый блок — это одиночный <details>, тот же элемент, из которого собран аккордеон, только без всего его обрамления. Берите его для одной необязательной подробности посреди страницы; берите accordion(), когда таких блоков набор.

Скрипт ему не нужен, а поскольку содержимое остаётся в документе, оно находится и поиском по странице в браузере, и поисковой системой.

Простой блок

Показать сгенерированный конфиг

Всё, что sitelo пишет, когда вы запускаете сборку без собственного файла конфигурации.

collapsible({ trigger: 'Показать сгенерированный конфиг' },
  text({ variant: 'small' }, 'Всё, что sitelo пишет, когда вы запускаете сборку без собственного файла конфигурации.'),
)

Открыт по умолчанию

Зачем это нужно

Потому что страница, прячущая объяснение за кликом, — это страница, которую никто не читает.

collapsible({ trigger: 'Зачем это нужно', open: true },
  text({ variant: 'small' }, 'Потому что страница, прячущая объяснение за кликом, — это страница, которую никто не читает.'),
)

Расширенное содержимое

Показать весь вывод
dist/index.htmldist/404.htmldist/sitemap.xml
collapsible({ trigger: 'Показать весь вывод' },
  stack({ gap: 'sm' },
    code('dist/index.html'),
    code('dist/404.html'),
    code('dist/sitemap.xml'),
  ),
)

Внутри других элементов

Сворачиваемый блок прекрасно живёт внутри карточки, уведомления или ячейки таблицы.

Сборка не удалась

2 битые ссылки

Показать проблемные ссылки
  • /docs/old-routing
    ссылка со страницы /docs
  • /blog/draft
    ссылка со страницы /blog
stack({ gap: 'md' },
  card(
    cardHeader({ title: 'Сборка не удалась', subtitle: '2 битые ссылки' }),
    cardBody(
      collapsible({ trigger: 'Показать проблемные ссылки' },
        list({ plain: true },
          listItem({ title: '/docs/old-routing', description: 'ссылка со страницы /docs' }),
          listItem({ title: '/blog/draft', description: 'ссылка со страницы /blog' }),
        ),
      ),
    ),
  ),
  alert({ color: 'warning', title: 'Медленная страница' },
    stack({ gap: 'sm' },
      text({ variant: 'small' }, 'Одна страница рендерилась дольше 500 мс.'),
      collapsible({ trigger: 'Показать тайминги' },
        text({ variant: 'small' }, '/examples/wordpress — 512 мс'),
      ),
    ),
  ),
)

Триггер

Держите его в рамках текста и иконок. <summary> уже интерактивен, поэтому кнопка или ссылка внутри вкладывает два элемента управления туда, где действие всего одно, — то же правило, которому следует menu().

Сворачиваемый блок или аккордеон?

Одно раскрытие само по себе — collapsible(). Набор таких, в рамках и сгруппированный, при желании с одним открытым за раз, — accordion().

Пропсы

ПропТипПо умолчаниюОписание
triggerChild—Содержимое заголовка. Только текст и иконки.
openbooleanfalseРаскрыт ли изначально.