Atomic Fraction

Este componente renderiza fracciones de una misma manera con solo ingresar los valores necesarios como props:

• Whole (Numero Entero)
• Numerator (Numerador)
• Denominator (Denominador)

Este componente se divide en dos partes, parte de numero entero y parte de la fraccion, siendo la primera parte opcional ya que no siempre se tendra un numero entero. El separar en estas dos partes nos permite siempre centrar la fraccion por completo, con numero entero y sin numero entero.

Ejemplo:

• Entrada

  

• Salida

  

Adicionalmente tiene otros props opcionales que permiten modificar y ajustar este componente a conveniencia. Sus props en total son los siguientes:

• color

  • Este prop determina el color de los numeros y de la barra divisora.

    

• containerStyle

  • Este prop permite editar el contenedor general, que engloba toda la fraccion.

• fractionStyle

  • Este prop modifica los estilos de la parte de la fraccion en este componente.

    

• wholeStyle

  • Este prop modifica los estilos de la parte de los numeros enteros en este componente.

    

• textStyle

  • Este prop modifica los estilos de los numeros.

    

• divisorStyle

  • Este prop modifica los estilos de la linea divisora.

    

• fontSize

  • Este prop modifica el tamaño de los numeros, y por ende tambien se ve alterada la linea divisora.

    

    

Casos extremos: