chayns components
v4.20.24
Eine Reihe wunderschöner React -Komponenten für die Entwicklung von Chayns® -Anwendungen.
Zuerst sollten Sie das Paket chayns-components in Ihr Projekt einbauen:
# Yarn
yarn add chayns-components
# NPM
npm install chayns-components Die Stile zu unseren Komponenten werden über die chayns-css Bibliothek bereitgestellt, und einige der Komponenten stützen sich auch auf die chayns-js -API. Sie sollten diese also in Ihr HTML aufnehmen:
<!-- 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 > Die folgenden Komponenten sind Teil dieses Pakets:
| Komponente | Beschreibung |
|---|---|
| Akkordeon › | Akkordeons sind zusammenklappbare Abschnitte, die durch Interaktion mit einem dauerhaft sichtbaren Header umgeschaltet werden. |
| BetragControl › | Das Betragcontrol ist eine Drei-Segment-Steuerung, die verwendet wird, um einen inkrementellen Wert zu erhöhen oder zu verringern. |
| AnimationWrapper › | Der AnimationWrapper bietet seinen Kindern eine auffällige anfängliche Animation. |
| Abzeichen > | Abzeichen sind kleine, kreisförmige Behälter, die zur Dekoration anderer Komponenten mit scharfen Informationen verwendet werden. |
| Blase › | Eine schwimmende Blase, die hauptsächlich zum Einschalten der ContextMenu und Tooltip -Komponenten verwendet wird. |
| Taste > | Tasten leiten Aktionen ein, können einen Titel oder ein Symbol enthalten und mit einer Reihe vordefinierter Stile geliefert werden. |
| Kalender › | Ein interaktiver Gitterkalender, der bestimmte Daten hervorheben kann. |
| Kontrollkästchen › | Mit den Kontrollkästchen können Benutzer Aufgaben erledigen, bei denen Auswahlmöglichkeiten wie die Auswahl von Optionen getroffen werden. Kann als Schalter gestaltet werden, ein visueller Umschalter zwischen zwei gegenseitig ausschließlichen Zuständen - ein- und ausgeschaltet. |
| Colorpicker › | Lassen Sie einen Benutzer eine Farbe für Text, Formen, Markierungswerkzeuge und andere Elemente auswählen. |
| ColorScheme › | Passt das Farbschema für alle Kinderkomponenten an. |
| Combobox › | Eine Schaltfläche mit einem Dropdown, der eine scrollbare Liste unterschiedlicher Werte enthält, aus denen Menschen auswählen können. |
| Kontextmenu › | Gibt Menschen Zugriff auf zusätzliche Funktionen im Zusammenhang mit Elementen auf dem Bildschirm, ohne die Schnittstelle zu überfüllen. |
| DateInfo › | Formatiert ein Datums- oder Datumsbereich, um leicht lesbar zu sein und das absolute Datum für den Schwebedatum anzuzeigen. |
| Emojiinput › | Ein Texteingang, der es ermöglicht, Emojis einzusetzen. |
| ExponableContent › | Ein zusammenklappbarer Abschnitt, der seine Kinder mit einem Höhenübergang enthüllt. |
| FileInput › | Akzeptiert angegebene Dateitypen über Dialogie oder Drag & Drop. |
| Filterbutton › | Eine chipartige Komponente, mit der Listen gefiltert werden. Normalerweise in einer Gruppe von 2 oder mehr verwendet. |
| FormatedInput › | Eine Texteingabe, die seine Eingabe automatisch mit einem Formatierer formatiert. Da diese Komponente auf dem Input -Komponenten basiert, werden die Input -Komponenten -Requisiten verwendet, die hier nicht aufgeführt sind. Diese Komponente funktioniert nur als unkontrollierte Komponente, was bedeutet, dass sie keinen value -Prop nimmt. |
| Galerie › | Eine Bildergalerie, die standardmäßig bis zu vier Bilder anzeigt. Unterstützt auch die Neuordnung und Löschung von Bildern und verschwommenen Bildvorschau für Bilder, die von tsimg.cloud geladen wurden. |
| Ikone › | Zeigt ein fontaWesome -Symbol an. |
| ImageAccordion › | Ein Akkordeon, das ein großes Bild hat und in einem Raster erscheint. Sollte in einer ImageAccordionGroup verwendet werden. |
| ImageAcCordiongroup › | Gruppiert mehrere ImageAccordion -Komponenten zusammen, sodass jeweils nur einer von ihnen geöffnet sein kann. |
| Eingabe › | Ein Texteingang, der mit verschiedenen Designs validiert und dekoriert werden kann. |
| Liste › | Der Wrapper für das ListItem -Component zum Erstellen von Listen. |
| ListItem › | Die Elemente in einer Liste, um verwandte Daten in einem strukturierten Format anzuzeigen. Sollte in einer List verwendet werden. |
| Eröffnungen › | Ein Eingang für Öffnungszeiten. |
| Personfinder › | Eine automatische Suche nach Personen, die so angepasst werden können, dass sie mit willkürlichen Daten arbeiten. |
| PositionInput › | Ein Standorteingang mit einer Karte und einer Texteingabe. Dies erfordert die Google Maps JavaScript -API mit der von der Places Enabled Bibliothek. Weitere Informationen zur Maps -API finden Sie hier. |
| Progressbar › | Ein animierter Fortschrittsbalken, der einen Aktionsschritt oder einen unbestimmten Zustand wie ein Ladespinner zeigen kann. |
| Radiobutton › | Ein Optionsfeld, mit dem eine der mehreren Optionen ausgewählt werden kann. |
| Rfidinput › | Eine Komponente, die ein RFID -Signal aufnimmt. |
| Scrollview › | Ein scrollierbarer Container mit einer benutzerdefinierten Bildlaufleiste, die auf jedem Gerät großartig aussieht. |
| Suchkiste › | Eine automatische Eingabe, um eine Liste von Einträgen zu durchsuchen. |
| SelectButton › | Eine Schaltfläche auswählen, die beim Klicken einen Auswahldialog öffnet. |
| SelectItem › | Ein Optionsfeld, das seinen Inhalt bei der Auswahl erweitert. Sollte in einer SelectList verwendet werden. |
| SELTELISTE › | Eine vertikale Liste von Optionsschaltflächen, die Inhalte bei der Auswahl aufzeigen. |
| Setupwizard › | Eine Reihe von Schritten, die der Benutzer nacheinander durchlaufen muss. |
| SetupwizardItem › | Ein Element, der einen Schritt in einem SetupWizard darstellt. |
| Sharingbar › | Ein Kontextmenü zum Teilen eines Links und einiger Text auf verschiedenen Plattformen. |
| Unterschrift › | Eine Komponente, die den Benutzer abonnieren lässt |
| Slider › | Eine horizontale Spur mit einem Daumen, der zwischen einem Minimum und einem Maximalwert bewegt werden kann. |
| SliderButton › | Ein linearer Satz von Tasten, die sich gegenseitig ausschließen. |
| SmallwaitCursor › | Ein kleiner kreisförmiger Belastungsanzeige. |
| Taginput › | Eine Texteingabe, mit der die Werte als Tags gruppiert werden können. |
| Textarea › | Ein Multiline -Texteingang, der automatisch mit seinem Inhalt wachsen kann. |
| Textstring › | Lädt Textzeichenfolgen aus unserer Datenbank und zeigt sie an. Griff Ersatz und Ändern der Zeichenfolge über CTRL + Click (nur intern). |
| Tooltip › | Wickelt eine untergeordnete Komponente ein und zeigt eine Nachricht an, wenn das Kind schwebt oder auf Klicken geklickt wird. Ermöglicht, durch die Aufruf von .show() oder .hide() nach seiner Referenz nicht angezeigt zu werden. |
| VerificationIcon › |
Wir bieten auch eine Reihe gemeinsamer Nutzfunktionen:
| Funktion | Beschreibung |
|---|---|
| ImageUpload | Funktion zum Hochladen von Bildern auf tsimg.cloud |
| iStobitPlyee | Holen Sie sich die Informationen, wenn der Benutzer ein Tobit -Mitarbeiter ist |
| Createlinks | Erstellt eine Zeichenfolge mit Links aus einer Zeichenfolge mit URLs |
| REMEHTML | Entfernt HTML -Tags aus einer Zeichenfolge |
| Colorutils | Dienstprogrammfunktionen zum Konvertieren von Farbwerten (HEX, RGB, HSV) |
| Equalizer | Versorgungsfunktionen, um die Breite von HTML -Elementen auszugleichen |
Wenn Sie zu chayns-components beitragen möchten, lesen Sie die Datei mit der Mitarbeitern.md.
