# Stripe Apps の Chip コンポーネント チップを使用して表示し、ユーザーが値を操作できるようにします。 # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/chip?app-sdk-version=8. `Chip` コンポーネントをアプリに追加するには、以下のようにします。 ```js import {Chip, ChipList} from '@stripe/ui-extension-sdk/ui'; ``` これは、さまざまなプロパティ設定における `ChipList` コンポーネント内の複数の `Chip` コンポーネントをプレビューしたものです。 ### ChipList プロパティ | プロパティー | タイプ | | ----------- | -------------------------------------------------- | | `children` | (必須) `React.ReactNode` 1 つ以上の `Chip` コンポーネント。 | | `direction` | (オプション) `("row" | "row-reverse") | undefined` | ### Chip プロパティ | プロパティー | タイプ | | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | `label` | (オプション) `string | undefined` 横に表示される可能性のある他の `Chips` の中で `Chip` を一意に識別する文字列。このプロパティに `value` がない場合、`Chip` は「推奨された」スタイルでレンダリングされます。 | | `onAddSuggestion` | (オプション) `(() => void) | undefined` ユーザーが「推奨された」`Chip` をクリックして有効化したときに呼び出される関数。 | | `onClose` | (オプション) `(() => void) | undefined` ユーザーが `Chip` を削除するためにアイコンをクリックしたときに呼び出される関数。 | | `onDropdown` | (オプション) `(() => void) | undefined` ユーザーが選択した値を編集するために、有効な `Chip` の右側をクリックしたときに呼び出される関数。 | | `value` | (オプション) `(string | string[]) | undefined` 現在選択されている `Chip` の値。 | ## 推奨されるチップ `plus` アイコンでチップが表すものを追加することをユーザーに提案するには、コールバック関数を `onAddSuggestion` プロパティに渡します。 ## ドロップダウン付きのチップ ユーザーが最初の選択を行った後に、チップの値を編集できるようにする場合は、`onDropdown` コールバック関数を提供して、編集に必要な選択インターフェイスを開きます。 ## 複数の値を表す `Chip` コンポーネントの `value` プロパティに値の配列が適切に取り込まれたら、チップ内にそれらが表示されます。 ## リスト内にチップを表示する 多くの場合、チップは単独では表示されず、他のチップと並んで表示されます。`ChipList` コンポーネントはリスト内のチップの適切な間隔と折り返しの処理を行い、さらに右・左の矢印キーを使用してチップの便利なキーボードナビゲーションを提供します。 ## 閉じることができないチップ `Chip` が必須の値を表す場合、`add` または `cancel` アイコンを使用せずにチップを表示すると便利なことがあります。`onAddSuggestion` および `onClose` コールバックを除外して、閉じることができないチップをユーザーに表示します。 # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/chip?app-sdk-version=9. `Chip` コンポーネントをアプリに追加するには、以下のようにします。 ```js import {Chip, ChipList} from '@stripe/ui-extension-sdk/ui'; ``` これは、さまざまなプロパティ設定における `ChipList` コンポーネント内の複数の `Chip` コンポーネントをプレビューしたものです。 ### ChipList プロパティ | プロパティー | タイプ | | ----------- | -------------------------------------------------- | | `children` | (必須) `React.ReactNode` 1 つ以上の `Chip` コンポーネント。 | | `direction` | (オプション) `("row" | "row-reverse") | undefined` | ### Chip プロパティ | プロパティー | タイプ | | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------- | | `label` | (オプション) `string | undefined` 横に表示される可能性のある他の `Chips` の中で `Chip` を一意に識別する文字列。このプロパティに `value` がない場合、`Chip` は「推奨された」スタイルでレンダリングされます。 | | `onAddSuggestion` | (オプション) `(() => void) | undefined` ユーザーが「推奨された」`Chip` をクリックして有効化したときに呼び出される関数。 | | `onClose` | (オプション) `(() => void) | undefined` ユーザーが `Chip` を削除するためにアイコンをクリックしたときに呼び出される関数。 | | `onDropdown` | (オプション) `(() => void) | undefined` ユーザーが選択した値を編集するために、有効な `Chip` の右側をクリックしたときに呼び出される関数。 | | `value` | (オプション) `(string | string[]) | undefined` 現在選択されている `Chip` の値。 | ## 推奨されるチップ `plus` アイコンでチップが表すものを追加することをユーザーに提案するには、コールバック関数を `onAddSuggestion` プロパティに渡します。 ## ドロップダウン付きのチップ ユーザーが最初の選択を行った後に、チップの値を編集できるようにする場合は、`onDropdown` コールバック関数を提供して、編集に必要な選択インターフェイスを開きます。 ## 複数の値を表す `Chip` コンポーネントの `value` プロパティに値の配列が適切に取り込まれたら、チップ内にそれらが表示されます。 ## リスト内にチップを表示する 多くの場合、チップは単独では表示されず、他のチップと並んで表示されます。`ChipList` コンポーネントはリスト内のチップの適切な間隔と折り返しの処理を行い、さらに右・左の矢印キーを使用してチップの便利なキーボードナビゲーションを提供します。 ## 閉じることができないチップ `Chip` が必須の値を表す場合、`add` または `cancel` アイコンを使用せずにチップを表示すると便利なことがあります。`onAddSuggestion` および `onClose` コールバックを除外して、閉じることができないチップをユーザーに表示します。 ## See also - [従うべき設計パターン](https://docs.stripe.com/stripe-apps/patterns.md) - [アプリのスタイル設定](https://docs.stripe.com/stripe-apps/style.md) - [UI テスト](https://docs.stripe.com/stripe-apps/ui-testing.md)