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 | List containing multiple action items | (ItemType | ReactNode)[] | - | - |
| onClick | Callback function when component is clicked | function({ item, key, keyPath, domEvent }) | - | - |
| dropdownProps | Configuration properties for dropdown menu | DropdownProps | - | - |
| variant | Variant | borderless | outlined |filled | borderless | - |
| fadeIn | Fade in effect | boolean | - | - |
| fadeInLeft | Fade left in effect | boolean | - | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| key | Unique identifier for custom action | string | - | - |
| label | Display label for custom action | string | - | - |
| icon | Icon for custom action | ReactNode | - | - |
| onItemClick | Callback function when custom action button is clicked | (info: ItemType) => void | - | - |
| danger | Syntactic sugar, sets danger 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 status value | like | dislike | default | default | - |
| onChange | Feedback status change callback | (value: like | dislike | default) => void | - | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| text | Text to be copied | string | '' | - |
| icon | Copy button | React.ReactNode | - | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| status | Playback status | 'loading'|'error'|'running'|'default' | default | - |
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| status | Status | 'loading'|'error'|'running'|'default' | default | - |
| label | Display label for custom action | string | - | - |
| defaultIcon | Default status icon | React.ReactNode | - | - |
| runningIcon | Running status icon | React.ReactNode | - | - |
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.
FadeIn.
