ILLA home page
  1. Cascader

​

Kaskader jest typem komponentu wejściowego, który umożliwia użytkownikom wybieranie danych hierarchicznych, takich jak kategoria lub podkategoria z menu rozwijanego. Gdy użytkownik wybierze opcję z rozwijanego menu, kaskadowy automatycznie zaktualizuje się, aby wyświetlić odpowiednie podkategorie lub opcje w zagnieżdżonym menu rozwijanym.

Na przykład, jeśli masz komponent wejściowy kaskadowy do wyboru kategorii produktu, pierwsze menu rozwijane może pokazywać wszystkie dostępne kategorie, takie jak “Elektroniczne”, “Ubranie”, “Książki”. Gdy użytkownik wybierze “Elektroniki”, kaskader zaktualizuje się w celu pokazania podkategorii elektroniki, takich jak “Telefony”, “Laptopy”, “Tablety”. Pozwala to użytkownikom na szybką i łatwą nawigację za pomocą danych hierarchicznych i wybranie potrzebnej opcji.

​
Właściwości

Dostępne właściwości kaskadu. JavaScript może być napisany w celu przeczytania lub zmiany informacji o komponentach.

WłaściwościOpis
Źródło danychKażda opcja musi mieć format JSON i zawierać dwa klucze, wartość i etykietę. Używając tablic, możesz tworzyć opcje na tym samym poziomie. A opcje podrzędne mogą być tworzone za pomocą atrybutu “dzieci”.
Wartość domyślnaWartość początkowa komponentu. Możesz dynamicznie zmienić wartość początkową wpisując JavaScript w {{}}.
ZastępcaWartość będzie wyświetlana, gdy pole wejściowe jest puste.
EtykietaNazwa pola wyświetlanego użytkownikowi
ZastępcaPodpis używany do szczegółowego opisu pola
Ukryta etykietaUstaw czy wyświetlić etykietę
PołożenieUstaw położenie etykiety względem komponentu
WyrównanieUstaw wyrównanie (wyrównanie do lewej lub prawej) etykiety
WidthKiedy etykieta znajduje się po lewej stronie składnika, ustaw stosunek szerokości etykiety.
Obsługa zdarzeńWyzwalacz zapytań, sterowanie komponentami lub wywoływanie innych interfejsów API w odpowiedzi na zdarzenia komponentów.
WyłączoneKontroluj status czy komponent jest wyłączony. Komponent nie może być zmodyfikowany lub aktywowany, gdy jest wyłączony.
Tylko do odczytuKontroluj status komponentu tylko do odczytu. Komponent tylko do odczytu może być wybrany i uaktywniony, ale nie może być modyfikowany.
Pokaż przycisk wyczyśćkontroluj, czy przycisk wyczyść jest wyświetlany w polu wejściowym
Metoda rozszerzeniaUstaw jak kaskadowy rozwija się (poprzez kliknięcie lub najechanie)
WskazówkaUżytkownicy mogą tutaj wprowadzić podpowiedź składową. Podpowiedź zostanie wyświetlona, gdy jest ostrością. Format Markdown jest obsługiwany.
HiddenDynamicznie kontroluj czy komponent jest ukryty. Możesz zmienić ukryty status poprzez dynamiczną wartość logiczną.

​
Metody

Możesz użyć innych komponentów do kontroli komponentu. Popieramy następujące dwie metody:

  • setValue

Aby ustawić wybraną opcję, na przykład {{”value1”}}

WłaściwościOpis
WartośćInput value
  • clearValue

Aby wyczyścić wartość wybranego komponentu

Przykładowe użycie:

Komponent kaskadowy obsługuje obsługę zdarzenia onChange innych komponentów za pomocą wbudowanego systemu zdarzeń. Skonfiguruj za pomocą poniższych przykładowych kroków:

  1. Dodaj wyzwalacz zdarzenia do komponentu, którego chcesz słuchać. Na przykład, jeśli chcesz słuchać zdarzenia onChange komponentu grupy radiowej, dodałbyś wyzwalacz zdarzenia do tego komponentu grupy radiowej.
  2. W edycji zdarzenia wybierz w akcji składnik kontroli, wybierz komponent Cascader, który chcesz zaktualizować jako cel wydarzenia.
  3. Wybierz działanie SetValue i wybierz odpowiednią wartość komponentu Cascader. Będzie to wartość komponentu Cascader i zostanie zaktualizowana po uruchomieniu zdarzenia.
  4. Zapisz ustawienia wyzwalacza zdarzenia i powtórz proces dla innych komponentów, których chcesz słuchać.

