chayns components
v4.20.24
Un ensemble de beaux composants React pour développer des applications Chayns®.
Vous devez d'abord installer le package chayns-components dans votre projet:
# Yarn
yarn add chayns-components
# NPM
npm install chayns-components Les styles de nos composants sont fournis via la bibliothèque chayns-css et certains composants reposent également sur l'API chayns-js , vous devriez donc les inclure dans votre 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 > Les composants suivants font partie de ce package:
| Composant | Description |
|---|---|
| Accordéon › | Les accordéons sont des sections pliables qui sont basculées en interagissant avec un en-tête permanent visible. |
| MontantControl › | Le montant du montant est un contrôle à trois segments utilisé pour augmenter ou diminuer une valeur incrémentielle. |
| Animationwrapper › | L'animationwrapper offre une animation initiale accrocheuse à ses enfants. |
| Badge › | Les badges sont de petits conteneurs circulaires utilisés pour décorer d'autres composants avec des informations glancables. |
| Bulle › | Une bulle flottante qui est principalement utilisée pour alimenter les composants ContextMenu et Tooltip . |
| Bouton > | Les boutons initient des actions, peuvent inclure un titre ou une icône et venir avec un ensemble de styles prédéfinis. |
| Calendrier › | Un calendrier de grille interactif qui peut mettre en évidence les dates spécifiées. |
| Box de cocher › | Les cases à cocher permettent aux utilisateurs de terminer les tâches qui impliquent de faire des choix tels que la sélection des options. Peut être conçu comme un interrupteur, une bascule visuelle entre deux états mutuellement exclusifs - en marche et désactivés. |
| ColorPicker › | Permet à un utilisateur de choisir une couleur pour le texte, les formes, les outils de marquage et autres éléments. |
| ColorScheme › | Ajuste la palette de couleurs pour tous les composants de l'enfant. |
| Combobox › | Un bouton avec une liste déroulante qui contient une liste de valeurs distinctes de valeurs distinctes parmi lesquelles les gens peuvent choisir. |
| ContextMenu › | Donne aux gens l'accès à des fonctionnalités supplémentaires liées aux éléments à l'écran sans encombrer l'interface. |
| Dateinfo › | Formats une date ou une plage de dates à lisible et révèle la date absolue sur le plan de survol. |
| Emojiinput › | Une entrée de texte qui permet d'installer les emojis. |
| EXPANDABLECONTENT › | Une section pliable qui révèle ses enfants avec une transition de hauteur. |
| FileInput › | Accepte les types de fichiers spécifiés via la boîte de dialogue ou glisser et déposer. |
| FilterButton › | Un composant de type puce qui est utilisé pour filtrer les listes. Généralement utilisé dans un groupe de 2 ou plus. |
| FormattedInput › | Une entrée de texte qui formate automatiquement son entrée avec un formateur. Étant donné que ce composant est basé sur l' Input -component, il prend l'un des accessoires Input -components, qui ne sont pas répertoriés ici. Ce composant fonctionne uniquement comme un composant incontrôlé, ce qui signifie qu'il ne prend pas de value -prop. |
| Galerie › | Une galerie d'images qui affiche jusqu'à quatre images par défaut. Prend également en charge la réorganisation et la suppression des images et des aperçus d'images floues pour les images chargées à partir de tsimg.cloud . |
| Icône › | Affiche une icône Fontawesome. |
| ImageAcordion › | Un accordéon qui a une grande image et apparaît dans une grille. Doit être utilisé à l'intérieur d'un ImageAccordionGroup . |
| ImageAcordionGroup › | Regroupe plusieurs composants ImageAccordion ensemble, donc un seul d'entre eux peut être ouvert à la fois. |
| Saisir > | Une entrée de texte qui peut être validée et décorée de différentes conceptions. |
| Liste > | L'écran du Component ListItem pour créer des listes. |
| ListItem › | Les éléments d'une liste pour afficher des données connexes dans un format structuré. Doit être utilisé à l'intérieur d'un composant List . |
| Ouverts › | Une entrée pour les heures d'ouverture. |
| PersonFinder › | Une recherche automatique recherche des personnes qui peuvent être personnalisées pour fonctionner avec des données arbitraires. |
| PositionInput › | Une entrée d'emplacement avec une cartographie et une entrée de texte. Cela nécessite l'API Google Maps JavaScript avec la bibliothèque de places activée. Vous pouvez trouver plus d'informations sur l'API MAPS ici. |
| ProgressBar › | Une barre de progrès animée qui peut montrer une progression des actions ou un état indéterminé comme un fileur de chargement. |
| Radiobutton › | Un bouton radio qui permet de sélectionner l'une des multiples options. |
| RfidInput › | Un composant à adopter un signal RFID. |
| ScrollView › | Un conteneur défilement avec une barre de défilement personnalisée qui a fière allure sur chaque appareil. |
| Recherche de recherche › | Une entrée d'observation automatique pour rechercher une liste des entrées. |
| SelectButton › | Un bouton Choisissez qui ouvre une boîte de dialogue de sélection lors du clic. |
| SelectItem › | Un bouton radio qui étend son contenu lorsqu'il est sélectionné. Doit être utilisé à l'intérieur d'une SelectList . |
| SelectList › | Une liste verticale de boutons radio qui révèlent du contenu lorsqu'ils sont sélectionnés. |
| Setupwizard › | Un ensemble d'étapes que l'utilisateur doit passer par séquentiellement. |
| Setupwizartem › | Un élément qui représente une étape dans un SetupWizard . |
| Partage › | Un menu contextuel pour partager un lien et un texte sur diverses plates-formes. |
| Signature > | Un composant pour permettre à l'utilisateur de s'abonner |
| Curseur › | Une piste horizontale avec un pouce qui peut être déplacé entre une valeur minimale et maximale. |
| Sliderbutton › | Un ensemble linéaire de boutons qui s'excluent mutuellement. |
| SmallwaitCursor › | Un petit indicateur de chargement circulaire. |
| Taginput › | Une entrée de texte qui permet de regrouper les valeurs en tant que balises. |
| TextArea › | Une entrée de texte multiligne qui peut se développer automatiquement avec son contenu. |
| TextString › | Charge les chaînes de texte de notre base de données et les affiche. Gère les remplacements et la modification de la chaîne via CTRL + Click (uniquement interne). |
| Info-bulle › | Enveloppe un composant enfant et affiche un message lorsque l'enfant est plané ou cliqué. Permet d'être montré impératif en appelant .show() ou .hide() sur sa référence. |
| VerificationIcon › |
Nous fournissons également un ensemble de fonctions d'utilité communes:
| Fonction | Description |
|---|---|
| ImageUpload | Fonction pour télécharger des images sur tsimg.cloud |
| istobitemployee | Obtenez les informations si l'utilisateur est un employé de Tobit |
| CreateLinks | Crée une chaîne avec des liens à partir d'une chaîne avec URL |
| supprimer | Supprime les balises HTML d'une chaîne |
| Coloritiles | Fonctions d'utilité pour convertir les valeurs de couleur (Hex, RVB, HSV) |
| égaliseur | Fonctions utilitaires pour égaliser la largeur des éléments HTML |
Si vous souhaitez contribuer aux chayns-components , consultez le fichier contribution.md.
