UI Component Lab週末の京都
午前は寺社めぐり、午後は茶屋でひと休み。
UI Component Lab
UIコンポーネントの名前・見た目・挙動を、その場で触って確かめられる図鑑です。
45件
- ご注文から2営業日以内に発送します。30日以内であれば返品できます。カードと銀行振込が使えます。
Accordion アコーディオン
縦に並んだ見出しごとに、内容の表示・非表示を切り替える部品。
- Collapse
- Expansion panel
Alert アラート（ノティフィケーションバナー）
ページの中に表示する重要なメッセージ。作業を中断させずに、すぐ読み上げられる。
- Inline notification
- ノティフィケーションバナー
- 田中 愛子
- ベン・カーター
- チェン・ウェイ
- ほか2人
Avatar アバター
人やアカウントを表す、小さな写真・頭文字・アイコン。
詳細を見る: アバターBadge バッジ
通知ボタンの未読件数のように、別の要素に重ねて付ける小さな印。
詳細を見る: バッジBreadcrumb パンくずリスト（パンくずナビゲーション）
今のページの上の階層にあるページへのリンクを、階層順に並べたもの。
- パンくずナビゲーション
ボタンを押してください
Button ボタン
フォームの送信やダイアログを開くなど、操作を実行する部品。
詳細を見る: ボタンCard カード
商品や記事など、1つの話題についての内容と操作をまとめた箱。
詳細を見る: カードCarousel カルーセル
複数のスライドを1枚ずつ表示し、ボタンで前後のスライドへ切り替える部品。
- Slide show
- Image rotator
Checkbox チェックボックス
チェックを付けたり外したりする小さな四角。グループ内でいくつでも選べる。
詳細を見る: チェックボックス- アボカド
- イチゴ
- オレンジ
- キウイ
- バナナ
- ブドウ
- メロン
- モモ
- リンゴ
- レモン
Combobox コンボボックス
候補リスト付きのテキスト入力欄。候補から選ぶことも、自由に入力することもできる。
- Autocomplete
Date picker 日付ピッカー（デートピッカー）
日付を入力する欄。直接入力するか、カレンダーから選ぶ。
- 日付ピッカー／カレンダー
- 氏名
- 山田 太郎
- 生年月日
- 1990年4月1日
- メールアドレス
- taro@example.com
- 住所
- 東京都千代田区霞が関1-2-3
Description list 説明リスト
確認画面の回答のように、項目名と値や説明を組にして並べたもの。
- Descriptions
- Summary list
- 説明リスト
注文番号はどこで確認できますか？
確認メールの注文日の横に記載しています。
Disclosure ディスクロージャー
1つのボタンで、1か所の内容の表示・非表示を切り替える部品。
- Details
- Collapse
-
Divider ディバイダー（区切り線）
セクションや項目のまとまりの間を区切る細い線。
- Divider
- Separator
- ディバイダー
Drawer ドロワー
画面の端からページの上にすべり出てくるパネル。
- Offcanvas
PDF・PNG・JPEG、1ファイル10MBまで。または、このエリア内にドラッグ＆ドロップしてください。
未選択
File upload ファイルアップロード（ドロップエリア）
端末にあるファイルを、ボタンで選ぶかドラッグして入れることで指定する部品。
- File uploader
- Upload
- DropZone
- ファイルアップロード／ドロップエリア
ページを移動せずに操作を実行するときはボタンを使います。
Link リンク
別のページや、同じページ内の別の場所へ移動するための文字や画像。
詳細を見る: リンク- 会議メモ
- 旅行の計画
- レシピ集
List リスト（箇条書きリスト）
項目を1行に1つずつ縦に並べたもの。アイコンや補足の2行目が付くことが多い。
- 箇条書きリスト
Listbox リストボックス
開いたままの選択肢のリストから、1つ（または複数）を選ぶ部品。
- ListBox
- <select size>
Menu メニュー
ボタンから開く、操作の一覧。
- Menu button
- Dropdown
- メニューリストボックス
40% 40GB / 100GB
Meter メーター
ストレージの使用量や電池の残量など、決まった範囲の中の測定値を示す棒。
- Meter
- Gauge
Modal (Dialog) モーダルダイアログ
ページの上に重ねて表示し、閉じるまで背後のページを操作できなくするウィンドウ。
- Dialog
- Modal dialog
- モーダルダイアログ
1〜10
Number input 数値入力（スピンボタン）
数値を入力する欄で、1刻みずつ増減もできるもの。
- Spinbutton
- Number input
- InputNumber
- Stepper (the − / + buttons)
全40件中 1〜10件を表示
Pagination ページネーション
検索結果など長い一覧を複数のページに分け、ページ間を移動するための部品。
- ページナビゲーション
送料の決まり方
5,000円以上のご注文は送料無料です。それ以外は地域によって変わります。
Popover ポップオーバー
ボタンの近くに開き、外側をクリックすると閉じる小さなパネル。
- Toggletip
Progress bar プログレスバー
アップロードなどの作業がどこまで進んだかを、伸びていく棒で示す部品。
- プログレスインジケーター
Radio ラジオボタン
丸いボタンのグループから、選択肢を1つだけ選ぶ部品。
- Radio button
Search field 検索ボックス
サイト内の情報を探すための、検索ボタン付きの入力欄。
- Search
- SearchField
- 検索ボックス
Select セレクトボックス
開いたリストから選択肢を1つ選ぶ部品。
- Pop-up button
- Dropdown
- セレクトボックス
Skeleton スケルトン
読み込み中の内容のレイアウトを、灰色の図形で先に見せる仮の表示。
詳細を見る: スケルトンSlider スライダー
つまみを溝に沿って動かし、範囲内の数値を選ぶ部品。
- Range
Spinner スピナー
読み込み中であることを示す、回転する小さな図形。終わるまでの時間は示さない。
- Loading
- プログレスインジケーター
Split button スプリットボタン
よく使う操作のボタンと、関連する操作のメニューを開く小さな矢印ボタンをつなげた部品。
- Combo button
- 申請者情報
- 住所
- 書類
- 確認
ステップ 1/4: 申請者情報
Stepper ステップナビゲーション
申請など複数画面にまたがる手続きの段階と、今どの段階にいるかを示す部品。
- Progress indicator
- Steps
- ステップナビゲーション
Switch スイッチ
1つの設定をオン・オフする部品。切り替えるとすぐに反映される。
- Toggle
- Toggle switch
プランの料金 プラン 容量 無料 0円 5 GB チーム 1,800円 1 TB 個人 600円 100 GB Table テーブル
データを行と列に並べ、列ごとに見出しを付けた表。
- Data table
- テーブル／データテーブル
- 名前と写真の設定です。メールとプッシュ通知の設定です。パスワードとログイン方法の設定です。
Tabs タブ
関連する内容を複数のパネルに分け、1つずつ切り替えて表示する部品。
- Tab view
- TabList
- 赤
- Mサイズ
- 5,000円以下
Tag タグ
内容の分類や、適用中の絞り込みを示す短いキーワードのラベル。
- Chip
- チップタグ
- チップラベル
プロフィールに表示されます。20文字まで。
Text field テキストフィールド（インプットテキスト）
名前など、短い文字列を自由に入力する欄。
- Text input
- Input
- インプットテキスト
あと200文字
Textarea テキストエリア
コメントや説明など、複数行の文章を自由に入力する縦長の欄。
- Text area
- テキストエリア
Toast トースト
操作の結果を画面の端に短く表示し、しばらくすると自動で消えるメッセージ。
- Snackbar
音声オン
Toggle button トグルボタン
押された状態と押されていない状態を保ち、機能がオンかどうかを示すボタン。
詳細を見る: トグルボタンいろはにほへと ちりぬるを わかよたれそ つねならむ
Toolbar ツールバー
文字の書式ボタンのように、関係する操作部品を1列にまとめたもの。
- Toolbar
- <toolbar> (proposal)
- このページのアドレスをクリップボードにコピーします
Tooltip ツールチップ
要素にマウスを乗せたりフォーカスしたりしている間だけ、近くに出る短い説明。
詳細を見る: ツールチップ - 書類
- 写真
- はじめに.txt
Tree view ツリービュー
ファイル管理のフォルダのように入れ子になったリストで、枝ごとに開閉できる部品。
- Tree view
- Tree