# Stripe Apps の FocusView コンポーネント FocusView を使用して、顧客が特定のタスクを実行する専用スペースを開きます。 # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/focusview?app-sdk-version=8. `FocusView` コンポーネントは他の `View` コンポーネントから開くことができ、開発者はエンドユーザーが特定のタスクを実行する専用スペースを開くことができます。以下はその例です。 - データベースに新しいエントリーを作成するための詳細を入力する - ウィザードを経て次のステップを決定する - 指示されたアクションをユーザーが実行することを確認する ![](https://b.stripecdn.com/docs-statics-srv/assets/focusview.f2c4048d934cb15b3e9163c82d993624.png) FocusView のデザイン `FocusView` は、`ContextView` の子にする必要があります。`FocusView` を条件でラップするのではなく、`shown` プロパティを使用して表示状態を管理します。詳細については、[ContextView](https://docs.stripe.com/stripe-apps/components/contextview.md) をご覧ください。 `FocusView` コンポーネントをアプリに追加するには、以下のようにします。 ```js import {FocusView} from '@stripe/ui-extension-sdk/ui'; ``` ### FocusView のプロパティ | プロパティ | 型 | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `children` | (必須) `React.ReactNode` コンポーネントのコンテンツ。 | | `title` | (必須) `string` `FocusView` のタイトル。これは、ドロワーの最上部で、アプリ名の下に表示されます。 | | `confirmCloseMessages` | (任意) `ConfirmCloseMessages | undefined` 指定がある場合、ユーザーが `FocusView` を閉じたときに confirmCloseMessages が表示されます。 関連型: [ConfirmCloseMessages](https://docs.stripe.com/stripe-apps/components/focusview.md#confirmclosemessages)。 | | `footerContent` | (任意) `React.ReactNode` フッター内のアクションに横にある React ノード。 | | `primaryAction` | (任意) `React.ReactElement | undefined` フッターに配置される、1 次的な行動喚起 (「保存」または「続行」) の `Button`。 | | `secondaryAction` | (任意) `React.ReactElement | undefined` フッターに配置される、2 次的な行動喚起 (「キャンセル」) の `Button`。 | | `setShown` | (任意) `((shown: boolean) => void) | undefined` ユーザーがウィンドウを閉じるようにリクエストした場合、または確認ダイアログを閉じたためウィンドウを開いたままにする必要がある場合に、`FocusView` は表示状態を管理できます。 | | `shown` | (任意) `boolean | undefined` `FocusView` を表示するかどうか。このプロパティは、親ビューによって管理されます。 | | `onClose` | (任意)(非推奨) 代わりに `setShown` を使用してください。ユーザーが `FocusView` 外をクリックするか、エスケープボタンを押した場合に、ユーザーがビューを閉じたことを拡張機能に通知します。 `(() => void) | undefined` | ### ConfirmCloseMessages | プロパティ | 型 | | -------------- | --------------- | | `cancelAction` | (必須) `string` | | `description` | (必須) `string` | | `exitAction` | (必須) `string` | | `title` | (必須) `string` | ## 確認ダイアログを閉じる `confirmCloseMessages` を渡す際に、終了の確認ダイアログがすべての終了シナリオで正しく機能するように、`setShown` プロパティを渡して、`FocusView` が `shown` のステータスを管理できるようにします。確認ダイアログを表示するタイミングを制御するには、次の例のように、ステータスを使用して条件付きで `confirmCloseMessages` を `FocusView` に渡します。 ## 例 # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/focusview?app-sdk-version=9. `FocusView` コンポーネントは他の `View` コンポーネントから開くことができ、開発者はエンドユーザーが特定のタスクを実行する専用スペースを開くことができます。以下はその例です。 - データベースに新しいエントリーを作成するための詳細を入力する - ウィザードを経て次のステップを決定する - 指示されたアクションをユーザーが実行することを確認する ![](https://b.stripecdn.com/docs-statics-srv/assets/focusview.f2c4048d934cb15b3e9163c82d993624.png) FocusView のデザイン `FocusView` は、`ContextView` の子にする必要があります。`FocusView` を条件でラップするのではなく、`shown` プロパティを使用して表示状態を管理します。詳細については、[ContextView](https://docs.stripe.com/stripe-apps/components/contextview.md) をご覧ください。 `FocusView` コンポーネントをアプリに追加するには、以下のようにします。 ```js import {FocusView} from '@stripe/ui-extension-sdk/ui'; ``` ### FocusView のプロパティ | プロパティ | 型 | | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `children` | (必須) `React.ReactNode` コンポーネントのコンテンツ。 | | `title` | (必須) `string` `FocusView` のタイトル。これは、ドロワーの最上部で、アプリ名の下に表示されます。 | | `confirmCloseMessages` | (任意) `ConfirmCloseMessages | undefined` 指定がある場合、ユーザーが `FocusView` を閉じたときに confirmCloseMessages が表示されます。 関連型: [ConfirmCloseMessages](https://docs.stripe.com/stripe-apps/components/focusview.md#confirmclosemessages)。 | | `footerContent` | (任意) `React.ReactNode` フッター内のアクションに横にある React ノード。 | | `primaryAction` | (任意) `React.ReactElement | undefined` フッターに配置される、1 次的な行動喚起 (「保存」または「続行」) の `Button`。 | | `secondaryAction` | (任意) `React.ReactElement | undefined` フッターに配置される、2 次的な行動喚起 (「キャンセル」) の `Button`。 | | `setShown` | (任意) `((shown: boolean) => void) | undefined` ユーザーがウィンドウを閉じるようにリクエストした場合、または確認ダイアログを閉じたためウィンドウを開いたままにする必要がある場合に、`FocusView` は表示状態を管理できます。 | | `shown` | (任意) `boolean | undefined` `FocusView` を表示するかどうか。このプロパティは、親ビューによって管理されます。 | ### ConfirmCloseMessages | プロパティ | 型 | | -------------- | --------------- | | `cancelAction` | (必須) `string` | | `description` | (必須) `string` | | `exitAction` | (必須) `string` | | `title` | (必須) `string` | ## 確認ダイアログを閉じる `confirmCloseMessages` を渡す際に、終了の確認ダイアログがすべての終了シナリオで正しく機能するように、`setShown` プロパティを渡して、`FocusView` が `shown` のステータスを管理できるようにします。確認ダイアログを表示するタイミングを制御するには、次の例のように、ステータスを使用して条件付きで `confirmCloseMessages` を `FocusView` に渡します。 ## 例 ## 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)