Разделитель

Разделители используются для управления и разделения контента в списках и макетах страниц, чтобы обеспечить лучшую визуальную ясность и ощущение пространства.

Использование

Разделители реализованы на чистом CSS, поэтому для их работы достаточно написать HTML-код.

Цвет

Тёмный разделитель для светлых фонов
Светлый разделитель для тёмных фонов
Разделитель с автоматической настройкой цвета, который подстраивается под тему страницы

Связанное чтение

Стиль

Разделители во всю ширину

Разделители во всю ширину занимают 100% ширины. Доступные имена классов:

mdui-divider: тёмный в теме по умолчанию, светлый в тёмной теме.
mdui-divider-light: светлый разделитель для использования на тёмном фоне.
mdui-divider-dark: тёмный разделитель для использования на светлом фоне.

Пример

<div class="mdui-divider"></div>

Внутренние разделители

Внутренние разделители имеют отступ 72px слева и часто используются в списках с аватарами или иконками. Доступные имена классов:

mdui-divider-inset: тёмный в теме по умолчанию, светлый в тёмной теме.
mdui-divider-inset-light: светлый разделитель с отступом для использования на тёмном фоне.
mdui-divider-inset-dark: тёмный разделитель с отступом для использования на светлом фоне.

Пример

<div class="mdui-divider-inset"></div>

Список CSS-классов

Имя класса	Описание
`.mdui-divider`	Определяет разделитель. Тёмный в теме по умолчанию, светлый в тёмной теме.
`.mdui-divider-light`	Определяет светлый разделитель для использования на тёмном фоне.
`.mdui-divider-dark`	Определяет тёмный разделитель для использования на светлом фоне.
`.mdui-divider-inset`	Определяет внутренний разделитель. Тёмный в теме по умолчанию, светлый в тёмной теме.
`.mdui-divider-inset-light`	Определяет светлый внутренний разделитель для использования на тёмном фоне.
`.mdui-divider-inset-dark`	Определяет тёмный внутренний разделитель для использования на светлом фоне.

Выпадающий список

Раскрывающаяся панель