Po skonfigurowaniu wyzwalaczy zdarzenia, komponent wejściowy Cascadera będzie automatycznie aktualizowany za każdym razem, gdy zdarzenie onChange` zostanie wyzwalane na innych komponentach. Pozwala to na tworzenie dynamicznych interfejsów, które odpowiadają na dane wejściowe użytkownika w czasie rzeczywistym, ułatwianie użytkownikom nawigowania i interakcji z aplikacją.

​
Obsługa zdarzeń

WydarzenieOpis
ZmianaGdy użytkownik zmienia wybraną wartość opcji
Skupienie sięKiedy użytkownik przenosi kursor myszy na komponent kaskadowy
BlurKiedy użytkownik jest gotowy, wybiera opcje i odejdź od skupienia się na komponencie kaskadowym

​
Dane

Komponent posiada powszechnie używane dane, które mogą być wywoływane przez {{componentName.propertyName}} w aplikacji.

Nazwa własnościOpis
tryb źródłowy danychtryb źródła danych w kaskadach (domyślna dynamiczność)
nazwa wyświetlaczanazwa tego składnika (tj. kaskadowy1)
Rozwiń Wyzwalaczwyzwalacz zdarzeń (kliknięcie)
wartośćWybrana wartość
etykietawartość etykiety
Wyrównanie etykietywyrównanie etykiety kaskadowej (lewa lub prawa)
pozycja etykietypozycja etykiety kaskadowej (lewa lub prawa)
Szerokość etykietyliczba całkowita reprezentująca szerokość etykiety
symbol zastępczywartość zastępcza

Przykład: {{cascader1.value[0]}

​
Przypadek użycia

Następnie pokażemy dynamicznie mapować dane od źródła danych do opcji kaskadowych.

​
Krok 1 Dodaj akcję

Utwórzmy tabelę w Supabase o nazwie project, oraz podtablicę o nazwie Therist, która jest dostosowana do project_id.

Następnie możemy utworzyć nową akcję dla Supabase z listy działań, wymieniając wszystkie dane w projekcie i nazwaną supabasedb1 

WYBIERZ [project.id](http://project.id/) jako projekt_id, [therapist.name](http://therapist.name/) jako termoterapeutyk dołącza do projektu na therapist.project_id = [project.id](http://project.id/)

​
Etap 2 Przekształć dane

Następnie możemy włączyć` sekcję transformator` w sekcji Wybierz sekcję. W obszarze tekstowym możemy przechwycić tylko wartości i etykiety, których potrzebujemy, z danych i przekształcić je w opcje przyjazne kaskadowi za pomocą JavaScript.

const transformedArray = data.reduce((acc, current) => {
  const existing = acc.find((item) => item.value === current. roject_id);
  jeśli (istnieje) {
    const therapist = { value: current.therapist_id, label: current.therapist_name };
    istnieje. hildren.push(therapist);
  } else {
    const project = { value: current. roject_id, etykieta: current.project_name, children: [] };
    const therapist = { value: current.therapist_id, label: current.therapist_name };
    project.potomne ush(terapi);
    acc.push(project);
  }
  return acc;
}, []);

return transformedArray;

Ostateczne działanie powinno być pokazane w taki sam sposób, jak

kaskader 1

Kliknij Zapisz i Uruchom`, aby aktywować tę akcję.

​
Krok 3 Skonfiguruj komponent

Po przeciągnięciu komponentu kaskadowego do płótna, możemy kliknąć pojedynczo aby skonfigurować jego źródło danych do {{supabasedb1.data}}

Opcjonalnie: Ustawiamy domyślną wartość {{['a', '1']}} dla odpowiadających {{['Psychotherapy'], ['James']}}.

kaskader 2