Librería componentes genéricos Elektra Motos

Componentes React y archivos SASS genéricos de Elektra Motos.

Instalación

  npm install --save @red-unica/libreria-componentes-desempenio-ekt-motos

Uso

  import React from 'react';
  import { Componente } from '@red-unica/libreria-componentes-desempenio-ekt-motos';

  const Ejemplo = () => {
    return (
      <Componente />}
    );
  };

Componentes

PestaniasGenericas

Para utilizar este componente se deben envíar las siguientes propiedades:

| Propiedad | Tipo de dato | Propiedad | Tipo de dato | Opcional | Valor por defecto | |--------------------------|----------------|------------------------|--------------|----------|-------------------| | listaPestanias | Arreglo | | | | | | | | valor | Numérico | No | | | | | leyenda | Cadena | No | | | | | tamanio | Numérico | Sí | N/A | | tamanioPestanias | | | Numérico | Sí | 0 | | eventoClic | | | Función | No | | | altoPestanias | | | Numérico | Sí | 30 | | anchoSeparacion | | | Numérico | Sí | 0 | | altoBorde | | | Numérico | Sí | 4 | | colorDelBorde | | | Numérico | Sí | 0 | | iniciaPestania | | | Numérico | Sí | 0 | | tamanioLetra | | | Numérico | Sí | 0 | | separacionTextoBarra | | | Numérico | Sí | 0 | | separacionTextoBarraAbajo | | | Numérico | Sí | 0 | | margenLateral | | | Numérico | Sí | 0 |

• listaPestanias: Arreglo que contiene los datos para el numero pestanias y leyendas que mostraran.
  • valor: Numerico que indica el valor de la pestaña.
  • leyenda: Cadena que contiene la leyenda que se mostrara en la pestaña.
  • tamanio: Numerico que indica el tamaño de la pestaña.
• tamanioPestanias: Numero que indica el ancho de las pestañas de acuerdo a la division del numero de pestañas.
• eventoClic: Función que se ejecutará al hacer clic en la pestaña.
• altoPestanias: Numero que indica la altura de las pestañas.
• anchoSeparacion: Numero que indica el ancho de la separacion de las pestañas.
• altoBorde: Numero que indica la altura del borde inferior de la pestaña.
• colorDelBorde: Numero que indica el color que se asignara al borde.
  • 0 - sin color.
  • 1 - Borde de color visualizacion de datos cuatro.
  • 2 - Borde de color primario seis.
• iniciaPestania: Numero de pestaña que estara activa.
• tamanioLetra: Numero que indica el tamaño de la letra que se mostrara en la pestaña.
  • 0 - Tamaño de letra 10, clase "etiqueta-2".
  • 1 - Tamaño de letra 12, clase "etiqueta-1".
  • 2 - Tamaño de letra 14, clase "cuerpo-3".
  • 3 - Tamaño de letra 16, clase "cuerpo-2".
  • 4 - Tamaño de letra 18, clase "cuerpo-1".
• separacionTextoBarra: Numero que indica la separacion del borde y la leyenda de la pestaña, iniciando dicha separación de arriba hacia abajo.
• separacionTextoBarraAbajo: Numero que indica la separacion del borde y la leyenda de la pestaña, iniciando dicha separación de abajo hacia arriba.
• margenLateral: Numero que indica los margenes laterales en las pestañas.

PiePaginaEkt

No se necesitan propiedades para poder utilizar este componente.

FormatoNumero

Para utilizar este componente se deben envíar las siguientes propiedades:

| Propiedad | Tipo de dato | Opcional | Valor por defecto | |-----------------------|--------------|----------|-------------------| | numero | Cadena | No | N/A | | prefijo | Cadena | Si | '' | | sufijo | Cadena | Si | '' |

• titulo: Cadena que contiene el número al que se le aplicará el formato (miles/millones).
• prefijo: Cadena que se colocará antes del parámetro "numero" (por defecto su valor es una cadena vacia).
• sufijo: Cadena que se colocará después del parámetro "numero" (por defecto su valor es una cadena vacia).

Buscador

Para utilizar este componente se deben enviar las siguientes propiedades:

| Propiedad | Tipo de dato | Opcional | Valor por defecto | |-----------------------|--------------|----------|-------------------| | eventoCambio | Función | No | N/A | | leyenda | Cadena | No | N/A | | validaNumerico | Booleano | Si | falso | | validaLetras | Booleano | Si | falso |

• eventoCambio: Función que se ejecutará cada vez que se inserte/elimine una letra en el buscador.
• leyenda: Cadena que contiene el título que se mostrará en el buscador.
• validaNumerico: Bandera para indicar ingreso de solo números en el buscador.
• validaLetras: Bandera para indicar ingreso de solo letras en el buscador.

BotonFiltro

Para utilizar este componente se deben enviar las siguientes propiedades:

| Propiedad | Tipo de dato | Propiedad | Tipo de dato | Opcional | Valor por defecto | |-----------------------|--------------|--------------|--------------|----------|-------------------| | titulo | Cadena | | | Si | N/A | | filtros | Arreglo | | | No | N/A | | | | elemento | Cadena | No | N/A | | eventoCambio | Función | | | No | N/A | | estado | Cadena | | | No | N/A |

• titulo: Cadena que contiene el título que se mostrará en el BotonFiltro.
• filtros: Arreglo de cadenas donde cada elemento contiene la leyenda del filtro que se mostrará en cada botón de radio.
  • elemento: Cadena que contiene la leyenda que se mostrara en cada filtro.
• eventoCambio: Función que se ejecutará cada vez que se de clic al botón de radio.
• estado: Cadena que contiene el valor del estado del botón de radio.

Version mínima de NodeJS

• Node: "16.15.0"

Version mínima de React

• Node: "17.0.0"

Dependencias

• "@red-unica/libreria-estilos-desempenio": "1.1.3"
• "@red-unica/libreria-funciones-desempenio-ekt-motos": "1.0.0"
• "@red-unica/libreria-svg-desempenio-ekt-motos": "1.3.0"
• "react-number-format": "5.3.4"
• "react-responsive": "^10.0.1"

License

ISC ©