FloatingBar
FloatingBar는 하단에 고정되어 주요 액션을 포함하는 컴포넌트입니다.Examples
Actions
FloatingBar는 다양한 액션 요소를 담을 수 있습니다.
Controlled
FloatingBar는 제어 형태로 사용되어, 여러 상태를 동시에 관리할 수 있습니다.
Props Table
FloatingBar.Root
FloatingBar 복합 컴포넌트의 루트. 뷰포트 하단 중앙에 떠서 맥락에 맞는 액션을 보여주는 바입니다. 열림 상태를 관리합니다. 자체 HTML 요소를 렌더링하지 않습니다.
| 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
클릭하면 FloatingBar를 여는 버튼. <button> 요소로 렌더링됩니다.
| 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
클릭하면 FloatingBar를 닫는 버튼. <button> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
nativeButton? | true | boolean |
render? | - | ReactElementfunction |
FloatingBar.Popup
FloatingBar.PortalPrimitive, FloatingBar.PositionerPrimitive, FloatingBar.PopupPrimitive를 하나의 파트로 합칩니다. 포털을 대체하려면 portalElement를 사용하세요. <div> 요소로 렌더링됩니다.
| 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
일반 DOM 계층 바깥에 FloatingBar를 렌더링하는 포털 컨테이너. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
container? | - | HTMLElementShadowRootReact.RefObject<HTMLElement | ShadowRoot | null>null |
keepMounted? | false | boolean |
render? | - | ReactElementfunction |
FloatingBar.PositionerPrimitive
FloatingBar를 안전 영역 위, 뷰포트 하단 중앙에 고정합니다. <div> 요소로 렌더링됩니다.
| 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
액션을 담고 열릴 때 아래에서 위로 슬라이드하는 FloatingBar 패널. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
finalFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
initialFocus? | - | booleanReact.RefObject<HTMLElement | null>function |
render? | - | ReactElementfunction |