コンポーネントテスト
デザインシステムコンポーネント テストページ
design-system-example-components-react に基づくコンポーネントのテストページです。
Button コンポーネント
Solid Fill ボタン
Outline ボタン
Text ボタン
無効化されたボタン
Breadcrumbs コンポーネント
基本的なパンくずリスト
NotificationBanner コンポーネント
Info1 (情報 - 青)
Info2 (情報 - グレー)
Warning (警告)
Error (エラー)
Success (成功)
Color Chip スタイル
Accordion コンポーネント
基本的なアコーディオン
アコーディオン 1
これはアコーディオンの内容です。クリックして展開・折りたたみができます。
アコーディオン 2
2つ目のアコーディオンの内容です。
初期状態で開いたアコーディオン
初期状態で開いているアコーディオン
これはページ読み込み時に既に開いているアコーディオンです。
Form コンポーネント (Input/Label/ErrorText)
基本的なフォーム要素
エラー状態
この項目は必須です
必須項目
Blockquote コンポーネント
これは引用文の例です。design-system-example-components-react の Blockquote スタイルを適用しています。 左側に太いボーダーが表示されます。
Table コンポーネント
1行目が見出しセル
| ラベル | ラベル | ラベル | ラベル |
|---|---|---|---|
| データ | データ | データ | データ |
| データ | データ | データ | データ |
List コンポーネント
箇条書きリスト
- 最初の項目
- 2番目の項目
- 3番目の項目
番号付きリスト
- 最初の手順
- 2番目の手順
- 3番目の手順