diff --git a/components/actions/demo/basic.md b/components/actions/demo/basic.md new file mode 100644 index 00000000..673339b1 --- /dev/null +++ b/components/actions/demo/basic.md @@ -0,0 +1,7 @@ +## zh-CN + +基础用法。 + +## en-US + +Basic usage. diff --git a/components/actions/demo/basic.tsx b/components/actions/demo/basic.tsx new file mode 100644 index 00000000..79f2f95b --- /dev/null +++ b/components/actions/demo/basic.tsx @@ -0,0 +1,26 @@ +import { CopyOutlined, RedoOutlined } from '@ant-design/icons'; +import { Actions, ActionsProps } from '@ant-design/x'; +import { message } from 'antd'; +import React from 'react'; + +const actionItems = [ + { + key: 'retry', + icon: , + label: '重试', + }, + { + key: 'copy', + icon: , + label: '复制', + }, +]; + +const Demo: React.FC = () => { + const onClick: ActionsProps['onClick'] = ({ key, keyPath, item }) => { + message.success(`you click ${keyPath.join(',')}`); + }; + return ; +}; + +export default Demo; diff --git a/components/actions/demo/sub.md b/components/actions/demo/sub.md new file mode 100644 index 00000000..2645dbac --- /dev/null +++ b/components/actions/demo/sub.md @@ -0,0 +1,7 @@ +## zh-CN + +更多菜单项。 + +## en-US + +Basic usage. diff --git a/components/actions/demo/sub.tsx b/components/actions/demo/sub.tsx new file mode 100644 index 00000000..643b6ce5 --- /dev/null +++ b/components/actions/demo/sub.tsx @@ -0,0 +1,54 @@ +import { + CopyOutlined, + DeleteOutlined, + RedoOutlined, + ReloadOutlined, + ShareAltOutlined, +} from '@ant-design/icons'; +import { Actions, ActionsProps } from '@ant-design/x'; +import { message } from 'antd'; +import React from 'react'; + +const actionItems: ActionsProps['items'] = [ + { + key: 'retry', + label: '重试', + icon: , + }, + { + key: 'copy', + label: '复制', + icon: , + }, + { + key: 'more', + // icon: , // 不传使用默认的icon + children: [ + { + key: 'share', + label: '分享', + icon: , + children: [ + { key: 'qq', label: 'QQ' }, + { key: 'wechat', label: '微信' }, + ], + }, + { key: 'import', label: '引用' }, + { key: 'delete', label: '删除', icon: , onClick: () => {}, danger: true }, + ], + }, + { + key: 'clear', + label: '清空', + icon: , + }, +]; + +const Demo: React.FC = () => { + const onClick: ActionsProps['onClick'] = ({ key, keyPath, item }) => { + message.success(`you click ${keyPath}`); + }; + return ; +}; + +export default Demo; diff --git a/components/actions/demo/variant.md b/components/actions/demo/variant.md new file mode 100644 index 00000000..05c7a86a --- /dev/null +++ b/components/actions/demo/variant.md @@ -0,0 +1,7 @@ +## zh-CN + +使用`variant`切换变体。 + +## en-US + +Use `variant` to switch variants. diff --git a/components/actions/demo/variant.tsx b/components/actions/demo/variant.tsx new file mode 100644 index 00000000..0357caf0 --- /dev/null +++ b/components/actions/demo/variant.tsx @@ -0,0 +1,26 @@ +import { CopyOutlined, RedoOutlined } from '@ant-design/icons'; +import { Actions, ActionsProps } from '@ant-design/x'; +import { message } from 'antd'; +import React from 'react'; + +const actionItems = [ + { + key: 'retry', + icon: , + label: '重试', + }, + { + key: 'copy', + icon: , + label: '复制', + }, +]; + +const Demo: React.FC = () => { + const onClick: ActionsProps['onClick'] = ({ key, keyPath, item }) => { + message.success(`you click ${keyPath.join(',')}`); + }; + return ; +}; + +export default Demo; diff --git a/components/actions/index.en-US.md b/components/actions/index.en-US.md new file mode 100644 index 00000000..f3f1b8ac --- /dev/null +++ b/components/actions/index.en-US.md @@ -0,0 +1,62 @@ +--- +category: Components +group: + title: Common + order: 0 +title: Actions +description: Used for quickly configuring required action buttons or features in some AI scenarios. +cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*1ysXSqEnAckAAAAAAAAAAAAADgCCAQ/original +coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*EkYUTotf-eYAAAAAAAAAAAAADgCCAQ/original +demo: + cols: 1 +--- + +## When to Use + +The Actions component is used for quickly configuring required action buttons or features in some AI scenarios. + +## Examples + + +Basic +More Menu Items +Using Variants + +## API + +Common props ref:[Common props](/docs/react/common-props) + +### Actions + +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| items | A list containing multiple action items | ActionItemType[] | - | - | +| rootClassName | Style class for the root node | string | - | - | +| onClick | Callback function when an action item is clicked | `function({ item, key, keyPath, selectedKeys, domEvent })` | - | - | +| style | Style for the root node | React.CSSProperties | - | - | +| variant | Variant | `'borderless' \| 'border'` | 'border' | - | +| prefixCls | Prefix for style class names | string | - | - | + +### ItemType + +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| label | The display label for the custom action | string | - | - | +| key | The unique identifier for the custom action | string | - | - | +| icon | The icon for the custom action | ReactNode | - | - | +| onClick | Callback function when the custom action button is clicked | () => void | - | - | + +### SubItemType + +| 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 | - | - | +| children | Sub action items | ActionItemType[] | - | - | +| triggerSubMenuAction | Action to trigger the sub-menu | `hover \| click` | - | - | +| onClick | Callback function when the custom action button is clicked | () => void | - | - | + +### ActionItemType + +> type `ActionItemType` = `ItemType` | `SubItemType` diff --git a/components/actions/index.zh-CN.md b/components/actions/index.zh-CN.md new file mode 100644 index 00000000..f0087cc0 --- /dev/null +++ b/components/actions/index.zh-CN.md @@ -0,0 +1,63 @@ +--- +category: Components +group: + title: 通用 + order: 0 +title: Actions +subtitle: 操作栏 +description: 用于快速配置一些 AI 场景下所需要的操作按钮/功能。 +cover: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*1ysXSqEnAckAAAAAAAAAAAAADgCCAQ/original +coverDark: https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*EkYUTotf-eYAAAAAAAAAAAAADgCCAQ/original +demo: + cols: 1 +--- + +## 何时使用 + +Actions 组件用于快速配置一些 AI 场景下所需要的操作按钮/功能 + +## 代码演示 + + +基本 +更多菜单项 +使用变体 + +## API + +通用属性参考:[通用属性](/docs/react/common-props) + +### Actions + +| 属性 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| items | 包含多个操作项的列表 | ActionItemType[] | - | - | +| rootClassName | 根节点样式类 | string | - | - | +| onClick | Item 操作项被点击时的回调函数 | `function({ item, key, keyPath, selectedKeys, domEvent })` | - | - | +| style | 根节点样式 | React.CSSProperties | - | - | +| variant | 变体 | `'borderless' \| 'border'` | 'border' | - | +| prefixCls | 样式类名的前缀 | string | - | - | + +### ItemType + +| 属性 | 说明 | 类型 | 默认值 | 版本 | +| ------- | ------------------------------ | ---------- | ------ | ---- | +| label | 自定义操作的显示标签 | string | - | - | +| key | 自定义操作的唯一标识 | string | - | - | +| icon | 自定义操作的图标 | ReactNode | - | - | +| onClick | 点击自定义操作按钮时的回调函数 | () => void | - | - | + +### SubItemType + +| 属性 | 说明 | 类型 | 默认值 | 版本 | +| -------------------- | ------------------------------ | ---------------- | ------ | ---- | +| key | 自定义操作的唯一标识 | string | - | - | +| label | 自定义操作的显示标签 | string | - | - | +| icon | 自定义操作的图标 | ReactNode | - | - | +| children | 子操作项 | ActionItemType[] | - | - | +| triggerSubMenuAction | 触发子菜单的操作 | `hover \| click` | - | - | +| onClick | 点击自定义操作按钮时的回调函数 | () => void | - | - | + +### ActionItemType + +> type `ActionItemType` = `ItemType` | `SubItemType`