El nuevo mdui 2 basado en Material Design 3 y Web Components ya está disponible. Consulta la documentación de mdui 2 ahora.

Separador

Los separadores se utilizan para gestionar y separar el contenido en listas y diseños de página, con el fin de aportar una mejor claridad visual y sensación de espacio.

Modo de uso

Los separadores están implementados en CSS puro, así que basta con escribir el código HTML para que funcionen.

Color

Separador oscuro, para fondos claros
Separador claro, para fondos oscuros
Separador con color ajustable automáticamente, que cambia según el tema de la página entre oscuro y claro

Lectura relacionada

Pautas de diseño de Material Design: componentes - Divisores

Estilo

Separadores de ancho completo

Los separadores de ancho completo ocupan el 100% del ancho. Los nombres de clase disponibles incluyen:

mdui-divider: oscuro en el tema predeterminado y claro en el tema oscuro.
mdui-divider-light: separador claro para fondos oscuros.
mdui-divider-dark: separador oscuro para fondos claros.

Ejemplo

<div class="mdui-divider"></div>

Separadores con sangría

Los separadores con sangría tienen un margen de 72px desde la izquierda y se usan con frecuencia en listas con avatares o iconos. Los nombres de clase disponibles incluyen:

mdui-divider-inset: oscuro en el tema predeterminado y claro en el tema oscuro.
mdui-divider-inset-light: separador claro para fondos oscuros.
mdui-divider-inset-dark: separador oscuro para fondos claros.

Ejemplo

<div class="mdui-divider-inset"></div>

Lista de clases CSS

Nombre de clase	Descripción
`.mdui-divider`	Define un separador. Oscuro en el tema predeterminado y claro en el tema oscuro.
`.mdui-divider-light`	Define un separador claro para fondos oscuros.
`.mdui-divider-dark`	Define un separador oscuro para fondos claros.
`.mdui-divider-inset`	Define un separador con sangría. Oscuro en el tema predeterminado y claro en el tema oscuro.
`.mdui-divider-inset-light`	Define un separador claro con sangría para fondos oscuros.
`.mdui-divider-inset-dark`	Define un separador oscuro con sangría para fondos claros.

Select

Panel de expansión