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