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>

Code

添加 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>

Code

添加 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>

Code

Attribute	Property	Type	Default
`vertical`	`vertical`	`boolean`	`false`
是否为垂直分割线
`inset`	`inset`	`boolean`	`false`
是否进行左侧缩进
`middle`	`middle`	`boolean`	`false`
是否进行左右两侧缩进

Dialog

Up Next

Dropdown