--- url: https://nsh.dev/de/elements/select description: "Die Select-Komponente: ein Wert, der aus einer Liste von Elementen ausgewählt wird, mit einem Popup am Auslöser auf dem Desktop und einem Sheet auf Smartphones, mit Tastaturbedienung, Typeahead, Suche und Abschnitten, gestaltet von der App." demo: https://nsh.dev/play/index.html#el-select --- # Select Ein Select wählt einen Wert aus einer Liste von Elementen: eine Einstellung, einen Filter, ein Land, eine Zeitzone. Der Trigger der App öffnet die Liste, dargestellt so, wie es jedes Gerät erwartet: - Auf Desktops und in Desktop-Browsern ein Popup über dem Trigger, wobei die gewählte Zeile über dem Trigger liegt, sodass der gewählte Titel an seiner Stelle bleibt (die Position `item-aligned` von shadcn/ui). Es ist so breit wie der Trigger (die Breite `popupStyle` / `popupClass` der App legt eine andere fest, wie bei `gpui-component` mit `menu_width`) und so hoch wie seine Zeilen, bis zum verfügbaren Platz auf dem Bildschirm. Ohne Auswahl öffnet es sich unterhalb des Triggers. Die Tastatur bewegt sich durch die Elemente und wählt eines aus. - Auf Smartphones und Tablets ein Sheet am unteren Bildschirmrand über einem Backdrop. Das Select besitzt das Verhalten: den Wert (den der App oder seinen eigenen), den Öffnungszustand, die Tastatur, Typeahead, Suche, Abschnitte, die hervorgehobene Zeile und das, was Screenreader ansagen. Das Aussehen ist Sache der App: Sie gestaltet den Trigger, das Popup, die Liste, die Zeilen, die Header der Abschnitte und das Suchfeld oder zeichnet die Zeilen selbst. ```rust use nsh_base::{SelectEntry, SelectItem, select, theme}; use nsh_core::prelude::*; const FRUITS: [(&str, &str); 5] = [ ("apple", "Apple"), ("banana", "Banana"), ("blueberry", "Blueberry"), ("grapes", "Grapes"), ("pineapple", "Pineapple"), ]; fn fruit_select() -> impl IntoElement { let fruit = signal(None::); let title = move || { let chosen = fruit.get(); FRUITS .iter() .find(|(value, _)| Some(*value) == chosen.as_deref()) .map_or("Pick a fruit", |(_, title)| *title) .to_string() }; select() .items( FRUITS .iter() .map(|&(value, title)| SelectItem::new(value, title).disabled(value == "grapes")) .collect::>(), ) .value(move || fruit.get()) .on_change(move |next: &Option| fruit.set(next.clone())) .accessibility_label("Fruit") .offset(px(4.0)) .popup_style(|s| { s.p_1() .rounded_lg() .border_1() .border_color(move || theme().border) .bg(move || theme().popover) .text_color(move || theme().popover_foreground) .shadow_md() }) .item_class("rounded-md focus:bg-accent selected:font-medium disabled:opacity-50") .trigger( view() .h_9() .w_48() .flex_row() .items_center() .justify_between() .px_3() .rounded_md() .border_1() .border_color(move || theme().input) .hover(|s| s.bg(move || theme().accent)) .child(text(title)) .child(text("▾").text_color(move || theme().muted_foreground)), ) .render_item(|item: &SelectEntry| { view() .flex_row() .items_center() .px_2() .py_1p5() .child(text(item.title.clone()).text_sm()) }) } ``` ```tsx import { mount, signal, Text, View } from "nsh"; import { Select } from "nsh/base"; const FRUITS = [ { value: "apple", title: "Apple" }, { value: "banana", title: "Banana" }, { value: "blueberry", title: "Blueberry" }, { value: "grapes", title: "Grapes", disabled: true }, { value: "pineapple", title: "Pineapple" }, ]; function App() { const fruit = signal(null); const title = () => FRUITS.find((f) => f.value === fruit())?.title; return ( ``` Die Zeilen sind eine virtualisierte Liste in der Scroll-View des Popups: Eine Liste mit Tausenden Elementen erzeugt nur die Zeilen im sichtbaren Bereich, und das Popup scrollt, wenn seine Zeilen höher sind als der verfügbare Platz. ## Wert Mit `value` gehört das gewählte Element der App: Das Select zeigt das Element dieses Werts und meldet eine Auswahl mit `onChange({ value })`; die App setzt `value`, um ihr zu folgen, oder behält ihren eigenen Wert. `value={null}` bedeutet, dass nichts gewählt ist. Wird es weggelassen, behält das Select seinen eigenen Wert, zunächst aus `defaultValue`. `onChange` meldet Änderungen: Das erneute Wählen des gewählten Elements schließt die Liste. `cleanable` fügt einen Clear-Button hinzu, solange ein Element gewählt ist: Ein Druck löscht den Wert, gemeldet als `onChange({ value: null })`, und die Liste bleibt geschlossen. Der Button steht in der View des Selects nach dem Trigger, nicht in ihm, sodass ein Druck darauf die Liste nie öffnet. Die App platziert ihn (mit `absolute` über dem Ende des Triggers, wo sonst ein Chevron wäre) und füllt ihn: ```tsx No time zone found} trigger={trigger} /> ``` Auf Desktops übernimmt das Suchfeld die Tastatur, sobald sich die Liste öffnet; auf Touchscreens erscheint die Tastatur, wenn das Feld gedrückt wird. Jedes Öffnen beginnt mit einer leeren Suche. ## Zeilen, die die App zeichnet `itemClass` gestaltet die Zeile jedes Elements, die den Titel des Elements zeigt, bis `renderItem` sie zeichnet: `focus:` gilt für die hervorgehobene Zeile (dort, wo die Tasten oder der Zeiger sind), `selected:` für die gewählte und `disabled:` für eine deaktivierte. Um eine Zeile zu zeichnen, gib `renderItem` an: Es erhält, was das Element ist ([`SelectEntry`](#types)), und liefert den Inhalt der Zeile zurück, für die sichtbaren Zeilen. Es erhält nie den Zustand der Zeile: Mit `group` in `itemClass` folgt der Inhalt den Zuständen der Zeile über die Klassen `group-focus:`, `group-selected:` und `group-disabled:`, sodass die Darstellung einmal pro Element erstellt wird und eine Bewegung der Hervorhebung oder eine Auswahl nichts neu zeichnet. `renderGroup` zeichnet den Header eines Abschnitts auf dieselbe Weise: ```tsx