• text: (string) El texto que se mostrará en el widget.
• style?: (TextStyle) Los estilos CSS del texto.
• styleHover?: (TextStyle) Los estilos CSS del texto cuando el mouse está sobre él.
• textType?: (TextType) El tipo de texto a mostrar.
• id?: (string) El identificador único del widget.
• key?: (string) La clave del widget.

• color: (Color) Define el color del texto.
  • Color.red() - Hace que el color del texto sea rojo.
  • Color.blue() - Hace que el color del texto sea azul.
  • Color.hex("#000000") - Recibe un valor hexadecimal para crear el color.
  • Color.RGBo(255, 255, 255, 0.5) - Recibe un valor RGB (con opacidad) para crear el color.

  Otros colores

  • Color.red() - Color rojo
  • Color.green() - Color verde
  • Color.blue() - Color azul
  • Color.yellow() - Color amarillo
  • Color.cyan() - Color cian
  • Color.magenta() - Color magenta
  • Color.orange() - Color naranja
  • Color.pink() - Color rosa
  • Color.purple() - Color púrpura
  • Color.brown() - Color marrón
  • Color.lime() - Color lima
  • Color.teal() - Color verde azulado
  • Color.indigo() - Color índigo
  • Color.violet() - Color violeta
  • Color.maroon() - Color granate
  • Color.olive() - Color oliva
  • Color.navy() - Color azul marino
  • Color.black() - Color negro
  • Color.white() - Color blanco
  • Color.gray() - Color gris
  • Color.grey() - Color gris (alternativa)
  • Color.silver() - Color plata
  • Color.transparent() - Color transparente
• textType: (TextType) Define el tipo de texto a mostrar. Los tipos son:
  • TextType.headline_1 - Utilizado para títulos principales.
  • TextType.headline_2 - Utilizado para subtítulos.
  • TextType.headline_3 - Utilizado para encabezados de secciones.
  • TextType.headline_4 - Utilizado para encabezados menores.
  • TextType.headline_5 - Utilizado para encabezados pequeños.
  • TextType.headline_6 - Utilizado para encabezados más pequeños.
  • TextType.paragraph - Utilizado para párrafos de texto.
  • TextType.span - Utilizado para texto en línea.
• fontSize: (Size) Define el tamaño de la fuente del texto. Ejemplos:
  • Size.px(value:number) - Tamaño en píxeles.
  • Size.percent(value:number) - Tamaño en porcentaje. No se recomienda su uso.
  • Size.em(value:number) - Tamaño relativo a la fuente del elemento padre.
  • Size.rem(value:number) - Tamaño relativo a la fuente del elemento raíz. Es el más utilizado.
  • Size.vw(value:number) - Tamaño relativo al ancho de la pantalla. No se recomienda su uso.
  • Size.vh(value:number) - Tamaño relativo al alto de la pantalla. No se recomienda su uso.
  • Size.fill() - Tamaño ajustado al contenedor. No se recomienda su uso.
  • Size.fit() - Tamaño ajustado al contenedor. No se recomienda su uso.
  • Size.min() - Tamaño mínimo del contenedor. No se recomienda su uso.
  • Size.max() - Tamaño máximo del contenedor. No se recomienda su uso.
  • Size.extend() - Tamaño ajustado al contenedor. No se recomienda su uso.
  • new.Size(value:string) - Permite establecer el tamaño de la fuente de forma personalizada con un string CSS.
• fontWeight: (FontWeight) Define el grosor de la letra.
• FontWeight.normal - Grosor normal.
• FontWeight.bold - Grosor negrita.
• FontWeight.lighter - Grosor más ligero.
• FontWeight.bolder - Grosor más negrita.
• FontWeight.value(value:number) - Grosor personalizado.
• textAlign: (TextAlign) Define la alineación del texto.
• TextAlign.left - Alineación a la izquierda.
• TextAlign.right - Alineación a la derecha.
• TextAlign.center - Alineación centrada.
• TextAlign.justify - Alineación justificada.

Ejemplo de uso

import Text, { TextStyle, TextType, FontWeight, TextAlign } from "@seigenta/TypesCraft/widgets/texts/text";
import Color from "@seigenta/TypesCraft/widgets/utils/color";
import Size from "@seigenta/TypesCraft/widgets/utils/size";

...

// Título de sección con efecto hover
new Text({
  text: "Hola, mundo!",
  id: "mi-texto",
  key: "texto-1",
  textType: TextType.headline_1,
  style: new TextStyle({
    color: Color.white(),
    fontSize: Size.rem(2),
    fontWeight: FontWeight.bold,
    textAlign: TextAlign.center,
  }),
  styleHover: new TextStyle({
    color: Color.blue(),
    fontSize: Size.rem(2.2),
    fontWeight: FontWeight.bolder,
  })
})
            

Cambios posibles

En un futuro parche, textType se cambiara a otro lugar, ya que no se puede cambiar al hacer hover.