Skip to content
fandhe-frontendcore v0.4.3
GitHub

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 個選ばせる、角度入力の構造とキーボード操作。

    Primitives
  • Checkbox

    真偽値と不確定の 3 値を表す、チェックボックスの構造と ARIA。

    Primitives
  • Checkbox Group

    0 個以上の項目を同時に選べる、複数選択グループの構造と ARIA。

    Primitives
  • Color Picker

    HSV 色相環とアルファで色を選ぶ、ポップオーバー型入力の構造。

    Primitives
  • Combobox

    テキスト入力で候補を絞り込む、combobox と listbox の ARIA 配線。

    Primitives
  • Command

    検索入力と絞り込み済みリストを組み合わせた、コマンドパレットの構造。

    Primitives
  • Editable

    表示専用と編集可能を切り替える、インライン編集の構造と操作。

    Primitives
  • Field

    フォームコントロールとラベル・補助文・エラー文を結び付ける入力ラッパー。

    Primitives
  • Fieldset

    複数の Field をグループ化する、ネイティブ fieldset と legend の構造。

    Primitives
  • File Upload

    ドロップゾーンとファイル選択、受理済み一覧を持つアップロード部品の構造。

    Primitives
  • Image Cropper

    矩形の切り抜き範囲を選ばせる、選択枠とハンドルの構造。

    Primitives
  • Input Group

    入力欄の前後に文字・アイコン・ボタンを並べる複合パターンの構造。

    Primitives
  • Listbox

    常時展開の一覧から単一または複数を選ばせる、listbox の構造と ARIA。

    Primitives

Forms B

12 件
  • Number Input

    増減トリガー付きの数値入力の構造と、キーボード操作。

    Primitives
  • Password Input

    表示切替トリガー付きパスワード入力の構造。

    Primitives
  • Pin Input

    PIN や OTP を桁ごとに入力する、複数入力欄の構造とフォーカス移動。

    Primitives
  • Questionnaire

    単一選択・複数選択・自由記述の質問を多段で提示する部品の構造。

    Primitives
  • Radio Group

    高々 1 項目が選ばれる、ラジオグループの構造と ARIA。

    Primitives
  • Rating Group

    星評価の値と操作を扱う、評価入力の構造と ARIA。

    Primitives
  • Segment Group

    セグメントコントロールの構造と、単一選択の ARIA。

    Primitives
  • Select

    リストボックスから選ぶ、トリガー付き選択入力の構造と ARIA。

    Primitives
  • Signature Pad

    手書き署名を入力させる、描画領域とクリア操作の構造。

    Primitives
  • Slider

    単一値の連続量を選ばせる、スライダーの構造と ARIA。

    Primitives
  • Switch

    オンとオフを切り替える、スイッチの構造と ARIA。

    Primitives
  • Tags Input

    タグを配列として入力する、追加と削除操作つきの構造。

    Primitives

Forms C・日付・状態表示

10 件
  • Calendar

    月表示と単一日付の選択を、grid パターンの ARIA とキーボード操作で提供。

    Primitives
  • Date Input

    年・月・日を独立セグメントで編集する、spinbutton パターンの入力構造。

    Primitives
  • Date Picker

    トリガー起点で開閉する日付選択オーバーレイの構造。

    Primitives
  • Download Trigger

    a 要素の download 属性で宣言的にファイルを保存させるリンク。

    Primitives
  • Toggle

    押下状態を持つ 2 状態ボタンの構造と ARIA。

    Primitives
  • Toggle Group

    押下可能なボタンをまとめる、トグルグループの構造と ARIA。

    Primitives
  • Clipboard

    値のコピー操作とコピー済み状態を表す、構造と表示状態の部品。

    Primitives
  • Timer

    カウントダウンとカウントアップを表示する、決定的な状態機械の部品。

    Primitives
  • Progress

    進捗を表す、確定値と不定進捗に対応した progressbar の構造。

    Primitives
  • QR Code

    文字列から QR コードのモジュール行列を導出して表示する部品。

    Primitives

Overlay / Disclosure

