The dividing line is used to manage and separate the content in the list and page layout, so that the content can generate a better visual effect and sense of space.
Call method
The divider is written in pure CSS, and only needs to write HTML code to take effect.
color
- Dark divider for light background
- Light color divider for dark background
- Automatically adjust the color of the dividing line, it will be automatically adjusted to dark or light according to the theme of the page
Equal screen width divider
The equal screen width divider will occupy 100% of the width. The class names that can be used include:
mdui-divider：It is dark in the default theme, and light in the dark theme.mdui-divider-light：Light-colored dividing lines, used on dark backgrounds.mdui-divider-dark：The dark dividing line is used on a light background.
Example
<div class="mdui-divider"></div>
Concave divider
The concave dividing line is 72px from the left, and is often used in lists with avatars or icons. The class names that can be used include:
mdui-divider-inset：It is dark in the default theme, and light in the dark theme.mdui-divider-inset-light：Light-colored dividing lines, used on dark backgrounds.mdui-divider-inset-dark：The dark dividing line is used on a light background.
Example
<div class="mdui-divider-inset"></div>
List of CSS class names
| Class name |
effect |
.mdui-divider |
Define the dividing line. It is dark in the default theme, and light in the dark theme. |
.mdui-divider-light |
Define light-colored dividers for dark backgrounds. |
.mdui-divider-dark |
Define a dark divider for light backgrounds. |
.mdui-divider-inset |
Define the indented divider line. It is dark in the default theme, and light in the dark theme. |
.mdui-divider-inset-light |
Define a light-colored inner concave divider for dark backgrounds. |
.mdui-divider-inset-dark |
Define a dark inner concave divider for light backgrounds. |