FloatArea

スクロール時に固定表示する領域のためのコンポーネントです。特定のアクションボタンやテキストを、スクロール位置にかかわらず画面内の特定の位置に表示できます。

主にモーダルなUIを作るために使います。

レイアウト

基本的な考え方

FloatAreaには、ページ全体、もしくはページの一部を対象としたボタンやテキストを置きます。ページ内のどの部分が対象の領域なのかを視覚的に示すことを目指して、FloatAreaの位置や幅、レイヤー順序を調整してください。

Do
Do
FloatAreaが右側のカラムだけに重なっているため、右側のカラムだけがFloatAreaの対象の領域であることがわかる
Don't
Don't
FloatAreaが2つのカラムに重なっているため、左側のカラムもFloatAreaの対象の領域に見える

レイアウト例

スクロール固定中

対象の領域の左右に0.5(8px)ずつはみ出し、画面の下辺から1.5(24px)の余白をとった位置に置きます。

FloatAreaの幅と、画面の下辺からFloatAreaまでの距離

スクロール固定解除後

対象の領域の下辺との間に 1.5(24px) の余白を取ります。

対象の領域の最下部とFloatAreaの間の余白

デザインパターン

モーダルなUIおよび共通設定のアクションビューを参照してください。

Props

bottom
0 0.25 0.5 0.75 1 1.25 1.5 2 2.5 3 3.5 4 8 -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必須
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal

表示する Button または AnchorButton コンポーネント

secondaryButton
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal

表示する Button または AnchorButton コンポーネント

tertiaryButton
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal

tertiary 領域に表示するボタン

responseMessage
{ status: "error" | "success"; text: ReactNode; } { status: "processing"; }

操作に対するフィードバックメッセージ