Text
Componente Text que permite mostrar diferentes elementos de texto (p, strong, small, etc.) con soporte para un indicador de carga en forma de líneas de esqueleto.
Ejemplo
Importación
Para importar el componente Text, se puede hacer desde fenextjs
import { Text } from "fenextjs";Parámetros
| Parámetro | Tipo | Requerido | Default | Descripcion |
|---|---|---|---|---|
| className | string | no | "" | Clase CSS para el contenedor principal del componente. |
| tag | "p" | "strong" | "small" | "em" | "b" | "del" | "i" | "mark" | "ins" | "sub" | "sup" | no | "p" | Define la etiqueta HTML que se utiliza para el texto. Permite diferentes opciones como p, strong, small, etc. |
| loader | boolean | no | false | Determina si se muestra un indicador de carga. Cuando es true, muestra líneas de carga en lugar del contenido. |
| nLineLoader | number | no | 3 | Número de líneas de esqueleto que se muestran cuando loader está activo. |
| children | ReactNode | no | Contenido que se mostrará dentro del componente Text si loader es false. |
Storybook
Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)
Usos
- Uso básico del componente Text
<Text tag="strong" className="text-strong">
Texto destacado
</Text>- Uso del componente Text con el loader activo
<Text loader={true} nLineLoader={5} />