Primitives コンポーネント索引
対応クレートは fandhe-frontend-headless-ui です。同クレートが提供する構造(anatomy)・アクセシビリティ(WAI-ARIA・キーボード操作)・表示状態(data-*)のみを持つ unstyled な headless UI コンポーネント(Primitives)の索引ページであり、各部品は個別ページ(/primitives/<kebab-name>/)へ分解されています。
Primitives は見た目のスタイルを持ちません。スタイル済みの表示例が必要な場合は fandhe-frontend-pre-styled-ui が提供する Themes セクションを参照してください(Themes は Primitives の上に見た目のスタイルを重ねた層です)。
Note
本ページは repo main(開発中の最新コード)を対象としています。crates.io 公開版のモジュール収録状況が本ページと異なることがあります。実際にインストールしたバージョンの収録内容は https://docs.rs/fandhe-frontend-headless-ui/<version> で確認してください(詳細は docs/api/pre-styled-ui-api.md §2a)。
Primitives ページには CSS 変数表がありません(headless-ui に CSS の概念が無いため)。また Anatomy・data-* 属性表は Demo の実レンダリングから機械導出しているため、その部品のデモに現れないパーツ・属性は表に出ず、部品によっては節ごと省略されます(未実装・不具合ではありません。詳細は docs/design/docs-site-component-pages.md §7b を参照してください)。
各部品ページの Demo 節にある枠線・余白は docs サイト側が付与したデモ枠であり、fandhe-frontend-headless-ui 自体は見た目のスタイルを一切持ちません(Themes セクションのスタイル済み recipe とは無関係のデモ表示用の枠です)。
Forms A
13 件Angle Slider
0〜359 度の環状値を 1 個選ばせる、角度入力の構造とキーボード操作。
Checkbox
真偽値と不確定の 3 値を表す、チェックボックスの構造と ARIA。
Checkbox Group
0 個以上の項目を同時に選べる、複数選択グループの構造と ARIA。
Color Picker
HSV 色相環とアルファで色を選ぶ、ポップオーバー型入力の構造。
Combobox
テキスト入力で候補を絞り込む、combobox と listbox の ARIA 配線。
Command
検索入力と絞り込み済みリストを組み合わせた、コマンドパレットの構造。
Editable
表示専用と編集可能を切り替える、インライン編集の構造と操作。
Field
フォームコントロールとラベル・補助文・エラー文を結び付ける入力ラッパー。
Fieldset
複数の Field をグループ化する、ネイティブ fieldset と legend の構造。
File Upload
ドロップゾーンとファイル選択、受理済み一覧を持つアップロード部品の構造。
Image Cropper
矩形の切り抜き範囲を選ばせる、選択枠とハンドルの構造。
Input Group
入力欄の前後に文字・アイコン・ボタンを並べる複合パターンの構造。
Listbox
常時展開の一覧から単一または複数を選ばせる、listbox の構造と ARIA。
Forms B
12 件Number Input
増減トリガー付きの数値入力の構造と、キーボード操作。
Password Input
表示切替トリガー付きパスワード入力の構造。
Pin Input
PIN や OTP を桁ごとに入力する、複数入力欄の構造とフォーカス移動。
Questionnaire
単一選択・複数選択・自由記述の質問を多段で提示する部品の構造。
Radio Group
高々 1 項目が選ばれる、ラジオグループの構造と ARIA。
Rating Group
星評価の値と操作を扱う、評価入力の構造と ARIA。
Segment Group
セグメントコントロールの構造と、単一選択の ARIA。
Select
リストボックスから選ぶ、トリガー付き選択入力の構造と ARIA。
Signature Pad
手書き署名を入力させる、描画領域とクリア操作の構造。
Slider
単一値の連続量を選ばせる、スライダーの構造と ARIA。
Switch
オンとオフを切り替える、スイッチの構造と ARIA。
Tags Input
タグを配列として入力する、追加と削除操作つきの構造。
Forms C・日付・状態表示
10 件Calendar
月表示と単一日付の選択を、grid パターンの ARIA とキーボード操作で提供。
Date Input
年・月・日を独立セグメントで編集する、spinbutton パターンの入力構造。
Date Picker
トリガー起点で開閉する日付選択オーバーレイの構造。
Download Trigger
a 要素の download 属性で宣言的にファイルを保存させるリンク。
Toggle
押下状態を持つ 2 状態ボタンの構造と ARIA。
Toggle Group
押下可能なボタンをまとめる、トグルグループの構造と ARIA。
Clipboard
値のコピー操作とコピー済み状態を表す、構造と表示状態の部品。
Timer
カウントダウンとカウントアップを表示する、決定的な状態機械の部品。
Progress
進捗を表す、確定値と不定進捗に対応した progressbar の構造。
QR Code
文字列から QR コードのモジュール行列を導出して表示する部品。
Overlay / Disclosure
10 件Accordion
単一または複数の項目を開閉する、開閉状態と ARIA を備えた項目リストの構造。
Collapsible
単一パネルの開閉を扱う、トリガーとコンテンツの構造と ARIA。
Dialog
モーダルダイアログの構造と、フォーカス管理に必要な ARIA。
Drawer
画面端からスライドインするパネルの構造と、ダイアログ相当の ARIA。
Floating Panel
ドラッグ移動とリサイズができる、浮遊パネルの構造と ARIA。
Hover Card
hover や focus で開く、リンク先プレビュー向けのオーバーレイ構造。
Popover
トリガー起点のオーバーレイの構造と、開閉・配置の ARIA。
Toast
一時的な通知の queue を表示する、live region の構造。
Toggle Tip
クリックで開閉する、小型ヒントの構造と ARIA。
Tooltip
hover や focus で現れる吹き出しヒントの構造と ARIA。
Navigation
13 件Action Bar
複数選択に対する一括操作を提示する、画面下部固定の操作バーの構造。
Breadcrumb
現在地までの階層をリンク列で示す、パンくずナビゲーションの構造と ARIA。
Button Group
関連するボタンを 1 つのグループとして束ねる、構造と ARIA。
Link
汎用のインラインリンクを表す、a 要素 1 パーツの部品。
Link Overlay
カード全体をクリック可能にする、リンクオーバーレイの構造。
Menu
トリガーで開くアクション項目リスト、ドロップダウンメニューの構造と ARIA。
Menubar
複数のメニューを横に並べる、アプリケーションメニューバーの構造。
Nav List
見出しとリンクのリストで構成する、文書ナビ向けの静的なリンク集。
Navigation Menu
トリガーで開く、高々 1 項目のナビゲーションパネルの構造。
Pagination
総件数からページ番号列を導出する、ページ送りの構造と ARIA。
Sidebar
アプリシェル向けサイドバーの構造と、開閉の表示状態。
Tabs
WAI-ARIA のタブパターンに沿った、タブ切り替えの構造とキーボード操作。
Toolbar
ボタンやリンクを束ねる、操作バーの構造とキーボード移動。
Data Display / Utilities
17 件Attachment
添付ファイル 1 件の表示を表す、構造と表示状態(data 属性)のみの部品。
Avatar
画像の読み込み状態に応じてフォールバックへ切り替える、アバターの構造。
Bubble
チャットの吹き出し 1 個を表す、構造と表示状態のみの部品。
Carousel
スライド送りの Root・操作ボタン・インジケーターの構造と ARIA。
Data Table
ソート可能な列ヘッダーや行選択など、表操作 UI の構造と ARIA。
Item
アイコンやタイトル、操作を並べる、汎用リスト行の構造。
JSON Tree View
JSON 風データをツリー表示する、キーと値の構造と ARIA。
Marker
会話スレッド内の注記行や区切りを表す、構造と表示状態の部品。
Message
AI チャットの会話 1 発言を表す、構造と表示状態の部品。
Message Scroller
会話ログを収めるスクロールコンテナの構造と ARIA。
Scroll Area
カスタムスクロール領域の、ビューポートとスクロールバーの構造。
Skip Nav
キーボード操作時だけ現れる、本文へのスキップリンクの構造。
Splitter
リサイズ可能なパネル分割レイアウトの構造と ARIA。
Steps
段階ナビゲーションを表す、ウィザード形式の構造。
Tour
オンボーディング向けのステップガイドの構造と ARIA。
Tree View
階層構造の展開・折りたたみ・選択を扱う、tree パターンの構造。
Visually Hidden
視覚的には隠し、支援技術には読ませ続けるテキストコンテナ。
関連 API
- fandhe-frontend-headless-ui API: headless API(anatomy・data-*・WAI-ARIA 契約)