# ActionSheet

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

Action menu panel that pops up from the bottom.

## 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.

Action menu panel that pops up from the bottom.

## When to Use

Triggered by user operation, it provides a set of two or more options related to the current scene operation, allowing the user to complete the operation without leaving the scene.

## Demos

## ActionSheet

### Props

| Name | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| actions | The option list of the the action sheet | `Action[]` | `[]` |
| afterClose | Triggered when completely closed | `() => void` | - |
| cancelText | The text of the cancel button , if it is null, the cancel button would not be displayed | `ReactNode` | - |
| closeOnAction | Whether to close after clicking the option | `boolean` | `false` |
| closeOnMaskClick | Whether to close after clicking the mask layer | `boolean` | `true` |
| destroyOnClose | Destroy `dom` when not visible | `boolean` | `false` |
| forceRender | Render content forcely | `boolean` | `false` |
| extra | The extra area at the top of the the action sheet | `ReactNode` | - |
| getContainer | Get the specified mounted `HTML` node, the default is `body`, if `null` returned, it would be rendered to the current node | `HTMLElement \| () => HTMLElement \| null` | `document.body` |
| onAction | Triggered when an option is clicked, never triggered when the ActionSheet is disabled or loading | `(action: Action, index: number) => void` | - |
| onClose | Triggered when closed | `() => void` | - |
| onMaskClick | Triggered when the mask layer is clicked | `() => void` | - |
| popupClassName | `ActionSheet` popup class name | `string` | - |
| safeArea | Whether to enable safe area padding | `boolean` | `true` |
| visible | To show or hide the action sheet | `boolean` | `false` |
| styles | Semantic structure style | `Partial<Record<'body' \| 'mask', CSSProperties>>` | - | 5.33.0 |

### Action

| Name        | Description                   | Type               | Default |
| ----------- | ----------------------------- | ------------------ | ------- |
| danger      | Whether dangerous or not      | `boolean`          | `false` |
| description | The description of the action | `ReactNode`        | -       |
| disabled    | Whether disabled or not       | `boolean`          | `false` |
| key         | The unique mark               | `string \| number` | -       |
| onClick     | Triggered on click            | `() => void`       | -       |
| text        | Title                         | `ReactNode`        | -       |
| bold        | Whether the title is bold     | `boolean`          | `false` |

### Imperative

ActionSheet can be used in an imperative way :

```ts | pure
const handler = ActionSheet.show(props)
```

The ActionSheet can be directly opened by calling the `show` method on the `ActionSheet`. The types of the `props` parameter is the same as the above table, but the `visible` property is not supported.

When the ActionSheet is closed, the component instance would be automatically destroyed.

The return value of the `show` method is a component controller, which contains the following properties :

| Name  | Description              | Type         |
| ----- | ------------------------ | ------------ |
| close | To close the ActionSheet | `() => void` |

---

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