FloatingBar
FloatingBar는 하단에 고정되어 주요 액션을 포함하는 컴포넌트입니다.Examples
Actions
FloatingBar는 다양한 액션 요소를 담을 수 있습니다.
Controlled
FloatingBar는 제어 형태로 사용되어, 여러 상태를 동시에 관리할 수 있습니다.
Props Table
FloatingBar.Root
Root of the FloatingBar compound component, a bar that floats at the bottom center of the viewport to show contextual actions. Manages the open state. Doesn't render its own HTML element.
| Prop | Default | Type |
|---|---|---|
defaultOpen? | false | boolean |
onOpenChange? | - | function |
open? | - | boolean |
actionsRef? | - | React.RefObject<FloatingBar.Root.Actions | null> |
children? | - | ReactNodefunction |
defaultTriggerId? | - | stringnull |
handle? | - | PopoverHandle<unknown> |
modal? | false | booleantrap-focus |
onOpenChangeComplete? | - | function |
triggerId? | - | stringnull |
FloatingBar.Trigger
Button that opens the floating bar when clicked. Renders a <button> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
closeDelay? | 0 | number |
delay? | 300 | number |
handle? | - | PopoverHandle<unknown> |
nativeButton? | true | boolean |
openOnHover? | false | boolean |
payload? | - | unknown |
render? | - | ReactElementfunction |
FloatingBar.Close
Button that closes the floating bar when clicked. Renders a <button> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
nativeButton? | true | boolean |
render? | - | ReactElementfunction |
FloatingBar.Popup
Combines FloatingBar.PortalPrimitive, FloatingBar.PositionerPrimitive, and FloatingBar.PopupPrimitive into a single part. Use portalElement to replace the portal. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
portalElement? | - | ReactElement<FloatingBarPortalPrimitive.Props> |
style? | - | React.CSSPropertiesfunction |
finalFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
initialFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
render? | - | ReactElementfunction |
FloatingBar.PortalPrimitive
Portal container that renders the floating bar outside the normal DOM hierarchy. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
container? | - | HTMLElementShadowRootReact.RefObject<HTMLElement | ShadowRoot | null>null |
keepMounted? | false | boolean |
render? | - | ReactElementfunction |
FloatingBar.PositionerPrimitive
Fixes the floating bar to the bottom center of the viewport, above the safe area. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
align? | center | centerendstart |
alignOffset? | 0 | numberfunction |
anchor? | - | ElementVirtualElementReact.RefObject<Element | null>functionnull |
arrowPadding? | 5 | number |
collisionAvoidance? | - | CollisionAvoidance |
collisionBoundary? | clipping-ancestors | Boundary |
collisionPadding? | 5 | Padding |
disableAnchorTracking? | false | boolean |
positionMethod? | fixed | fixedabsolute |
side? | bottom | bottomleftrighttopinline-endinline-start |
sideOffset? | 0 | numberfunction |
sticky? | false | boolean |
render? | - | ReactElementfunction |
FloatingBar.PopupPrimitive
The floating bar panel that holds the actions, sliding up from the bottom as it opens. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
finalFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
initialFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
render? | - | ReactElementfunction |