DividerРазделитель

Разделитель — это тонкая линия, используемая для группировки контента в списках и контейнерах.

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

При необходимости импортируйте компонент:

import 'mdui/components/divider.js';

При необходимости импортируйте типы TypeScript:

import type { Divider } from 'mdui/components/divider.js';

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

<mdui-divider></mdui-divider>

Добавьте атрибут vertical, чтобы разделитель отображался вертикально.

<div style="height: 80px;padding: 0 20px">
  <mdui-divider vertical></mdui-divider>
</div>

Исходный код

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

Item 1

Item 2

<mdui-list>
  <mdui-list-item>Item 1</mdui-list-item>
  <mdui-divider inset></mdui-divider>
  <mdui-list-item>Item 2</mdui-list-item>
</mdui-list>

Исходный код

Добавьте атрибут middle, чтобы добавить отступы с обеих сторон разделителя.

Item 1

Item 2

<mdui-list>
  <mdui-list-item>Item 1</mdui-list-item>
  <mdui-divider middle></mdui-divider>
  <mdui-list-item>Item 2</mdui-list-item>
</mdui-list>

Исходный код

Атрибут	Свойство	Тип	По умолчанию
`vertical`	`vertical`	`boolean`	`false`
Определяет, является ли разделитель вертикальным.
`inset`	`inset`	`boolean`	`false`
Определяет, добавлять ли отступ слева.
`middle`	`middle`	`boolean`	`false`
Определяет, добавлять ли отступы слева и справа.

Предыдущая глава

Dialog Диалоговое окно

Следующая глава

Dropdown Выпадающее меню