SwipeAction
swipe-actionReveals contextual row actions through horizontal touch gestures.
Usage
Swipe right to delete
The right array defines the action on the right (the content is moved to the left and exposed), and tone determines the background color.
<SwipeAction right={[{ key: "del", label: "Delete", tone: "danger" }]}>
<div className="bg-surface px-4 py-3">Conversation item · Try sliding left</div>
</SwipeAction>Left and right two-way action
left / right can be configured at the same time; multiple buttons can be arranged on each side, arranged in sequence.
<SwipeAction
left={[{ key: "read", label: "Mark as read", tone: "primary" }]}
right={[
{ key: "top", label: "Top", tone: "warning" },
{ key: "del", label: "Delete", tone: "danger" },
]}
>
<Row />
</SwipeAction>Shade Variants
tone supports default / primary / success / warning / danger.
<SwipeAction
right={[
{ key: "ok", label: "Complete", tone: "success" },
{ key: "more", label: "More", tone: "default" },
]}
>
<div className="bg-surface px-4 py-3">Multi-color action</div>
</SwipeAction>When to Use
Use it when the list row needs to slide horizontally to reveal operation buttons such as "delete/pin/mark as read" (WeChat conversation list interaction). Use PullToRefresh to trigger the refresh of the entire column; the resident button in the row can be placed directly in the content without sliding.
Import
import { SwipeAction } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
left | SwipeActionButton[] | — | Action displayed when sliding out left (content moves right) |
right | SwipeActionButton[] | — | Action displayed when sliding out right (content moves left) |
threshold | number | 0.5 | The threshold value of letting go to trigger full expansion (ratio of action area width 0-1) |
className | string | — | — |
SwipeActionButton: key: string · label: ReactNode · tone?: "default" \| "primary" \| "danger" \| "success" \| "warning" (background color, default) · onClick?: () => void.
Events
| Event | Type | Description |
|---|---|---|
onOpenChange | (side: "left" | "right" | null) => void | Expand/collapse callback (null=collapse) |
Slots
| Slot | Type | Description |
|---|---|---|
children * | ReactNode | Row content (following the content layer of translateX) |
Usage Guidelines
- Use Pointer Events to determine the main axis: only when the horizontal displacement is dominant will it be taken over as sliding, and when the vertical displacement is dominant, the outer list will be allowed to scroll - so it will not block vertical scrolling when placed in a scrollable list.
thresholdis a 0–1 ratio, not a pixel value. On release, the drag must exceed that fraction of the action area's width to stay open; otherwise it rebounds closed.
Related
PullToRefresh · TabBar · Fab · ActionSheet · Picker · SafeArea