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

Classes auxiliares

Espaçamento

Esta série de classes utilitárias pode adicionar margin e padding aos elementos; os valores padrão são múltiplos de 8px.

O formato do nome da classe é: .mdui-{propriedade}-{direção}-{tamanho}

Propriedade:

  • m - define margin
  • p - define padding

Direção:

  • t - define margin-top ou padding-top
  • b - define margin-bottom ou padding-bottom
  • l - define margin-left ou padding-left
  • r - define margin-right ou padding-right
  • x - define margin-left margin-right ou padding-left padding-right
  • y - define margin-top margin-bottom ou padding-top padding-bottom
  • a - define margin ou padding em todas as direções

Tamanho:

  • 0 - 0px
  • 1 - 8px
  • 2 - 16px
  • 3 - 24px
  • 4 - 32px
  • 5 - 40px
.mdui-m-t-0 {
  margin-top: 0 !important;
}

.mdui-m-l-1 {
  margin-left: 8px !important;
}

.mdui-p-x-2 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.mdui-p-a-5 {
  padding: 40px !important;
}

Flutuação rápida

  • .mdui-float-left faz o elemento flutuar para a esquerda
  • .mdui-float-right faz o elemento flutuar para a direita
code
Exemplo
<div class="mdui-float-left">float left</div>
<div class="mdui-float-right">float right</div>

Centralização horizontal

Adicione a classe .mdui-center a qualquer elemento para centralizá-lo horizontalmente.

code
Exemplo
<div class="mdui-center" style="width: 200px">mdui-center</div>

Centralização vertical

Adicione a classe .mdui-valign a qualquer elemento para centralizar verticalmente seus elementos filhos.

code
Exemplo
<div class="mdui-valign">
  <p class="mdui-center">This should be vertically aligned</p>
</div>

Alinhamento horizontal

  • .mdui-text-left Alinha o texto à esquerda.
  • .mdui-text-center Alinha o texto ao centro.
  • .mdui-text-right Alinha o texto à direita.
code
Exemplo
<div class="mdui-text-left">This should be left aligned</div>
<div class="mdui-text-center">This should be center aligned</div>
<div class="mdui-text-right">This should be right aligned</div>

Transformação de maiúsculas e minúsculas

  • .mdui-text-lowercase Transforma o texto em minúsculas.
  • .mdui-text-uppercase Transforma o texto em maiúsculas.
  • .mdui-text-capitalize Transforma a primeira letra de cada palavra em maiúscula (Capitalize).
code
Exemplo
<p class="mdui-text-lowercase">Lowercased text.</p>
<p class="mdui-text-uppercase">Uppercased text.</p>
<p class="mdui-text-capitalize">Capitalized text.</p>

Truncamento automático de texto

.mdui-text-truncate Pode truncar automaticamente o texto quando ele excede o limite, substituindo-o por reticências.

code
Exemplo
<p class="mdui-text-truncate" style="max-width: 200px;">Este é um texto muito, muito, muito, muito, muito, muito, muito, muito, muito, muito, muito longo.</p>

Limpar flutuação (clearfix)

Adicione a classe .mdui-clearfix ao elemento pai para limpar o efeito de flutuação.

code
Exemplo
<div class="mdui-clearfix">
  <div class="mdui-float-left">mdui-float-left</div>
  <div class="mdui-float-right">mdui-float-right</div>
</div>

Ocultar conteúdo

  • A classe .mdui-hidden é usada para ocultar elementos, equivalente a adicionar o estilo display: none;. O elemento oculto não ocupa espaço na página.
  • A classe .mdui-invisible é usada para tornar o elemento invisível, mas ele ainda ocupará espaço na página, equivalente a adicionar o estilo visibility: hidden;.

Utilitários responsivos

Essas classes utilitárias utilizam media queries para ocultar conteúdo conforme o dispositivo. Elas incluem:

  • .mdui-hidden-*: Oculta em dispositivos com a largura especificada.
  • .mdui-hidden-*-up: Oculta em dispositivos com a largura especificada ou superior.
  • .mdui-hidden-*-down: Oculta em dispositivos com a largura especificada ou inferior.
Tela extra pequena
<600px		Tela pequena
>=600px - <1024px		Tela média
>=1024px - <1440px		Tela grande
>=1440px - <1920px		Tela extra grande
>=1920px
.mdui-hidden-xsVisívelVisívelVisívelVisível
.mdui-hidden-smVisívelVisívelVisívelVisível
.mdui-hidden-mdVisívelVisívelVisívelVisível
.mdui-hidden-lgVisívelVisívelVisívelVisível
.mdui-hidden-xlVisívelVisívelVisívelVisível
.mdui-hidden-xs-downVisívelVisívelVisívelVisível
.mdui-hidden-sm-downVisívelVisívelVisível
.mdui-hidden-md-downVisívelVisível
.mdui-hidden-lg-downVisível
.mdui-hidden-xl-down
.mdui-hidden-xs-up
.mdui-hidden-sm-upVisível
.mdui-hidden-md-upVisívelVisível
.mdui-hidden-lg-upVisívelVisívelVisível
.mdui-hidden-xl-upVisívelVisívelVisívelVisível

Redimensione a janela do navegador ou visualize os exemplos abaixo em diferentes dispositivos. As partes escuras indicam o que é visível na janela atual do navegador.

✔ .mdui-hidden-xs
✔ .mdui-hidden-sm
✔ .mdui-hidden-md
✔ .mdui-hidden-lg
✔ .mdui-hidden-xl
✔ .mdui-hidden-xs-down
✔ .mdui-hidden-sm-down
✔ .mdui-hidden-md-down
✔ .mdui-hidden-lg-down
✔ .mdui-hidden-xl-down
✔ .mdui-hidden-xs-up
✔ .mdui-hidden-sm-up
✔ .mdui-hidden-md-up
✔ .mdui-hidden-lg-up
✔ .mdui-hidden-xl-up
arrow_backPrevious
Mídia
arrow_forwardNext
Sombra