10 件
  • Accordion

    単一または複数の項目を開閉する、開閉状態と ARIA を備えた項目リストの構造。

    Primitives
  • Collapsible

    単一パネルの開閉を扱う、トリガーとコンテンツの構造と ARIA。

    Primitives
  • Dialog

    モーダルダイアログの構造と、フォーカス管理に必要な ARIA。

    Primitives
  • Drawer

    画面端からスライドインするパネルの構造と、ダイアログ相当の ARIA。

    Primitives
  • Floating Panel

    ドラッグ移動とリサイズができる、浮遊パネルの構造と ARIA。

    Primitives
  • Hover Card

    hover や focus で開く、リンク先プレビュー向けのオーバーレイ構造。

    Primitives
  • Popover

    トリガー起点のオーバーレイの構造と、開閉・配置の ARIA。

    Primitives
  • Toast

    一時的な通知の queue を表示する、live region の構造。

    Primitives
  • Toggle Tip

    クリックで開閉する、小型ヒントの構造と ARIA。

    Primitives
  • Tooltip

    hover や focus で現れる吹き出しヒントの構造と ARIA。

    Primitives
13 件
  • Action Bar

    複数選択に対する一括操作を提示する、画面下部固定の操作バーの構造。

    Primitives
  • Breadcrumb

    現在地までの階層をリンク列で示す、パンくずナビゲーションの構造と ARIA。

    Primitives
  • Button Group

    関連するボタンを 1 つのグループとして束ねる、構造と ARIA。

    Primitives
  • Link

    汎用のインラインリンクを表す、a 要素 1 パーツの部品。

    Primitives
  • Link Overlay

    カード全体をクリック可能にする、リンクオーバーレイの構造。

    Primitives
  • Menu

    トリガーで開くアクション項目リスト、ドロップダウンメニューの構造と ARIA。

    Primitives
  • Menubar

    複数のメニューを横に並べる、アプリケーションメニューバーの構造。

    Primitives
  • Nav List

    見出しとリンクのリストで構成する、文書ナビ向けの静的なリンク集。

    Primitives
  • Navigation Menu

    トリガーで開く、高々 1 項目のナビゲーションパネルの構造。

    Primitives
  • Pagination

    総件数からページ番号列を導出する、ページ送りの構造と ARIA。

    Primitives
  • Sidebar

    アプリシェル向けサイドバーの構造と、開閉の表示状態。

    Primitives
  • Tabs

    WAI-ARIA のタブパターンに沿った、タブ切り替えの構造とキーボード操作。

    Primitives
  • Toolbar

    ボタンやリンクを束ねる、操作バーの構造とキーボード移動。

    Primitives

Data Display / Utilities

17 件
  • Attachment

    添付ファイル 1 件の表示を表す、構造と表示状態(data 属性)のみの部品。

    Primitives
  • Avatar

    画像の読み込み状態に応じてフォールバックへ切り替える、アバターの構造。

    Primitives
  • Bubble

    チャットの吹き出し 1 個を表す、構造と表示状態のみの部品。

    Primitives
  • Carousel

    スライド送りの Root・操作ボタン・インジケーターの構造と ARIA。

    Primitives
  • Data Table

    ソート可能な列ヘッダーや行選択など、表操作 UI の構造と ARIA。

    Primitives
  • Item

    アイコンやタイトル、操作を並べる、汎用リスト行の構造。

    Primitives
  • JSON Tree View

    JSON 風データをツリー表示する、キーと値の構造と ARIA。

    Primitives
  • Marker

    会話スレッド内の注記行や区切りを表す、構造と表示状態の部品。

    Primitives
  • Message

    AI チャットの会話 1 発言を表す、構造と表示状態の部品。

    Primitives
  • Message Scroller

    会話ログを収めるスクロールコンテナの構造と ARIA。

    Primitives
  • Scroll Area

    カスタムスクロール領域の、ビューポートとスクロールバーの構造。

    Primitives
  • Skip Nav

    キーボード操作時だけ現れる、本文へのスキップリンクの構造。

    Primitives
  • Splitter

    リサイズ可能なパネル分割レイアウトの構造と ARIA。

    Primitives
  • Steps

    段階ナビゲーションを表す、ウィザード形式の構造。

    Primitives
  • Tour

    オンボーディング向けのステップガイドの構造と ARIA。

    Primitives
  • Tree View

    階層構造の展開・折りたたみ・選択を扱う、tree パターンの構造。

    Primitives
  • Visually Hidden

    視覚的には隠し、支援技術には読ませ続けるテキストコンテナ。

    Primitives

関連 API