Componentes de Botones
¿Qué son los componentes de botones?
Los componentes de botones permiten crear elementos interactivos que responden a las acciones del usuario. Nota: Los colores y estilos mostrados en los ejemplos son ilustrativos, puedes personalizarlos según tus necesidades.
Tipos de Botones
TypesCraft ofrece tres tipos principales de botones, cada uno con un estilo visual distinto pero con la misma funcionalidad base:
- FloatingButton - Botón con efecto elevado y sombra
- TextButton - Botón minimalista sin fondo ni bordes
- BorderButton - Botón con borde y sin fondo
FloatingButton
El FloatingButton es un botón con efecto elevado que destaca visualmente en la interfaz. Es ideal para acciones principales.
import FloatingButton from "@seigenta/TypesCraft/widgets/buttons/floatingButton";
import Text from "@seigenta/TypesCraft/widgets/texts/text";
import Color from "@seigenta/TypesCraft/widgets/utils/color";
// El resto de tu código
new FloatingButton({
child: new Text({
text: "Presionar"
}),
onPressed: () => {
console.log("Botón presionado");
}
})
En el ejemplo anterior, se crea un nuevo FloatingButton con un texto "Presionar" que muestra un mensaje en la consola cuando se hace clic.
TextButton
El TextButton es un botón minimalista sin fondo ni bordes, ideal para acciones secundarias o cuando se necesita un diseño limpio.
import TextButton from "@seigenta/TypesCraft/widgets/buttons/textButton";
import Text from "@seigenta/TypesCraft/widgets/texts/text";
import Color from "@seigenta/TypesCraft/widgets/utils/color";
// El resto de tu código
new TextButton({
child: new Text({
text: "Ver más"
}),
onPressed: () => {
console.log("Ver más detalles");
}
})
Este tipo de botón es útil para enlaces o acciones que no necesitan destacar tanto como las acciones principales.
BorderButton
El BorderButton es un botón con borde y sin fondo, proporcionando un punto intermedio entre el FloatingButton y el TextButton.
import BorderButton from "@seigenta/TypesCraft/widgets/buttons/borderButton";
import Text from "@seigenta/TypesCraft/widgets/texts/text";
import Color from "@seigenta/TypesCraft/widgets/utils/color";
// El resto de tu código
new BorderButton({
child: new Text({
text: "Cancelar"
}),
onPressed: () => {
console.log("Operación cancelada");
}
})
Este tipo de botón es ideal para acciones secundarias que necesitan ser visibles pero no tan prominentes como las acciones principales.
Estilos de Botones
Todos los botones comparten la misma estructura de estilo a través de la clase ButtonStyle.
- backgroundColor?: (Color) - Define el color de fondo del botón.
- Color - Puede ser un color en formato hexadecimal o un color de la paleta de colores. Se explica en Color.
- borderRadius?: (Size) - Define el radio de las esquinas del botón.
- Size - Puede ser en píxeles, porcentaje, etc. Se explica en Size.
- height?: (Size) - Define la altura del botón.
- width?: (Size) - Define el ancho del botón.
- textStyle?: (TextStyle) - Define el estilo del texto dentro del botón.
- TextStyle - Incluye propiedades como color, tamaño, peso, etc. Se explica en Text.
- borderStyle?: (BorderStyle) - Define el estilo del borde del botón.
- BorderStyle - Incluye propiedades como color, ancho y estilo del borde. Se explica en BorderStyle.
- containerAlingment?: (ContainerAlingment) - Define la alineación del contenido dentro del botón.
- ContainerAlingment - Incluye opciones como center, leftTop, rightBottom, etc.
- boxShadow?: (BoxShadow[]) - Define las sombras del botón.
- BoxShadow - Incluye propiedades como desplazamiento, desenfoque, color, etc. Se explica en BoxShadow.
- css?: (Css) - Define estilos CSS personalizados para el botón.
- Css - Permite aplicar estilos CSS avanzados. Se explica en Css.
Estados y Eventos
Los botones pueden tener diferentes estilos según su estado (normal, hover, active, disabled, focus). Cada estado se configura con su propio estilo:
- style - Estilo normal del botón
- styleHover - Estilo cuando el cursor está sobre el botón
- styleActive - Estilo cuando el botón está siendo presionado
- styleDisabled - Estilo cuando el botón está deshabilitado
- styleFocus - Estilo cuando el botón tiene el foco
Cada uno de estos estilos recibe un objeto ButtonStyle que incluye la propiedad textStyle, lo que permite modificar el estilo del texto según el estado del botón. Esto es útil para cambiar el color, tamaño o peso del texto cuando el botón cambia de estado.
Nota: Actualmente, los botones no soportan completamente la implementación de múltiples widgets internos con estilos dinámicos. Aunque puedes colocar un componente Flex como hijo del botón, los elementos dentro del Flex no podrán tener estilos que cambien según el estado del botón (hover, active, etc.).
El evento principal de los botones es onPressed, que se ejecuta cuando el usuario hace clic en el botón.
Ejemplo Completo
import FloatingButton, { ButtonStyle } from "@seigenta/TypesCraft/widgets/buttons/floatingButton";
import Text, { TextStyle } from "@seigenta/TypesCraft/widgets/texts/text";
import Color from "@seigenta/TypesCraft/widgets/utils/color";
import Size from "@seigenta/TypesCraft/widgets/utils/size";
import BorderStyle, { StyleBorder } from "@seigenta/TypesCraft/widgets/utils/border";
import BoxShadow from "@seigenta/TypesCraft/widgets/utils/boxShadow";
import { Css } from "@seigenta/TypesCraft/global/style";
import { ContainerAlingment } from "@seigenta/TypesCraft/widgets/containers/container";
// Ejemplo de un botón personalizado
new FloatingButton({
child: new Text({
text: "Guardar Cambios",
style: new TextStyle({
color: Color.white(),
fontSize: Size.px(16),
fontWeight: "bold"
})
}),
style: new ButtonStyle({
backgroundColor: Color.hex("#4CAF50"),
borderRadius: Size.px(8),
height: Size.px(48),
width: Size.px(200),
containerAlingment: ContainerAlingment.center,
boxShadow: [
new BoxShadow({
hOffset: Size.px(0),
vOffset: Size.px(4),
blur: Size.px(8),
spread: Size.px(0),
color: Color.hex("#4CAF50").opacity(0.5)
})
],
css: Css.fromJson({
"transition": "all 0.3s ease"
})
}),
styleHover: new ButtonStyle({
backgroundColor: Color.hex("#45a049"),
boxShadow: [
new BoxShadow({
hOffset: Size.px(0),
vOffset: Size.px(6),
blur: Size.px(10),
spread: Size.px(0),
color: Color.hex("#4CAF50").opacity(0.6)
})
],
css: Css.fromJson({
"transform": "translateY(-2px)"
})
}),
styleActive: new ButtonStyle({
backgroundColor: Color.hex("#3d8b40"),
boxShadow: [
new BoxShadow({
hOffset: Size.px(0),
vOffset: Size.px(2),
blur: Size.px(4),
spread: Size.px(0),
color: Color.hex("#4CAF50").opacity(0.4)
})
],
css: Css.fromJson({
"transform": "translateY(1px)"
})
}),
styleDisabled: new ButtonStyle({
backgroundColor: Color.hex("#cccccc"),
boxShadow: [],
css: Css.fromJson({
"cursor": "not-allowed"
})
}),
onPressed: () => {
console.log("Guardando cambios...");
// Lógica para guardar cambios
},
id: "save-button",
key: "btn-save-changes"
})
En este ejemplo completo, se crea un botón flotante con texto "Guardar Cambios" que tiene estilos personalizados para sus diferentes estados (normal, hover, active, disabled) y ejecuta una función cuando se hace clic.
Compilador de botones
Este compilador te permite crear componentes de botones en tiempo real.