Fab
fabPlaces a prominent floating mobile action button above page content.
Usage
Basic usage
By default, fixed is attached to the lower right side of the viewport; without actions, the main button directly triggers onClick.
<Fab icon={<Plus />} onClick={() => alert("New")} />Extended Capsules
According to label, the rear main button changes from a circle to an "icon + text" adaptive width capsule.
<Fab label="Return to sample library" icon={<ExternalLink />} />Speed-dial Sub-Action
If actions is provided, click the main button to expand/collapse a group of sub-actions, and the main button icon will rotate 45°.
<Fab
actions={[
{ key: "search", icon: <Search />, label: "Search" },
{ key: "copy", icon: <Copy />, label: "Copy" },
{ key: "link", icon: <ExternalLink />, label: "Share" },
]}
/>Can be dragged
draggable is closed by default (press and hold if not open). After turning it on, press and hold the main button to drag to any position; the displacement exceeds 3px as dragging, and raising your hand this time will not trigger onClick.
<Fab draggable label="Hold and drag me" icon={<GripVertical />} onClick={() => alert("New")} />When to Use
Use it when one primary page action, such as create, back to top, or share, needs a persistent floating entry point. A speed dial can reveal several related actions. Use TabBar for top-level app navigation, or ActionSheet for a dismissible list of actions that opens after a tap.
Import
import { Fab } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
label | string | — | Main button text (extended capsule state); provides the rear main button to change to "icon + text" adaptive capsule, and defaults to aria-label |
actions | FabAction[] | — | speed-dial sub-action; if provided, click the main button to expand/collapse, otherwise directly trigger onClick |
position | "bottom-right" | "bottom-left" | "bottom-center" | "bottom-right" | Welt position |
size | "sm" | "md" | "md" | md=56px main button, sm=48px (compact scene) |
draggable | boolean | false | Press and drag to reposition (displacement >3px is regarded as dragging, onClick will not be triggered this time) |
aria-label | string | "\u64cd\u4f5c" ("Action") | Main Button Accessibility Label |
className | string | — | — |
FabAction: key: string · icon: ReactNode · label?: string (displayed on the side of the icon as aria-label when expanded) · onClick?: () => void.
Events
| Event | Type | Description |
|---|---|---|
onClick | () => void | Main button click without actions |
Slots
| Slot | Type | Description |
|---|---|---|
icon | ReactNode | Main button icon (default Plus); rotated 45° when speed-dial is expanded |
Usage Guidelines
- The root uses
fixedpositioning at a viewport corner. In a gallery or bounded container, override it toabsolutethroughclassName, and give the containerposition: relativeandoverflow-hidden. - With
actions, the main button expands or collapses the speed dial and does not callonClick. Withoutactions, it callsonClickdirectly. draggabledefaults tofalse; holding the button without enabling it intentionally causes no movement.- A drag farther than 3px suppresses the release click to prevent accidental activation.
- The drag offset is written on the inline
transformof the root node, and is only the internal state of the component: it is not persisted and is not controlled (noonDragEnd/ controlled position input parameter). Refresh or remount will return to the edge specified byposition. - Dragging is relative to the press point and is not clamped to viewport bounds. It can move off-screen; bounded demos should use
overflow-hidden. - Draggable mode applies
touch-action: noneto the main button, so touch gestures on it drag the button instead of scrolling the page.
Related
TabBar · ActionSheet · Picker · SwipeAction · PullToRefresh · SafeArea