chayns components

Un conjunto de hermosos componentes React para desarrollar aplicaciones Chayns®.

---

Instalación

Primero debe instalar el paquete chayns-components en su proyecto:

 # Yarn
yarn add chayns-components

# NPM
npm install chayns-components

Los estilos de nuestros componentes se proporcionan a través de la biblioteca chayns-css y algunos de los componentes también dependen de la API chayns-js , por lo que debe incluirlos en su HTML:

 <!-- CSS styles -->
< script
  src =" https://api.chayns-static.space/css/v4/compatibility/compatibility.min.js "
  version =" 4.2 "
> </ script >

<!-- JS api -->
< script src =" https://api.chayns-static.space/js/v4.0/chayns.min.js " > </ script > 

Descripción general de los componentes

Los siguientes componentes son parte de este paquete:

Componente	Descripción
Acordeón ›	Los acordeones son secciones plegables que se alternan interactuando con un encabezado permanentemente visible.
Cantidad de control ›	La cantidad de control es un control de tres segmentos utilizado para aumentar o disminuir un valor incremental.
AnimationWrapper ›	AnimationWrapper proporciona una animación inicial llamativa a sus hijos.
Insignia >	Las insignias son contenedores pequeños y circulares utilizados para decorar otros componentes con información vista.
Burbuja ›	Una burbuja flotante que se utiliza principalmente para alimentar el ContextMenu y los componentes de Tooltip .
Botón >	Los botones inician acciones, pueden incluir un título o un icono y vienen con un conjunto de estilos predefinidos.
Calendario ›	Un calendario de cuadrícula interactivo que puede resaltar las fechas especificadas.
Casilla de verificación ›	Las casillas de verificación permiten a los usuarios completar tareas que implican tomar decisiones como seleccionar opciones. Se puede diseñar como un interruptor, una palanca visual entre dos estados mutuamente excluyentes, encendido y apagado.
Colorpicker ›	Deje que un usuario elija un color para texto, formas, herramientas de marcado y otros elementos.
ColorsCheme ›	Ajusta el esquema de color para todos los componentes infantiles.
Combobox ›	Un botón con un menú desplegable que contiene una lista desplazable de valores distintos de los cuales las personas pueden elegir.
Contextmenu ›	Da a las personas acceso a funcionalidad adicional relacionada con elementos en pantalla sin abarrotar la interfaz.
DateInfo ›	Formatos de una fecha o rango de fechas para ser fácilmente legible y revela la fecha absoluta sobre el flotador.
Emojiinput ›	Una entrada de texto que permite que se pongan emojis.
ExpandableContent ›	Una sección plegable que revela a sus hijos con una transición de altura.
FileInput ›	Acepta tipos de archivos especificados a través de diálogo o arrastrar y soltar.
Filter Button ›	Un componente similar a un chip que se usa para filtrar listas. Generalmente se usa en un grupo de 2 o más.
FormatedInput ›	Una entrada de texto que formatea automáticamente su entrada con un formato. Dado que este componente se basa en el componente Input , toma cualquiera de los accesorios de componentes Input , que no se enumeran aquí. Este componente solo funciona como un componente no controlado, lo que significa que no toma un value -prop.
Galería ›	Una galería de imágenes que muestra hasta cuatro imágenes de forma predeterminada. También admite reordenamiento y eliminación de imágenes y vistas previas de imágenes borrosas para imágenes cargadas desde tsimg.cloud .
Ícono ›	Muestra un icono FontAwesome.
ImageAccordion ›	Un acordeón que tiene una gran imagen y aparece en una cuadrícula. Debe usarse dentro de un ImageAccordionGroup .
ImageAcCordionGroup ›	Agrupe varios componentes ImageAccordion juntos, por lo que solo uno de ellos puede estar abierto a la vez.
Aporte >	Una entrada de texto que se puede validar y decorar con diferentes diseños.
Lista >	El contenedor para ListItem -Component para crear listas.
Listitem ›	Los elementos en una lista para mostrar datos relacionados en un formato estructurado. Debe usarse dentro de un componente List .
OpeningTimes ›	Una entrada para los horarios de apertura.
Personfinder ›	Una búsqueda autocompleta de personas que se pueden personalizar para trabajar con datos arbitrarios.
PositionInput ›	Una entrada de ubicación con un mapa y entrada de texto. Esto requiere la API JavaScript de Google Maps con la biblioteca Lugares habilitada. Puede encontrar más información sobre la API de mapas aquí.
ProgressBar ›	Una barra de progreso animada que puede mostrar un progreso de acciones o un estado indeterminado como un spinner de carga.
Radiobutton ›	Un botón de radio que permite seleccionar una de las múltiples opciones.
Rfidinput ›	Un componente para tomar una señal RFID.
Scrollview ›	Un contenedor desplazable con una barra de desplazamiento personalizada que se ve muy bien en cada dispositivo.
Searchbox ›	Una entrada automática para buscar a través de una lista de entradas.
SelectButton ›	Un botón de elección que abre un cuadro de diálogo de selección cuando se hace clic.
Selectitem ›	Un botón de radio que expande su contenido cuando se selecciona. Debe usarse dentro de una SelectList .
SelectList ›	Una lista vertical de botones de radio que revelan contenido cuando se seleccionan.
Setupwizard ›	Un conjunto de pasos que el usuario debe pasar secuencialmente.
SetUpWizarDitem ›	Un elemento que representa un paso en un SetupWizard .
Sharingbar ›	Un menú contextual para compartir un enlace y algún texto en varias plataformas.
Firma >	Un componente para dejar que el usuario se suscriba
Control deslizante ›	Una pista horizontal con un pulgar que se puede mover entre un valor mínimo y máximo.
SliderButton ›	Un conjunto lineal de botones que son mutuamente excluyentes.
Smallwaitcursor ›	Un pequeño indicador de carga circular.
TagInput ›	Una entrada de texto que permite que los valores se agrupen como etiquetas.
Textarea ›	Una entrada de texto múltiple que puede crecer automáticamente con su contenido.
TextString ›	Carga cadenas de texto de nuestra base de datos y las muestra. Maneja reemplazos y cambia la cadena a través de CTRL + Click (solo interno).
Tooltip ›	Envuelve un componente infantil y muestra un mensaje cuando el niño se desplaza o hace clic. Permite mostrarse imperativamente llamando .show() o .hide() en su referencia.
Verificación de

Funciones de utilidad

También proporcionamos un conjunto de funciones de utilidad comunes:

Función	Descripción
Imageupload	Función para cargar imágenes a tsimg.cloud
istobitemployee	Obtenga la información si el usuario es un empleado de Tobit
CreateLinks	Crea una cadena con enlaces de una cadena con URL
eliminarhtml	Elimina las etiquetas HTML de una cadena
Colutilos	Funciones de utilidad para convertir los valores de color (Hex, RGB, HSV)
igualada	Funciones de utilidad para igualar el ancho de los elementos HTML

Que contribuye

Si desea contribuir a chayns-components , consulte el archivo contribuyente.md.