diff --git a/packages/core/client/src/schema-component/antd/tabs/Tabs.Designer.tsx b/packages/core/client/src/schema-component/antd/tabs/Tabs.Designer.tsx
index 14f5b88d3..5f21d7ee5 100644
--- a/packages/core/client/src/schema-component/antd/tabs/Tabs.Designer.tsx
+++ b/packages/core/client/src/schema-component/antd/tabs/Tabs.Designer.tsx
@@ -20,26 +20,37 @@ export const TabsDesigner = () => {
properties: {
title: {
title: t('Tab name'),
+ required: true,
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-component-props': {},
},
+ icon: {
+ title: t('Icon'),
+ 'x-decorator': 'FormItem',
+ 'x-component': 'IconPicker',
+ 'x-component-props': {},
+ },
},
} as ISchema
}
- initialValues={{ title: field.title }}
- onSubmit={({ title }) => {
- if (title) {
- fieldSchema.title = title;
- field.title = title;
- dn.emit('patch', {
- schema: {
- ['x-uid']: fieldSchema['x-uid'],
- title,
- },
- });
- dn.refresh();
- }
+ initialValues={{ title: field.title, icon: field.componentProps.icon }}
+ onSubmit={({ title, icon }) => {
+ const props = fieldSchema['x-component-props'] || {};
+ fieldSchema.title = title;
+ field.title = title;
+ props.icon = icon;
+ field.componentProps.icon = icon;
+ fieldSchema['x-component-props'] = fieldSchema['x-component-props'] || {};
+ fieldSchema['x-component-props'].icon = icon;
+ dn.emit('patch', {
+ schema: {
+ ['x-uid']: fieldSchema['x-uid'],
+ title,
+ ['x-component-props']: props,
+ },
+ });
+ dn.refresh();
}}
/>
diff --git a/packages/core/client/src/schema-component/antd/tabs/Tabs.tsx b/packages/core/client/src/schema-component/antd/tabs/Tabs.tsx
index fa0be9d4a..fb9b861c1 100644
--- a/packages/core/client/src/schema-component/antd/tabs/Tabs.tsx
+++ b/packages/core/client/src/schema-component/antd/tabs/Tabs.tsx
@@ -3,6 +3,7 @@ import { observer, RecursionField, useField, useFieldSchema } from '@formily/rea
import { TabPaneProps, Tabs as AntdTabs, TabsProps } from 'antd';
import classNames from 'classnames';
import React from 'react';
+import { Icon } from '../../../icon';
import { useSchemaInitializer } from '../../../schema-initializer';
import { DndContext, SortableItem } from '../../common';
import { useDesigner } from '../../hooks/useDesigner';
@@ -77,12 +78,12 @@ const designerCss = css`
}
`;
-Tabs.TabPane = observer((props: TabPaneProps) => {
+Tabs.TabPane = observer((props: TabPaneProps & { icon?: any }) => {
const Designer = useDesigner();
const field = useField();
return (
- {props.tab || field.title}
+ {props.icon && } {props.tab || field.title}
);
diff --git a/packages/core/client/src/schema-initializer/buttons/TabPaneInitializers.tsx b/packages/core/client/src/schema-initializer/buttons/TabPaneInitializers.tsx
index 788a0073d..6e753c4e6 100644
--- a/packages/core/client/src/schema-initializer/buttons/TabPaneInitializers.tsx
+++ b/packages/core/client/src/schema-initializer/buttons/TabPaneInitializers.tsx
@@ -13,13 +13,15 @@ export const TabPaneInitializers = () => {
return {
async run() {
await form.submit();
- const { title } = form.values;
+ const { title, icon } = form.values;
insertBeforeEnd({
type: 'void',
title,
'x-component': 'Tabs.TabPane',
'x-designer': 'Tabs.Designer',
- 'x-component-props': {},
+ 'x-component-props': {
+ icon,
+ },
properties: {
grid: {
type: 'void',
@@ -67,6 +69,11 @@ export const TabPaneInitializers = () => {
'x-component': 'Input',
'x-decorator': 'FormItem',
},
+ icon: {
+ title: '{{t("Icon")}}',
+ 'x-component': 'IconPicker',
+ 'x-decorator': 'FormItem',
+ },
footer: {
'x-component': 'Action.Modal.Footer',
type: 'void',