Divider

A divider is a thin line that groups content in lists and layouts.

Usage

Import the component:

import 'mdui/components/divider.js';

Import the TypeScript type:

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

Example:

<mdui-divider></mdui-divider>

To display the divider vertically, add the vertical attribute.

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

Code

To inset the divider from the left, add the inset attribute. This is typically used in lists to align the divider with the text on the left.

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

To inset the divider from both sides, add the middle attribute.

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`
Displays the divider vertically.
`inset`	`inset`	`boolean`	`false`
Adds an inset from the left side.
`middle`	`middle`	`boolean`	`false`
Adds insets from both the left and right sides.

Dialog

Up Next

Avatar