SwipeAction

Function extension for lists.

Install

npm install antd-mobile@5.43.0

antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register createRoot with unstableSetRender at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with <html data-prefers-color-scheme="dark">.

Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as DemoBlock are JGuang rewrites, not antd-mobile APIs.

Function extension for lists.

When to Use

Swipe to reveal hidden function menus.

Demos

SwipeAction

Props

Name	Description	Type	Default	Version
closeOnAction	Whether to return to the position automatically when the operation button is clicked	`boolean`	`true`
closeOnTouchOutside	Whether to return to the position automatically when other areas is clicked	`boolean`	`true`
leftActions	List of operation buttons on the left	`Action[]`	`[]`
rightActions	List of operation buttons on the right	`Action[]`	`[]`
onAction	Triggered when operation button is clicked	`(action: Action, e: React.MouseEvent) => void`	-
stopPropagation	Stop the propagation of some events.	`PropagationEvent[]`	`[]`
onActionsReveal	Triggered when the operation button appears completely	`(side: 'left' \| 'right') => void`	-
onClose	Triggered when the slide bar returns to the position	`() => void`	-	5.39.0

Action

Name	Description	Type	Default
color	Color	`'light' \| 'weak' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| string`	`'light'`
key	The unique identification	`string \| number`	-
onClick	Trigger when clicked	`(e: React.MouseEvent) => void`	-
text	Text	`ReactNode`	-

Ref

Name	Description	Type
close	Let the slide bar return to the position	`() => void`
show	Slide out the operation button, the `side` parameter defaults to `right`	`(side?: 'left' \| 'right') => void`

CSS Variables

Name	Description	Default
--background	background color	`#ffffff`