UIコンポーネントテストページ
作成したUIコンポーネントの動作確認用ページです
StatsCard
顧客総数
2434
企業数
156
案件数
892
Breadcrumb
1階層（管理者TOPのみ）
2階層（管理者TOP → 企業一覧）
3階層（管理者TOP → 企業一覧 → 企業詳細）
4階層（管理者TOP → 企業一覧 → 企業詳細 → 顧客一覧）
異なるアイコンを使用した例
Button
Variants
Sizes
With Icons
Secondary with Custom Colors
States
Toast
TableCheckbox
Table with Checkbox & Selection
顧客名 | 企業名 | 顧客担当者名 | 営業担当者名 | |
|---|---|---|---|---|
| 北ガスフレアスト東 | 北ガスフレアスト東 | 橿原 龍之介 | 山中 三太郎 | |
| 日祐（DM発送代行） | 静岡茶園 | 浜松 太郎 | 山中 三太郎 | |
| 大阪ガス | 大阪ガス | 御堂筋 花子 | 山中 三太郎 | |
Pagination
現在のページ: 1 / 12
...
少数ページ（5ページ）
多数ページ（50ページ、現在25ページ）
......
組み合わせ例
顧客総数
2434
顧客名 | 企業名 | 顧客担当者名 | 営業担当者名 | ||
|---|---|---|---|---|---|
| 北ガスフレアスト東 | 北ガスフレアスト東 | 橿原 龍之介 | 山中 三太郎 | ||
| 日祐（DM発送代行） | 静岡茶園 | 浜松 太郎 | 山中 三太郎 | ||
| 大阪ガス | 大阪ガス | 御堂筋 花子 | 山中 三太郎 | ||
...
Header
山中 三太郎Admin
PageTitle
顧客登録
Add customer
企業一覧
Company list
案件管理
Footer
UrlAccordion
リダイレクトURL
クリックで展開します
リダイレクトURL
期限前
https://example.com/redirect/1
期限後
https://example.com/redirect/2
InfoCard
案件ID
1001-000001
案件名
アフターフォローDM
顧客名
北ガスフレアスト東
担当者名
橿原 龍之介
担当営業
山中 三太郎
備考
他に担当営業として山田太郎、橿原祐希、角田優がいる
案件ID
PRJ-001
案件名
新規プロジェクト
ステータス
進行中
Input
通常の入力
パスワードの入力（目ボタン + 強度表示）
半角英数字の大文字・小文字・数字を含む12文字以上で入力してください
パスワード強度: 未入力
メールアドレスの入力
電話番号の入力
URLの入力
カナの入力
SearchInput
Select
通常のセレクト（単一選択）
検索可能なセレクト
複数選択可能なセレクト
複数選択可能で検索できるセレクト
エラー状態のセレクト
この項目は必須です
FileUpload
単一ファイルアップロード
ファイルを選択するかここにドラッグ&ドロップしてください
複数ファイルアップロード
ファイルを選択するかここにドラッグ&ドロップしてください
必須項目のファイルアップロード
ファイルを選択するかここにドラッグ&ドロップしてください
ファイルを選択してください
DatePicker
通常の日付選択
日付を選択
必須項目の日付選択
日付を選択
エラー状態の日付選択
日付を選択
正しい日付を入力してください