ページ補助PageAside
Experimental

ページ内リンク、ページステータス、関連リンクなどの補助情報を、広い画面では右レール、狭い画面では本文内の折りたたみ領域へ配置します。

プレビュー

状態とバリエーション

ページステータス

公開状態、最終更新、レビュー状況など、ページを読みながら確認したい情報をまとめます。

本文の流れから外したい関連資料やページ内リンクを補助領域にまとめます。

プロパティ

表は横にスクロールできます
プロパティ初期値説明
titleReactNode-モバイルのアコーディオン見出しと補助領域のラベル。
renderAside() => ReactNode-右レールと折りたたみ領域に表示する補助情報を返します。
childrenReactNode-主コンテンツ領域に表示する本文。
widthstring"w-72"デスクトップ時の RightRail 幅を指定する Tailwind クラス。
defaultOpenbooleantrue狭い画面で補助情報を初期表示するか。
mobileDescriptionReactNode-狭い画面の折りたたみ領域に表示する補足説明。
contentClassNamestring-本文領域に追加するクラス。
railClassNamestring-デスクトップの RightRail に追加するクラス。

使い方

Loading...

使用コンポーネント