Cards

Es un componente que permite agrupar sub-componentes que muestran información. Algunos tipos de Card permiten la interacción del usuario enlazándolo a información más detallada o desatando distintos eventos.

Card

Una Card simple. Permite solo mostrar información.

Card title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis veritatis officia aspernatur.

implementación

import { Card } from "firefly-components/cards";

<Card>
    Contenido  aquí...
</Card>

Props

`padding`	Permite modificar la propiedad `padding` de la Card. Esta propiedad se comporta igual que la propiedad `padding` de CSS. Si no se especifica, su valor por defecto es `2rem`.
`width`	Permite modificar la propiedad `width` de la Card. Esta propiedad se comporta igual que la propiedad `width` de CSS. Si no se especifica, su valor por defecto es `auto`.
`corner`	Permite modificar la propiedad `border-radius` de la Card. Esta propiedad se comporta igual que la propiedad `border-radius` de CSS. Si no se especifica, su valor por defecto es `12px`.

Click Card

Una Card que permite ejecutar una función cuando se hace clic sobre la misma.

Card title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis veritatis officia aspernatur.

implementación

import { ClickCard } from "firefly-components/cards";

<ClickCard handleClick={algunaFuncion} >
    Contenido  aquí...
</ClickCard>

Props

`padding`	Permite modificar la propiedad `padding` de la Card. Esta propiedad se comporta igual que la propiedad `padding` de CSS. Si no se especifica, su valor por defecto es `2rem`.
`width`	Permite modificar la propiedad `width` de la Card. Esta propiedad se comporta igual que la propiedad `width` de CSS. Si no se especifica, su valor por defecto es `auto`.
`corner`	Permite modificar la propiedad `border-radius` de la Card. Esta propiedad se comporta igual que la propiedad `border-radius` de CSS. Si no se especifica, su valor por defecto es `12px`.
`handleClick`	Recibe una función que será ejecutada cuando se haga clic en la Card.
`disabled`	Recibe un valor booleano que permite deshabilitar la Card dejandola sin la capacidad de recibir clics del usuario. Si no se especifica, su valor por defecto es `false`.

Border Card

Permite ejecutar una función cuando se hace clic sobre la misma y ademas permite agregar borde alrededor de la misma con la prop active para indicar que la Card ha sido seleccionada por el usuario.

Card title

Haz clic sobre la Card para ver el efecto de la propiedad active.

implementación

import { BorderCard } from "firefly-components/cards";

<BorderCard handleClick={algunaFuncion}>
    Contenido  aquí...
</BorderCard>

Props

`padding`	Permite modificar la propiedad `padding` de la Card. Esta propiedad se comporta igual que la propiedad `padding` de CSS. Si no se especifica, su valor por defecto es `2rem`.
`width`	Permite modificar la propiedad `width` de la Card. Esta propiedad se comporta igual que la propiedad `width` de CSS. Si no se especifica, su valor por defecto es `auto`.
`corner`	Permite modificar la propiedad `border-radius` de la Card. Esta propiedad se comporta igual que la propiedad `border-radius` de CSS. Si no se especifica, su valor por defecto es `12px`.
`handleClick`	Recibe una función que será ejecutada cuando se haga clic en la Card.
`disabled`	Recibe un valor booleano que permite deshabilitar la Card dejandola sin la capacidad de recibir clics del usuario. Si no se especifica, su valor por defecto es `false`.
`active`	Recibe un valor booleano que indica si la Card esta activa, lo que permite mostrar el borde de la misma. Si no se especifica, su valor por defecto es `false`.
`borderSize`	Indica el tamaño de borde que se muestra cuando la Card esta activa. Si no se especifica, su valor por defecto es `2px`.

Select Card

Permite ejecutar una función cuando se hace clic sobre la misma y ademas permite cambiar el fondo de la misma con la prop active para indicar que la Card ha sido seleccionada por el usuario.

Card title

Haz clic sobre la Card para ver el efecto de la propiedad active.

implementación

import { ClickCard } from "firefly-components/cards";

<ClickCard handleClick={algunaFuncion}>
    Contenido  aquí...
</ClickCard>

Props

`padding`	Permite modificar la propiedad `padding` de la Card. Esta propiedad se comporta igual que la propiedad `padding` de CSS. Si no se especifica, su valor por defecto es `2rem`.
`width`	Permite modificar la propiedad `width` de la Card. Esta propiedad se comporta igual que la propiedad `width` de CSS. Si no se especifica, su valor por defecto es `auto`.
`corner`	Permite modificar la propiedad `border-radius` de la Card. Esta propiedad se comporta igual que la propiedad `border-radius` de CSS. Si no se especifica, su valor por defecto es `12px`.
`handleClick`	Recibe una función que será ejecutada cuando se haga clic en la Card.
`disabled`	Recibe un valor booleano que permite deshabilitar la Card dejandola sin la capacidad de recibir clics del usuario. Si no se especifica, su valor por defecto es `false`.
`active`	Recibe un valor booleano que indica si la Card esta activa, lo que permite cambiar el fondo la misma. Si no se especifica, su valor por defecto es `false`.