Знакомьтесь, <details>26.11.2019 17:02

?v=1

Я хочу рассказать о замечательно элементе

и показать несколько примеров его использования, от простых до безумных.

Вам знаком паттерн верстки компонента, который может менять своё состояние с видимого на скрытый: 

.component {
  display:none;
}

.component.open {
  display:block;
}
toggleButton.onclick = () => component.classList.toggle('open')

А теперь забудьте. Существует элемент, который может делать это из коробки. Знакомьтесь —


HTML-элемент
используется для раскрытия скрытой (дополнительной) информации.


Базовое применение

Прежде всего давайте посмотрим как этот элемент работает:

Обратите внимание, что пример работает без каких либо дополнительных стилей или JavaScript. Вся функциональность встроена в сам браузер.

По умолчанию видимый текст зависит от настроек языка вашей системы, но его можно изменить добавив в 

элемент :

Чтобы изменить состояние элемента в html вам достаточно добавить атрибут open



 ... 




 ...

А чтобы управлять состоянием средствами JavaScript предусмотрен специальный API: 

const details = document.querySelector('details')

details.open = true  // Отобразить содержимое
details.open = false // Скрыть содержимое


Пара слов о доступности

Элемент

фокусируемый. То есть передвигаясь по странице с клавиатуры вы попадёте на этот элемент. А вот содержимое может попасть в фокус только если
открыт, то есть фокус никогда не попадет на невидимые элементы внутри
.

Как правило, программы чтения с экрана хорошо справляются со стандартным использованием

и . Существуют некоторые вариации в объявлении в зависимости от программы и браузера. Подробнее.


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

Далее я примерно повторю некоторые компоненты из документации bootstrap, но практически без JavaScript.


Изменяем маркер

Первое что вам может понадобится — изменить внешний вид маркера. Делается это очень просто: 

summary::-webkit-details-marker {
  /* Любые стили */
}

Или вы можете скрыть стандартный маркер и реализовать собственный

/* Убираем стандартный маркер */
details summary::-webkit-details-marker {
  display: none
}

/* Добавляем собственный маркер для закрытого состояния */
details summary:before {
  content: '\f0fe';
  font-family: "Font Awesome 5 free";
  margin-right: 7px;
}

/* Добавляем собственный маркер для открытого состояния */
details[open] summary:before {
  content: '\f146';
}


Collapse Component

Здесь всё просто. Базовый функционал такой же. Нужно лишь немного изменить внешний вид:


Accordion Component

Повторим предыдущий пример, немного изменим внешний вид

и получим аккордеон:

Но, как видите, один элемент не закрывается когда открывается другой. Чтобы добиться этого нам понадобиться пара строк JavaScript. Необходимо отслеживать появление атрибута open на одном из элементов

и удалять его у остальных:


Popover Component

Эта реализация очень похожа на Collapse Component, с той разницей что содержимое

имеет абсолютное позиционирование и перекрывает контент.


Dropdown Component

В своей основе это тот же Popover Component. Отличается лишь внешний вид.

Тот же пример, только с отдельной кнопкой

Но у Dropdown Component есть ещё одно важное отличие: по клику за его пределами он должен скрываться. Чтобы реализовать это снова понадобится написать пару строк JavaScript.

// По клику на тело документа
document.body.onclick = () => {
  // Найти все открытые 

  document.body.querySelectorAll('details.dropdown[open]')
    // И закрыть каждый из них
    .forEach(e => e.open = false)
}


Modal Component

И напоследок пример модального окна.

Вообще

не лучший выбор для реализации этого компонента. Существует куда более подходящий элемент — , но у него весьма плохая поддержка браузерами.


Ссылки

Can I Use Details & Summary elements
MDN details element
W3C details element

© Habrahabr.ru