コンポーネント

下のコンポーネントはすべて @pelagornis/page/components から読み込めます。各ページにプレビュー、例のソース、MDX と Markdoc での使い方、バリアント・構造・状態・キーボード操作があります。

レイアウト 9

• Boxトークンのパディング、塗り、角丸、枠線を持つ基本のレイアウト面です。
• Containerトークンのパディングを持つ中央寄せのページ列です。
• Grid固定列、または自動フィットの最小幅を使う CSS グリッドです。
• Stack間隔に spacing トークンを使う一方向の flex レイアウトです。
• Spacer行や列の中で兄弟要素を押し広げる伸縮する余白です。
• Dividerグループ間の横線です。中央にラベルを入れられます。
• Textセマンティックなテキストトークンを要素に割り当てるタイポグラフィの基本要素です。
• Scroll Areaトークンでスタイルしたスクロールバーを持つスクロールコンテナです。
• Resizableドラッグできるハンドルで区切られた分割パネルです。

アクション 6

• Button保存、続行、パネルを開くなどの操作を始めます。
• Link外部リンクを示すインラインのハイパーリンクです。
• Dropdownトリガーから開くアクションの一覧です。
• Menuラベル、ショートカット、説明、サブメニューを持つメニューです。
• Context Menuトリガーを右クリックすると開くメニューです。
• Command検索できるコマンド一覧です。ヘッダーの検索は CommandDialog の中でこれを使います。

フォーム 14

• Fieldラベル、コントロール、ヒント、エラーメッセージをまとめます。
• Labelフォームコントロールのテキストラベルです。必須マークを付けられます。
• Inputエラーと成功の状態を持つ 1 行の入力です。
• Textarea複数行の入力です。
• Search Field検索アイコンとクリアボタンを持つ検索語の入力です。
• Input OTPスロットに分かれたワンタイムコードの入力です。
• Checkboxラベルと説明を付けられる二択の選択です。
• Radio同じ name を共有するグループから 1 つを選びます。
• Switchすぐに反映されるオン・オフの設定です。Toggle という名前でもエクスポートされます。
• Selectポップオーバーの一覧から値を 1 つ選びます。
• Segmented Control互いに排他的な選択肢を 1 列に並べます。
• Slider範囲の中から数値を選びます。
• Spin Button増減ボタンを持つ数値入力です。
• Calendar日付や期間を選ぶ月単位のカレンダーです。

ナビゲーション 9

• Breadcrumb現在のページまでのリンクの経路です。
• Navigation Menuドロップダウンパネルを持てる最上位のサイトナビゲーションです。
• Pagination長い一覧のページ間を移動します。
• Tabs1 つの領域を共有するパネルを切り替えます。
• Sidebarグループを持つ縦のナビゲーションです。ドキュメントのシェルはこれで作られています。
• Stepperタイトルと説明を持つ番号付きのステップです。
• Progress Stepper複数ステップの流れの進み具合を簡潔に示します。
• Treeファイルや入れ子のナビゲーション向けの展開できる階層です。
• Footerブランド、リンクのグループ、メタ情報を持つサイトのフッターです。ドキュメントのフッターはこれを使います。

フィードバック 7

• Alertアイコン、タイトル、アクションを持つインラインの状態メッセージです。
• Toastコードから toast() で出す短い通知です。
• Progress作業がどこまで進んだかを示すバーです。
• Spinner進み具合の分からない読み込み表示です。
• Skeletonコンテンツの読み込み中に表示するプレースホルダーです。
• Badge小さな状態ラベルや件数です。
• Tooltipホバーやフォーカスで表示される短いヒントです。

オーバーレイ 3

• Dialog1 つの作業や確認に集中させるモーダルウィンドウです。
• Drawer画面の端からスライドして出るパネルです。
• Popoverトリガーに固定されて浮かぶパネルです。

データ表示 11

• Avatar人を表す写真、イニシャル、アイコンです。
• Avatar Group重ねたり並べたりしたアバターの集まりです。あふれた数を表示します。
• Cardヘッダー、内容、フッターで 1 つの話題をまとめるコンテナです。
• Chip小さなラベルやフィルターです。削除可能にできます。Tag という名前でもエクスポートされます。
• Bubble左右どちらかに寄せるチャットメッセージの吹き出しです。
• Table構造化されたデータのための行と列です。
• Chartプロットの基本要素で組み立てる棒グラフと折れ線グラフです。
• Carousel前後のボタンとインジケーターを持つスライドです。
• Accordion1 つまたは複数を展開できる積み重なったセクションです。
• Collapsibleトリガーで表示と非表示を切り替える 1 つのセクションです。
• IconWebIcon でアイコンフォントから描く RefineUI のシステムアイコンです。