--- url: https://nsh.dev/ru/elements/select description: "Компонент Select: выбор одного значения из списка элементов, всплывающее окно у триггера на десктопах и нижняя панель на телефонах, с поддержкой клавиатуры, быстрого поиска по набору текста, поиска и разделов, со стилями, задаваемыми приложением." demo: https://nsh.dev/play/index.html#el-select --- # Select Select выбирает одно значение из списка элементов: настройку, фильтр, страну, часовой пояс. Список открывается триггером приложения и выглядит так, как ожидает пользователь на каждом устройстве: - На настольных платформах и в браузерах на десктопе это всплывающее окно поверх триггера. Выбранная строка накладывается на триггер, поэтому выбранный заголовок остаётся на месте (позиция `item-aligned` из shadcn/ui). Окно по ширине равно триггеру (другую ширину задаёт `popupStyle` / `popupClass` приложения, как `menu_width` у `gpui-component`), а по высоте соответствует строкам, но не превышает свободного места на экране. Если ничего не выбрано, список открывается под триггером. Клавиатура перемещается по элементам и выбирает один из них. - На телефонах и планшетах это нижняя панель (sheet) в нижней части экрана поверх подложки. Select отвечает за поведение: значение (принадлежащее приложению или собственное), состояние открытости, клавиатуру, typeahead, поиск, секции, подсвеченную строку и то, что озвучивают screen readers. Внешний вид задаёт приложение: оно оформляет триггер, всплывающее окно, список, строки, заголовки секций и поле поиска или рисует строки само. ```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 ( ``` Строки образуют виртуализированный список в прокручиваемой области всплывающего окна: список из тысяч элементов отрисовывает только видимые строки, а окно прокручивается, когда строки выше доступного места. ## Значение С `value` выбранным элементом владеет приложение: select показывает элемент с этим значением и сообщает о выборе через `onChange({ value })`; приложение устанавливает `value`, чтобы следовать за выбором, или хранит своё. `value={null}` означает, что ничего не выбрано. Если свойство не задано, select хранит собственное значение, сначала взятое из `defaultValue`. `onChange` сообщает об изменениях: повторный выбор уже выбранного элемента закрывает список. `cleanable` добавляет кнопку очистки, пока элемент выбран: нажатие очищает значение (о чём сообщает `onChange({ value: null })`), а список остаётся закрытым. Кнопка находится в представлении select после триггера, а не внутри него, поэтому нажатие на неё никогда не открывает список. Приложение размещает её само (поверх конца триггера с помощью `absolute`, там, где был бы шеврон) и наполняет содержимым: ```tsx No time zone found} trigger={trigger} /> ``` На настольных платформах поле поиска получает клавиатуру в момент открытия списка; на сенсорных экранах клавиатура появляется при нажатии на поле. Каждое открытие начинается с пустого поиска. ## Строки, которые рисует приложение `itemClass` оформляет строку каждого элемента, которая показывает название элемента, пока `renderItem` не нарисует её иначе: `focus:` применяется к подсвеченной строке (там, где находятся клавиши или указатель), `selected:` — к выбранной, а `disabled:` — к отключённой. Чтобы нарисовать строку, передайте `renderItem`: он получает описание элемента ([`SelectEntry`](#types)) и возвращает содержимое строки для видимых строк. Состояние строки он никогда не получает: при `group` в `itemClass` содержимое следует состояниям строки через классы `group-focus:`, `group-selected:` и `group-disabled:`, поэтому отрисовка выполняется один раз на элемент, а перемещение подсветки или выбор ничего не перерисовывают. `renderGroup` рисует заголовок секции тем же способом: ```tsx