コンポーネント一覧 (Overview)

Jellee が提供する Web Components のショーケースです。右サイドバーの Tokens Editor で設定したテーマカラーがリアルタイムに反映されます。

🎨 コンポーネント

jui-accordion Component
jui-accordion コンポーネントのプレビュー。
jui-alert Feedback
操作が成功しました。
警告、エラー、成功ステータスを表示する通知領域。
jui-avatar Display
ユーザー画像またはイニシャルを表示するアイコン。
jui-badge Display
新機能 完了
ステータスやカテゴリタグを表現する小さなラベル。
jui-button Form
Brand Outline
アクションの実行、フォーム送信などの基本的なボタン。
jui-checkbox Form
複数選択やチェックボックス付きの設定に使用。
jui-input Form
ラベル、エラーメッセージ表示に対応したテキスト入力。
jui-radio Component
jui-radio コンポーネントのプレビュー。
jui-select Component
jui-select コンポーネントのプレビュー。
jui-transfer Component
2つのリスト間でアイテムを移動できる転送コンポーネント。権限割当てやカテゴリ分類に最適。
jui-toggle Form
設定のON/OFFを瞬時に切り替えるスイッチ。
jui-divider Display
上のコンテンツ 下のコンテンツ
コンテンツ間に区切り線を挿入するディバイダー。
jui-skeleton Display
読み込み中のプレースホルダーを表示するスケルトン。
jui-progress Display
処理の進行状況を視覚的に表示するプログレスバー。
jui-tag Display
Default Brand Success Danger
ラベルやカテゴリを付与するコンパクトなタグ。
jui-breadcrumb Navigation
ページ階層を表示するパンくずナビゲーション。
jui-card Display
カードのメインコンテンツです。テキストや画像などを自由に配置できます。
コンテンツをグループ化して表示するコンテナ。
jui-sidebar Navigation
サイドナビゲーションメニューを提供するサイドバー。
jui-table Display
データを格子状に整理して表示するテーブル。
jui-textarea Form
複数行のテキスト入力を受け付けるテキストエリア。
jui-form-field Form
ラベル・ヘルプ・エラーをまとめるフォームフィールドラッパー。
jui-stat Display
KPI や統計値をトレンド付きで表示する統計カード。
jui-tree Display
階層構造データのツリー表示。ファイルシステムや組織図の表現に対応。
jui-select-option Form
東京都 大阪府 愛知県
jui-select の選択肢を構成するオプションコンポーネント。
jui-modal Feedback
モーダルを開く
これは Overview 用のモーダルデモです。
閉じる
オーバーレイで表示される確認・入力用ダイアログ。
jui-drawer Overlay
ドロワーを開く
サイドからスライドインするパネルです。
閉じる
サイドからスライドインするパネル。詳細表示やフォームのオーバーレイ表示に最適。
jui-slider Form
ドラッグ操作で値を選択できるレンジスライダー。音量や価格範囲の選択に。
jui-rating Form
星型の評価コンポーネント。レビューやフィードバックの表示・入力に対応。
jui-tabs Navigation
プロフィール編集セクション。
メールなどの通知設定セクション。
コンテンツを切り替えて整理するスライドインジケーター付きタブ。
jui-pagination Navigation
複数ページにまたがる一覧のナビゲーションボタン。
jui-popover Overlay
開く
ポップオーバーのコンテンツです。
クリックで表示されるポップアップコンテナ。
jui-tooltip Display
ホバーしてください
ホバー時に補足テキストを表示するツールチップ。
jui-toast Feedback
トーストを表示
一時的に表示される通知フィードバック。
jui-dropdown Navigation
アクション
クリックで展開されるドロップダウンメニュー。
jui-calendar Form
日付を選択するためのカレンダーUI。
jui-date-picker Form
ポップアップカレンダーから日付を入力する日付ピッカー。
jui-number-input Form
増減ボタンを備えた数値入力フィールド。
jui-search-input Form
クリアボタンや検索アイコンを備えた入力フィールド。
jui-stepper Navigation
複数ステップの進捗を案内するナビゲーション。
jui-file-upload Form
ドラッグ＆ドロップ対応のファイルアップロードコンポーネント。
jui-color-picker Form
パレットやスライダーから直感的に色を選択できるピッカー。