# UI コンポーネント

Stripe のコンポーネントライブラリを使用して、ユーザーインターフェイスを構築します。

アプリにフロントエンドが必要な場合、このリファレンスドキュメントを使用して UI を構成します。Stripe の事前構築されたコンポーネントのライブラリにはカスタマイズ可能なプロパティが含まれ、Stripe のベストプラクティスに合うようにアプリを構築できます。コンポーネントを使用して、アプリ内でレイアウトを構成し、グラフィカルまたは対話型のインターフェースを作成します。

## ビュー

[追加するビュー](https://docs.stripe.com/stripe-apps/build-ui.md)のすべてにビューコンポーネントが必要です。Web サイトのさまざまな HTML ページと同様に、ビューコンポーネントは、さまざまな段階でユーザーに表示するアプリのビューを決定します。

最も一般的なビューは、`ContextView` です。ユーザーがアプリでワークフローやタスクを開始すると、ビューを `FocusView` に切り替えて、背景の詳細を非表示にします。アプリの設定ページを設計するには、`SettingsView` を使用します。サインイン画面を設計するには、`SignInView` を使用します。

一部のビューはルートコンポーネントです。`ContextView`、`SettingsView`、`SignInView` は、ビューのルートであり、その他すべての UI エレメントを含む基本的なコンポーネントですが、`FocusView` は、`ContextView` の子コンポーネントです。

| コンポーネント | 説明 |
| --- | --- |
| [ContextView](https://docs.stripe.com/stripe-apps/components/contextview.md) | ContextView により、アプリをドロワーで Stripe のコンテンツの横に表示できるため、ユーザーは、それらを横並びで表示し、コンテキストを共有することができます。 |
| [FullPageView](https://docs.stripe.com/stripe-apps/components/fullpageview.md) | FullPageView を使用して、アプリをフルページビューポートでレンダリングします。 |
| [OnboardingView](https://docs.stripe.com/stripe-apps/components/onboardingview.md) | OnboardingView を使用して、アプリのアカウント登録フローでユーザーをガイドします。 |
| [SettingsView](https://docs.stripe.com/stripe-apps/components/settingsview.md) | SettingsView を使用して、各自のアカウントでアプリがどのように機能するかの詳細を、ユーザーが変更できるようにします。 |
| [SignInView](https://docs.stripe.com/stripe-apps/components/signinview.md) | SignInView を使用して、サインイン画面をユーザーに表示します。 |

## レイアウト

レイアウトコンポーネントを使用して、ページとエレメントの構造を作成します。

| コンポーネント | 説明 |
| --- | --- |
| [ボックス](https://docs.stripe.com/stripe-apps/components/box.md) | ボックスは、他のコンポーネントをラップして、カスタムのスタイルやレイアウトを追加するために使用します。 |
| [DetailPage](https://docs.stripe.com/stripe-apps/components/detailpage.md) | DetailPage を使用して、アプリに詳細スタイルのレイアウトを作成します。 |
| [分割](https://docs.stripe.com/stripe-apps/components/divider.md) | 分割線コンポーネントを使用して単純な横罫線を表示します。 |
| [OverviewPage](https://docs.stripe.com/stripe-apps/components/overviewpage.md) | OverviewPage を使用して、アプリに概要スタイルのレイアウトを作成します。 |

## ナビゲーション

ナビゲーションコンポーネントを使用して、ユーザーがアプリ内で簡単に手順を見つけ、操作できるようにします。

| コンポーネント | 説明 |
| --- | --- |
| [ボタン](https://docs.stripe.com/stripe-apps/components/button.md) | ボタンを使用して、ユーザーは Stripe 製品でアクションを実行できます。また、ボタンを使用して、ユーザーの注意を引いたり、結果を警告したりすることができます。 |
| [ButtonGroup](https://docs.stripe.com/stripe-apps/components/buttongroup.md) | ButtonGroup を使用して、複数ボタンのレイアウトを処理します。スペースが限られている場合、ボタンはオーバーフローメニューに折りたたまれます。 |
| [Link](https://docs.stripe.com/stripe-apps/components/link.md) | リンクは、ユーザーをあるページから別のページに移動させるために使用され、また、ボタンと比較してより細かさを必要とするアクションに使用されます。 |
| [メニュー](https://docs.stripe.com/stripe-apps/components/menu.md) | メニューは、ユーザーが選択できるアクションのグループを表示します。多くの場合、このアクションは特定のオブジェクトまたはコンテキストに関連するものです。 |
| [タブ](https://docs.stripe.com/stripe-apps/components/tabs.md) | タブを使用してコンテンツのセクションを表示します。 |

## コンテンツ

コンテンツコンポーネントを使用して、アプリ内で情報を整理して配置します。

| コンポーネント | 説明 |
| --- | --- |
| [アコーディオン](https://docs.stripe.com/stripe-apps/components/accordion.md) | アコーディオンを使用し、長いコンテンツや複雑なコンテンツを、折りたたみ可能な部分に分割します。 |
| [バッジ](https://docs.stripe.com/stripe-apps/components/badge.md) | バッジを使用して、アイテムやオブジェクトが移動または変更する状態を示します。 |
| [バナー](https://docs.stripe.com/stripe-apps/components/banner.md) | バナーを使用して、ユーザーに明確に示したいさまざまなアラートやメッセージを表示します。 |
| [チップ](https://docs.stripe.com/stripe-apps/components/chip.md) | チップを使用して表示し、ユーザーが値を操作できるようにします。 |
| [DataTable](https://docs.stripe.com/stripe-apps/components/datatable.md) | DataTable を使用して、並べ替え、絞り込み、およびページネーションを備えた表形式のデータを表示します。 |
| [FocusView](https://docs.stripe.com/stripe-apps/components/focusview.md) | FocusView を使用して、顧客が特定のタスクを実行する専用スペースを開きます。 |
| [アイコン](https://docs.stripe.com/stripe-apps/components/icon.md) | 互換性のある形式でアイコングラフィックを表示します。 |
| [Img](https://docs.stripe.com/stripe-apps/components/img.md) | Img UI コンポーネントを使用して画像を表示します。 |
| [インライン](https://docs.stripe.com/stripe-apps/components/inline.md) | インラインコンポーネントを使用して、テキストなどのインラインコンテンツをスタイリングします。 |
| [リスト](https://docs.stripe.com/stripe-apps/components/list.md) | 事前設定されたさまざまなフォーマットで情報のリストを表示します。 |
| [PropertyList](https://docs.stripe.com/stripe-apps/components/propertylist.md) | PropertyList を使用して、データをキーと値のペアとして表示します。 |
| [スピナー](https://docs.stripe.com/stripe-apps/components/spinner.md) | スピナーコンポーネントを使用し、読み込み中であることを示します。 |
| [テーブル](https://docs.stripe.com/stripe-apps/components/table.md) | データの行と列を表示します。 |
| [TaskList](https://docs.stripe.com/stripe-apps/components/tasklist.md) | TaskList を使用して、タスクリストの進捗状況をユーザーが把握できるようにします。 |
| [トースト](https://docs.stripe.com/stripe-apps/components/toast.md) | ユーザーに一時的なステータスを通知します。 |
| [ツールチップ](https://docs.stripe.com/stripe-apps/components/tooltip.md) | ツールチップを使用して、特定の要素や主題についての文脈に沿った追加情報を提供します。 |

## フォーム

フォームコンポーネントを使用して、ユーザーの入力が必要な入力フィールドとコントロールを構成します。たとえば、チェックリストの作成や、ユーザーによる設定の選択の有効化に使用します。

| コンポーネント | 説明 |
| --- | --- |
| [チェックボックス](https://docs.stripe.com/stripe-apps/components/checkbox.md) | チェックボックスを使用して、boolean 値の指定または制御を行います。 |
| [CurrencyField](https://docs.stripe.com/stripe-apps/components/currencyfield.md) | 決済金額の処理には CurrencyField を使用します。 |
| [DateField](https://docs.stripe.com/stripe-apps/components/datefield.md) | DateField を使用して、日付入力フィールドを作成します。 |
| [DateRangePicker](https://docs.stripe.com/stripe-apps/components/daterangepicker.md) | DateRangePicker を使用して、ユーザーから日付範囲を収集します。 |
| [FormFieldGroup](https://docs.stripe.com/stripe-apps/components/formfieldgroup.md) | FormFieldGroup コンポーネントでフォームフィールドをグループ化します。 |
| [ラジオ](https://docs.stripe.com/stripe-apps/components/radio.md) | ラジオは、相互排他的なオプションセットからの選択に使用します。 |
| [SearchField](https://docs.stripe.com/stripe-apps/components/searchfield.md) | SearchField を使用して、ユーザーがアプリ内のコンテンツを検索および絞り込みできるようにします。 |
| [選択](https://docs.stripe.com/stripe-apps/components/select.md) | 選択は、ドロップダウンでのオプションセットの選択に使用します。 |
| [スイッチ](https://docs.stripe.com/stripe-apps/components/switch.md) | チェックボックスと同様、スイッチは、boolean 値の指定または制御に使用できます。 |
| [TextArea](https://docs.stripe.com/stripe-apps/components/textarea.md) | TextArea を使用して、複数行テキストの入力フィールドを作成します。 |
| [TextField](https://docs.stripe.com/stripe-apps/components/textfield.md) | TextField を使用して、テキスト入力フィールドを作成します。 |

## チャート

グラフコンポーネントを使用してデータポイントを視覚的にマップします。たとえば、アプリでグラフを使用して、ユーザーが時間の経過とともに支払いデータを追跡したり、進捗を比較できるようにします。

| コンポーネント | 説明 |
| --- | --- |
| [BarChart](https://docs.stripe.com/stripe-apps/components/barchart.md) | 棒グラフは、棒を使用してデータを一連のデータポイントとして視覚化します。 |
| [LineChart](https://docs.stripe.com/stripe-apps/components/linechart.md) | 折れ線グラフは、直線で連結される一連のデータポイントとしてデータを視覚化します。 |
| [Sparkline](https://docs.stripe.com/stripe-apps/components/sparkline.md) | データを簡単な一本の線で表示する折れ線グラフの一種。 |
| [MeterChart](https://docs.stripe.com/stripe-apps/components/meterchart.md) | メーターチャートは全体を複数のセグメントに分割して表示し、それぞれのセグメントが全体に占める割合を示します。 |

## 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)