⭐️
【Polaris和訳】Components/Lists and tables⑦
この記事について
この記事は、Polaris/Components/Lists and tablesの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Props
bulkActions
型の配列: (ActionListSection | DisableableAction & BadgeAction)[]
ActionListSection
型: ActionListSection
型: DisableableAction & BadgeAction
(ActionListSection | DisableableAction & BadgeAction)[]
children
React.ReactNode
condensed
boolean
emptyState
React.ReactNode
hasMoreItems
boolean
headingsRequired
NonEmptyArray
itemCountRequired
number
lastColumnSticky
boolean
loading
boolean
promotedBulkActions
型の配列: (MenuGroupDescriptor | DisableableAction & BadgeAction)[]
MenuGroupDescriptor
type: MenuGroupDescriptor
type: DisableableAction & BadgeAction
(MenuGroupDescriptor | DisableableAction & BadgeAction)[]
resourceName
{plural: string, singular: string}
selectable
boolean
selectedItemsCount
型
All
型: "All"
Or
number
型: number
"All" | number
sort
React.ReactNode
onSelectionChange
関数のパラメーター
selectionTypeRequired
型: SelectionType
toggleTypeRequired
型: boolean
selection
型: string | Range
返り値の値
void
(selectionType: SelectionType, toggleType: boolean, selection: string | Range) => void
ビルド
プロジェクトでインデックステーブルを使用するには、以下のコンポーネントとサブコンポーネントを組み合わせます。
- インデックステーブル
- IndexTableRow（インデックステーブルロー
- IndexTableCell（インデックステーブルセル
- フィルター(オプション)
- ページネーションコンポーネント(オプション)
インデックステーブルコンポーネントは、リストのソート、フィルタリング、およびページネーションのための UI 要素を提供しますが、これらの操作のためのロジックは提供しません。ソートオプションが変更されたり、フィルタが追加されたり、2 ページ目が要求されたりした場合には、そのイベント（ネットワーク要求を含む）を処理して、新しいプロップでコンポーネントを更新する必要があります。
目的
Shopify は、顧客、製品、注文などのマーチャントビジネスを表すオブジェクトを中心に構成されています。例えば、個々の注文には、リンクできる専用のページが与えられています。Shopify ではこのようなオブジェクトをリソースと呼び、オブジェクトの専用ページを詳細ページと呼んでいます。
問題点
注文を例にとります。マーチャントはたくさんの注文を抱えています。マーチャントは、注文をスキャンして、各注文の異なる属性を表示し、どれが最初にアクションを起こす必要があるかを見つける方法が必要です。言い換えれば、個々の注文を見つけて、その詳細情報を呼び出し、行動を起こす方法が必要です。
解決策
インデックステーブルの機能は以下の通りです。
- 個々のリソースを複数の列で表示するコンテンツフォーマット
- 1 つまたは複数の個別リソースに対してアクションを起こすためのシステム
- 個々のリソースの詳細ページに移動するための手段
詳細ページには、個々のリソースのすべてのコンテンツとアクションが表示されるため、リソースリストは、これらの詳細ページの要約と考えることができます。このように、リソースリストは Shopify のナビゲーション階層の中間レベルに位置しています。
ベストプラクティス
インデックステーブルは
- クリックするとアクションを実行するアイテムがあること。アクションは、リソースの詳細ページに移動するか、またはアイテムの詳細を提供する必要があります。
- マーチャントのニーズに合った情報を提供するために、アイテム列のコンテンツとレイアウトをカスタマイズする。
- リストが長くなる場合、特にマーチャントのタスクによってソート順が異なる場合は、ソートをサポートします。
- リストが長くなる可能性がある場合は、フィルタリングをサポートします。
- 現在のリストに 50 以上のアイテムが含まれている場合は、ページ分割します。
- loading prop が true でアイテムが処理されている場合、最初のページロード時にスケルトンページコンポーネントをページの残りの部分に使用します。
インデックステーブルは、オプションで以下のことができます。
- 一度に多くのリストアイテムに適用されることが多いタスクのためのバルクアクションを提供する。例えば、マーチャントが多数の商品に同じタグを追加したい場合などです。
コンテンツのガイドライン
索引表は以下のようにする。
- リソースの種類を、通常は見出しで特定する。
リソースのすべてのメンバーが表示されていない場合は、それを示す。最近購入した製品をまとめてリンクするカードの場合。
-
一括操作の場合は、動詞＋名詞の公式に従う。
-
フィルターオプションおよび適用されたフィルターについては、コンテンツガイドラインに従う。
IndexTableRow
IndexTableRow は、IndexTable 内のアイテムを表す行をレンダリングするために使用されます。
IndexTableRow のプロパティ
| プロパティー | タイプ | 説明 |
|---|---|---|
| id | string |
行の一意の識別子 |
| selected | boolean |
行が選択されているかどうかを示す boolean プロパティ |
| position | number |
行のインデックス位置 |
| subdued | boolean |
行がサブデュエットされるべきかどうかを示す boolean プロパティ |
| status | RowStatus |
行がステータスを持つべきかどうかを示すプロパティ |
IndexTableCell は、IndexTableRow 内の 1 つのセルを描画するために使用されます。
IndexTableCell のプロパティ
| プロップ | タイプ | 説明 |
|---|---|---|
| flush | boolean |
セルがデフォルトのパディングを取り除くべきかどうかを示す boolean プロパティ |
関連コンポーネント
- 顧客のリストなど、詳細ページにリンクする関連項目のアクション可能なリストを作成するには、リソースリストコンポーネントを使用します。
- マーチャントが洞察力を高めたり、分析結果を確認するのに役立つような、比較や分析のための構造化されたデータを表示するには、データテーブルコンポーネントを使用します。
- 関連コンテンツのシンプルなリストを表示するには、リストコンポーネントを使用します。
List
リストは、関連するテキストのみのコンテンツのセットを表示します。リストの各項目は、箇条書きまたは数字で始まります。
Web
Bulleted list
特定の順番である必要がなく、アイコンなどの表示を必要としない、テキストのみの関連アイテムのリストに使用します。
React
<List type="bullet">
<List.Item>Yellow shirt</List.Item>
<List.Item>Red shirt</List.Item>
<List.Item>Green shirt</List.Item>
</List>
HTML
<div>
<ul class="Polaris-List">
<li class="Polaris-List__Item">Yellow shirt</li>
<li class="Polaris-List__Item">Red shirt</li>
<li class="Polaris-List__Item">Green shirt</li>
</ul>
<div id="PolarisPortalsContainer"></div>
</div>
Numbered list
固有の順序、優先順位、または順序を伝える必要がある場合に、関連するアイテムのテキストのみのリストに使用します。
React
<List type="number">
<List.Item>First item</List.Item>
<List.Item>Second item</List.Item>
<List.Item>Third Item</List.Item>
</List>
HTML
<div>
<ol class="Polaris-List Polaris-List--typeNumber">
<li class="Polaris-List__Item">First item</li>
<li class="Polaris-List__Item">Second item</li>
<li class="Polaris-List__Item">Third Item</li>
</ol>
<div id="PolarisPortalsContainer"></div>
</div>
Props
children
React.ReactNode
リストアイテム要素
type
"bullet" | "number"
表示するリストの種類
Android
箇条書きのリスト
特定の順序である必要がなく、アイコンなどの表示を必要としない、テキストのみの関連項目のリストに使用します。
番号付きリスト
固有の順序、優先順位、順番を伝える必要がある場合、テキストのみの関連項目リストに使用します。
アクセシビリティ
Android のアクセシビリティについては、Material Design と開発ドキュメントをご覧ください。
iOS
箇条書きのリスト
特定の順序である必要がなく、アイコンなどの表示を必要としない、テキストのみの関連項目のリストに使用します。
番号付きリスト
固有の順序、優先順位、または順序を伝える必要がある場合に、関連項目のテキストのみのリストに使用します。
アクセシビリティ
iOS のアクセシビリティについては、Apple のヒューマンインターフェイスガイドラインおよび API ドキュメントを参照してください。
アクセシビリティ
list コンポーネントは、リストのラッパー（箇条書きのリストの場合は<ul>、番号付きのリストの場合は<ol>）の中にリストアイテム（<li>）を出力します。デフォルトでは、リスト・アイテムは関連する要素のグループとして支援技術ユーザーに伝えられます。
レイアウトのためだけにアイテムをグループ化するには、stack コンポーネントの使用を検討してください。
ベストプラクティス
リストは
- マーチャントが情報に目を通しやすくするために、関連するコンテンツのチャンクを分割する。
- 一貫した表現にする（各項目を名詞や動詞で始め、各項目に一貫性を持たせるようにする）。
- アイテム全体がアクションを表すリストには使用しない。
コンテンツのガイドライン
リスト項目
リストの各項目は以下の通りです。
- 大文字で始める
- 各行の最後にカンマやセミコロンを使用しない。
- 文章で書かれている
関連コンポーネント
- チェックボックスやラジオボタンのリストを作成するには、選択リストコンポーネントを使用します。
- 顧客、製品、注文など、同じタイプのオブジェクトのコレクションを表示するには、リソースリストコンポーネントを使用します。
- 各項目のテキストラベルがコンテンツの説明に役立つ場合は、説明リストコンポーネントを使用します。
Listbox
Listbox コンポーネントは、Aria 1.2 の Listbox 仕様の一部を実装したリストコンポーネントです。このコンポーネントは、オプションのリストを表示し、ユーザーがその中から 1 つまたは複数を選択できるようにします。標準のコンポーネントでは表現できないような構造が必要な場合は、コンポジションを使って、ヘッダーやカスタム要素を使ってリストの表現をカスタマイズできます。
Basic Listbox
マーチャントがオプションを選択するためのコントロールエレメントの基本的な実装
React
function BaseListboxExample() {
return (
<Listbox accessibilityLabel="Basic Listbox example">
<Listbox.Option value="UniqueValue-1">Item 1</Listbox.Option>
<Listbox.Option value="UniqueValue-2">Item 2</Listbox.Option>
<Listbox.Option value="UniqueValue-3">Item 3</Listbox.Option>
</Listbox>
)
}
HTML
<div>
<span class="Polaris-VisuallyHidden">
<div aria-live="polite"></div>
</span>
<ul
tabindex="0"
role="listbox"
class="Polaris-Listbox"
aria-label="Basic Listbox example"
aria-busy="false"
id="PolarisListbox2"
>
<li
data-polaris-listbox-within-section-item="false"
data-within-section="false"
data-listbox-option-value="UniqueValue-1"
class="Polaris-Listbox-Option"
id="PolarisListboxOption4"
tabindex="-1"
aria-disabled="false"
role="option"
data-listbox-option="true"
>
<div class="Polaris-Listbox-TextOption">
<div class="Polaris-Listbox-TextOption__Content">Item 1</div>
</div>
</li>
<li
data-polaris-listbox-within-section-item="false"
data-within-section="false"
data-listbox-option-value="UniqueValue-2"
class="Polaris-Listbox-Option"
id="PolarisListboxOption5"
tabindex="-1"
aria-disabled="false"
role="option"
data-listbox-option="true"
>
<div class="Polaris-Listbox-TextOption">
<div class="Polaris-Listbox-TextOption__Content">Item 2</div>
</div>
</li>
<li
data-polaris-listbox-within-section-item="false"
data-within-section="false"
data-listbox-option-value="UniqueValue-3"
class="Polaris-Listbox-Option"
id="PolarisListboxOption6"
tabindex="-1"
aria-disabled="false"
role="option"
data-listbox-option="true"
>
<div class="Polaris-Listbox-TextOption">
<div class="Polaris-Listbox-TextOption__Content">Item 3</div>
</div>
</li>
</ul>
<div id="PolarisPortalsContainer"></div>
</div>
Listbox with Loading
マーチャントに選択肢が増えたことを知らせるローディングインジケーターを表示するコントロールエレメントの実装
React
function ListboxWithLoadingExample() {
return (
<Listbox accessibilityLabel="Listbox with loading example">
<Listbox.Option value="UniqueValue-1">Item 1</Listbox.Option>
<Listbox.Option value="UniqueValue-2">Item 2</Listbox.Option>
<Listbox.Option value="UniqueValue-3">Item 3</Listbox.Option>
<Listbox.Loading />
</Listbox>
)
}
HTML
<div>
<span class="Polaris-VisuallyHidden">
<div aria-live="polite"></div>
</span>
<ul
tabindex="0"
role="listbox"
class="Polaris-Listbox"
aria-label="Listbox with loading example"
aria-busy="false"
id="PolarisListbox4"
>
<li
data-polaris-listbox-within-section-item="false"
data-within-section="false"
data-listbox-option-value="UniqueValue-1"
class="Polaris-Listbox-Option"
id="PolarisListboxOption10"
tabindex="-1"
aria-disabled="false"
role="option"
data-listbox-option="true"
>
<div class="Polaris-Listbox-TextOption">
<div class="Polaris-Listbox-TextOption__Content">Item 1</div>
</div>
</li>
<li
data-polaris-listbox-within-section-item="false"
data-within-section="false"
data-listbox-option-value="UniqueValue-2"
class="Polaris-Listbox-Option"
id="PolarisListboxOption11"
tabindex="-1"
aria-disabled="false"
role="option"
data-listbox-option="true"
>
<div class="Polaris-Listbox-TextOption">
<div class="Polaris-Listbox-TextOption__Content">Item 2</div>
</div>
</li>
<li
data-polaris-listbox-within-section-item="false"
data-within-section="false"
data-listbox-option-value="UniqueValue-3"
class="Polaris-Listbox-Option"
id="PolarisListboxOption12"
tabindex="-1"
aria-disabled="false"
role="option"
data-listbox-option="true"
>
<div class="Polaris-Listbox-TextOption">
<div class="Polaris-Listbox-TextOption__Content">Item 3</div>
</div>
</li>
<li class="Polaris-Listbox-Loading__ListItem" role="presentation">
<div class="Polaris-Listbox-Loading">
<span class="Polaris-Spinner Polaris-Spinner--sizeSmall"
><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path
d="M7.229 1.173a9.25 9.25 0 1011.655 11.412 1.25 1.25 0 10-2.4-.698 6.75 6.75 0 11-8.506-8.329 1.25 1.25 0 10-.75-2.385z"
></path></svg></span
><span role="status"><span class="Polaris-VisuallyHidden"></span></span>
</div>
</li>
</ul>
<div id="PolarisPortalsContainer"></div>
</div>
Listbox with Action
マーチャントにアクションを起こさせるためのコントロールエレメントの実装
React
function ListboxWithActionExample() {
return (
<Listbox accessibilityLabel="Listbox with Action example">
<Listbox.Action value="ActionValue" divider>
<div>Add item</div>
</Listbox.Action>
<Listbox.Option value="UniqueValue-1">Item 1</Listbox.Option>
<Listbox.Option value="UniqueValue-2">Item 2</Listbox.Option>
</Listbox>
)
}
HTML
<div>
<span class="Polaris-VisuallyHidden">
<div aria-live="polite"></div>
</span>
<ul
tabindex="0"
role="listbox"
class="Polaris-Listbox"
aria-label="Listbox with Action example"
aria-busy="false"
id="PolarisListbox6"
>
<li
data-polaris-listbox-within-section-item="false"
data-within-section="false"
data-listbox-option-value="ActionValue"
class="Polaris-Listbox-Option Polaris-Listbox-Option--divider"
id="PolarisListboxOption16"
tabindex="-1"
aria-disabled="false"
role="option"
data-listbox-option="true"
>
<div class="Polaris-Listbox-TextOption">
<div class="Polaris-Listbox-TextOption__Content">
<div class="Polaris-Listbox-Action">
<div>Add item</div>
</div>
</div>
</div>
</li>
<li
data-polaris-listbox-within-section-item="false"
data-within-section="false"
data-listbox-option-value="UniqueValue-1"
class="Polaris-Listbox-Option"
id="PolarisListboxOption17"
tabindex="-1"
aria-disabled="false"
role="option"
data-listbox-option="true"
>
<div class="Polaris-Listbox-TextOption">
<div class="Polaris-Listbox-TextOption__Content">Item 1</div>
</div>
</li>
<li
data-polaris-listbox-within-section-item="false"
data-within-section="false"
data-listbox-option-value="UniqueValue-2"
class="Polaris-Listbox-Option"
id="PolarisListboxOption18"
tabindex="-1"
aria-disabled="false"
role="option"
data-listbox-option="true"
>
<div class="Polaris-Listbox-TextOption">
<div class="Polaris-Listbox-TextOption__Content">Item 2</div>
</div>
</li>
</ul>
<div id="PolarisPortalsContainer"></div>
</div>
Listbox with custom element
オプションのカスタムレンダリングを行うコントロールの実装
オプションのカスタムレンダリングを行うコントロールの実装
React
function ListboxWithCustomElementExample() {
return (
<Listbox accessibilityLabel="Listbox with custom element example">
<Listbox.Action value="ActionValue" divider>
Add item
</Listbox.Action>
<Listbox.Option value="UniqueValue-1">
<div>Item 1</div>
</Listbox.Option>
<Listbox.Option value="UniqueValue-2">
<div>Item 2</div>
</Listbox.Option>
<Listbox.Option value="UniqueValue-3">
<div>Item 3</div>
</Listbox.Option>
<Listbox.Loading accessibilityLabel="items are loading" />
</Listbox>
)
}
HTML
<div>
<span class="Polaris-VisuallyHidden">
<div aria-live="polite">items are loading</div>
</span>
<ul
tabindex="0"
role="listbox"
class="Polaris-Listbox"
aria-label="Listbox with custom element example"
aria-busy="true"
id="PolarisListbox8"
>
<li
data-polaris-listbox-within-section-item="false"
data-within-section="false"
data-listbox-option-value="ActionValue"
class="Polaris-Listbox-Option Polaris-Listbox-Option--divider"
id="PolarisListboxOption23"
tabindex="-1"
aria-disabled="false"
role="option"
data-listbox-option="true"
>
<div class="Polaris-Listbox-TextOption">
<div class="Polaris-Listbox-TextOption__Content">
<div class="Polaris-Listbox-Action">Add item</div>
</div>
</div>
</li>
<li
data-polaris-listbox-within-section-item="false"
data-within-section="false"
data-listbox-option-value="UniqueValue-1"
class="Polaris-Listbox-Option"
id="PolarisListboxOption24"
tabindex="-1"
aria-disabled="false"
role="option"
data-listbox-option="true"
>
<div>Item 1</div>
</li>
<li
data-polaris-listbox-within-section-item="false"
data-within-section="false"
data-listbox-option-value="UniqueValue-2"
class="Polaris-Listbox-Option"
id="PolarisListboxOption25"
tabindex="-1"
aria-disabled="false"
role="option"
data-listbox-option="true"
>
<div>Item 2</div>
</li>
<li
data-polaris-listbox-within-section-item="false"
data-within-section="false"
data-listbox-option-value="UniqueValue-3"
class="Polaris-Listbox-Option"
id="PolarisListboxOption26"
tabindex="-1"
aria-disabled="false"
role="option"
data-listbox-option="true"
>
<div>Item 3</div>
</li>
<li class="Polaris-Listbox-Loading__ListItem" role="presentation">
<div class="Polaris-Listbox-Loading">
<span class="Polaris-Spinner Polaris-Spinner--sizeSmall"
><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path
d="M7.229 1.173a9.25 9.25 0 1011.655 11.412 1.25 1.25 0 10-2.4-.698 6.75 6.75 0 11-8.506-8.329 1.25 1.25 0 10-.75-2.385z"
></path></svg></span
><span role="status"><span class="Polaris-VisuallyHidden">items are loading</span></span>
</div>
</li>
</ul>
<div id="PolarisPortalsContainer"></div>
</div>
Props
accessibilityLabel
string
スクリーンリーダーのための視覚的に隠されたテキスト
childrenRequired
ReactNode
リストボックスの内部コンテンツ
enableKeyboardControl
boolean
キーボードコントロールを明示的に有効にします。
onSelect
(value: string) => void
オプションが選択されたときのコールバック
アクセシビリティ
構造
Listbox コンポーネントは、Aria 1.2 の Listbox パターンに基づいています。
リストボックスのオプションの中にインタラクティブな要素を表示しないことは、支援技術ユーザーのナビゲーションを妨害する可能性があるため、重要です。
キーボードによるサポート
- 上下の矢印キーでオプションのリストにアクセスする
- フォーカスされているオプションを「enter/return」キーで選択する
ベストプラクティス
リストボックスは
- マーチャントがどのような種類のオプションを利用できるのかがわかるように、明確なラベルを付ける。
- 一度に表示するオプションの数を制限する。
- オプションデータが入力されている間は、マーチャントに読み込み中であることを示す。
コンテンツのガイドライン
オプションリスト
リストボックスの各項目は、明確で説明的でなければなりません。
関連コンポーネント
- テキストフィールドとポップオーバーコンテナには、Combobox コンポーネントを使用します。
- オートコンプリートは、コンボブックスやリストボックスの代わりに、便利なラッパーとして使用できます。
Optino List
オプションリストコンポーネントを使用すると、マーチャントが選択できるグループ化されたアイテムのリストを作成できます。これには、オプションの単一選択または複数選択が含まれます。オプションリストは通常、ポップオーバーに表示されますが、モーダルやサイドバーに表示されることもあります。オプションリストは、選択肢リストとはスタイルが異なりますので、フォーム内では使用せず、独立したメニューとして使用してください。
Simple option list
一度に 1 つしか選択できない場合、類似した選択項目のグループに使用します。
React
function OptionListExample() {
const [selected, setSelected] = useState([])
return (
<Card>
<OptionList
title="Inventory Location"
onChange={setSelected}
options={[
{ value: "byward_market", label: "Byward Market" },
{ value: "centretown", label: "Centretown" },
{ value: "hintonburg", label: "Hintonburg" },
{ value: "westboro", label: "Westboro" },
{ value: "downtown", label: "Downtown" },
]}
selected={selected}
/>
</Card>
)
}
HTML
<div>
<div class="Polaris-Card">
<ul class="Polaris-OptionList">
<li>
<p class="Polaris-OptionList__Title">Inventory Location</p>
<ul class="Polaris-OptionList__Options" id="PolarisOptionList2-0">
<li class="Polaris-OptionList-Option" tabindex="-1">
<button
id="PolarisOptionList2-0-0"
type="button"
class="Polaris-OptionList-Option__SingleSelectOption"
>
Byward Market
</button>
</li>
<li class="Polaris-OptionList-Option" tabindex="-1">
<button
id="PolarisOptionList2-0-1"
type="button"
class="Polaris-OptionList-Option__SingleSelectOption"
>
Centretown
</button>
</li>
<li class="Polaris-OptionList-Option" tabindex="-1">
<button
id="PolarisOptionList2-0-2"
type="button"
class="Polaris-OptionList-Option__SingleSelectOption"
>
Hintonburg
</button>
</li>
<li class="Polaris-OptionList-Option" tabindex="-1">
<button
id="PolarisOptionList2-0-3"
type="button"
class="Polaris-OptionList-Option__SingleSelectOption"
>
Westboro
</button>
</li>
<li class="Polaris-OptionList-Option" tabindex="-1">
<button
id="PolarisOptionList2-0-4"
type="button"
class="Polaris-OptionList-Option__SingleSelectOption"
>
Downtown
</button>
</li>
</ul>
</li>
</ul>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
<div>
<div class="Polaris-Card">
<ul class="Polaris-OptionList">
<li>
<p class="Polaris-OptionList__Title">Inventory Location</p>
<ul class="Polaris-OptionList__Options" id="PolarisOptionList2-0">
<li class="Polaris-OptionList-Option" tabindex="-1">
<button
id="PolarisOptionList2-0-0"
type="button"
class="Polaris-OptionList-Option__SingleSelectOption"
>
Byward Market
</button>
</li>
<li class="Polaris-OptionList-Option" tabindex="-1">
<button
id="PolarisOptionList2-0-1"
type="button"
class="Polaris-OptionList-Option__SingleSelectOption"
>
Centretown
</button>
</li>
<li class="Polaris-OptionList-Option" tabindex="-1">
<button
id="PolarisOptionList2-0-2"
type="button"
class="Polaris-OptionList-Option__SingleSelectOption"
>
Hintonburg
</button>
</li>
<li class="Polaris-OptionList-Option" tabindex="-1">
<button
id="PolarisOptionList2-0-3"
type="button"
class="Polaris-OptionList-Option__SingleSelectOption"
>
Westboro
</button>
</li>
<li class="Polaris-OptionList-Option" tabindex="-1">
<button
id="PolarisOptionList2-0-4"
type="button"
class="Polaris-OptionList-Option__SingleSelectOption"
>
Downtown
</button>
</li>
</ul>
</li>
</ul>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
Multiple option list
類似した選択項目のグループがあり、一度に複数の項目を選択できる場合に使用します。
React
function MultipleOptionListExample() {
const [selected, setSelected] = useState([])
return (
<Card>
<OptionList
title="Manage sales channels availability"
onChange={setSelected}
options={[
{ value: "online_store", label: "Online Store" },
{ value: "messenger", label: "Messenger" },
{ value: "facebook", label: "Facebook" },
{ value: "wholesale", label: "Wholesale" },
{ value: "buzzfeed", label: "BuzzFeed" },
]}
selected={selected}
allowMultiple
/>
</Card>
)
}
HTML
<div>
<div class="Polaris-Card">
<ul class="Polaris-OptionList">
<li>
<p class="Polaris-OptionList__Title">Manage sales channels availability</p>
<ul class="Polaris-OptionList__Options" id="PolarisOptionList4-0">
<li class="Polaris-OptionList-Option" tabindex="-1">
<label for="PolarisOptionList4-0-0" class="Polaris-OptionList-Option__Label">
<div class="Polaris-OptionList-Option__Checkbox">
<div class="Polaris-OptionList-Checkbox">
<input
id="PolarisOptionList4-0-0"
type="checkbox"
class="Polaris-OptionList-Checkbox__Input"
aria-checked="false"
value="online_store"
/>
<div class="Polaris-OptionList-Checkbox__Backdrop"></div>
<div class="Polaris-OptionList-Checkbox__Icon">
<span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path
d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
></path></svg
></span>
</div>
</div>
</div>
Online Store
</label>
</li>
<li class="Polaris-OptionList-Option" tabindex="-1">
<label for="PolarisOptionList4-0-1" class="Polaris-OptionList-Option__Label">
<div class="Polaris-OptionList-Option__Checkbox">
<div class="Polaris-OptionList-Checkbox">
<input
id="PolarisOptionList4-0-1"
type="checkbox"
class="Polaris-OptionList-Checkbox__Input"
aria-checked="false"
value="messenger"
/>
<div class="Polaris-OptionList-Checkbox__Backdrop"></div>
<div class="Polaris-OptionList-Checkbox__Icon">
<span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path
d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
></path></svg
></span>
</div>
</div>
</div>
Messenger
</label>
</li>
<li class="Polaris-OptionList-Option" tabindex="-1">
<label for="PolarisOptionList4-0-2" class="Polaris-OptionList-Option__Label">
<div class="Polaris-OptionList-Option__Checkbox">
<div class="Polaris-OptionList-Checkbox">
<input
id="PolarisOptionList4-0-2"
type="checkbox"
class="Polaris-OptionList-Checkbox__Input"
aria-checked="false"
value="facebook"
/>
<div class="Polaris-OptionList-Checkbox__Backdrop"></div>
<div class="Polaris-OptionList-Checkbox__Icon">
<span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path
d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
></path></svg
></span>
</div>
</div>
</div>
Facebook
</label>
</li>
<li class="Polaris-OptionList-Option" tabindex="-1">
<label for="PolarisOptionList4-0-3" class="Polaris-OptionList-Option__Label">
<div class="Polaris-OptionList-Option__Checkbox">
<div class="Polaris-OptionList-Checkbox">
<input
id="PolarisOptionList4-0-3"
type="checkbox"
class="Polaris-OptionList-Checkbox__Input"
aria-checked="false"
value="wholesale"
/>
<div class="Polaris-OptionList-Checkbox__Backdrop"></div>
<div class="Polaris-OptionList-Checkbox__Icon">
<span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path
d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
></path></svg
></span>
</div>
</div>
</div>
Wholesale
</label>
</li>
<li class="Polaris-OptionList-Option" tabindex="-1">
<label for="PolarisOptionList4-0-4" class="Polaris-OptionList-Option__Label">
<div class="Polaris-OptionList-Option__Checkbox">
<div class="Polaris-OptionList-Checkbox">
<input
id="PolarisOptionList4-0-4"
type="checkbox"
class="Polaris-OptionList-Checkbox__Input"
aria-checked="false"
value="buzzfeed"
/>
<div class="Polaris-OptionList-Checkbox__Backdrop"></div>
<div class="Polaris-OptionList-Checkbox__Icon">
<span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path
d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
></path></svg
></span>
</div>
</div>
</div>
BuzzFeed
</label>
</li>
</ul>
</li>
</ul>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
Option list with sections
似たような選択項目のグループが複数ある場合は、セクションを使用します。
React
function OptionListWithSectionsExample() {
const [selected, setSelected] = useState([])
return (
<Card>
<OptionList
onChange={setSelected}
sections={[
{
options: [
{ value: "type", label: "Sale item type" },
{ value: "kind", label: "Sale kind" },
],
},
{
title: "Traffic",
options: [
{ value: "source", label: "Traffic referrer source" },
{ value: "host", label: "Traffic referrer host" },
{ value: "path", label: "Traffic referrer path" },
],
},
]}
selected={selected}
allowMultiple
/>
</Card>
)
}
HTML
<div>
<div class="Polaris-Card">
<ul class="Polaris-OptionList">
<li>
<ul class="Polaris-OptionList__Options" id="PolarisOptionList6-0"></ul>
</li>
<li>
<ul class="Polaris-OptionList__Options" id="PolarisOptionList6-1">
<li class="Polaris-OptionList-Option" tabindex="-1">
<label for="PolarisOptionList6-1-0" class="Polaris-OptionList-Option__Label">
<div class="Polaris-OptionList-Option__Checkbox">
<div class="Polaris-OptionList-Checkbox">
<input
id="PolarisOptionList6-1-0"
type="checkbox"
class="Polaris-OptionList-Checkbox__Input"
aria-checked="false"
value="type"
/>
<div class="Polaris-OptionList-Checkbox__Backdrop"></div>
<div class="Polaris-OptionList-Checkbox__Icon">
<span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path
d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
></path></svg
></span>
</div>
</div>
</div>
Sale item type
</label>
</li>
<li class="Polaris-OptionList-Option" tabindex="-1">
<label for="PolarisOptionList6-1-1" class="Polaris-OptionList-Option__Label">
<div class="Polaris-OptionList-Option__Checkbox">
<div class="Polaris-OptionList-Checkbox">
<input
id="PolarisOptionList6-1-1"
type="checkbox"
class="Polaris-OptionList-Checkbox__Input"
aria-checked="false"
value="kind"
/>
<div class="Polaris-OptionList-Checkbox__Backdrop"></div>
<div class="Polaris-OptionList-Checkbox__Icon">
<span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path
d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
></path></svg
></span>
</div>
</div>
</div>
Sale kind
</label>
</li>
</ul>
</li>
<li>
<p class="Polaris-OptionList__Title">Traffic</p>
<ul class="Polaris-OptionList__Options" id="PolarisOptionList6-2">
<li class="Polaris-OptionList-Option" tabindex="-1">
<label for="PolarisOptionList6-2-0" class="Polaris-OptionList-Option__Label">
<div class="Polaris-OptionList-Option__Checkbox">
<div class="Polaris-OptionList-Checkbox">
<input
id="PolarisOptionList6-2-0"
type="checkbox"
class="Polaris-OptionList-Checkbox__Input"
aria-checked="false"
value="source"
/>
<div class="Polaris-OptionList-Checkbox__Backdrop"></div>
<div class="Polaris-OptionList-Checkbox__Icon">
<span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path
d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
></path></svg
></span>
</div>
</div>
</div>
Traffic referrer source
</label>
</li>
<li class="Polaris-OptionList-Option" tabindex="-1">
<label for="PolarisOptionList6-2-1" class="Polaris-OptionList-Option__Label">
<div class="Polaris-OptionList-Option__Checkbox">
<div class="Polaris-OptionList-Checkbox">
<input
id="PolarisOptionList6-2-1"
type="checkbox"
class="Polaris-OptionList-Checkbox__Input"
aria-checked="false"
value="host"
/>
<div class="Polaris-OptionList-Checkbox__Backdrop"></div>
<div class="Polaris-OptionList-Checkbox__Icon">
<span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path
d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
></path></svg
></span>
</div>
</div>
</div>
Traffic referrer host
</label>
</li>
<li class="Polaris-OptionList-Option" tabindex="-1">
<label for="PolarisOptionList6-2-2" class="Polaris-OptionList-Option__Label">
<div class="Polaris-OptionList-Option__Checkbox">
<div class="Polaris-OptionList-Checkbox">
<input
id="PolarisOptionList6-2-2"
type="checkbox"
class="Polaris-OptionList-Checkbox__Input"
aria-checked="false"
value="path"
/>
<div class="Polaris-OptionList-Checkbox__Backdrop"></div>
<div class="Polaris-OptionList-Checkbox__Icon">
<span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path
d="m8.315 13.859-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.436.436 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"
></path></svg
></span>
</div>
</div>
</div>
Traffic referrer path
</label>
</li>
</ul>
</li>
</ul>
</div>
<div id="PolarisPortalsContainer"></div>
</div>
Option list in a popover
選択肢が画面に収まりきらない場合に使用します。
React
function OptionListInPopoverExample() {
const [selected, setSelected] = useState([])
const [popoverActive, setPopoverActive] = useState(true)
const togglePopoverActive = useCallback(
() => setPopoverActive((popoverActive) => !popoverActive),
[]
)
const activator = (
<Button onClick={togglePopoverActive} disclosure>
Options
</Button>
)
return (
<div style={{ height: "275px" }}>
<Popover active={popoverActive} activator={activator} onClose={togglePopoverActive}>
<OptionList
title="Inventory Location"
onChange={setSelected}
options={[
{
value: "byward_market",
label: "Byward Market",
active: true,
},
{ value: "centretown", label: "Centretown" },
{
value: "hintonburg",
label: "Hintonburg",
active: true,
},
{ value: "westboro", label: "Westboro" },
{ value: "downtown", label: "Downtown" },
]}
selected={selected}
/>
</Popover>
</div>
)
}
HTML
<div>
<div style="height: 275px;">
<div>
<button
class="Polaris-Button"
type="button"
tabindex="0"
aria-controls="Polarispopover2"
aria-owns="Polarispopover2"
aria-expanded="true"
>
<span class="Polaris-Button__Content"
><span class="Polaris-Button__Text">Options</span
><span class="Polaris-Button__Icon">
<div class="">
<span class="Polaris-Icon"
><span class="Polaris-VisuallyHidden"></span
><svg
viewBox="0 0 20 20"
class="Polaris-Icon__Svg"
focusable="false"
aria-hidden="true"
>
<path d="m5 8 5 5 5-5H5z"></path></svg
></span>
</div> </span
></span>
</button>
</div>
</div>
<div id="PolarisPortalsContainer">
<div data-portal-id="popover-Polarisportal1">
<div
class="Polaris-PositionedOverlay Polaris-Popover__PopoverOverlay Polaris-Popover__PopoverOverlay--open"
style="top: 44px; left: 0px;"
>
<div class="Polaris-Popover" data-polaris-overlay="true">
<div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
<div
style='--p-background:rgba(246, 246, 247, 1); --p-background-hovered:rgba(241, 242, 243, 1); --p-background-pressed:rgba(237, 238, 239, 1); --p-background-selected:rgba(237, 238, 239, 1); --p-surface:rgba(255, 255, 255, 1); --p-surface-neutral:rgba(228, 229, 231, 1); --p-surface-neutral-hovered:rgba(219, 221, 223, 1); --p-surface-neutral-pressed:rgba(201, 204, 208, 1); --p-surface-neutral-disabled:rgba(241, 242, 243, 1); --p-surface-neutral-subdued:rgba(246, 246, 247, 1); --p-surface-subdued:rgba(250, 251, 251, 1); --p-surface-disabled:rgba(250, 251, 251, 1); --p-surface-hovered:rgba(246, 246, 247, 1); --p-surface-pressed:rgba(241, 242, 243, 1); --p-surface-depressed:rgba(237, 238, 239, 1); --p-surface-search-field:rgba(241, 242, 243, 1); --p-backdrop:rgba(0, 0, 0, 0.5); --p-overlay:rgba(255, 255, 255, 0.5); --p-shadow-from-dim-light:rgba(0, 0, 0, 0.2); --p-shadow-from-ambient-light:rgba(23, 24, 24, 0.05); --p-shadow-from-direct-light:rgba(0, 0, 0, 0.15); --p-hint-from-direct-light:rgba(0, 0, 0, 0.15); --p-border:rgba(140, 145, 150, 1); --p-border-neutral-subdued:rgba(186, 191, 195, 1); --p-border-hovered:rgba(153, 158, 164, 1); --p-border-disabled:rgba(210, 213, 216, 1); --p-border-subdued:rgba(201, 204, 207, 1); --p-border-depressed:rgba(87, 89, 89, 1); --p-border-shadow:rgba(174, 180, 185, 1); --p-border-shadow-subdued:rgba(186, 191, 196, 1); --p-divider:rgba(225, 227, 229, 1); --p-icon:rgba(92, 95, 98, 1); --p-icon-hovered:rgba(26, 28, 29, 1); --p-icon-pressed:rgba(68, 71, 74, 1); --p-icon-disabled:rgba(186, 190, 195, 1); --p-icon-subdued:rgba(140, 145, 150, 1); --p-text:rgba(32, 34, 35, 1); --p-text-disabled:rgba(140, 145, 150, 1); --p-text-subdued:rgba(109, 113, 117, 1); --p-interactive:rgba(44, 110, 203, 1); --p-interactive-disabled:rgba(189, 193, 204, 1); --p-interactive-hovered:rgba(31, 81, 153, 1); --p-interactive-pressed:rgba(16, 50, 98, 1); --p-icon-interactive:rgba(44, 110, 203, 1); --p-focused:rgba(69, 143, 255, 1); --p-surface-selected:rgba(242, 247, 254, 1); --p-surface-selected-hovered:rgba(237, 244, 254, 1); --p-surface-selected-pressed:rgba(229, 239, 253, 1); --p-icon-on-interactive:rgba(255, 255, 255, 1); --p-text-on-interactive:rgba(255, 255, 255, 1); --p-action-secondary:rgba(255, 255, 255, 1); --p-action-secondary-disabled:rgba(255, 255, 255, 1); --p-action-secondary-hovered:rgba(246, 246, 247, 1); --p-action-secondary-pressed:rgba(241, 242, 243, 1); --p-action-secondary-depressed:rgba(109, 113, 117, 1); --p-action-primary:rgba(0, 128, 96, 1); --p-action-primary-disabled:rgba(241, 241, 241, 1); --p-action-primary-hovered:rgba(0, 110, 82, 1); --p-action-primary-pressed:rgba(0, 94, 70, 1); --p-action-primary-depressed:rgba(0, 61, 44, 1); --p-icon-on-primary:rgba(255, 255, 255, 1); --p-text-on-primary:rgba(255, 255, 255, 1); --p-text-primary:rgba(0, 123, 92, 1); --p-text-primary-hovered:rgba(0, 108, 80, 1); --p-text-primary-pressed:rgba(0, 92, 68, 1); --p-surface-primary-selected:rgba(241, 248, 245, 1); --p-surface-primary-selected-hovered:rgba(179, 208, 195, 1); --p-surface-primary-selected-pressed:rgba(162, 188, 176, 1); --p-border-critical:rgba(253, 87, 73, 1); --p-border-critical-subdued:rgba(224, 179, 178, 1); --p-border-critical-disabled:rgba(255, 167, 163, 1); --p-icon-critical:rgba(215, 44, 13, 1); --p-surface-critical:rgba(254, 211, 209, 1); --p-surface-critical-subdued:rgba(255, 244, 244, 1); --p-surface-critical-subdued-hovered:rgba(255, 240, 240, 1); --p-surface-critical-subdued-pressed:rgba(255, 233, 232, 1); --p-surface-critical-subdued-depressed:rgba(254, 188, 185, 1); --p-text-critical:rgba(215, 44, 13, 1); --p-action-critical:rgba(216, 44, 13, 1); --p-action-critical-disabled:rgba(241, 241, 241, 1); --p-action-critical-hovered:rgba(188, 34, 0, 1); --p-action-critical-pressed:rgba(162, 27, 0, 1); --p-action-critical-depressed:rgba(108, 15, 0, 1); --p-icon-on-critical:rgba(255, 255, 255, 1); --p-text-on-critical:rgba(255, 255, 255, 1); --p-interactive-critical:rgba(216, 44, 13, 1); --p-interactive-critical-disabled:rgba(253, 147, 141, 1); --p-interactive-critical-hovered:rgba(205, 41, 12, 1); --p-interactive-critical-pressed:rgba(103, 15, 3, 1); --p-border-warning:rgba(185, 137, 0, 1); --p-border-warning-subdued:rgba(225, 184, 120, 1); --p-icon-warning:rgba(185, 137, 0, 1); --p-surface-warning:rgba(255, 215, 157, 1); --p-surface-warning-subdued:rgba(255, 245, 234, 1); --p-surface-warning-subdued-hovered:rgba(255, 242, 226, 1); --p-surface-warning-subdued-pressed:rgba(255, 235, 211, 1); --p-text-warning:rgba(145, 106, 0, 1); --p-border-highlight:rgba(68, 157, 167, 1); --p-border-highlight-subdued:rgba(152, 198, 205, 1); --p-icon-highlight:rgba(0, 160, 172, 1); --p-surface-highlight:rgba(164, 232, 242, 1); --p-surface-highlight-subdued:rgba(235, 249, 252, 1); --p-surface-highlight-subdued-hovered:rgba(228, 247, 250, 1); --p-surface-highlight-subdued-pressed:rgba(213, 243, 248, 1); --p-text-highlight:rgba(52, 124, 132, 1); --p-border-success:rgba(0, 164, 124, 1); --p-border-success-subdued:rgba(149, 201, 180, 1); --p-icon-success:rgba(0, 127, 95, 1); --p-surface-success:rgba(174, 233, 209, 1); --p-surface-success-subdued:rgba(241, 248, 245, 1); --p-surface-success-subdued-hovered:rgba(236, 246, 241, 1); --p-surface-success-subdued-pressed:rgba(226, 241, 234, 1); --p-text-success:rgba(0, 128, 96, 1); --p-decorative-one-icon:rgba(126, 87, 0, 1); --p-decorative-one-surface:rgba(255, 201, 107, 1); --p-decorative-one-text:rgba(61, 40, 0, 1); --p-decorative-two-icon:rgba(175, 41, 78, 1); --p-decorative-two-surface:rgba(255, 196, 176, 1); --p-decorative-two-text:rgba(73, 11, 28, 1); --p-decorative-three-icon:rgba(0, 109, 65, 1); --p-decorative-three-surface:rgba(146, 230, 181, 1); --p-decorative-three-text:rgba(0, 47, 25, 1); --p-decorative-four-icon:rgba(0, 106, 104, 1); --p-decorative-four-surface:rgba(145, 224, 214, 1); --p-decorative-four-text:rgba(0, 45, 45, 1); --p-decorative-five-icon:rgba(174, 43, 76, 1); --p-decorative-five-surface:rgba(253, 201, 208, 1); --p-decorative-five-text:rgba(79, 14, 31, 1); --p-border-radius-base:0.4rem; --p-border-radius-wide:0.8rem; --p-border-radius-full:50%; --p-card-shadow:0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light); --p-popover-shadow:-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light); --p-modal-shadow:0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light); --p-top-bar-shadow:0 2px 2px -1px var(--p-shadow-from-direct-light); --p-button-drop-shadow:0 1px 0 rgba(0, 0, 0, 0.05); --p-button-inner-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.2); --p-button-pressed-inner-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.15); --p-override-none:none; --p-override-transparent:transparent; --p-override-one:1; --p-override-visible:visible; --p-override-zero:0; --p-override-loading-z-index:514; --p-button-font-weight:500; --p-non-null-content:""; --p-choice-size:2rem; --p-icon-size:1rem; --p-choice-margin:0.1rem; --p-control-border-width:0.2rem; --p-banner-border-default:inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued); --p-banner-border-success:inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued); --p-banner-border-highlight:inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued); --p-banner-border-warning:inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued); --p-banner-border-critical:inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued); --p-badge-mix-blend-mode:luminosity; --p-thin-border-subdued:0.1rem solid var(--p-border-subdued); --p-text-field-spinner-offset:0.2rem; --p-text-field-focus-ring-offset:-0.4rem; --p-text-field-focus-ring-border-radius:0.7rem; --p-button-group-item-spacing:-0.1rem; --p-duration-1-0-0:100ms; --p-duration-1-5-0:150ms; --p-ease-in:cubic-bezier(0.5, 0.1, 1, 1); --p-ease:cubic-bezier(0.4, 0.22, 0.28, 1); --p-range-slider-thumb-size-base:1.6rem; --p-range-slider-thumb-size-active:2.4rem; --p-range-slider-thumb-scale:1.5; --p-badge-font-weight:400; --p-frame-offset:0px; color: rgb(32, 34, 35);'
>
<div class="Polaris-Popover__Wrapper">
<div
id="Polarispopover2"
tabindex="-1"
class="Polaris-Popover__Content"
style="height: 230px;"
>
<div
class="Polaris-Popover__Pane Polaris-Scrollable Polaris-Scrollable--vertical Polaris-Scrollable--hasTopShadow Polaris-Scrollable--verticalHasScrolling"
data-polaris-scrollable="true"
>
<ul class="Polaris-OptionList">
<li>
<p class="Polaris-OptionList__Title">Inventory Location</p>
<ul class="Polaris-OptionList__Options" id="PolarisOptionList7-0">
<li class="Polaris-OptionList-Option" tabindex="-1">
<a id="PolarisScrollTo1"></a
><button
id="PolarisOptionList7-0-0"
type="button"
class="Polaris-OptionList-Option__SingleSelectOption Polaris-OptionList-Option--active"
aria-pressed="true"
>
Byward Market
</button>
</li>
<li class="Polaris-OptionList-Option" tabindex="-1">
<button
id="PolarisOptionList7-0-1"
type="button"
class="Polaris-OptionList-Option__SingleSelectOption"
>
Centretown
</button>
</li>
<li class="Polaris-OptionList-Option" tabindex="-1">
<a id="PolarisScrollTo2"></a
><button
id="PolarisOptionList7-0-2"
type="button"
class="Polaris-OptionList-Option__SingleSelectOption Polaris-OptionList-Option--active"
aria-pressed="true"
>
Hintonburg
</button>
</li>
<li class="Polaris-OptionList-Option" tabindex="-1">
<button
id="PolarisOptionList7-0-3"
type="button"
class="Polaris-OptionList-Option__SingleSelectOption"
>
Westboro
</button>
</li>
<li class="Polaris-OptionList-Option" tabindex="-1">
<button
id="PolarisOptionList7-0-4"
type="button"
class="Polaris-OptionList-Option__SingleSelectOption"
>
Downtown
</button>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
</div>
</div>
</div>
</div>
</div>
<div
class="Polaris-PositionedOverlay Polaris-Popover__PopoverOverlay Polaris-Popover__PopoverOverlay--open"
style="top: 44px; left: 0px;"
>
<div class="Polaris-Popover" data-polaris-overlay="true">
<div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
<div
style='--p-background:rgba(246, 246, 247, 1); --p-background-hovered:rgba(241, 242, 243, 1); --p-background-pressed:rgba(237, 238, 239, 1); --p-background-selected:rgba(237, 238, 239, 1); --p-surface:rgba(255, 255, 255, 1); --p-surface-neutral:rgba(228, 229, 231, 1); --p-surface-neutral-hovered:rgba(219, 221, 223, 1); --p-surface-neutral-pressed:rgba(201, 204, 208, 1); --p-surface-neutral-disabled:rgba(241, 242, 243, 1); --p-surface-neutral-subdued:rgba(246, 246, 247, 1); --p-surface-subdued:rgba(250, 251, 251, 1); --p-surface-disabled:rgba(250, 251, 251, 1); --p-surface-hovered:rgba(246, 246, 247, 1); --p-surface-pressed:rgba(241, 242, 243, 1); --p-surface-depressed:rgba(237, 238, 239, 1); --p-surface-search-field:rgba(241, 242, 243, 1); --p-backdrop:rgba(0, 0, 0, 0.5); --p-overlay:rgba(255, 255, 255, 0.5); --p-shadow-from-dim-light:rgba(0, 0, 0, 0.2); --p-shadow-from-ambient-light:rgba(23, 24, 24, 0.05); --p-shadow-from-direct-light:rgba(0, 0, 0, 0.15); --p-hint-from-direct-light:rgba(0, 0, 0, 0.15); --p-border:rgba(140, 145, 150, 1); --p-border-neutral-subdued:rgba(186, 191, 195, 1); --p-border-hovered:rgba(153, 158, 164, 1); --p-border-disabled:rgba(210, 213, 216, 1); --p-border-subdued:rgba(201, 204, 207, 1); --p-border-depressed:rgba(87, 89, 89, 1); --p-border-shadow:rgba(174, 180, 185, 1); --p-border-shadow-subdued:rgba(186, 191, 196, 1); --p-divider:rgba(225, 227, 229, 1); --p-icon:rgba(92, 95, 98, 1); --p-icon-hovered:rgba(26, 28, 29, 1); --p-icon-pressed:rgba(68, 71, 74, 1); --p-icon-disabled:rgba(186, 190, 195, 1); --p-icon-subdued:rgba(140, 145, 150, 1); --p-text:rgba(32, 34, 35, 1); --p-text-disabled:rgba(140, 145, 150, 1); --p-text-subdued:rgba(109, 113, 117, 1); --p-interactive:rgba(44, 110, 203, 1); --p-interactive-disabled:rgba(189, 193, 204, 1); --p-interactive-hovered:rgba(31, 81, 153, 1); --p-interactive-pressed:rgba(16, 50, 98, 1); --p-icon-interactive:rgba(44, 110, 203, 1); --p-focused:rgba(69, 143, 255, 1); --p-surface-selected:rgba(242, 247, 254, 1); --p-surface-selected-hovered:rgba(237, 244, 254, 1); --p-surface-selected-pressed:rgba(229, 239, 253, 1); --p-icon-on-interactive:rgba(255, 255, 255, 1); --p-text-on-interactive:rgba(255, 255, 255, 1); --p-action-secondary:rgba(255, 255, 255, 1); --p-action-secondary-disabled:rgba(255, 255, 255, 1); --p-action-secondary-hovered:rgba(246, 246, 247, 1); --p-action-secondary-pressed:rgba(241, 242, 243, 1); --p-action-secondary-depressed:rgba(109, 113, 117, 1); --p-action-primary:rgba(0, 128, 96, 1); --p-action-primary-disabled:rgba(241, 241, 241, 1); --p-action-primary-hovered:rgba(0, 110, 82, 1); --p-action-primary-pressed:rgba(0, 94, 70, 1); --p-action-primary-depressed:rgba(0, 61, 44, 1); --p-icon-on-primary:rgba(255, 255, 255, 1); --p-text-on-primary:rgba(255, 255, 255, 1); --p-text-primary:rgba(0, 123, 92, 1); --p-text-primary-hovered:rgba(0, 108, 80, 1); --p-text-primary-pressed:rgba(0, 92, 68, 1); --p-surface-primary-selected:rgba(241, 248, 245, 1); --p-surface-primary-selected-hovered:rgba(179, 208, 195, 1); --p-surface-primary-selected-pressed:rgba(162, 188, 176, 1); --p-border-critical:rgba(253, 87, 73, 1); --p-border-critical-subdued:rgba(224, 179, 178, 1); --p-border-critical-disabled:rgba(255, 167, 163, 1); --p-icon-critical:rgba(215, 44, 13, 1); --p-surface-critical:rgba(254, 211, 209, 1); --p-surface-critical-subdued:rgba(255, 244, 244, 1); --p-surface-critical-subdued-hovered:rgba(255, 240, 240, 1); --p-surface-critical-subdued-pressed:rgba(255, 233, 232, 1); --p-surface-critical-subdued-depressed:rgba(254, 188, 185, 1); --p-text-critical:rgba(215, 44, 13, 1); --p-action-critical:rgba(216, 44, 13, 1); --p-action-critical-disabled:rgba(241, 241, 241, 1); --p-action-critical-hovered:rgba(188, 34, 0, 1); --p-action-critical-pressed:rgba(162, 27, 0, 1); --p-action-critical-depressed:rgba(108, 15, 0, 1); --p-icon-on-critical:rgba(255, 255, 255, 1); --p-text-on-critical:rgba(255, 255, 255, 1); --p-interactive-critical:rgba(216, 44, 13, 1); --p-interactive-critical-disabled:rgba(253, 147, 141, 1); --p-interactive-critical-hovered:rgba(205, 41, 12, 1); --p-interactive-critical-pressed:rgba(103, 15, 3, 1); --p-border-warning:rgba(185, 137, 0, 1); --p-border-warning-subdued:rgba(225, 184, 120, 1); --p-icon-warning:rgba(185, 137, 0, 1); --p-surface-warning:rgba(255, 215, 157, 1); --p-surface-warning-subdued:rgba(255, 245, 234, 1); --p-surface-warning-subdued-hovered:rgba(255, 242, 226, 1); --p-surface-warning-subdued-pressed:rgba(255, 235, 211, 1); --p-text-warning:rgba(145, 106, 0, 1); --p-border-highlight:rgba(68, 157, 167, 1); --p-border-highlight-subdued:rgba(152, 198, 205, 1); --p-icon-highlight:rgba(0, 160, 172, 1); --p-surface-highlight:rgba(164, 232, 242, 1); --p-surface-highlight-subdued:rgba(235, 249, 252, 1); --p-surface-highlight-subdued-hovered:rgba(228, 247, 250, 1); --p-surface-highlight-subdued-pressed:rgba(213, 243, 248, 1); --p-text-highlight:rgba(52, 124, 132, 1); --p-border-success:rgba(0, 164, 124, 1); --p-border-success-subdued:rgba(149, 201, 180, 1); --p-icon-success:rgba(0, 127, 95, 1); --p-surface-success:rgba(174, 233, 209, 1); --p-surface-success-subdued:rgba(241, 248, 245, 1); --p-surface-success-subdued-hovered:rgba(236, 246, 241, 1); --p-surface-success-subdued-pressed:rgba(226, 241, 234, 1); --p-text-success:rgba(0, 128, 96, 1); --p-decorative-one-icon:rgba(126, 87, 0, 1); --p-decorative-one-surface:rgba(255, 201, 107, 1); --p-decorative-one-text:rgba(61, 40, 0, 1); --p-decorative-two-icon:rgba(175, 41, 78, 1); --p-decorative-two-surface:rgba(255, 196, 176, 1); --p-decorative-two-text:rgba(73, 11, 28, 1); --p-decorative-three-icon:rgba(0, 109, 65, 1); --p-decorative-three-surface:rgba(146, 230, 181, 1); --p-decorative-three-text:rgba(0, 47, 25, 1); --p-decorative-four-icon:rgba(0, 106, 104, 1); --p-decorative-four-surface:rgba(145, 224, 214, 1); --p-decorative-four-text:rgba(0, 45, 45, 1); --p-decorative-five-icon:rgba(174, 43, 76, 1); --p-decorative-five-surface:rgba(253, 201, 208, 1); --p-decorative-five-text:rgba(79, 14, 31, 1); --p-border-radius-base:0.4rem; --p-border-radius-wide:0.8rem; --p-border-radius-full:50%; --p-card-shadow:0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light); --p-popover-shadow:-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light); --p-modal-shadow:0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light); --p-top-bar-shadow:0 2px 2px -1px var(--p-shadow-from-direct-light); --p-button-drop-shadow:0 1px 0 rgba(0, 0, 0, 0.05); --p-button-inner-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.2); --p-button-pressed-inner-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.15); --p-override-none:none; --p-override-transparent:transparent; --p-override-one:1; --p-override-visible:visible; --p-override-zero:0; --p-override-loading-z-index:514; --p-button-font-weight:500; --p-non-null-content:""; --p-choice-size:2rem; --p-icon-size:1rem; --p-choice-margin:0.1rem; --p-control-border-width:0.2rem; --p-banner-border-default:inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued); --p-banner-border-success:inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued); --p-banner-border-highlight:inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued); --p-banner-border-warning:inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued); --p-banner-border-critical:inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued); --p-badge-mix-blend-mode:luminosity; --p-thin-border-subdued:0.1rem solid var(--p-border-subdued); --p-text-field-spinner-offset:0.2rem; --p-text-field-focus-ring-offset:-0.4rem; --p-text-field-focus-ring-border-radius:0.7rem; --p-button-group-item-spacing:-0.1rem; --p-duration-1-0-0:100ms; --p-duration-1-5-0:150ms; --p-ease-in:cubic-bezier(0.5, 0.1, 1, 1); --p-ease:cubic-bezier(0.4, 0.22, 0.28, 1); --p-range-slider-thumb-size-base:1.6rem; --p-range-slider-thumb-size-active:2.4rem; --p-range-slider-thumb-scale:1.5; --p-badge-font-weight:400; --p-frame-offset:0px; color: rgb(32, 34, 35);'
>
<div class="Polaris-Popover__Wrapper">
<div
id="Polarispopover2"
tabindex="-1"
class="Polaris-Popover__Content"
style="height: 230px;"
>
<div
class="Polaris-Popover__Pane Polaris-Scrollable Polaris-Scrollable--vertical Polaris-Scrollable--hasTopShadow Polaris-Scrollable--verticalHasScrolling"
data-polaris-scrollable="true"
>
<ul class="Polaris-OptionList">
<li>
<p class="Polaris-OptionList__Title">Inventory Location</p>
<ul class="Polaris-OptionList__Options" id="PolarisOptionList7-0">
<li class="Polaris-OptionList-Option" tabindex="-1">
<a id="PolarisScrollTo1"></a
><button
id="PolarisOptionList7-0-0"
type="button"
class="Polaris-OptionList-Option__SingleSelectOption Polaris-OptionList-Option--active"
aria-pressed="true"
>
Byward Market
</button>
</li>
<li class="Polaris-OptionList-Option" tabindex="-1">
<button
id="PolarisOptionList7-0-1"
type="button"
class="Polaris-OptionList-Option__SingleSelectOption"
>
Centretown
</button>
</li>
<li class="Polaris-OptionList-Option" tabindex="-1">
<a id="PolarisScrollTo2"></a
><button
id="PolarisOptionList7-0-2"
type="button"
class="Polaris-OptionList-Option__SingleSelectOption Polaris-OptionList-Option--active"
aria-pressed="true"
>
Hintonburg
</button>
</li>
<li class="Polaris-OptionList-Option" tabindex="-1">
<button
id="PolarisOptionList7-0-3"
type="button"
class="Polaris-OptionList-Option__SingleSelectOption"
>
Westboro
</button>
</li>
<li class="Polaris-OptionList-Option" tabindex="-1">
<button
id="PolarisOptionList7-0-4"
type="button"
class="Polaris-OptionList-Option__SingleSelectOption"
>
Downtown
</button>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="Polaris-Popover__FocusTracker" tabindex="0"></div>
</div>
</div>
Props
allowMultiple
boolean
複数のオプションを選択可能にする
id
string
オプションリストのユニークな識別子
optionRole
string
リストの各オプションに特定のロール属性を定義する
options
型の配列: OptionDescriptor[]
active
型: boolean
そのオプションがアクティブかどうか
disabled
型: boolean
そのオプションが無効であるかどうか
id
型: string
オプションのユニークな識別子
labelRequired
型: React.ReactNode
オプションの表示ラベル
media
型: React.ReactElement
オプションコンテンツの左側に表示するメディア
valueRequired
型: string
オプションの値
OptionDescriptor[]
リストアップされるオプションのコレクション
role
型
listbox
型: "listbox"
Or
combobox
型: "combobox"
Or
string
型: string
"listbox" | "combobox" | string
リスト自体に特定のロール属性を定義する
sections
型の配列: SectionDescriptor[]
optionsRequired
型: OptionDescriptor[]
セクション内のオプションの収集
title
型: string
Section title
SectionDescriptor[]
ヘッダーと関連するオプションを含むセクション
selectedRequired
string[]
選択されたオプション
title
string
リストのタイトル
onChange`Required`
関数のパラメーター
selectedRequired
型: string[]
返り値の値
void
(selected: string[]) => void
選択肢が変更されたときのコールバック
アクセシビリティ
オプション・リストの項目は、順序のないリスト（<ul>）の中のリスト項目（<li>）として整理され、関連する要素のグループとして支援技術ユーザーに伝えられます。
単純なオプション・リストのコントロールはボタンで、複数のオプション・リストのコントロールはチェックボックスです。
オプション・リストをカスタマイズする場合は、コンテキストに合った ARIA ロールを提供することができます。これらのロールは、スクリーンリーダーのユーザーに正しく伝えるために、W3C ARIA 仕様に基づいて有効でなければなりません。
- role prop は ARIA ロールをオプションリストのラッパーに追加します。
- optionRole prop はオプションリストのアイテムに ARIA のロールを追加します。
ベストプラクティス
オプションリストコンポーネントは、以下の点に注意してください。
- コンテナの中に単独で配置する。通常、コンテナは popover と同様にメニューのように動作します。同じコンテナ内に他のコンポーネントを置かないこと。
- セレクトコンポーネントで十分な場合は、使用しないでください。
コンテンツのガイドライン
オプションリスト
オプションリストの各項目は、明確で説明的でなければなりません。
関連コンポーネント
- アクションのリストを表示するには、アクションリストコンポーネントを使用します。
- グループ化されたラジオボタンやチェックボックスのリストを作成するには、選択肢リストコンポーネントを使用します。
- シングルチョイスメニューとしてのオプションリストの基本的なバージョンには、select コンポーネントを使用します。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion