Utilidad de Color
¿Qué es la utilidad de colores?
La utilidad de colores proporciona una forma consistente y tipada de manejar colores en la interfaz de usuario.
Permite crear colores de diferentes formas y aplicarlos a los componentes de manera sencilla.
¿Cómo se utiliza la utilidad de colores?
Para utilizar los colores, se debe importar la clase Color y luego usar sus métodos estáticos.
import Color from "@seigenta/TypesCraft/widgets/utils/color";
// El resto de tu código
const miColor = Color.red();
// El resto de tu código
Colores Básicos
La utilidad proporciona varios colores básicos predefinidos:
- Color.red() - Color rojo
- Color.green() - Color verde
- Color.blue() - Color azul
- Color.yellow() - Color amarillo
- Color.black() - Color negro
- Color.white() - Color blanco
Ver todos los colores disponibles
- 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
Colores HEX
Puedes crear colores usando valores hexadecimales:
import Color from "@seigenta/TypesCraft/widgets/utils/color";
const colorHex = Color.hex("#FF0000"); // Rojo
const colorHexConAlpha = Color.hex("#FF000080"); // Rojo con 50% de opacidad
Colores RGB
También puedes crear colores usando valores RGB:
import Color from "@seigenta/TypesCraft/widgets/utils/color";
const colorRGB = Color.RGB(255, 0, 0); // Rojo
const colorRGBo = Color.RGBo(255, 0, 0, 0.5); // Rojo con 50% de opacidad
Uso en Componentes
Los colores se pueden utilizar en cualquier componente que acepte propiedades de estilo:
import Text from "@seigenta/TypesCraft/widgets/texts/text";
import Color from "@seigenta/TypesCraft/widgets/utils/color";
new Text({
text: "Texto en rojo",
style: {
color: Color.red()
}
});
En el ejemplo anterior, se crea un nuevo componente de texto con el color rojo. Pero puede ser cualquier otro componente que acepte propiedades de estilo.