logoAnt Design X

设计研发组件X MarkdownX SDK演示
  • 介绍
  • 总览
  • 通用
    • Bubble对话气泡
    • Conversations管理对话
    • Notification系统通知
  • 唤醒
    • Welcome欢迎
    • Prompts提示集
  • 表达
    • Attachments输入附件
    • Sender输入框
    • Suggestion快捷指令
  • 确认
    • Sources来源引用
    • Think思考过程
    • ThoughtChain思维链
  • 反馈
    • Actions操作列表
    • FileCard文件卡片
  • 其他
    • XProvider全局化配置

Actions
操作列表

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

何时使用

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

代码演示

API

通用属性参考:通用属性

ActionsProps

属性说明类型默认值版本
items包含多个操作项的列表(ItemType | ReactNode)[]--
onClick组件被点击时的回调函数function({ item, key, keyPath, domEvent })--
dropdownProps下拉菜单的配置属性DropdownProps--
variant变体borderless | outlined |filledborderless-
fadeIn渐入效果boolean--
fadeInLeft从左到右渐入效果boolean--

ItemType

属性说明类型默认值版本
key自定义操作的唯一标识string--
label自定义操作的显示标签string--
icon自定义操作的图标ReactNode--
onItemClick点击自定义操作按钮时的回调函数(info: ItemType) => void--
danger语法糖,设置危险iconbooleanfalse-
subItems子操作项Omit<ItemType, 'subItems' | 'triggerSubMenuAction' | 'actionRender'>[]--
triggerSubMenuAction触发子菜单的操作hover | clickhover-
actionRender自定义渲染操作项内容(item: ItemType) => ReactNode--

Actions.Feedback

属性说明类型默认值版本
value反馈状态值like | dislike | defaultdefault-
onChange反馈状态变化回调(value: like | dislike | default) => void--

Actions.Copy

属性说明类型默认值版本
text复制的文本string''-
icon复制按钮React.ReactNode--

Actions.Audio

属性说明类型默认值版本
status播放状态'loading'|'error'|'running'|'default'default-

Actions.Item

属性说明类型默认值版本
status状态'loading'|'error'|'running'|'default'default-
label自定义操作的显示标签string--
defaultIcon默认状态图标React.ReactNode--
runningIcon执行状态图标React.ReactNode--

Semantic DOM

主题变量(Design Token)

全局 Token如何定制?
基本

基础用法。

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

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
  • /5
预设模板

对于一些常用的功能,可以使用预设的组件来实现快速的搭建。

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

使用 variant 切换变体。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
  • /5
渐入效果

渐进效果。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
  • root
    根节点
  • item
    操作项
  • itemDropdown
    操作下拉选项
更新日志