CSS Personalizado con TypesCraft

Css.fromJson - Personaliza tus estilos

TypesCraft proporciona la clase Css.fromJson() que te permite aplicar estilos CSS personalizados directamente a tus widgets, dándote acceso a propiedades CSS adicionales para personalizar la apariencia de tus componentes.

La mayoría de los widgets en TypesCraft incluyen una propiedad css en su objeto de estilo, lo que te permite extender su apariencia más allá de las propiedades básicas predefinidas. 


import { Css } from "@seigenta/TypesCraft/global/style";
// ... otras importaciones

// La clase Css permite aplicar estilos CSS personalizados directamente a los widgets
// Css.fromJson acepta un objeto con propiedades CSS en formato camelCase o kebab-case

Uso básico de Css.fromJson

Para utilizar Css.fromJson(), simplemente pasa un objeto JavaScript con las propiedades CSS que deseas aplicar. Puedes usar la nomenclatura kebab-case tradicional de CSS (con guiones) o camelCase, dependiendo de tu preferencia. 


import { Component, Context, Widget } from "@seigenta/TypesCraft/widget";
import { ButtonStyle } from "@seigenta/TypesCraft/widgets/buttons/button";
import Button from "@seigenta/TypesCraft/widgets/buttons/button";
import { Css } from "@seigenta/TypesCraft/global/style";
import Color from "@seigenta/TypesCraft/widgets/utils/color";
import Text from "@seigenta/TypesCraft/widgets/texts/text";

export class CustomButton extends Component<{ id: string }> {
    build(_: Context): Widget<any> | null {
        return new Button({
            style: new ButtonStyle({
                // Propiedades básicas de estilo
                backgroundColor: Color.blue(),
                // Aplicando CSS personalizado
                css: Css.fromJson({
                    // Nombres de propiedades en formato kebab-case
                    "transition": "all 0.3s ease",
                    "user-select": "none",
                    // O en formato camelCase
                    backgroundColor: "var(--primary-color)",
                })
            }),
            styleHover: new ButtonStyle({
                css: Css.fromJson({
                    boxShadow: "0 5px 10px rgba(0,0,0,0.2)",
                })
            }),
            child: new Text({
                text: "Botón personalizado",
            }),
        });
    }
}

Al usar Css.fromJson(), puedes:

  • Aplicar propiedades CSS básicas
  • Usar variables CSS personalizadas
  • Combinar con los estilos nativos de TypesCraft
  • Aplicar transiciones simples

Ejemplo Completo

A continuación se muestra un ejemplo completo que utiliza Css.fromJson() para crear un componente de tarjeta con estilos personalizados: 


import { Component, Context, Widget } from "@seigenta/TypesCraft/widget";
import { Css } from "@seigenta/TypesCraft/global/style";
import Button, { ButtonStyle } from "@seigenta/TypesCraft/widgets/buttons/button";
import Text, { TextStyle } from "@seigenta/TypesCraft/widgets/texts/text";
import Container, { ContainerStyle } from "@seigenta/TypesCraft/widgets/containers/container";
import Color from "@seigenta/TypesCraft/widgets/utils/color";
import Size from "@seigenta/TypesCraft/widgets/utils/size";
import BoxShadow from "@seigenta/TypesCraft/widgets/utils/boxShadow";
import Column from "@seigenta/TypesCraft/widgets/containers/column";

// Componente con CSS personalizado
export class Card extends Component<{ 
    id: string, 
    title: string, 
    content: string
}> {
    private getCardStyle(): ContainerStyle {
        return new ContainerStyle({
            backgroundColor: Color.white(),
            borderRadius: Size.px(10),
            padding: Size.all(Size.px(20)),
            boxShadow: [
                new BoxShadow({
                    color: Color.black().opacity(0.1),
                    blurRadius: Size.px(10),
                    spreadRadius: Size.px(0),
                    vOffset: Size.px(4),
                    hOffset: Size.px(0),
                })
            ],
            css: Css.fromJson({
                // Transición personalizada
                transition: "all 0.3s ease",
            })
        });
    }

    private getTitleStyle(): TextStyle {
        return new TextStyle({
            fontSize: Size.px(24),
            fontWeight: FontWeight.bold,
            color: Color.hex("#333"),
            css: Css.fromJson({
                fontFamily: "'Poppins', sans-serif",
                textShadow: "0px 1px 2px rgba(0,0,0,0.1)"
            })
        });
    }

    build(_: Context): Widget<any> | null {
        return new Container({
            style: this.getCardStyle(),
            child: new Column({
                children: [
                    new Text({
                        text: this.data.title,
                        style: this.getTitleStyle()
                    }),
                    new Text({
                        text: this.data.content,
                        style: new TextStyle({
                            fontSize: Size.px(16),
                            color: Color.hex("#666"),
                            marginTop: Size.px(10)
                        })
                    }),
                    new Button({
                        style: new ButtonStyle({
                            marginTop: Size.px(15),
                            backgroundColor: Color.hex("#7855F5"),
                            padding: Size.symmetric({
                                horizontal: Size.px(20),
                                vertical: Size.px(10)
                            }),
                            borderRadius: Size.px(5),
                            css: Css.fromJson({
                                cursor: "pointer",
                                "box-shadow": "0 4px 6px rgba(120, 85, 245, 0.25)",
                                "transition": "box-shadow 0.2s ease"
                            })
                        }),
                        styleHover: new ButtonStyle({
                            css: Css.fromJson({
                                "box-shadow": "0 6px 8px rgba(120, 85, 245, 0.35)"
                            })
                        }),
                        child: new Text({
                            text: "Ver más",
                            style: new TextStyle({
                                color: Color.white()
                            })
                        }),
                        onPressed: () => {
                            console.log("Botón presionado en tarjeta:", this.data.id);
                        }
                    })
                ],
                style: new FlexStyle({
                    direction: FlexDirection.column,
                    spacing: Size.px(10)
                })
            })
        });
    }
}

// Uso del componente
// new Card({
//     id: "card-1",
//     title: "Tarjeta con CSS personalizado",
//     content: "Este componente usa CSS básico a través de Css.fromJson"
// })

Nota: La funcionalidad de CSS personalizado puede tener limitaciones. Algunas características avanzadas de CSS como animaciones complejas, media queries o pseudo-elementos podrían no estar completamente soportadas. Consulta la documentación más reciente para conocer las capacidades actuales.