--- url: https://nsh.dev/fr/elements/select description: "Le composant Select : une valeur choisie dans une liste d'éléments, une fenêtre contextuelle au niveau de son déclencheur sur ordinateur et une feuille (sheet) sur téléphone, avec le clavier, la saisie prédictive, la recherche et les sections, stylisé par l'application." demo: https://nsh.dev/play/index.html#el-select --- # Select Un select permet de choisir une valeur dans une liste d'éléments : un réglage, un filtre, un pays, un fuseau horaire. Le déclencheur de l'app ouvre la liste, présentée comme chaque appareil l'attend : - Sur les ordinateurs de bureau et dans les navigateurs de bureau, une popup au-dessus du déclencheur, avec la ligne sélectionnée superposée au déclencheur, de sorte que le titre choisi reste à sa place (la position `item-aligned` de shadcn/ui), aussi large que le déclencheur (la largeur `popupStyle` / `popupClass` de l'app en impose une autre, comme le `menu_width` de `gpui-component`) et aussi haute que ses lignes, dans la limite de la place disponible à l'écran ; sans sélection, elle s'ouvre sous le déclencheur. Le clavier parcourt les éléments et en choisit un. - Sur les téléphones et les tablettes, une feuille en bas de l'écran, au-dessus d'un fond d'arrière-plan. Le select gère le comportement : la valeur (celle de l'app, ou la sienne), l'état d'ouverture, le clavier, la saisie prédictive, la recherche, les sections, la ligne en surbrillance et ce qu'entendent les lecteurs d'écran. L'apparence revient à l'app : elle stylise le déclencheur, la popup, la liste, les lignes, les en-têtes de section et le champ de recherche, ou dessine elle-même les lignes. ```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 ( ``` Les lignes forment une liste virtualisée dans la vue défilante de la popup : une liste de milliers d'éléments ne crée que les lignes visibles, et la popup défile lorsque ses lignes dépassent la place dont elle dispose. ## Valeur Avec `value`, l'app possède l'élément choisi : le select affiche l'élément de cette valeur et signale un choix avec `onChange({ value })` ; l'app définit `value` pour le suivre, ou garde sa propre valeur. `value={null}` signifie que rien n'est choisi. S'il est omis, le select garde sa propre valeur, à partir de `defaultValue` au départ. `onChange` signale les changements : choisir à nouveau l'élément déjà choisi ferme la liste. `cleanable` ajoute un bouton d'effacement tant qu'un élément est choisi : un appui efface la valeur, signalé par `onChange({ value: null })`, et la liste reste fermée. Le bouton se place après le déclencheur dans la vue du select, et non à l'intérieur, de sorte qu'un appui dessus n'ouvre jamais la liste ; l'app le place (sur la fin du déclencheur avec `absolute`, là où serait un chevron) et le remplit : ```tsx No time zone found} trigger={trigger} /> ``` Sur les ordinateurs de bureau, le champ de recherche prend le clavier à l'ouverture de la liste ; sur les écrans tactiles, le clavier apparaît lorsqu'on appuie sur le champ. Chaque ouverture commence avec une recherche vide. ## Lignes dessinées par l'app `itemClass` stylise la ligne de chaque élément, qui affiche le titre de l'élément jusqu'à ce que `renderItem` la dessine : `focus:` s'applique à la ligne en surbrillance (là où se trouvent les touches ou le pointeur), `selected:` à la ligne choisie et `disabled:` à une ligne désactivée. Pour dessiner une ligne, donnez `renderItem` : elle reçoit ce qu'est l'élément ([`SelectEntry`](#types)) et renvoie le contenu de la ligne, pour les lignes visibles. Elle ne reçoit jamais l'état de la ligne : avec `group` dans `itemClass`, le contenu suit les états de la ligne grâce aux classes `group-focus:`, `group-selected:` et `group-disabled:`, de sorte que le dessin est réalisé une seule fois par élément et qu'un déplacement de la surbrillance ou un choix ne redessine rien. `renderGroup` dessine l'en-tête d'une section de la même manière : ```tsx