# SwipeAction

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/swipe-action
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

Function extension for lists.

## Install

```bash
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` |

---

Index of all JGuang resources: https://jiguang132.com/llms.txt