Layout
Crea diseños rápida y fácilmente con las 24 columnas básicas.
TIP
El componente utiliza el diseño flex por defecto, no es necesario establecer type="flex" manualmente.
Tenga en cuenta que el contenedor padre debe evitar el uso de estilos relacionados con inline, lo cual hará que el componente no llene su ancho.
Layout básico
Crea un diseño básico de cuadrícula con columnas.
Con row y col, puede fácilmente manipular el layout usando el atributo span.
Espaciado de columnas
El espaciado de columnas está soportado.
Row provee el atributo gutter para especificar el espacio entre columnas y su valor por defecto es 0.
Layout híbrido
Forme un diseño híbrido más complejo combinando las columnas básicas 1/24.
Desplazamiento de columnas
Puede especificar el desplazamiento de las columnas.
Puede especificar el número del desplazamiento de la columna estableciendo el valor en el atributo offset de Col.
Alineamiento
Por defecto se usa el diseño flex para hacer una alineación flexible de las columnas.
Puedes definir el diseño de elementos secundarios configurando el atributo justify con start, center, end, space-between (espacio entremedio), space-around (espacio alrededor) o space-evenly (espacio uniforme).
Diseño responsive
Tomando el ejemplo de Bootstrap responsive design, existen 5 breakpoints: xs, sm, md, lg y xl.
Clases útiles para ocultar elementos
Adicionalmente, Element Plus provee una serie de clases para ocultar elementos dadas ciertas condiciones. Estas clases pueden ser añadidas a cualquier elemento DOM o componentes personalizados. Necesita importar el siguiente archivo CSS para usar estas clases:
import 'element-plus/theme-chalk/display.css'Las clases son:
hidden-xs-only- oculto en viewports extra pequeños solamentehidden-sm-only- oculto en viewports pequeños solamentehidden-sm-and-down- oculto en viewports pequeños y menoreshidden-sm-and-up- oculto en viewports pequeños y superioreshidden-md-only- oculto en viewports medios solamentehidden-md-and-down- oculto en viewports medios y menoreshidden-md-and-up- oculto en viewports medios y mayoreshidden-lg-only- ocultos en viewports grandes solamentehidden-lg-and-down- ocultos en viewports grandes y menoreshidden-lg-and-up- ocultos en viewports grandes y superioreshidden-xl-only- oculto en viewports extra grandes solamente
API de fila
Atributos de fila
| Nombre | Descripción | Tipo | Por defecto |
|---|---|---|---|
| gutter | espaciado en cuadrícula | number | 0 |
| justify | alineación horizontal del layout flex | enum | start |
| align | alineación vertical del layout flex | enum | — |
| tag | etiqueta de elemento personalizada | string | div |
Slots de Fila
| Nombre | Descripción | Subtags |
|---|---|---|
| default | personaliza el contenido por defecto | Col |
API de columna
Atributos de columna
| Nombre | Descripción | Tipo | Por defecto |
|---|---|---|---|
| span | número de columnas que abarca la cuadrícula | number | 24 |
| offset | número de espacio en el lado izquierdo de la cuadrícula | number | 0 |
| push | número de columnas que la cuadrícula se mueve a la derecha | number | 0 |
| pull | número de columnas que se mueve a la izquierda | number | 0 |
| xs | <768px Columnas responsive u objeto con propiedades de la columna | number / object | — |
| sm | ≥768px Columnas responsive u objeto con propiedades de la columna | number / object | — |
| md | ≥992px Columnas responsive u objeto con propiedades de la columna | number / object | — |
| lg | ≥1200px Columnas responsive u objeto con propiedades de la columna | number / object | — |
| xl | ≥1920px Columnas responsive u objeto con propiedades de la columna | number / object | — |
| tag | etiqueta de elemento personalizada | string | div |
Slots de Columna
| Nombre | Descripción |
|---|---|
| default | personaliza el contenido por defecto |