BaseButtonFraction 🧮

BaseButton es un componente atomico que representa la funcionalidad básica de un botón, utiliza otros componentes atómicos para su funcionamiento, entre ellos está BaseButton y AtomicFraction. Este último representa una fracción matemática de forma visual, donde se pueden mostrar un número entero, un numerador y un denominador, con opciones de estilo personalizables.

Características

Las características de BaseButtonFraction incluyen la capacidad de manejar fracciones como contenido principal, permitiendo la visualización de un número entero, numerador y denominador, con opciones personalizables de estilo y tamaño. Este componente ofrece:

Soporte para animaciones de respuesta (como el brillo en caso de ser correcto).
Diferentes combinaciones de color configurables a través de themes.ts.
Personalización de estilo de texto y ajuste de tamaño de la fracción mediante fontSize.
Opciones de contenedor flexibles que permiten ajustar el botón a layouts responsivos o específicos, con propiedades de relleno (padding) y dimensiones configurables para el contenedor interior y exterior.
Variantes opcionales de reducción para eliminar o minimizar el espaciado (isReduced), facilitando su integración en diseños compactos o ajustados.

Al igual que BaseButton, BaseButtonFraction estandariza el uso de botones en la aplicación, agregando la capacidad de representar valores fraccionarios con el componente AtomicFraction. Esto permite un único punto de control para botones que necesitan funcionalidades avanzadas de fracción, manteniendo la interfaz cohesiva y optimizada.

Props 📜

Prop	Tipo	Descripción
`fraction`	`{ whole?: number; numerator: number; denominator: number; }`	Objeto que define la fracción que se mostrará. Incluye el número entero (`whole`), el numerador (`numerator`), y el denominador (`denominator`).
`onPress`	`() => void`	Función de callback que se ejecuta al presionar el botón.
`color`	`themesVariants or ThemeTemplate`	Define la combinación de colores del botón, usando un tema predefinido o una plantilla de tema personalizada.
`flex`	`boolean`	Indica si el botón debe ajustarse de manera flexible (`true`) o tener un ancho fijo.
`style`	`StyleProp<ViewStyle>`	Estilos personalizados para el contenedor principal del botón.
`textStyle`	`StyleProp<TextStyle>`	Estilos personalizados para el texto de la fracción que se renderiza en el botón.
`showCorrect`	`boolean`	Si es `true`, muestra un indicador visual para respuestas correctas.
`isReduced`	`boolean`	Controla si el botón se muestra en una versión reducida, con menos espaciado, para diseños compactos.
`containerStyles`	`StyleProp<ViewStyle>`	Estilos personalizados para el contenedor interno del botón.
`playBrillo`	`boolean`	Activa o desactiva la animación de brillo (estrellitas) en el botón.
`fontSize`	`number`	Tamaño de fuente para el texto de la fracción.

Codigo de ejemplo 🕹️

Native Versión 📱: NumberSelectionFraction

<BaseButtonFraction
  fraction={item}
  onPress={onPress}
  color={BaseTheme(index)}
  selected={isSelected}
  showCorrect={showCorrect}
  playBrillo={
    index === question.correctAnswerIndex && isCorrect === true
  }
  containerStyles={[
    {
      minWidth: 85,
      minHeight: 95,
      justifyContent: "center",
      alignContent: "center",
    },
    buttonContainerStyles,
  ]}
  fontSize={24}
  textStyle={{
    marginBottom: 5,
    marginTop: 5,
  }}
  lottiViewStyle={{
    width: 300,
    height: 300,
  }}
/>

Web Versión 💻: NumberSelectionFraction

<BaseButtonFraction
  fraction={item}
  textStyle={textStyle}
  color={color}
  selected={isSelected}
  showCorrect={showCorrect}
  onPress={onPress}
  containerStyles={[
    {
      maxWidth: 90,
      height: 100,
      borderRadius: 10,
      justifyContent: "center",
    },
    buttonContainerStyles,
  ]}
  playBrillo={color === "correct"}
  webStyle={webStyle}
/>

Ejemplos de uso 🎨

Características​

Props 📜​

Codigo de ejemplo 🕹️​

Native Versión 📱: NumberSelectionFraction​

Web Versión 💻: NumberSelectionFraction​

Ejemplos de uso 🎨​