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

Asistentes

Margen

Esta serie de clases puede añadir margin y padding a los elementos. Todos los valores son múltiplos de 8 px por defecto.

El formato de las clases es: .mdui-{propiedad}-{dirección}-{tamaño}

Propiedad:

  • m - establece margin
  • p - establece padding

Dirección:

  • t - establece margin-top o padding-top
  • b - establece margin-bottom o padding-bottom
  • l - establece margin-left o padding-left
  • r - establece margin-right o padding-right
  • x - establece margin-left margin-right o padding-left padding-right
  • y - establece margin-top margin-bottom o padding-top padding-bottom
  • a - establece margin o padding

Tamaño:

  • 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;
}

Flotación rápida

  • .mdui-float-left hace que el elemento flote hacia la izquierda
  • .mdui-float-right hace que el elemento flote hacia la derecha
Ejemplo
<div class="mdui-float-left">float left</div>
<div class="mdui-float-right">float right</div>

Centrado horizontal

Añade la clase .mdui-center a cualquier elemento para centrarlo horizontalmente.

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

Centrado vertical

Añade la clase .mdui-valign a cualquier elemento para centrar verticalmente los elementos secundarios de ese elemento.

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

Alineación horizontal del texto

  • .mdui-text-left Alinear el texto a la izquierda.
  • .mdui-text-center Centrar el texto.
  • .mdui-text-right Alinear el texto a la derecha.
Ejemplo
<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>

Transformación de mayúsculas y minúsculas del texto

  • .mdui-text-lowercase Convertir el texto a minúsculas.
  • .mdui-text-uppercase Convertir el texto a mayúsculas.
  • .mdui-text-capitalize Convertir el texto para que cada palabra comience con mayúscula.
Ejemplo
<p class="mdui-text-lowercase">Lowercased text.</p>
<p class="mdui-text-uppercase">Uppercased text.</p>
<p class="mdui-text-capitalize">Capitalized text.</p>

Truncamiento automático del texto

.mdui-text-truncate Se puede truncar el texto automáticamente cuando supera el límite y reemplazarlo por puntos suspensivos.

Ejemplo
<p class="mdui-text-truncate" style="max-width: 200px;">Este es un texto extremadamente largo, muy largo, muy largo, muy largo, muy largo, muy largo, muy largo, muy largo.</p>

Borrar flotantes

Añadir la clase .mdui-clearfix al elemento padre para borrar los flotantes.

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

Ocultar contenido

  • La clase .mdui-hidden se usa para ocultar un elemento, equivalente a aplicar el estilo display: none;; el elemento oculto no ocupa espacio en la página.
  • La clase .mdui-invisible se usa para hacer un elemento invisible, pero sigue ocupando espacio en la página, equivalente a aplicar el estilo visibility: hidden;.

Herramientas responsive

Estas clases se implementan mediante consultas de medios para ocultar el contenido según el dispositivo. Incluyen:

  • .mdui-hidden-*: oculta en dispositivos de un ancho determinado.
  • .mdui-hidden-*-up: oculta en dispositivos de un ancho determinado o mayor.
  • .mdui-hidden-*-down: oculta en dispositivos de un ancho determinado o menor.
Pantallas muy pequeñas
<600px
Pantallas pequeñas
>=600px - <1024px
Pantallas medianas
>=1024px - <1440px
Pantallas grandes
>=1440px - <1920px
Pantallas muy grandes
>=1920px
.mdui-hidden-xsVisibleVisibleVisibleVisible
.mdui-hidden-smVisibleVisibleVisibleVisible
.mdui-hidden-mdVisibleVisibleVisibleVisible
.mdui-hidden-lgVisibleVisibleVisibleVisible
.mdui-hidden-xlVisibleVisibleVisibleVisible
.mdui-hidden-xs-downVisibleVisibleVisibleVisible
.mdui-hidden-sm-downVisibleVisibleVisible
.mdui-hidden-md-downVisibleVisible
.mdui-hidden-lg-downVisible
.mdui-hidden-xl-down
.mdui-hidden-xs-up
.mdui-hidden-sm-upVisible
.mdui-hidden-md-upVisibleVisible
.mdui-hidden-lg-upVisibleVisibleVisible
.mdui-hidden-xl-upVisibleVisibleVisibleVisible

Ajusta el tamaño de la ventana del navegador o visualiza los ejemplos en distintos dispositivos. La parte oscura indica que el contenido es visible en la ventana actual del 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