BottomFixedArea(非推奨)
FloatAreaと役割が重複しているためBottomFixedAreaは非推奨です。より柔軟に使えるFloatAreaを使ってください。
画面下部に固定で表示する操作パネルです。主にモーダルなUIを作るために使います。
モバイル
そのままレスポンシブに折り返して使うと表示領域を圧迫するため、モバイル向けに再設計が必要です。1画面で複雑な操作をさせないように調整してください。
Props
description
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal
この領域の説明
primaryButton
FunctionComponentElement<{ size?: "S" | "M"; disabledReason?: { icon?: FunctionComponent<{}>; message: ReactNode; }; prefix?: ReactNode; suffix?: ReactNode; wide?: boolean; variant?: Variant; loading?: boolean; } & { ...; } & Omit<...> & RefAttributes<...>>FunctionComponentElement<Omit<Omit<Pick<VariantProps<any>, "contentBgColor"> & { contentPadding?: any; className?: string; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ...; } & { ...; } & { ...; }, "heading" | "closeButton" | "handleClickClose" | "actionButton" | "handleClickAction"> & { total: number; current: number; padding?: number; withoutNumbers?: boolean; } & ControlledProps & PortalProps & { ...; }, "disabledReason" | "variant"> & { elementAs?: ElementType; variant?: "text" | "primary" | "secondary" | "danger" | "skeleton"; inactiveReason?: { ...; }; } & { form?: string; slot?: string; style?: CSSProperties; title?: string; ref?: Ref<HTMLButtonElement>; key?: Key; type?: "button" | "submit" | "reset"; ... 267 more ...; formTarget?: string; }<...> & ElementRefProps<...>>
表示する Button または AnchorButton (variant="primary" である必要がある)
secondaryButton
FunctionComponentElement<{ size?: "S" | "M"; disabledReason?: { icon?: FunctionComponent<{}>; message: ReactNode; }; prefix?: ReactNode; suffix?: ReactNode; wide?: boolean; variant?: Variant; loading?: boolean; } & { ...; } & Omit<...> & RefAttributes<...>>FunctionComponentElement<Omit<Omit<Pick<VariantProps<any>, "contentBgColor"> & { contentPadding?: any; className?: string; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & { ...; } & { ...; } & { ...; }, "heading" | "closeButton" | "handleClickClose" | "actionButton" | "handleClickAction"> & { total: number; current: number; padding?: number; withoutNumbers?: boolean; } & ControlledProps & PortalProps & { ...; }, "disabledReason" | "variant"> & { elementAs?: ElementType; variant?: "text" | "primary" | "secondary" | "danger" | "skeleton"; inactiveReason?: { ...; }; } & { form?: string; slot?: string; style?: CSSProperties; title?: string; ref?: Ref<HTMLButtonElement>; key?: Key; type?: "button" | "submit" | "reset"; ... 267 more ...; formTarget?: string; }<...> & ElementRefProps<...>>
表示する Button または AnchorButton (variant="secondary" である必要がある)
tertiaryLinks
(Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & { ...; } & { ...; })[]
表示する tertialy link のプロパティの配列
zIndex
number
コンポーネントに適用する z-index 値
ref
(instance: HTMLDivElement) => voidRefObject<HTMLDivElement>