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

Centrado horizontal

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

Centrado vertical

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

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.

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.

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.

Borrar flotantes

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

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.

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.