UI コンポーネント
Stripe のコンポーネントのライブラリーを使用して、ユーザーインターフェイスを素早く構築できます。
アプリにフロントエンドが必要な場合、このリファレンスドキュメントを使用して UI を構成します。Stripe の事前に構築されたコンポーネントのライブラリにはカスタマイズ可能なプロパティーが含まれ、Stripe のベストプラクティスに合うようにアプリを迅速に構築できます。コンポーネントを使用して、アプリ内のレイアウトを構成し、グラフィカルまたは対話型の機能を作成します。
すべてのコンポーネントは、Figma で利用でき、Figma Community の @stripedesign にあります。
ビュー
追加するビューのすべてにビューコンポーネントが必要です。Web サイトのさまざまな HTML ページと同様に、ビューコンポーネントは、さまざまな段階でユーザーに表示するアプリのビューを決定します。
最も一般的なビューは、ContextView です。ユーザーがアプリでワークフローやタスクを開始すると、ビューは FocusView に切り替わり、背景の詳細が非表示になります。アプリの設定ページを設計するには、SettingsView を使用します。サインイン画面を設計するには、SignInView を使用します。
一部のビューはルートコンポーネントです。ContextView、SettingsView、SignInView は、ビューのルートであり、その他すべての UI エレメントを含む基本的なコンポーネントですが、FocusView は、ContextView の子コンポーネントです。
| コンポーネント | 説明 |
|---|---|
| ContextView | ContextView により、アプリをドロワーで Stripe のコンテンツの横に表示できるため、ユーザーは、それらを横並びで表示し、コンテキストを共有することができます。 |
| SettingsView | SettingsView を使用して、各自のアカウントでアプリがどのように機能するかの詳細を、ユーザーが変更できるようにします。 |
| SignInView | SignInView を使用して、サインイン画面をユーザーに表示します。 |
レイアウト
レイアウトコンポーネントを使用して、ページとエレメントの構造を作成します。
ナビゲーション
ナビゲーションコンポーネントを使用して、ユーザーがアプリ内で簡単に手順を見つけ、操作できるようにします。
| コンポーネント | 説明 |
|---|---|
| ボタン | ボタンを使用して、ユーザーは Stripe 製品でアクションを実行できます。また、ボタンを使用して、ユーザーの注意を引いたり、結果を警告したりすることができます。 |
| ButtonGroup | ButtonGroup を使用して、複数ボタンのレイアウトを処理します。スペースが限られている場合、ボタンはオーバーフローメニューに折りたたまれます。 |
| リンク | リンクは、ユーザーをあるページから別のページに移動させるために使用され、また、ボタンと比較してより細かさを必要とするアクションに使用されます。 |
| メニュー | メニューは、ユーザーが選択できるアクションのグループを表示します。多くの場合、このアクションは特定のオブジェクトまたはコンテキストに関連するものです。 |
| タブ | タブを使用してコンテンツのセクションを表示します。 |
コンテンツ
コンテンツコンポーネントを使用して、アプリ内で情報を整理して配置します。
| コンポーネント | 説明 |
|---|---|
| アコーディオン | アコーディオンを使用し、長いコンテンツや複雑なコンテンツを、折りたたみ可能な部分に分割します。 |
| バッジ | バッジを使用して、アイテムやオブジェクトが移動または変更する状態を示します。 |
| バナー | バナーを使用して、ユーザーに明確に示したいさまざまなアラートやメッセージを表示します。 |
| チップ | チップを使用して表示し、ユーザーが値を操作できるようにします。 |
| FocusView | FocusView を使用して、顧客が特定のタスクを実行する専用スペースを開きます。 |
| アイコン | 互換性のある形式でアイコングラフィックを表示します。 |
| Img | Img UI コンポーネントを使用して画像を表示します。 |
| インライン | インラインコンポーネントを使用して、テキストなどのインラインコンテンツをスタイリングします。 |
| リスト | 事前設定されたさまざまなフォーマットで情報のリストを表示します。 |
| スピナー | スピナーコンポーネントを使用し、読み込み中であることを示します。 |
| テーブル | データの行と列を表示します。 |
| トースト | ユーザーに一時的なステータスを通知します。 |
| ツールチップ | ツールチップを使用して、特定の要素や主題についての文脈に沿った追加情報を提供します。 |
フォーム
フォームコンポーネントを使用して、ユーザーの入力が必要な入力フィールドとコントロールを構成します。たとえば、チェックリストの作成や、ユーザーによる設定の選択の有効化に使用します。
| コンポーネント | 説明 |
|---|---|
| チェックボックス | チェックボックスを使用して、boolean 値の指定または制御を行います。 |
| DateField | DateField を使用して、日付入力フィールドを作成します。 |
| FormFieldGroup | FormFieldGroup コンポーネントでフォームフィールドをグループ化します。 |
| ラジオ | ラジオは、相互排他的なオプションセットからの選択に使用します。 |
| 選択 | 選択は、ドロップダウンでのオプションセットの選択に使用します。 |
| スイッチ | チェックボックスと同様、スイッチは、boolean 値の指定または制御に使用できます。 |
| TextArea | TextArea を使用して、複数行テキストの入力フィールドを作成します。 |
| TextField | TextField を使用して、テキスト入力フィールドを作成します。 |
チャート
グラフコンポーネントを使用してデータポイントを視覚的にマップします。たとえば、アプリでグラフを使用して、ユーザーが時間の経過とともに支払いデータを追跡したり、進捗を比較できるようにします。