FloatArea
スクロール時に固定表示する領域のためのコンポーネントです。特定のアクションボタンやテキストを、スクロール位置にかかわらず画面内の特定の位置に表示できます。
主にモーダルなUIを作るために使います。
レイアウト
基本的な考え方
FloatAreaには、ページ全体、もしくはページの一部を対象としたボタンやテキストを置きます。ページ内のどの部分が対象の領域なのかを視覚的に示すことを目指して、FloatAreaの位置や幅、レイヤー順序を調整してください。
Do
FloatAreaが右側のカラムだけに重なっているため、右側のカラムだけがFloatAreaの対象の領域であることがわかるDon't
FloatAreaが2つのカラムに重なっているため、左側のカラムもFloatAreaの対象の領域に見えるレイアウト例
スクロール固定中
対象の領域の左右に0.5(8px)
ずつはみ出し、画面の下辺から1.5(24px)
の余白をとった位置に置きます。
スクロール固定解除後
対象の領域の下辺との間に 1.5(24px)
の余白を取ります。
デザインパターン
モーダルなUIおよび共通設定のアクションビューを参照してください。
Props
top
00.250.50.7511.251.522.533.548-0.25-0.5-0.75-1-1.25-1.5-2-2.5-3-3.5-4-8"XXS""XS""S""M""L""XL""XXL""X3S""X3L"
コンポーネントの上端から、包含ブロックの上端までの間隔(基準フォントサイズの相対値または抽象値)
bottom
00.250.50.7511.251.522.533.548-0.25-0.5-0.75-1-1.25-1.5-2-2.5-3-3.5-4-8"XXS""XS""S""M""L""XL""XXL""X3S""X3L"
コンポーネントの下端から、包含ブロックの下端までの間隔(基準フォントサイズの相対値または抽象値)
zIndex
number
コンポーネントの z-index
値
primaryButton必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal
表示する Button
または AnchorButton
コンポーネント
secondaryButton
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal
表示する Button
または AnchorButton
コンポーネント
tertiaryButton
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal
tertiary 領域に表示するボタン
responseMessage
{ status: "error" | "success"; text: ReactNode; }{ status: "processing"; }
操作に対するフィードバックメッセージ
fixed
falsetrue
上下の位置を固定するかどうか
width
string
コンポーネントの幅