コンポーネント
リッチなデスクトップクラスの Web アプリを構築するためのプリビルトコンポーネント集。@gunjo/ui としてインストールするか、必要に応じて個別のプリミティブをコピーして取り込みます ── トレードオフは「はじめに」を参照。
入力
入力の概要
A Gunjo UI component.
ボタン
ボタン、またはボタン風の見た目のコンポーネントを表示します。
カレンダー
日付の入力・編集ができるカレンダーコンポーネントです。
チャットコンポーザー
チャット入力の前後に選択肢、作業コンテキスト、使用量、補助アクセサリを組み合わせる上位コンテナです。
チャット入力
メッセージ入力、添付、送信、停止、無効化理由をまとめて扱うチャット用の入力欄です。
チェックボックス
オン/オフを切り替えるコントロールです。
コンボボックス
検索しながら候補を選択できるコンボボックスです。
コピーボタン
クリップボードへのコピー操作を、ツールチップとコピー済み状態のフィードバック付きで表示します。
2人確認
2人目の確認者、確認項目、署名済み状態をまとめて扱うダブルチェック用の入力です。
金額入力
A Gunjo UI component.
日付ピッカー
単一の日付を選択するカレンダーポップオーバー付きの入力コンポーネントです。
日付範囲ピッカー
開始日と終了日をまとめて選択する、2か月表示のカレンダーポップオーバーです。
編集可能フィールド
読み取り表示と明示的な保存・キャンセル付き編集を切り替えられる、ラベル付きフィールドです。
ファイルアップローダー
ドラッグ＆ドロップ対応のファイルアップロードです。
フィルターボタン
条件の選択状態をボタン上のバッジとポップオーバーで扱うフィルター操作です。
フォーム
ラベル、入力欄、説明、エラーメッセージを一貫した余白と状態で組み合わせるフォームプリミティブです。
入力欄
フォームの入力フィールド、または入力欄風のコンポーネントを表示します。
OTP入力
ワンタイムパスワードや確認コードを、桁ごとのスロットで入力するコンポーネントです。
ラベル
入力欄や選択肢に紐づくラベルを表示します。
メンション
@ などのトリガー文字で候補を表示し、テキストエリアへメンションを挿入します。
数値入力
上下ボタン付きの数値入力です。最小値、最大値、増減単位を指定できます。
パスワードグループ
パスワード入力、要件、強度、エラー、無効化理由を1つの入力グループとして扱います。
パスワード入力
パスワードの表示・非表示を切り替えられる入力欄です。
パスワード要件リスト
パスワード要件の達成状態をチェックリストとして表示します。
パスワード強度メーター
アプリ側で計算したパスワード強度を段階表示します。
電話番号入力
国番号の表示と電話番号の入力補助を組み合わせた入力欄です。
郵便番号入力
郵便番号の入力と 3桁-4桁の整形を扱う入力欄です。
ラジオグループ
いずれか1つだけ選択できるラジオボタン群です。
範囲スライダー
境界のある範囲から最小値と最大値を選択するスライダーです。
段階スキャン
複数段階のバーコード読み取りを、確認値を引き継ぎながら進めるスキャンフローです。
スキャン入力
A Gunjo UI component.
検索入力
検索アイコンとクリア操作を備えた検索入力欄です。
セグメント切替
少数の選択肢から1つを選ぶ、等幅セグメント型のコントロールです。
セレクト
ボタンで開く選択肢のリストを表示します。
スライダー
指定範囲から値を選ぶ入力コンポーネントです。
並び替え
ソート順を切り替えるボタンです。
スイッチ
オン/オフを切り替えるコントロールです。
タグ入力
複数のタグを入力・削除できるタグ入力欄です。
テキストエリア
テキストエリア、またはテキストエリア風のコンポーネントを表示します。
時刻ピッカー
時と分を選択し、24時間表記の値として扱う時刻入力です。
トグル
押下状態を持つ単体のオン/オフボタンです。
トグルグループ
オン/オフできる二値のボタン群です。
ツールチップ付きボタン
ボタン操作にツールチップ説明を組み合わせ、アイコンだけの操作や補足が必要な操作の意味を明確にします。
表示
表示の概要
A Gunjo UI component.
アコーディオン
見出しをクリックすると該当セクションが開閉する縦積みの UI です。
アコーディオングループ
ラベル、説明、すべて開く・すべて閉じるを切り替える操作を備えたアコーディオンのグループです。
アクション付きデータテーブル
行選択、一括操作、行操作を組み合わせたデータテーブルです。
対応キュー
重大度つきの要対応項目を、種別・期日・操作と合わせて並べる対応キューです。
金額内訳
金額の内訳、控除、小計、導出合計を読み取り専用で表示する明細ブロックです。
承認ステップ
A Gunjo UI component.
承認ワークフロー
承認・審査の段階を進行、差戻し、却下、完了の状態と記録で扱うワークフローです。
アセットカード
メディアライブラリや制作物一覧で使う、選択・お気に入り・スコア表示付きのアセットカードです。
アセットグリッド
アセットカードをレスポンシブなグリッドやグループ単位で表示します。
アバター
ユーザーを表す画像で、フォールバック付きです。
アバターグループ
複数のアバターを重ねて表示し、表示しきれない人数を +N とメンバー一覧で確認できるグループ表示です。
バッジ
バッジ、またはバッジ風のコンポーネントを表示します。
カード
ヘッダー・本文・フッター付きのカードを表示します。
カルーセル
スライドやカルーセル表示用のコンポーネントです。
チャットメッセージ
アシスタント、ユーザー、システム、入力中の会話行を表示するメッセージコンポーネントです。
複数選択カード
A Gunjo UI component.
チェックリスト
チェック可能な行、表示専用行、右側の状態表示をまとめて扱う確認リストです。
コード
本文中の短いコード、コマンド、値を読み分けやすく表示します。
コードブロック
ファイル名、言語ラベル、コピー操作付きでコードブロックを表示します。
カラースウォッチ
カラー値とトークン名を並べて表示し、必要に応じて値をコピーできます。
企業セル
企業名や制度名を、ロゴまたはイニシャルタイルと補足情報で表示する識別セルです。
データテーブル
列定義、絞り込み、ページ送りを組み合わせて行データを表示するテーブルです。
差分
A Gunjo UI component.
注釈
本文中の補足説明、参考リンク、緊急ではない注釈を表示します。
書類行
書類の選択、プレビュー、ダウンロードを独立した操作として並べるファイル行です。
編集可能データテーブル
A Gunjo UI component.
空状態
データがない、検索結果がない、読み込みに失敗したなどの状態を、説明と次の操作付きで表示します。
月間カレンダー
日付ごとの予定を月間グリッドに配置し、日付選択と予定選択を扱うカレンダーです。
有効期限
期限日を有効、期限間近、失効、未登録の状態に分類して表示する期限バッジです。
ファイルツリー
ファイルとフォルダの階層を、容量や件数、行アクション、単一選択・複数選択つきで表示します。
フィルタチップ
横スクロールできる単一選択チップで、多数のカテゴリを素早く切り替えます。
ギャラリー
A Gunjo UI component.
ガントチャート
リソース行と時間軸にバーを配置し、重なりや区間分割を含む予定を表示するガントチャートです。
アイコン
アイコンの大きさ、線幅、支援技術への伝え方を GunjoUI 全体で揃えるプリミティブです。
画像プレビュー
アセットカード、選択ダイアログ、メディア確認で使う枠付きの画像プレビュー面です。
画像
ローディングスケルトンとエラー時のフォールバック付きの画像コンポーネントです。
旅程
日別またはフラットな旅程を、時刻、種別アイコン、詳細、操作付きの縦タイムラインで表示します。
カンバンボード
フラットな項目を列へ分類し、件数、空列、選択可能カードを含むカンバンとして表示します。
キー表示
キーボードショートカットのキーを表示します。
上限監視
計測値を基準値や上限・下限と比較し、基準内、間近、超過、重大超過を表示します。
系譜グラフ
上流と下流の関係を、複数親・複数子を含むノードリンク図として表示します。
路線チップ
路線名や系統番号を、ブランド色と自動コントラスト文字で表示する識別チップです。
リスト
マーカーや余白をカスタマイズできるセマンティックなリストです。
リストカード
一覧の1項目を、先頭アクセサリ、本文、状態、メタ情報、選択状態付きで表示します。
ロイヤリティ要約カード
ポイント残高、会員ランク、次ランクまでの進捗、失効通知、主操作をまとめる会員カードです。
Markdown描画
Markdown 文字列を GunjoUI の本文スタイルに合わせて描画します。
マッチカード
2つの対象を左右に並べ、適合度、評価内訳、次の操作をまとめて表示するマッチングカードです。
メタデータリスト
インスペクターや詳細パネルで使う、ラベルと値のメタ情報リストです。
メーター
容量、達成率、しきい値を値と最大値の関係で示すメーターです。
稼働メーター
A Gunjo UI component.
区間（発着）
出発地と到着地を横並びで示し、経由地、所要時間、入れ替え操作を扱う経路ヘッダーです。
人物セル
人物のアバター、名前、所属、補足、在席状態、末尾情報を1行で表示する識別セルです。
選択カード
価格や説明を含むカード型の単一選択肢を、radiogroup として扱う入力カードです。
レーティング
A Gunjo UI component.
基準値判定
計測値を基準範囲と比較し、正常、高値、低値、異常値を色だけに頼らず表示します。
関係行
2人の PersonCell を横並びにし、担当、上司、訪問などの関係を示す行です。
条件付きセクション
A Gunjo UI component.
配送ルート
配送や輸送の停止地点を、現在地、完了、遅延、不在などの状態付きタイムラインで表示します。
スケジュールグリッド
行と列で構成された予定表や割当表を、sticky header とキーボード操作付きのグリッドで表示します。
検索可能アコーディオン
検索入力、カテゴリ、件数表示、該当なし表示を組み合わせたアコーディオンです。
座席表
座席や区画を2次元グリッドで表示し、空席、予約済み、確保中、選択状態を扱います。
セクションリスト
事前にグループ化された行を、見出し、本文、小計フッター付きのセクションとして並べます。
区切り線
コンテンツを視覚的・意味的に区切ります。
署名記録
署名後に本文をロックし、修正を追記として残す監査向けの記録コンポーネントです。
スケルトン
読み込み中のコンテンツの形を示すプレースホルダーです。
スペーサー
flex レイアウト内で余白を伸縮または固定サイズで確保します。
指標グループ
複数の Statistic をレスポンシブな指標グリッドとしてまとめて表示します。
統計
指標名、主値、増減、補足をまとめて表示する統計コンポーネントです。
状態ボード
車両、設備、作業台などの状態を、エリア別のタイル盤として問題優先で一覧します。
スウォッチグループ
A Gunjo UI component.
テーブル
列見出しと行データを組み合わせて、比較しやすい一覧を表示する表コンポーネントです。
タグ
分類、状態、キーワードなどの短いラベルを、必要に応じて削除操作付きで表示します。
タグエディタ
タグ入力、削除、候補からの追加をまとめて扱うタグ編集 UI です。
チケット券面
クーポン、搭乗券、会員証などの情報とバーコードまたはQRコードを、チケット形状で表示します。
タイムライン
履歴、進行状況、予定などを時系列の項目として縦方向に表示します。
ツールピル
編集ツールやモード切り替えを、ツールチップ付きのアイコンピルとして表示します。
ツリービュー
ファイル、設定、階層カテゴリなどの親子構造を開閉できるツリーとして表示します。
週間カレンダー
週単位の時間グリッドに予定を配置し、重なった予定を横並びで表示します。
チャート
チャートの概要
ダッシュボードパターンで使うチャートプリミティブとチャートカードのカテゴリ概要です。
活動タイムラインカード
活動量、睡眠、業務負荷などの時間帯別データを、概要値・タイムライン・内訳バーでまとめるカードです。
分析カード
チャート、差分、補足情報を載せるメトリックカードです。
棒グラフ
平均値マーカー付きの縦棒・横棒チャートです。
チャート凡例
チャート系列やセグメントのラベル・値を表示します。
塗り分け地図
GeoJSON 風の境界データで地域別の密集度、地点マーカー、ランキングを示す地図です。
同心円進捗カード
ストレージ、クォータ、利用率を複数リングで示す進捗カードです。
分布バー
セグメントやチャネル構成を示す積み上げ割合バーです。
ドーナツチャート
中央ラベル付きで構成比を示すドーナツチャートです。
ゲージチャート
スコアや進捗、容量を示す半円ゲージです。
ヒートマップ
曜日・時間・コホートの密集度を示すヒートマップです。
ラベル付きドーナツカード
中央サマリーと外部ラベルで、セグメントの構成比を読み取りやすくするドーナツカードです。
ランキング
順位、値、バー、前期比をまとめたランキングリストです。並び順は呼び出し側が決めます。
折れ線チャート
複数系列の時系列比較に使う線・面チャートです。
ミニ分布バーカード
カテゴリ構成や利用率を、密集したティックバーでコンパクトに示すカードです。
パレート図
大きい要因から並べた棒と累積率の線で、少数の主要因が全体に与える影響を示します。
円グラフ
セグメントの構成比を比較する円グラフです。
4象限マトリクス
項目を x/y の位置で配置してランキングできる4象限マトリクスです。
レーダーチャート
複数軸の正規化スコアを比較するレーダーチャートです。
ラジアルバーチャート
進捗・比率・容量を同心円のバーで比較するチャートです。
継続率コホートカード
獲得月や開始時期ごとの継続率を、期間別に比較するコホートカードです。
リボンチャート
期間ごとの流量や構成量の広がりを示すリボンチャートです。
セグメントゲージカード
支出、進捗、リスクなどを複数セグメントの半円ゲージで示すカードです。
セグメントタイムラインカード
睡眠ステージ、稼働状態、配送状態などの時間範囲を横方向に示すカードです。
スパークライン
密度の高いカード向けの小さな線・面・ステップチャートです。
積み上げ棒チャート
グループごとの内訳を比較する縦・横の積み上げ棒チャートです。
運行図表
停車地点と時刻を結ぶ運行図表を表示し、計画と実績、上下方向、現在時刻を重ねて確認できます。
フィードバック
フィードバックの概要
A Gunjo UI component.
アラート
注意を促すためのコールアウトを表示します。
バナー
ページ全体に関係するお知らせや状態を横長のバーで表示します。
通知センター
通知の一覧と管理用の UI です。
進捗バー
タスクの進捗を示すインジケーターです。
進捗ウィジェット
進捗値、補足文、進捗バーをカードとしてまとめて表示します。
安全バナー
重要な警告や安全確認を強調し、必要に応じて明示的な確認状態を管理します。
スピナー
処理中であることを示すインジケーターです。
ステータスバー
ステータスや情報を表示するバーです。
ステータス画面
404、エラー、オフライン、権限なし、メンテナンス、公開前など、全画面の状態フィードバックを表示します。
ステッパー
複数ステップの進行状況を、完了・現在地・未完了の状態で示すコンポーネントです。
トースト
一時的に表示する短いメッセージです。
トーストプロバイダ
トーストの表示と管理を行います。
オーバーレイ
オーバーレイの概要
A Gunjo UI component.
確認ダイアログ
削除や破棄など、重要な操作の前に明示的な確認を求めるモーダルダイアログです。
チャットパネル
チャットメッセージとチャット入力を組み合わせ、サポートやアシスタントの会話面を構成するパネルです。
コンテキストメニュー
右クリックで開くメニューです。
ダイアログ
背後を無効化したオーバーレイのウィンドウです。
ドロワー
画面の端から補助的な内容を開き、設定や詳細をその場で確認できるドロワーです。
ドロップダウン
ボタンで開くメニュー（アクションや機能の一覧）を表示します。
フローティングパネル
作業面やキャンバス上に、ツール、状態、補助情報を重ねて表示するパネルです。必要に応じてドラッグやリサイズも有効化できます。
ホバーカード
リンク先の内容をプレビュー表示するカードです。
メディアライトボックス
メディアを大きく確認するための、ズーム・前後移動・操作付きライトボックスです。
メディア選択ダイアログ
ライブラリ内のアセットを検索し、単体または複数選択するためのダイアログです。
モーダル
現在の画面に重ねて、確認・入力・重要な補足を短い操作面として表示します。
オンボーディング
初期設定や導入手順を複数ステップに分けて案内するフローです。
ポップオーバー
トリガーに紐づく補足情報、軽いフォーム、状態、短い確認を画面遷移なしで表示します。
共有モーダル
公開リンクの有効化、URLコピー、共有状態の確認をまとめて扱うモーダルです。
シート
現在の画面を残したまま、補助的な設定・フォーム・ナビゲーションを画面端から表示する Dialog ベースのパネルです。
ツールチップ
ホバーやフォーカス時に、操作名・補足・無効理由などの短い情報を表示します。
レイアウト
レイアウトの概要
A Gunjo UI component.
アスペクト比
画像、動画、iframe などのメディア枠を、指定した縦横比で保つレイアウトプリミティブです。
アセットインスペクター
アセットのプレビュー、タグ、メタデータ、操作をまとめて確認・編集するインスペクターパネルです。
クラスター
タグ、ボタン、短い操作群を、折り返し可能な横並びとしてまとめるレイアウトプリミティブです。
開閉パネルトグル
境界線上に配置して、左右上下の折りたたみパネルを開閉するトグルボタンです。
コンテナ
ページやセクションの横幅、左右余白、中央寄せを一貫して制御するレイアウトプリミティブです。
デバイスフレーム
デスクトップ、タブレット、モバイルの表示サイズを切り替えられる擬似ブラウザフレームです。
グリッド
列数、間隔、最小幅を指定して、カードやメディアを整列する CSS grid ラッパーです。
水平スタック
操作、ラベル、短い項目を横方向に並べ、余白・揃え・折り返しを制御します。
インスペクター
選択中の対象に紐づくプロパティを、セクションとフィールドで閲覧・編集するパネルです。
マーキーフレーム
パターンや画面を、擬似ブラウザと表示サイズ切り替えの中で確認するフレームです。
リサイズ可能
キーボード操作にも対応した、リサイズ可能な分割パネルレイアウトです。
スクロール領域
表示領域を意図的に制限し、縦横スクロールを一貫したスタイルで扱います。
空間キャンバス
パネルやノードを配置できる、ドット背景とグリッド間隔を持つキャンバス面です。
垂直スタック
フォーム、カード、説明ブロックなどを縦方向に積み、余白・揃え・高さ内の配置を制御します。
パターン
パターンはコンポーネントの組み合わせ例として、アプリ画面単位で確認します。コンポーネント監査とは分けて、パターン集から実際の画面へ移動して確認してください。