--- url: https://nsh.dev/it/elements/select description: "Il componente Select: un valore scelto da un elenco di elementi, un popup in corrispondenza del trigger su desktop e un sheet su smartphone, con tastiera, typeahead, ricerca e sezioni, con stile definito dall'app." demo: https://nsh.dev/play/index.html#el-select --- # Select Un select permette di scegliere un valore da un elenco di elementi: un'impostazione, un filtro, un paese, un fuso orario. Il trigger dell'app apre l'elenco, presentato come ogni dispositivo si aspetta: - Sui desktop e nei browser desktop, un popup sopra il trigger con la riga selezionata sovrapposta al trigger, così il titolo scelto resta dov'era (la posizione `item-aligned` di shadcn/ui), largo quanto il trigger (la larghezza `popupStyle` / `popupClass` dell'app ne imposta un'altra, come `menu_width` di `gpui-component`) e alto quanto le sue righe, fino allo spazio disponibile sullo schermo; senza alcuna selezione si apre sotto il trigger. La tastiera scorre gli elementi e ne sceglie uno. - Su telefoni e tablet, uno sheet in fondo allo schermo sopra un backdrop. Il select gestisce il comportamento: il valore (quello dell'app, oppure il proprio), lo stato di apertura, la tastiera, il typeahead, la ricerca, le sezioni, la riga evidenziata e ciò che sentono gli screen reader. L'aspetto è dell'app: ne stila il trigger, il popup, l'elenco, le righe, le intestazioni delle sezioni e il campo di ricerca, oppure disegna lei stessa le righe. ```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 ( ``` Le righe sono un elenco virtualizzato nella scroll view del popup: un elenco di migliaia di elementi genera solo le righe in vista, e il popup scorre quando le sue righe sono più alte dello spazio disponibile. ## Valore Con `value`, l'app possiede l'elemento scelto: il select mostra l'elemento con quel valore e segnala una scelta con `onChange({ value })`; l'app imposta `value` per seguirla, oppure mantiene il proprio valore. `value={null}` significa nessuna scelta. Se omesso, il select mantiene un proprio valore, inizialmente preso da `defaultValue`. `onChange` segnala i cambiamenti: scegliere di nuovo l'elemento già scelto chiude l'elenco. `cleanable` aggiunge un pulsante di cancellazione finché un elemento è scelto: una pressione azzera il valore, segnalato come `onChange({ value: null })`, e l'elenco resta chiuso. Il pulsante viene dopo il trigger nella view del select, non al suo interno, quindi una pressione su di esso non apre mai l'elenco; è l'app a posizionarlo (sopra l'estremità del trigger con `absolute`, dove ci sarebbe un chevron) e a riempirlo: ```tsx No time zone found} trigger={trigger} /> ``` Sui desktop il campo di ricerca prende la tastiera quando l'elenco si apre; sui touch screen la tastiera compare quando si preme il campo. Ogni apertura parte con una ricerca vuota. ## Righe disegnate dall'app `itemClass` stila la riga di ogni elemento, che mostra il titolo dell'elemento finché `renderItem` non la disegna: `focus:` si applica alla riga evidenziata (dove si trovano i tasti o il puntatore), `selected:` a quella scelta e `disabled:` a una disabilitata. Per disegnare una riga, fornisci `renderItem`: riceve ciò che è l'elemento ([`SelectEntry`](#types)) e restituisce il contenuto della riga, per le righe in vista. Non riceve mai lo stato della riga: con `group` in `itemClass`, il contenuto segue gli stati della riga con le classi `group-focus:`, `group-selected:` e `group-disabled:`, quindi il disegno avviene una sola volta per elemento e uno spostamento dell'evidenziazione o una scelta non ridisegnano nulla. `renderGroup` disegna allo stesso modo l'intestazione di una sezione: ```tsx