ILLA home page
  1. ILLA components

ILLA zapewnia dziesiątki wstępnie zbudowanych komponentów do szybkiego budowania interfejsów web-front-end.

Lista komponentów

Inputs

  • Wpis: Używane do uzyskania krótszego ciągu wprowadzanego przez użytkowników
  • Numer wejściowy: używany do uzyskania numeru wprowadzonego przez użytkowników.
  • Edytowalny tekst: Używany do wyświetlania ciągu znaków i przełącz do trybu edycji po kliknięciu.
  • Wpis pola tekstowego: używany do uzyskania długiego ciągu wprowadzanego przez użytkowników
  • Przesyłanie: Używane do wybierania plików lokalnych i analizowania ich w bazie base64. Kliknij tutaj aby dowiedzieć się więcej o przesyłaniu
  • Już wkrótce
    • Nagrywanie
    • Suwak
    • Range slider
    • Bogaty tekst wprowadzany
    • JSON editor

Wybierz wejścia

  • Przełącznik: Przełącznik, który może zwracać wartość true lub false
  • Wybierz: Wyświetl wszystkie opcje w rozwijanym trybie i pozwól użytkownikom na wybór
  • Grupa radiowa: Pokaż wszystkie opcje i pozwól użytkownikom wybrać jedną z nich
  • Grupa pola wyboru: Pokaż wszystkie opcje i pozwól użytkownikom wybrać wiele opcji
  • Kaskadowa: Używane do wyświetlania i wybierania zestawu powiązanych danych
  • Przycisk radiowy: Wyświetl wszystkie opcje w stylu przycisku. Zezwalaj użytkownikom na wybranie jednego z nich.
  • Już wkrótce
    • Wielokrotny wybór
    • Wybierz drzewo

Kalendarz wejścia

  • Data: Używane do wprowadzenia daty. Zezwalaj na niestandardowy format danych.
  • Zakres dat: Używany do wprowadzenia zakresu dat. Zezwalaj na niestandardowy format danych.
  • Data godziny: Używane do wprowadzenia daty i godziny. Zezwalaj na niestandardowy format danych.
  • Już wkrótce
    • Czas

Prezentacja

  • Tekst: służy do wyświetlania ciągów i umożliwia pobieranie danych dynamicznych przez JavaSript. Wesprzyj składnię markdown. Kliknij tutaj, aby dowiedzieć się więcej na ten temat.
  • Obraz: Używany do wyświetlania obrazów. Źródłem obrazu może być adres URL lub dane base64.
  • Przycisk: Kliknij, aby wyzwalać odpowiednią logikę biznesową
  • Ikona: Używane do ekspresji akcji, stanu, kategoryzacji danych i wyzwalania zdarzeń po kliknięciu
  • Statystyki: Używane do wyświetlania numeru statystycznego
  • Częstotliwość: Używane do wprowadzania lub wyświetlania ocen
  • Postęp na pasku: Używany do wyświetlania postępu
  • Postęp kółka: Używane do wyświetlania postępu
  • Oś czasowa: Używana do wyświetlania informacji o przepływie czasu, zazwyczaj nagrywanie zdarzeń w czasie przez flashback, śledzenie tego, co użytkownik robi teraz i co zrobił w przeszłości.
  • Dystrybutor: Używany do oddzielania różnych treści
  • Zakładki: Zakładki kategoryzują zawartość, aby pokazać dużą ilość informacji w ograniczonej przestrzeni. Użytkownicy mogą z łatwością przełączać się między panelami kart bez przechodzenia z jednej strony na drugą
  • Menu: Używane do wyświetlania struktury strony, sterowania skokiem strony lub wyzwalania innych zdarzeń
  • Kontener: Grupuj komponenty na karty, które obsługują wiele widoków. Kliknij tutaj aby dowiedzieć się więcej
  • Formularz: Zapakuj dane komponentów wejściowych do obiektu jako wartość komponentu formularza, które można bezpośrednio przesłać do API
  • Lista: Dostosuj komponenty na liście i wyświetl dane
  • Modal: Wyświetlaj dane lub wykonuj operacje przez pływającą warstwę, dzięki czemu interakcja interfejsu użytkownika będzie bardziej przyjazna
  • PDF: Obsługa adresu URL PDF lub danych zakodowanych base64
  • Film: Obsługuje większość usług wideo lub bezpośredni link do dowolnego powszechnie używanego typu plików wideo.
  • Karuzela: karuzela obrazów.
  • Już wkrótce
    • Dźwięk
    • Etapy
    • Zwijany
    • Mapa

Dane

  • Wykres: Wizualizuj swoje dane, mapy kolumnowe, wykres liniowy, wykres rozpraszania, wykres kołowy. Kliknij tutaj, aby dowiedzieć się więcej na ten temat.
  • Tabela: Wspólny sposób oglądania i interakcji ze swoimi danymi. Możesz sortować, filtrować, stronicować i pobierać wiersze informacji. Tabele obsługują również wybór wierszy i niestandardowe kolumny. Kliknij tutaj, aby dowiedzieć się więcej na ten temat.

Szukaj komponentu

Możesz kliknąć kartę INSERT na prawym panelu, aby wejść do listy komponentów. Wprowadź nazwę komponentu i wyszukaj komponent za pomocą pola wprowadzającego powyżej.

Użyj obsługi zdarzeń do uruchomienia zdarzeń

Przykład dla komponentu przycisku możesz ustawić obsługę zdarzeń dla komponentu poprzez pokazanie obrazu, aby uruchomić akcję lub sterować innymi komponentami itp. Po kliknięciu na komponent lub po zmianie danych komponentu można wyzwalać odpowiednie zdarzenia.

Użyj danych składowych w akcjach

Możesz użyć danych składników w akcjach lub innych komponentach. Przyjmując za przykład komponent wejściowy, możesz użyć {{input1.value}} , aby uzyskać wprowadzoną wartość w komponencie. Różne składniki mogą mieć różne formaty danych. Proszę wyświetlić formaty danych przez lewy panel.