1.1.0 • Published 5 months ago
@atmgrupomaggioli/iris-col v1.1.0
iris-col
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
base (required) | base | Tamaño base de la columna (aplicado entre móviles y pantallas md) y superiores. En pantallas móviles, la columna siempre ocupará el 100% del ancho. Entre móviles y md, el valor de base se utiliza para determinar el ancho proporcional de la columna. Breakpoint: - base (small): 576px Ejemplo: - base="6" → En móviles ocupará el 100%, pero entre móviles y md ocupará el 50% del ancho. - base="4" → En móviles ocupará el 100%, pero entre móviles y md ocupará el 33.33% del ancho. Valores permitidos: Solo entre 1 y 12. Si se establece fill, aplica la clase "iris-col-auto". Esto permitirá que la columna ocupe automáticamente el ancho disponible. Si se establece auto, la columna ocupará el tamaño del hijo. Esto significa que la columna ajustará su ancho automáticamente al contenido que tiene dentro, en lugar de ocupar un ancho fijo o proporcional basado en las propiedades de tamaño. Si base es 'auto' o 'fill', no usamos md, lg, xl. | "1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" \| "auto" \| "fill" | undefined |
lg | lg | Tamaño de la columna en pantallas grandes (lg). Si se define lg, sobrescribirá el valor de md en pantallas grandes (lg) y superiores. Valores permitidos: Solo entre 1 y 12. Breakpoint: - lg (large): 1025px | "1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" | undefined |
md | md | Tamaño de la columna en pantallas medianas (md). Si se define md, sobrescribirá el valor de base en pantallas medianas (md) y superiores. Valores permitidos: Solo entre 1 y 12. Breakpoint: - md (medium): 768px | "1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" | undefined |
xl | xl | Tamaño de la columna en pantallas extra grandes (xl). Si se define xl, sobrescribirá el valor de lg en pantallas extra grandes (xl) y superiores. Valores permitidos: Solo entre 1 y 12. Breakpoint: - xl (extra large): 1200px | "1" \| "10" \| "11" \| "12" \| "2" \| "3" \| "4" \| "5" \| "6" \| "7" \| "8" \| "9" | undefined |
Built with StencilJS