ILLA components

​

ILLA bietet Dutzende vorfertiger Komponenten für den schnellen Aufbau von Web-Front-End-Schnittstellen.

​

Komponentenliste

​

Inputs

• Eingabe: Wird verwendet, um die kürzere Zeichenkette von Benutzern einzugeben

• Zahleneingabe: Wird verwendet, um eine Zahl von Benutzern eingegeben zu bekommen.

• Editierbarer Text: Wird verwendet, um einen String anzuzeigen und beim Klicken in den Bearbeitungsmodus zu wechseln.

• Eingabefeld für Textbereich: Wird verwendet, um den langen String von Benutzern einzugeben

• Upload: Wird verwendet, um lokale Dateien auszuwählen und sie in base64 Daten zu analysieren. Klicke hier um mehr über Upload zu erfahren

• Demnächst
  • Aufnahme
  • Slider
  • Range slider
  • Rich-Text-Eingabe
  • JSON editor

​

Eingaben auswählen

• Schalter: Ein Schalter der true oder false zurückgeben kann

• Auswählen: Alle Optionen im Dropdown-Menü anzeigen und Benutzern die Auswahl erlauben

• Funkgruppe: Alle Optionen anzeigen und Benutzern erlauben, eine von ihnen auszuwählen

• Checkbox-Gruppe: Alle Optionen anzeigen und Benutzern erlauben, mehrere Optionen auszuwählen

• Kascader: Wird verwendet, um einen Satz des zugehörigen Datensatzes anzuzeigen und auszuwählen

• Optionsschaltfläche: Alle Optionen im Tastenstil anzeigen. Benutzern erlauben, einen davon auszuwählen.

• Demnächst
  • Mehrfachauswahl
  • Baumauswahl

​

Kalendereingaben

• Datum: Verwendet um ein Datum einzugeben. Benutzerdefiniertes Datenformat zulassen.

• Datumsbereich : Wird verwendet, um einen Datumsbereich einzugeben. Benutzerdefiniertes Datenformat zulassen.

• Datum: Wird verwendet, um Datum und Uhrzeit einzugeben. Benutzerdefiniertes Datenformat zulassen.

• Demnächst
  • Zeit

​

Präsentation

• Text: Es wird verwendet, um Zeichenketten anzuzeigen und erlaubt das Abrufen dynamischer Daten durch JavaSript. Unterstütze Markdown-Syntax. Klicke hier um mehr darüber zu erfahren.

• Bild: Wird verwendet, um Bilder anzuzeigen. Die Bildquelle könnte eine URL oder Base64-Daten sein.

• Schaltfläche: Klicken, um die zugehörige Geschäftslogik zu aktivieren

• Symbol: Wird verwendet, um Aktionen auszudrücken, Daten zu kategorisieren und Ereignisse auszulösen, wenn angeklickt wird

• Statistik: Zur Anzeige der Statistiknummer

• Preis: Wird zum Eingeben oder Anzeigen von Bewertungen verwendet

• Balkenfortschritt: Wird verwendet, um den Fortschritt anzuzeigen

• Kreisfortschritt: Wird verwendet, um den Fortschritt anzuzeigen

• Timeline: Wird verwendet, um Zeitfluss-Informationen anzuzeigen, in der Regel Ereignisse durch Rückblendung, aufzeichnen verfolgt, was der Benutzer jetzt tut und was er in der Vergangenheit getan hat.

• Trennung: Wird verwendet, um verschiedene Inhalte zu trennen

• Registerkarten: Tabs kategorisieren Inhalte, um eine große Menge an Informationen auf einem begrenzten Speicherplatz darzustellen. Benutzer können ganz einfach zwischen Tab-Panels wechseln, ohne von einer Seite auf eine andere zu wechseln

• Menü: Wird verwendet, um Seitenstruktur anzuzeigen, Seitensprung zu steuern oder andere Ereignisse auszulösen

• Container: Gruppieren Sie Komponenten zu Karten, die mehrere Ansichten unterstützen. Klicke hier um mehr zu erfahren

• Form: Die Daten der Eingabekomponenten in ein Objekt als Wert der Formkomponente packen die direkt an die API gesendet werden können

• Liste: Passen Sie die Komponenten in der Liste an und zeigen Sie die Daten an

• Modal: Daten anzeigen oder Operationen über eine schwebende Ebene durchführen, wodurch die Interaktion mit der Benutzeroberfläche benutzerfreundlicher wird

• PDF: Unterstützt eine PDF-URL oder base64-kodierte Daten

• Video: Unterstützen Sie die meisten Video-Dienste oder einen direkten Link zu einem beliebigen Video-Dateityp.

• Karussell: Bildkarussell.

• Demnächst
  • Audio
  • Schritte
  • Einklappbar
  • Kartenbox

​

Daten

• Diagramm: Visualisieren Sie Ihre Daten, unterstützen Spaltendiagramm, Liniendiagramm, Scatter-Diagramm, Tortendiagramm. Klicke hier um mehr darüber zu erfahren.

• Tabelle: Eine übliche Art, Ihre Daten anzusehen und mit ihnen zu interagieren. Sie können Sortierungen, Filter, Seiteninierung und Download-Zeilen von Informationen sortieren. Tabellen unterstützen auch die Zeilenauswahl und benutzerdefinierte Spalten. Klicke hier um mehr darüber zu erfahren.

​

Nach einer Komponente suchen

Sie können auf die Registerkarte INSERT auf der rechten Seite klicken, um die Komponentenliste einzugeben. Geben Sie den Komponentennamen ein und suchen Sie nach der Komponente über das Eingabefeld oben.

​

Event-Handler verwenden, um Ereignisse auszulösen

Nehmen Sie die Tastenkomponente als Beispiel Sie können einen Ereignis-Handler für die Komponente mittels des angezeigten Bildes festlegen, um eine Aktion auszulösen oder andere Komponenten zu steuern, usw. Wenn Sie auf eine Komponente klicken oder die Daten der Komponente wechseln, können entsprechende Ereignisse ausgelöst werden.

​

Die Komponentendaten in Aktionen verwenden

Sie können Daten von Komponenten in Aktionen oder anderen Komponenten verwenden. Wenn Sie die Eingabekomponente als Beispiel nehmen, können Sie {{input1.value}} verwenden, um den eingegebenen Wert in der Komponente zu erhalten. Verschiedene Komponenten können unterschiedliche Datenformate haben. Bitte sehen Sie sich die Datenformate über das linke Fenster an.