チップ
チップを使用して表示し、ユーザーが値を操作できるようにします。
Chip
コンポーネントをアプリに追加するには、以下のようにします。
import {Chip, ChipList} from '@stripe/ui-extension-sdk/ui';
これは、さまざまなプロパティ設定における ChipList
コンポーネント内の複数の Chip
コンポーネントをプレビューしたものです。
<ChipList> <Chip label="Currency" value="USD" onDropdown={() => { alert('Dropdown function triggered'); }} onClose={() => { alert('Close function triggered'); }} /> <Chip label="Status" value="Succeeded" onDropdown={() => { alert('Dropdown function triggered'); }} onClose={() => { alert('Close function triggered'); }} /> <Chip label="Amount" onAddSuggestion={() => { alert('Add Amount suggestion'); }} /> <Chip label="Date" onAddSuggestion={() => { alert('Add Date suggestion'); }} /> </ChipList>
Props
Prop | Type |
---|---|
label |
|
onAddSuggestion |
|
onClose |
|
onDropdown |
|
value |
|
提案されるチップ
plus
アイコンでチップが表すものを追加することをユーザーに提案するには、コールバック関数を onAddSuggestion
プロパティに渡します。
<Chip label="Date" onAddSuggestion={() => { alert('Suggestion function triggered'); }} />
ドロップダウン付きのチップ
ユーザーが最初の選択を行った後に、チップの値を編集できるようにする場合は、onDropdown
コールバック関数を提供して、編集に必要な選択インターフェイスを開きます。
import {useState} from 'react'; import {Box, Chip} from '@sail/ui/deprecated'; const WithDropdown = () => { const [open, setOpen] = useState(false); return ( <> <Chip label="Status" value="Succeeded" onDropdown={() => setOpen(!open)} onClose={() => { alert('Close function triggered'); }} /> {open && ( <Box css={{ font: 'caption', borderRadius: 'medium', background: 'container', margin: 'small', padding: 'medium', color: 'secondary', }} > Dropdown contents </Box> )} </> ); };
複数の値を表す
Chip
コンポーネントの value
プロパティに値の配列が適切に取り込まれたら、チップ内にそれらが表示されます。
<Chip label="Status" value={['Refunded', 'Succeeded']} onDropdown={() => { alert('Dropdown function triggered'); }} onClose={() => { alert('Close function triggered'); }} />
リスト内にチップを表示する
多くの場合、チップは単独では表示されず、他のチップと並んで表示されます。ChipList
コンポーネントはリスト内のチップの適切な間隔と折り返しの処理を行い、さらに右・左の矢印キーを使用してチップの便利なキーボードナビゲーションを提供します。
<ChipList> <Chip label="Currency" value="USD" onDropdown={() => { alert('Dropdown function triggered'); }} onClose={() => { alert('Close function triggered'); }} /> <Chip label="Status" value="Succeeded" onDropdown={() => { alert('Dropdown function triggered'); }} onClose={() => { alert('Close function triggered'); }} /> <Chip value="jenny.rosen@stripe.com" onClose={() => { alert('Closed jenny.rosen'); }} /> <Chip value="usr_0As2kXSWDS1lTZsH5agB" onClose={() => { alert('Closed usr_0As2kXSWDS1lTZsH5agB'); }} /> <Chip label="Amount" onAddSuggestion={() => { alert('Add Amount suggestion'); }} /> <Chip label="Date" onAddSuggestion={() => { alert('Add Date suggestion'); }} /> </ChipList>
閉じることができないチップ
Chip
が必須の値を表す場合、add
または cancel
アイコンを使用せずにチップを表示すると便利なことがあります。onAddSuggestion
および onClose
コールバックを除外して、閉じることができないチップをユーザーに表示します。
<ChipList> <Chip label="Amount" value="$10" /> <Chip label="Age" value="18-24" onDropdown={() => { alert('Dropdown function triggered'); }} /> </ChipList>