MainMenuButton Ⓜ️

MainMenuButton es un componente atómico que representa un botón de menú principal con soporte para iconos, animaciones y estilos personalizados. Este botón permite la selección de un icono, texto y animación, ideal para crear menús interactivos con opciones destacadas.

Características

MainMenuButton ofrece una serie de características personalizables para su fácil integración en distintos contextos y estilos de interfaz:

Animación de Escala: Incluye una animación de escala que se activa en la interacción, brindando una respuesta visual atractiva.
Soporte para Iconos Personalizables: Permite definir un icono estándar y uno para el estado seleccionado, ajustándose dinámicamente según el estado del botón.
Indicación de Estado de Selección: Cambia el estilo del botón en función de si está seleccionado, permitiendo resaltar la opción activa.
Personalización Completa de Estilos:
- Estilos de Texto: Permite personalizar el estilo del texto, como el tamaño de fuente y el color.
- Estilos de Contenedor: Incluye opciones para ajustar el contenedor del botón y su disposición en el menú.
- Estilos de Reflejo: Opcionalmente, añade un efecto de reflejo sobre el botón para dar un aspecto de brillo o énfasis visual.

Props 📜

Prop	Tipo	Descripción
`title`	`string`	Texto del botón que se muestra debajo del icono, ideal para describir la opción del menú.
`onPress`	`() => void`	Función de callback que se ejecuta al presionar el botón.
`icon`	`ImageSourcePropType`	Icono que se muestra por defecto en el botón.
`iconSelected`	`ImageSourcePropType`	Icono que se muestra cuando el botón está seleccionado, permitiendo un cambio visual claro.
`disabled`	`boolean`	Indica si el botón está deshabilitado (`true`) o habilitado (`false`).
`selected`	`boolean`	Define si el botón está en estado seleccionado (`true`) o no (`false`).
`animated`	`boolean`	Controla si la animación de escala está activada (`true`) o desactivada (`false`).
`min`	`boolean`	Controla el tamaño mínimo del botón para modos compactos, ajustando el tamaño del icono y los estilos de contenedor.
`colorCombination`	`themesVariants or ThemeTemplate`	Define la combinación de colores del botón, aplicando un tema predefinido o una plantilla personalizada.
`reflection`	`boolean`	Activa o desactiva el efecto de reflejo en el botón (`true` para activar, `false` para desactivar).
`style`	`StyleProp<ViewStyle>`	Estilos personalizados para el contenedor animado del botón, aplicando transformaciones adicionales.
`containerStyles`	`StyleProp<ViewStyle>`	Estilos personalizados para el contenedor base del botón, ajustando tamaño, fondo, padding, etc.
`outerContainerStyles`	`StyleProp<ViewStyle>`	Estilos adicionales para el contenedor externo del botón, útil para ajustes de layout o disposición en el menú.
`textStyle`	`StyleProp<TextStyle>`	Estilos personalizados para el texto del botón, ajustando fuente, color, etc.
`reflectionStyle`	`StyleProp<ViewStyle>`	Estilos personalizados para el reflejo, permitiendo ajustes de tamaño, color, y posición del efecto.

Codigo de ejemplo 🕹️

Native Versión 📱: BottomNav

<MainMenuButton
   title=""
   icon={require("atomic_components_explorax/assets/images/nav-menus/icon_home.png")}
   iconSelected={require("atomic_components_explorax/assets/images/nav-menus/icon_home_selected.png")}
   selected={route.name === "Worlds"}
   onPress={onPressNav.bind(this, "Worlds")}
   reflection={true}
/>

Web Versión 💻: BottomNav

<MainMenuButton
  reflection
  title=""
  icon={require("@assets/images/nav-menus/icon_home.png")}
  iconSelected={require("@assets/images/nav-menus/icon_home_selected.png")}
  selected={route.name === "Worlds"}
  onPress={onPressNav.bind(this, "Worlds")}
/>

Ejemplos de uso 🎨

Características​

Props 📜​

Codigo de ejemplo 🕹️​

Native Versión 📱: BottomNav​

Web Versión 💻: BottomNav​

Ejemplos de uso 🎨​