--- url: https://nsh.dev/ja/elements/select description: "Select コンポーネント: 項目のリストから 1 つの値を選択します。デスクトップではトリガーの位置にポップアップとして、スマートフォンではシートとして表示され、キーボード操作、タイプアヘッド、検索、セクションに対応し、スタイルはアプリ側で指定できます。" demo: https://nsh.dev/play/index.html#el-select --- # Select Select は、アイテムのリストから 1 つの値を選ぶコンポーネントです。設定、フィルター、国、タイムゾーンなどに使います。アプリのトリガーがリストを開き、リストは各デバイスに合わせた形で表示されます。 - デスクトップおよびデスクトップブラウザーでは、選択中の行をトリガーに重ねたポップアップとして表示するため、選ばれたタイトルは元の位置に留まります(shadcn/ui の `item-aligned` position)。幅はトリガーと同じで(アプリの `popupStyle` / `popupClass` の幅で別の幅を指定でき、`gpui-component` の `menu_width` と同様です)、高さは行の高さに合わせ、画面に収まる範囲までです。何も選択されていない場合はトリガーの下に開きます。キーボードでアイテム間を移動し、選択できます。 - スマートフォンとタブレットでは、バックドロップの上に画面下部のシートとして表示します。 Select は動作を担います。値(アプリが持つ値、または Select 自身の値)、開閉状態、キーボード、タイプアヘッド、検索、セクション、ハイライトされた行、スクリーンリーダーが読み上げる内容です。見た目はアプリ側が決めます。トリガー、ポップアップ、リスト、行、セクションのヘッダー、検索フィールドをスタイルするか、行を自分で描画します。 ```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))を受け取り、表示範囲の行の内容を返します。行の状態は渡されません。`itemClass` の `group` を使うと、内容は行の状態に応じて `group-focus:`、`group-selected:`、`group-disabled:` クラスで変化します。そのため描画はアイテムごとに 1 回で済み、ハイライトの移動や選択で再描画されることはありません。`renderGroup` も同じ方法でセクションのヘッダーを描画します。 ```tsx