logoAnt Design X

设计研发组件演示
  • 总览
  • 通用
    • Bubble对话气泡
    • Conversations管理对话
  • 唤醒
    • Welcome欢迎
    • Prompts提示集
  • 表达
    • Attachments输入附件
    • Sender输入框
    • Suggestion快捷指令
  • 确认
    • ThoughtChain思维链
  • 反馈
    • Actions操作列表
  • 工具
    • useXAgent模型调度
    • useXChat数据管理
    • XStream流
    • XRequest请求
    • XProvider全局化配置

Actions
操作列表

用于快速配置一些 AI 场景下所需要的操作按钮/功能。
使用import { Actions } from "@ant-design/x";
源码components/actions
文档
编辑此页...

相关资源

Ant Design
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区

何时使用

Actions 组件用于快速配置一些 AI 场景下所需要的操作按钮/功能

代码演示

基本

基础用法。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
更多菜单项

通过设置 children 属性来展示更多菜单项,含有 children 的项可以不配置 icon,会默认使用 <EllipsisOutlined />

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
使用变体

使用 variant 切换变体。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考:通用属性

Actions

属性说明类型默认值版本
items包含多个操作项的列表ActionItem[]--
rootClassName根节点样式类string--
onClickItem 操作项被点击时的回调函数function({ item, key, keyPath, selectedKeys, domEvent })--
style根节点样式React.CSSProperties--
variant变体'borderless' | 'border''borderless'-
prefixCls样式类名的前缀string--

ItemType

属性说明类型默认值版本
key自定义操作的唯一标识string--
label自定义操作的显示标签string--
icon自定义操作的图标ReactNode--
children子操作项ActionItem[]--
triggerSubMenuAction触发子菜单的操作hover | click--
onItemClick点击自定义操作按钮时的回调函数(info: ActionItem) => void--

SubItemType

属性说明类型默认值版本
label自定义操作的显示标签string--
key自定义操作的唯一标识string--
icon自定义操作的图标ReactNode--
onItemClick点击自定义操作按钮时的回调函数(info: ActionItem) => void--
danger语法糖,设置危险iconbooleanfalse-

ActionItem

typescript
type ActionItem = ItemType | SubItemType;
更新日志