Тег <details>

Виджет раскрытия
  • Категории: Потоковое содержимое, Секционные корни, Интерактивное содержимое
  • Контекст:

    Где ожидается потоковое содержимое.

  • Модель:

    Один элемент <summary> за которым следует потоковое содержимое.

Тег <details> (от англ. "details" - подробности, детали) позволят реализовать виджет скрытия и показа информации. Это может быть любое потокове содержимое: текст, ссылки, заголовки, абзацы, изображения, формы и даже целые компоненты.

Атрибуты

  • Глобальные атрибуты
  • open - открыт ли элемент по умолчанию

  • Поведение по умолчанию

    По умолчанию элемент <details> скрывает размещенную в нем информацию. Вместо нее мы видим легенду, при нажатии на которую информацию можно показать или скрыть заново:

  • Изменение легенды

    Надпись легенды в различных браузерах может отличаться, например, "Подробнее", "Подробности" и т.д. Но вместо этого мы можем задать и собственную легенду. Для этого используется элемент <summary>, который должен располагаться первым дочерним элементом:

  • Изменение поведения

    Изначально элемент <details> скрывает свою информацию. Но мы можем управлять этим поведением при помощи атрибута open, которые может принимать одно из двух значений:

    • false - информация скрыта (по умолчанию)
    • true - информация открыта

    Как и любой другой булевый атрибут, при его использовании мы можем опустить значение. В таком случае, наличие атрибута будет идентично значению true, а его отсутствие - значению по умолчанию.

  • Пример использования

    В следующем примере элемент <details> используется для скрытия технических деталей хода выполнения копирования:

Поделитесь данной записью с друзьями