Skeleton
El Skeleton se utiliza para mostrar el estado de carga de un componente evitando el desplazamiento del diseño.
Rectangle Skeleton
Permite crear skeleton para componentes rectangulares o cuadrados. Por ejemplo títulos, textos, imágenes cuadradas, tarjetas etc.
Utilización
import { RectangleSkeleton } from "firefly-components/skeleton";
<RectangleSkeleton height="8rem" width="8rem" />Props
width | Permite ajustar el ancho del skeleton. Esta propiedad se comporta igual que la propiedad width de CSS. |
height | Permite ajustar la altura del skeleton. Esta propiedad se comporta igual que la propiedad height de CSS. |
margin | Permite agregar margin alrededor del skeleton. Esta propiedad se comporta igual que la propiedad margin de CSS. |
corner | Permite agregar border-radius al skeleton. Esta propiedad se comporta igual que la propiedad border-radius de CSS. |
Circle Skeleton
Permite crear skeleton para componentes circulares, por ejemplo imágenes de usuario, iconos, etc.
Utilización
import { RectangleSkeleton } from "firefly-components/skeleton";
<CircleSkeleton size="4rem" />Props
size | Permite ajustar el tamaño del skeleton. |
margin | Permite agregar margin alrededor del skeleton. Esta propiedad se comporta igual que la propiedad margin de CSS. |