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>

Examples

Vertical Divider

To display the divider vertically, add the vertical attribute.

Left Inset

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.

Middle Inset

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

API

Properties

AttributePropertyReflectTypeDefault
verticalverticalbooleanfalse

Displays the divider vertically.

insetinsetbooleanfalse

Adds an inset from the left side.

middlemiddlebooleanfalse

Adds insets from both the left and right sides.

MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Styles
Dark Theme Dynamic Theme Typography Design Tokens
Frameworks
React Vue Angular
Components
Button ButtonIcon Fab SegmentedButton Chip Card Checkbox Radio Switch Slider RangeSlider List Collapse Tabs Dropdown Menu Select TextField LinearProgress CircularProgress Dialog Divider Avatar Badge Icon Tooltip Snackbar NavigationBar NavigationDrawer NavigationRail BottomAppBar TopAppBar Layout
Functions
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
Libraries
@mdui/icons