feat(leftConfig)show dispalyName config
This commit is contained in:
@@ -72,7 +72,12 @@ export default function IndexPage() {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div style={{ height: '100%' }}>
|
<div style={{ height: '100%' }}>
|
||||||
<LeftConfig mode="vertical" footerConfig={footerConfig()} config={config}></LeftConfig>
|
<LeftConfig
|
||||||
|
mode="vertical"
|
||||||
|
showName={true}
|
||||||
|
footerConfig={footerConfig()}
|
||||||
|
config={config}
|
||||||
|
></LeftConfig>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ContainerWrapper config={config}>
|
<ContainerWrapper config={config}>
|
||||||
|
@@ -8,7 +8,7 @@
|
|||||||
|
|
||||||
import { InitConfig } from 'dooringx-lib';
|
import { InitConfig } from 'dooringx-lib';
|
||||||
import { LeftRegistComponentMapItem } from 'dooringx-lib/dist/core/crossDrag';
|
import { LeftRegistComponentMapItem } from 'dooringx-lib/dist/core/crossDrag';
|
||||||
import { ContainerOutlined, HighlightOutlined } from '@ant-design/icons';
|
import { ContainerOutlined, PlayCircleOutlined, HighlightOutlined } from '@ant-design/icons';
|
||||||
import commandModules from './commanderModules';
|
import commandModules from './commanderModules';
|
||||||
import { functionMap } from './functionMap';
|
import { functionMap } from './functionMap';
|
||||||
import { Formmodules } from './formComponentModules';
|
import { Formmodules } from './formComponentModules';
|
||||||
@@ -38,6 +38,11 @@ export const defaultConfig: Partial<InitConfig> = {
|
|||||||
icon: <HighlightOutlined />,
|
icon: <HighlightOutlined />,
|
||||||
displayName: '基础',
|
displayName: '基础',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
type: 'media',
|
||||||
|
icon: <PlayCircleOutlined />,
|
||||||
|
displayName: '媒体组件',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
type: 'xxc',
|
type: 'xxc',
|
||||||
icon: <ContainerOutlined />,
|
icon: <ContainerOutlined />,
|
||||||
|
@@ -16,6 +16,7 @@ import styles from '../index.less';
|
|||||||
declare type modeType = 'horizontal' | 'vertical';
|
declare type modeType = 'horizontal' | 'vertical';
|
||||||
interface LeftConfigProps {
|
interface LeftConfigProps {
|
||||||
config: UserConfig;
|
config: UserConfig;
|
||||||
|
showName?: Boolean;
|
||||||
footerConfig?: ReactNode;
|
footerConfig?: ReactNode;
|
||||||
mode?: modeType | undefined;
|
mode?: modeType | undefined;
|
||||||
}
|
}
|
||||||
@@ -24,7 +25,7 @@ interface LeftConfigProps {
|
|||||||
*
|
*
|
||||||
* 注册加载左侧组件方法,由于异步拉取,所以要异步加载
|
* 注册加载左侧组件方法,由于异步拉取,所以要异步加载
|
||||||
* 不同tab页可以使用不同type区分
|
* 不同tab页可以使用不同type区分
|
||||||
* @param {*} props -LeftConfigProps options可选项: mode:'horizontal' | 'vertical' icon与文案展示方向 ;footerConfig:底部功能配置ReactNode类型;
|
* @param {*} props -LeftConfigProps options可选项:showName:是否显示displayName; mode:'horizontal' | 'vertical' icon与文案展示方向 ;footerConfig:底部功能配置ReactNode类型;
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
function LeftConfig(props: LeftConfigProps) {
|
function LeftConfig(props: LeftConfigProps) {
|
||||||
@@ -162,7 +163,7 @@ function LeftConfig(props: LeftConfigProps) {
|
|||||||
icon={v.icon}
|
icon={v.icon}
|
||||||
className={props.mode === 'vertical' ? `${styles.menuStyle}` : ''}
|
className={props.mode === 'vertical' ? `${styles.menuStyle}` : ''}
|
||||||
>
|
>
|
||||||
{v.displayName}
|
{props.showName && v.displayName}
|
||||||
</Menu.Item>
|
</Menu.Item>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
@@ -167,8 +167,9 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
height: auto !important ;
|
height: auto !important ;
|
||||||
padding-top: 8px !important ;
|
padding: 8px 16px !important ;
|
||||||
}
|
}
|
||||||
.menu_footer {
|
.menu_footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
Reference in New Issue
Block a user