diff --git a/src/packages/empty/demo.taro.tsx b/src/packages/empty/demo.taro.tsx
index b450fda6d8..dc2d0ecdc6 100644
--- a/src/packages/empty/demo.taro.tsx
+++ b/src/packages/empty/demo.taro.tsx
@@ -8,6 +8,7 @@ import Demo3 from './demos/taro/demo3'
import Demo4 from './demos/taro/demo4'
import Demo5 from './demos/taro/demo5'
import Demo6 from './demos/taro/demo6'
+import Demo7 from './demos/taro/demo7'
const EmptyDemo = () => {
const [translated] = useTranslate({
@@ -18,6 +19,7 @@ const EmptyDemo = () => {
b840c88f: '图片类型,内置3个',
a74a1fd4: '自定义图片',
'8dab2f66': '底部内容',
+ actions: '自定义操作',
},
'zh-TW': {
ce5c5446: '基礎用法',
@@ -26,6 +28,7 @@ const EmptyDemo = () => {
b840c88f: '圖片類型,內置3個',
a74a1fd4: '自定義圖片',
'8dab2f66': '底部內容',
+ actions: '自定義操作',
},
'en-US': {
ce5c5446: 'Basic usage',
@@ -34,6 +37,7 @@ const EmptyDemo = () => {
b840c88f: 'Picture type, built-in 3',
a74a1fd4: 'Custom image',
'8dab2f66': 'Bottom content',
+ actions: 'Actions',
},
})
@@ -53,6 +57,8 @@ const EmptyDemo = () => {
{translated['8dab2f66']}
+ {translated.actions}
+
>
)
diff --git a/src/packages/empty/demo.tsx b/src/packages/empty/demo.tsx
index ef49b69847..3041eb9c6b 100644
--- a/src/packages/empty/demo.tsx
+++ b/src/packages/empty/demo.tsx
@@ -6,6 +6,7 @@ import Demo3 from './demos/h5/demo3'
import Demo4 from './demos/h5/demo4'
import Demo5 from './demos/h5/demo5'
import Demo6 from './demos/h5/demo6'
+import Demo7 from './demos/h5/demo7'
const EmptyDemo = () => {
const [translated] = useTranslate({
@@ -16,6 +17,7 @@ const EmptyDemo = () => {
b840c88f: '图片类型,内置3个',
a74a1fd4: '自定义图片',
'8dab2f66': '底部内容',
+ actions: '自定义操作',
},
'zh-TW': {
ce5c5446: '基礎用法',
@@ -24,6 +26,7 @@ const EmptyDemo = () => {
b840c88f: '圖片類型,內置3個',
a74a1fd4: '自定義圖片',
'8dab2f66': '底部內容',
+ actions: '自定義操作',
},
'en-US': {
ce5c5446: 'Basic usage',
@@ -32,6 +35,7 @@ const EmptyDemo = () => {
b840c88f: 'Picture type, built-in 3',
a74a1fd4: 'Custom image',
'8dab2f66': 'Bottom content',
+ actions: 'Actions',
},
})
@@ -49,6 +53,8 @@ const EmptyDemo = () => {
{translated['8dab2f66']}
+ {translated.actions}
+
)
}
diff --git a/src/packages/empty/demos/h5/demo7.tsx b/src/packages/empty/demos/h5/demo7.tsx
new file mode 100644
index 0000000000..3d34af9ca1
--- /dev/null
+++ b/src/packages/empty/demos/h5/demo7.tsx
@@ -0,0 +1,22 @@
+import React from 'react'
+import { Empty, Toast } from '@nutui/nutui-react'
+
+const Demo7 = () => {
+ return (
+ {
+ Toast.show({ title: 'Action Click!' })
+ },
+ },
+ ]}
+ />
+ )
+}
+export default Demo7
diff --git a/src/packages/empty/demos/taro/demo7.tsx b/src/packages/empty/demos/taro/demo7.tsx
new file mode 100644
index 0000000000..a70f945726
--- /dev/null
+++ b/src/packages/empty/demos/taro/demo7.tsx
@@ -0,0 +1,25 @@
+import React from 'react'
+import { Empty, Toast } from '@nutui/nutui-react-taro'
+
+const Demo7 = () => {
+ return (
+ <>
+
+ {
+ Toast.show('toast-empty', { title: 'Action Click!' })
+ },
+ },
+ ]}
+ />
+ >
+ )
+}
+export default Demo7
diff --git a/src/packages/empty/doc.en-US.md b/src/packages/empty/doc.en-US.md
index a5aa921d6a..1ea024f151 100644
--- a/src/packages/empty/doc.en-US.md
+++ b/src/packages/empty/doc.en-US.md
@@ -60,6 +60,14 @@ import { Empty } from '@nutui/nutui-react'
:::
+### Actions
+
+:::demo
+
+
+
+:::
+
## Empty
### Props
@@ -72,7 +80,20 @@ import { Empty } from '@nutui/nutui-react'
| description | Description below the image | `ReactNode` | `-` |
| size | Size of component,used by full screen or half screen | `small` \| `base` | `base` |
| status | The Default error type | `empty` \| `error` \| `network` | `empty` |
-| actions | Actions of operation | `Array` | `[]` |
+| actions | Actions of operation | `Array` | `[]` |
+
+### EmptyAction
+
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| text | text | `ReactNode` | `-` |
+| className | The class name of the Button component | `string` | `-` |
+| style | style of Button component | `CSSProperties` | `-` |
+| type | type of Button component | `ButtonType` | `-` |
+| size | The size of the Button component | `ButtonSize` | `-` |
+| fill | fill property of Button component | `ButtonFill` | `-` |
+| disabled | Whether to disable | `boolean` | `false` |
+| onClick | onClick of Button component | `() => void` | `-` |
## Theming
diff --git a/src/packages/empty/doc.md b/src/packages/empty/doc.md
index 48ba74e437..7987476e21 100644
--- a/src/packages/empty/doc.md
+++ b/src/packages/empty/doc.md
@@ -60,6 +60,14 @@ import { Empty } from '@nutui/nutui-react'
:::
+### 自定义操作
+
+:::demo
+
+
+
+:::
+
## Empty
### Props
@@ -72,7 +80,20 @@ import { Empty } from '@nutui/nutui-react'
| description | 图片下方的描述文字 | `ReactNode` | `-` |
| size | 组件整体大小,适配于全屏或半屏 | `small` \| `base` | `base` |
| status | 默认图片错误类型 | `empty` \| `error` \| `network` | `empty` |
-| actions | 可用于处理操作的一组数据 | `Array` | `[]` |
+| actions | 可用于处理操作的一组数据 | `Array` | `[]` |
+
+### EmptyAction
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| text | 文本 | `ReactNode` | `-` |
+| className | Button 组件的类名 | `string` | `-` |
+| style | Button 组件的 style | `CSSProperties` | `-` |
+| type | Button 组件的 type | `ButtonType` | `-` |
+| size | Button 组件的 size | `ButtonSize` | `-` |
+| fill | Button 组件的 fill 属性 | `ButtonFill` | `-` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| onClick | Button 组件的 onClick | `() => void` | `-` |
## 主题定制
diff --git a/src/packages/empty/doc.taro.md b/src/packages/empty/doc.taro.md
index 838bb5124b..f472d3f085 100644
--- a/src/packages/empty/doc.taro.md
+++ b/src/packages/empty/doc.taro.md
@@ -60,6 +60,14 @@ import { Empty } from '@nutui/nutui-react-taro'
:::
+### 自定义操作
+
+:::demo
+
+
+
+:::
+
## Empty
### Props
@@ -72,7 +80,20 @@ import { Empty } from '@nutui/nutui-react-taro'
| description | 图片下方的描述文字 | `ReactNode` | `-` |
| size | 组件整体大小,适配于全屏或半屏 | `small` \| `base` | `base` |
| status | 默认图片错误类型 | `empty` \| `error` \| `network` | `empty` |
-| actions | 可用于处理操作的一组数据 | `Array` | `[]` |
+| actions | 可用于处理操作的一组数据 | `Array` | `[]` |
+
+### EmptyAction
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| text | 文本 | `ReactNode` | `-` |
+| className | Button 组件的类名 | `string` | `-` |
+| style | Button 组件的 style | `CSSProperties` | `-` |
+| type | Button 组件的 type | `ButtonType` | `-` |
+| size | Button 组件的 size | `ButtonSize` | `-` |
+| fill | Button 组件的 fill 属性 | `ButtonFill` | `-` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| onClick | Button 组件的 onClick | `() => void` | `-` |
## 主题定制
diff --git a/src/packages/empty/doc.zh-TW.md b/src/packages/empty/doc.zh-TW.md
index e80c5f9f76..8a3fe7466c 100644
--- a/src/packages/empty/doc.zh-TW.md
+++ b/src/packages/empty/doc.zh-TW.md
@@ -60,6 +60,14 @@ import { Empty } from '@nutui/nutui-react'
:::
+### 自定義操作
+
+:::demo
+
+
+
+:::
+
## Empty
### Props
@@ -72,7 +80,20 @@ import { Empty } from '@nutui/nutui-react'
| description | 圖片下方的描述文字 | `ReactNode` | `-` |
| size | 組件整體大小,適配於全屏或半屏 | `small` \| `base` | `base` |
| status | 默認圖片錯誤類型 | `empty` \| `error` \| `network` | `empty` |
-| actions | 可用於處理操作的一組數據 | `Array` | `[]` |
+| actions | 可用於處理操作的一組數據 | `Array` | `[]` |
+
+### EmptyAction
+
+| 屬性 | 說明 | 類型 | 默認值 |
+| --- | --- | --- | --- |
+| text | 文本 | `ReactNode` | `-` |
+| className | Button 組件的類名 | `string` | `-` |
+| style | Button 組件的 style | `CSSProperties` | `-` |
+| type | Button 組件的 type | `ButtonType` | `-` |
+| size | Button 組件的 size | `ButtonSize` | `-` |
+| fill | Button 組件的 fill 屬性 | `ButtonFill` | `-` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| onClick | Button 組件的 onClick | `() => void` | `-` |
## 主題定製
diff --git a/src/packages/empty/empty.taro.tsx b/src/packages/empty/empty.taro.tsx
index fc7d63d680..f37cdc1075 100644
--- a/src/packages/empty/empty.taro.tsx
+++ b/src/packages/empty/empty.taro.tsx
@@ -3,6 +3,7 @@ import classNames from 'classnames'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
import type { EmptyAction } from './types'
import { Button } from '@/packages/button/button.taro'
+import { getButtonType } from '@/packages/empty/utils'
type statusOptions = {
[key: string]: string
@@ -113,12 +114,13 @@ export const Empty: FunctionComponent<
[`${classPrefix}-actions-left`]:
actions.length > 1 && index === 0,
})}
- type={`${
- actions.length > 1 && index === 0 ? 'default' : 'primary'
- }`}
- size="small"
- fill="outline"
+ style={item.style}
+ type={getButtonType(actions, index)}
+ size={item.size || 'small'}
+ fill={item.fill || 'outline'}
+ disabled={item.disabled || false}
key={`action-${index}`}
+ onClick={item.onClick || (() => undefined)}
>
{item?.text}
diff --git a/src/packages/empty/empty.tsx b/src/packages/empty/empty.tsx
index ea95ce36f1..6117a84344 100644
--- a/src/packages/empty/empty.tsx
+++ b/src/packages/empty/empty.tsx
@@ -1,9 +1,10 @@
-import React, { FunctionComponent, useEffect, useState, ReactNode } from 'react'
+import React, { FunctionComponent, ReactNode, useEffect, useState } from 'react'
import classNames from 'classnames'
import { BasicComponent, ComponentDefaults } from '@/utils/typings'
import { EmptyAction } from '@/packages/empty/index'
import Button from '../button'
+import { getButtonType } from '@/packages/empty/utils'
type statusOptions = {
[key: string]: string
@@ -17,6 +18,7 @@ const defaultStatus: statusOptions = {
network:
'https://storage.360buyimg.com/imgtools/43c30f7e29-0d483d10-c0ac-11ee-bec4-eb4d2a09a51d.png',
}
+
export interface EmptyProps extends BasicComponent {
image?: ReactNode
imageSize: number | string
@@ -114,12 +116,13 @@ export const Empty: FunctionComponent<
[`${classPrefix}-actions-left`]:
actions.length > 1 && index === 0,
})}
- type={`${
- actions.length > 1 && index === 0 ? 'default' : 'primary'
- }`}
- size="small"
- fill="outline"
+ style={item.style}
+ type={getButtonType(actions, index)}
+ size={item.size || 'small'}
+ fill={item.fill || 'outline'}
+ disabled={item.disabled || false}
key={`action-${index}`}
+ onClick={item.onClick || (() => undefined)}
>
{item?.text}
diff --git a/src/packages/empty/types.ts b/src/packages/empty/types.ts
index e80b7b34ac..e9fb72be2d 100644
--- a/src/packages/empty/types.ts
+++ b/src/packages/empty/types.ts
@@ -1,3 +1,13 @@
+import React from 'react'
+import { ButtonFill, ButtonSize, ButtonType } from '@/packages/button'
+
export interface EmptyAction {
- text: string
+ text: React.ReactNode
+ className?: string
+ style?: React.CSSProperties
+ type?: ButtonType
+ size?: ButtonSize
+ fill?: ButtonFill
+ disabled?: boolean
+ onClick?: () => void
}
diff --git a/src/packages/empty/utils.ts b/src/packages/empty/utils.ts
new file mode 100644
index 0000000000..a2b69687f1
--- /dev/null
+++ b/src/packages/empty/utils.ts
@@ -0,0 +1,8 @@
+import { EmptyAction } from './types'
+
+export const getButtonType = (actions: Array, index: number) => {
+ if (!actions || actions.length === 0) return 'default'
+ const action = actions[index]
+ if (action.type) return action.type
+ return actions.length > 1 && index === 0 ? 'default' : 'primary'
+}