Хабрахабр

Знакомьтесь, <details>

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

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

.component { display:none;
} .component.open { display:block;
}

toggleButton.onclick = () => component.classList.toggle('open')

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

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

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

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

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

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

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

<!-- Содержимое по-умолчанию видимо -->
<details open> ... </details> <!-- Содержимое по-умолчанию скрыто -->
<details> ... </details>

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

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

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

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

Существуют некоторые вариации в объявлении в зависимости от программы и браузера. Как правило, программы чтения с экрана хорошо справляются со стандартным использованием <details> и <summary>. Подробнее.

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

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

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

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

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

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

/* Убираем стандартный маркер Chrome */
details summary::-webkit-details-marker { display: none
}
/* Убираем стандартный маркер Firefox */
details > summary { list-style: 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

Повторим предыдущий пример, немного изменим внешний вид <summary> и получим аккордеон:

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

Popover Component

Эта реализация очень похожа на Collapse Component, с той разницей что содержимое <details> имеет абсолютное позиционирование и перекрывает контент.

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

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

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

// По клику на тело документа
document.body.onclick = () => { // Найти все открытые <details> document.body.querySelectorAll('details.dropdown[open]') // И закрыть каждый из них .forEach(e => e.open = false)
}

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

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

Ссылки

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

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть