Actions
Actions
Used for quickly configuring required action buttons or features in some AI scenarios.
Importimport { Actions } from "@ant-design/x"; |
Sourcecomponents/actions |
Docs |
Ant Design XImportimport { Actions } from "@ant-design/x"; |
Sourcecomponents/actions |
Docs |
The Actions component is used for quickly configuring required action buttons or features in some AI scenarios.
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| items | A list containing multiple action items | (ItemType | ReactNode)[] | - | - |
| onClick | Callback function when an action item is clicked | function({ item, key, keyPath, domEvent }) | - | - |
| footer | Additional React node content at the bottom | ReactNode | - | - |
| dropdownProps | Configuration properties for dropdown menu | DropdownProps | - | - |
| variant | Variant | borderless | outlined |filled | borderless | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| key | The unique identifier for the custom action | string | - | - |
| label | The display label for the custom action | string | - | - |
| icon | The icon for the custom action | ReactNode | - | - |
| onItemClick | Callback function when the custom action button is clicked | (info: ItemType) => void | - | - |
| danger | Syntax sugar, set dangerous icon | boolean | false | - |
| subItems | Sub action items | Omit<ItemType, 'subItems' | 'triggerSubMenuAction' | 'actionRender'>[] | - | - |
| triggerSubMenuAction | Action to trigger the sub-menu | hover | click | hover | - |
| actionRender | Custom render action item content | (item: ItemType) => ReactNode | - | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| value | Feedback value | like | dislike | default | default | - |
| onChange | Feedback status change callback | (value: like | dislike | default) => void | - | - |
Basic usage.
Display more menu items by setting the subItems property. Items with subItems don't need to configure an icon; <EllipsisOutlined /> will be used by default.
For some commonly used functions, preset components can be used to quickly build them.
Use variant to switch variants.
