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