ActionIconBox 操作图标盒子

该组件提供可点击的图标操作按钮,支持加载状态、工具提示、键盘导航等功能。主要用于编辑器工具栏中的各种操作按钮。

代码演示

import { ActionIconBox } from '@ant-design/agentic-ui';
import { SaveOutlined, DeleteOutlined } from '@ant-design/icons';

export default () => (
  <div style={{ display: 'flex', gap: 16 }}>
    <ActionIconBox
      title="保存"
      onClick={() => new Promise((resolve) => setTimeout(resolve, 1000))}
    >
      <SaveOutlined />
    </ActionIconBox>
    <ActionIconBox
      title="删除"
      type="danger"
      onClick={() => console.log('delete')}
    >
      <DeleteOutlined />
    </ActionIconBox>
  </div>
);

API

ActionIconBoxProps

属性说明类型默认值版本
children图标内容React.ReactNode | ((isHovered: boolean) => React.ReactNode)--
title按钮标题和工具提示文本React.ReactNode--
showTitle是否显示标题文本booleanfalse-
onClick点击回调函数(e: any) => void--
isLoading加载状态booleanfalse-
loading已废弃,请使用 isLoadingbooleanfalse-
type按钮类型'danger' | 'primary'--
active是否处于激活状态booleanfalse-
disabled是否禁用(虽然 Props 定义中未显式包含,但部分逻辑支持)boolean--
tooltipProps工具提示配置TooltipProps--
className自定义 CSS 类名string--
style自定义样式React.CSSProperties--
iconStyle图标样式React.CSSProperties--
borderLess是否无边框样式booleanfalse-
noPadding是否无内边距booleanfalse-
transform是否启用变换效果booleanfalse-
theme主题'light' | 'dark''light'-
onInit初始化回调函数() => void--
onLoadingChange加载状态变更回调(loading: boolean) => void--