Layout

Son componentes que permiten organizar otros componentes en pantalla. No tiene ningun otro efecto visible más que el de organizar componentes.

Column

Este componente permite organizar los componentes que se coloquen dentro de el, en una columna.

En este ejemplo, se ilustra el componente Column con fondo gris, pero toma en cuenta que en realidad este componente no tiene nigun color de fondo.

Un componente

Otro componente

Cualquier componente

import { Column } from "firefly-components/layout";

<Column>
    Componentes aqui...
</Column>

`width`	Permite especificar el ancho de la columna. Esta propiedad se comporta igual que la propiedad `width` de CSS. Si no se especifica, su valor por defecto es `auto`.
`height`	Permite especificar la altura de la columna. Esta propiedad se comporta igual que la propiedad `width` de CSS. Si no se especifica, su valor por defecto es `auto`.
`margin`	Permite aplicar `margin` alrededor de la columna. Esta propiedad se comporta igual que la propiedad `margin` de CSS. Si no se especifica, su valor por defecto es `0`.
`padding`	Permite aplicar `padding` a la columna. Esta propiedad se comporta igual que la propiedad `padding` de CSS. Si no se especifica, su valor por defecto es `0`.
`justifyContent`	Permite justificar el contenido de la columna, dado que esta es un contenedor Flex. Esta propiedad se comporta igual que la propiedad `justify-content` de CSS.
`alignItems`	Permite alinear los items de la columna. Esta propiedad se comporta igual que la propiedad `align-items` de CSS.
`gap`	Permite ajustar la separación entre items de la columna. Esta propiedad se comporta igual que la propiedad `gap` de CSS.
`textAlign`	Permite alinear el texto contenido en la columna. Esta propiedad se comporta igual que la propiedad `text-align` de CSS.

Este componente permite organizar los componentes que se coloquen dentro de el, en una fila.

En este ejemplo, se ilustra el componente Row con fondo gris, pero toma en cuenta que en realidad este componente no tiene nigun color de fondo.

Un componente

Otro componente

Cualquier componente

Otro más

import { Row } from "firefly-components/layout";
                    
<Row>
    Componentes aqui...
</Row>

`width`	Permite especificar el ancho de la fila. Esta propiedad se comporta igual que la propiedad `width` de CSS. Si no se especifica, su valor por defecto es `auto`.
`height`	Permite especificar la altura de la fila. Esta propiedad se comporta igual que la propiedad `width` de CSS. Si no se especifica, su valor por defecto es `auto`.
`margin`	Permite aplicar `margin` alrededor de la fila. Esta propiedad se comporta igual que la propiedad `margin` de CSS. Si no se especifica, su valor por defecto es `0`.
`padding`	Permite aplicar `padding` a la fila. Esta propiedad se comporta igual que la propiedad `padding` de CSS. Si no se especifica, su valor por defecto es `0`.
`justifyContent`	Permite justificar el contenido de la fila, dado que esta es un contenedor Flex. Esta propiedad se comporta igual que la propiedad `justify-content` de CSS.
`alignItems`	Permite alinear los items de la fila. Esta propiedad se comporta igual que la propiedad `align-items` de CSS.
`gap`	Permite ajustar la separación entre items de la fila. Esta propiedad se comporta igual que la propiedad `gap` de CSS.
`textAlign`	Permite alinear el texto contenido en la fila. Esta propiedad se comporta igual que la propiedad `text-align` de CSS.