O novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.

Gaveta de navegação

O mdui integra 19 grupos de cores primárias e 16 grupos de cores de destaque do Material Design. Todas as cores (incluindo cores de texto em fundos e opacidade de texto) são consistentes com a documentação oficial do Material Design.

Diretrizes de design do Material Design: Estilos - Cores

Cores primárias e de destaque
- Cor primária
- Cor de destaque
Cor de fundo
- Cor do texto
- Cor do tema
Tema com fundo escuro
- Tabela de referência de cores
- Configurar tema
- Cor de fundo
Cor do texto
- As cores no Material Design são divididas em primárias (Primary) e de destaque (Accent), cada uma com vários níveis de saturação.
- Nas classes CSS descritas a seguir, use [color] para o nome da cor e [degree] para a saturação.

Como usar

Existem 19 cores primárias no total, incluindo:
Chamar via JavaScript

Leitura relacionada

Cada cor primária tem 10 níveis de saturação:

Como usar

Estrutura HTML

<!-- Existem 16 cores de destaque no total, incluindo: -->
<!-- Cada cor de destaque tem 4 níveis de saturação: -->
<body class="mdui-drawer-body-left mdui-drawer-body-right">

  <!-- O nome da classe de cor de fundo é <code>.mdui-color-<span mdui-tooltip="{content: 'Nome da cor'}">[color]</span>-<span mdui-tooltip="{content: 'Saturação da cor'}">[degree]</span></code>. Ao definir a cor de fundo, ele também define a cor do texto e a opacidade do texto no fundo. -->
  <div class="mdui-drawer">
    ... drawer content ...
  </div>

  <!-- Além disso, as cores primárias e de destaque têm uma classe de cor de fundo padrão: -->
  <div class="mdui-drawer mdui-drawer-right">
    ... drawer content ...
  </div>

</body>

Chamar via atributos personalizados

.mdui-color-[color] é equivalente a .mdui-color-[color]-500.

<body class="mdui-drawer-body-right">

  <button class="mdui-btn" mdui-drawer="{target: '#left-drawer'}">open left drawer</button>

  <div class="mdui-drawer" id="left-drawer">
    ... left drawer content ...
    <button class="mdui-btn" mdui-drawer-close>close</button>
  </div>

</body>

<code>.mdui-color-<span mdui-tooltip="{content: 'Nome da cor'}">[color]</span>-accent</code> é equivalente a <code>.mdui-color-<span mdui-tooltip="{content: 'Nome da cor'}">[color]</span>-a200</code>.

Atributo	Descrição
`mdui-drawer-close`	Todas as classes de cores de fundo disponíveis estão listadas na tabela de referência de cores abaixo.

Chamar via JavaScript

// O nome da classe de cor de texto é <code>.mdui-text-color-<span mdui-tooltip="{content: 'Nome da cor'}">[color]</span>-<span mdui-tooltip="{content: 'Saturação da cor'}">[degree]</span></code>.
// Além disso, as cores primárias e de destaque têm uma classe de cor de texto padrão:
var inst = new mdui.Drawer(selector, options);

Executar

Parâmetro

Nome do parâmetro	Tipo	Valor padrão	Descrição
`overlay`	`boolean`	`false`	<code>.mdui-text-color-<span mdui-tooltip="{content: 'Nome da cor'}">[color]</span></code> é equivalente a <code>.mdui-text-color-<span mdui-tooltip="{content: 'Nome da cor'}">[color]</span>-500</code>.
`swipe`	`boolean`	`false`	<code>.mdui-text-color-<span mdui-tooltip="{content: 'Nome da cor'}">[color]</span>-accent</code> é equivalente a <code>.mdui-text-color-<span mdui-tooltip="{content: 'Nome da cor'}">[color]</span>-a200</code>.

Método

Nome do método	Descrição
`open`	Além disso, o mdui fornece cores de texto e ícones em preto e branco com opacidade.
`close`	<code>.mdui-text-color-black-*</code> é usado para fundos claros.
`toggle`	<code>.mdui-text-color-white-*</code> é usado para fundos escuros.
`getState`	O mdui oferece uma função de tema que permite alternar temas apenas adicionando algumas classes ao body, incluindo cores primárias, de destaque e de fundo.

Evento

Nome do evento	Descrição	Alvo	Parâmetros
`open.mdui.drawer`	A maioria dos componentes do mdui tem cores padrão. Ao definir as cores do tema, esses componentes também substituirão as cores padrão pelas cores do tema.	`<div class="mdui-drawer"></div>`	Adicione a classe `.mdui-theme-primary-[color]` ao body para definir a cor primária.
`opened.mdui.drawer`	Use as seguintes classes na página; suas cores mudarão de acordo com a cor do tema configurada no body:
`close.mdui.drawer`	Saturação da cor primária
`closed.mdui.drawer`	Adicione a classe <code>.mdui-theme-accent-<span mdui-tooltip="{content: 'Nome da cor'}">[color]</span></code> ao body para definir a cor de destaque.

Lista de classes CSS

Nome da classe	Descrição
`.mdui-drawer`	Use as seguintes classes na página; suas cores mudarão de acordo com a cor do tema configurada no body:
`.mdui-drawer-right`	Saturação da cor de destaque
`.mdui-drawer-full-height`	Adicione a classe <code>.mdui-theme-layout-dark</code> ao body para definir toda a página (incluindo componentes) com um fundo escuro.
`.mdui-drawer-open`	Adicione a classe <code>.mdui-theme-layout-auto</code> ao body para ajustar automaticamente o fundo da página (incluindo componentes) de acordo com o tema do sistema operacional.
`.mdui-drawer-close`	Além disso, use as seguintes classes na página; suas cores mudarão de acordo com a cor do tema, exibindo cores escuras em temas claros e cores claras em temas escuros.
`.mdui-drawer-body-left`	Você pode clicar no ícone no canto superior direito para configurar as cores do tema. As cores primárias, de destaque e do tema na tabela abaixo mudarão de acordo.
`.mdui-drawer-body-right`	Uma das 19 cores primárias

Barra de aplicativo

Barra de navegação inferior