near_me
Introdução
keyboard_arrow_downlayers
Estilo
keyboard_arrow_downwidgets
Componentes
keyboard_arrow_downEfeito rippleBotãoBotão de ação flutuanteCampo de seleçãoDivisorPainel colapsávelCampo de textoControles de seleçãoSliderListaControles de listaLista em gradeAbaBarra de ferramentasBarra de aplicativoGaveta de navegaçãoBarra de navegação inferiorCardChipTooltipSnackbarTabelaDiálogoMenuBarra de progresso
local_mall
Recursos
keyboard_arrow_downO novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.
Divisor
Os Divisores são usados para organizar e separar conteúdos em listas e layouts de página, proporcionando melhor efeito visual e senso de espaço.
Como usar
O divisor é escrito usando CSS puro, e só precisa do código HTML para entrar em vigor.
Cor
- Divisor escuro, para fundos claros
- Divisor claro, para fundos escuros
- Divisor com ajuste automático de cor, muda automaticamente para escuro ou claro conforme o tema da página
Leitura relacionada
Diretrizes de design do Material Design: Componentes - Divisores
Estilo
Divisor de largura total
Divisores de largura total ocupam 100% da largura. Classes disponíveis:
mdui-divider: Escuro no tema padrão e claro no tema escuro.mdui-divider-light: Divisor claro, usado em fundos escuros.mdui-divider-dark: Divisor escuro, usado em fundos claros.
Divisor inset
Divisores inset possuem um recuo de 72px à esquerda, geralmente usados em listas com avatares ou ícones. Classes disponíveis:
mdui-divider-inset: Escuro no tema padrão e claro no tema escuro.mdui-divider-inset-light: Divisor claro inset, usado em fundos escuros.mdui-divider-inset-dark: Divisor escuro inset, usado em fundos claros.
Lista de classes CSS
| Nome da classe | Descrição |
|---|---|
.mdui-divider | Define um divisor. Escuro no tema padrão e claro no tema escuro. |
.mdui-divider-light | Define um divisor claro para fundos escuros. |
.mdui-divider-dark | Define um divisor escuro para fundos claros. |
.mdui-divider-inset | Define um divisor inset. Escuro no tema padrão e claro no tema escuro. |
.mdui-divider-inset-light | Define um divisor claro inset para fundos escuros. |
.mdui-divider-inset-dark | Define um divisor escuro inset para fundos claros. |