@antdp/basic-layouts v2.1.1
@antdp/basic-layouts
入口公共界面
安装
$ npm i @antdp/basic-layouts # yarn add @antdp/basic-layouts
基本使用
import React from 'react';
import BasicLayouts from '@antdp/basic-layouts';
const Demo = () => {
return (
<BasicLayouts
projectName="Ant Design Pro"
/>
)
};
export default Demo
导航菜单模式
slider
import React from 'react';
import BasicLayouts from '@antdp/basic-layouts';
const Demo = () => {
return (
<BasicLayouts
layout="slider"
/>
)
};
mix
import React from 'react';
import BasicLayouts from '@antdp/basic-layouts';
const Demo = () => {
return (
<BasicLayouts
layout="mix"
/>
)
};
topleft
import React from 'react';
import BasicLayouts from '@antdp/basic-layouts';
const Demo = () => {
return (
<BasicLayouts
layout="topleft"
/>
)
};
配置明亮主题
亮主题light
import BasicLayouts from '@antdp/basic-layouts';
export default () => {
return (
<BasicLayouts
theme="light"
projectName="Ant Design Pro"
/>
)
};
暗主题dark
import BasicLayouts from '@antdp/basic-layouts';
export default () => {
return (
<BasicLayouts
theme="dark"
projectName="Ant Design Pro"
/>
)
};
默认样式
const defaultThemeColors = (layout) =>{
if(layout === 'slider'){
return {
light: {
'--primary-slider-bg': 'rgb(36, 37, 37)',
'--primary-header-bg': '#fff',
'--primary-shadow': 'rgba(29,35,41,.05)',
'--primary-slider-trigger-border': '#fff',
'--primary-sider-trigger-text-color': '#fff',
'--primary-header-text-color': 'rgb(36, 37, 37)',
'--primary-title-text-color': '#fff',
'--primary-content-bg': '#f5f5f5',
'itemSelectedBg': 'rgb(24, 144, 255)',
'colorItemBgSelected': '#fff',
'itemActiveBg': '#fff',
'horizontalItemSelectedBg': '#fff',
'itemColor': 'rgba(229, 224, 216, 0.85)',
'itemHoverColor': 'rgba(229, 224, 216, 0.85)',
'itemSelectedColor': '#fff',
'colorBgElevated': 'rgba(229, 224, 216, 0.85)',
},
dark: {
'--primary-slider-bg': 'rgb(36, 37, 37)',
'--primary-header-bg': 'rgb(36, 37, 37)',
'--primary-shadow': 'rgba(13, 13, 13, 0.65)',
'--primary-slider-trigger-border': '#fff',
'--primary-sider-trigger-text-color': '#fff',
'--primary-header-text-color': '#fff',
'--primary-title-text-color': '#fff',
'--primary-content-bg': '#1d1d1d',
'itemSelectedBg': 'rgb(24, 144, 255)',
'colorItemBgSelected': '#fff',
'itemActiveBg': '#fff',
'horizontalItemSelectedBg': '#fff',
'itemColor': 'rgba(229, 224, 216, 0.85)',
'itemHoverColor': 'rgba(229, 224, 216, 0.85)',
'itemSelectedColor': '#fff',
'colorBgElevated': 'rgba(229, 224, 216, 0.85)',
},
}
}
if(layout === 'topleft'){
return {
light: {
'--primary-slider-bg': '#fff',
'--primary-header-bg': '#fff',
'--primary-shadow': 'rgba(0,21,41,.12)',
'--primary-slider-trigger-border': 'rgba(0,0,0,.06)',
'--primary-sider-trigger-text-color': '#1d1d1d',
'--primary-header-text-color': '#1d1d1d',
'--primary-title-text-color': '#1d1d1d',
'--primary-content-bg': '#f5f5f5',
'itemSelectedBg': '#e6f7ff',
'colorItemBgSelected': 'rgba(0, 0, 0, 0.06)',
'itemActiveBg': '#e6f7ff',
'horizontalItemSelectedBg': 'rgba(0, 0, 0, 0.06)',
'itemColor': 'rgba(0, 0, 0, 0.65)',
'itemHoverColor': 'rgba(0, 0, 0, 0.85)',
'itemSelectedColor': 'rgb(24, 144, 255)',
'colorBgElevated': '#fff',
},
dark: {
'--primary-slider-bg': 'rgb(36, 37, 37)',
'--primary-header-bg': 'rgb(36, 37, 37)',
'--primary-shadow': 'rgba(13, 13, 13, 0.65)',
'--primary-slider-trigger-border': '#fff',
'--primary-sider-trigger-text-color': '#fff',
'--primary-header-text-color': '#fff',
'--primary-title-text-color': '#fff',
'--primary-content-bg': '#1d1d1d',
'itemSelectedBg': 'rgb(24, 144, 255)',
'colorItemBgSelected': 'rgb(36, 37, 37)',
'itemActiveBg': '#fff',
'horizontalItemSelectedBg': 'rgb(36, 37, 37)',
'itemColor': 'rgba(229, 224, 216, 0.85)',
'itemHoverColor': 'rgba(229, 224, 216, 0.85)',
'itemSelectedColor': '#fff',
'colorBgElevated': 'rgba(229, 224, 216, 0.85)',
},
}
}
if(layout === 'mix'){
return {
light: {
'--primary-slider-bg': '#fff',
'--primary-header-bg': 'rgb(36, 37, 37)',
'--primary-shadow': 'rgba(0,21,41,.08)',
'--primary-slider-trigger-border': 'rgba(0,0,0,.06)',
'--primary-sider-trigger-text-color': 'rgb(36, 37, 37)',
'--primary-header-text-color': '#fff',
'--primary-title-text-color': '#fff',
'--primary-content-bg': '#f5f5f5',
'itemSelectedBg': '#e6f7ff',
'colorItemBgSelected': 'rgba(0, 0, 0, 0.06)',
'itemActiveBg': '#e6f7ff',
'horizontalItemSelectedBg': 'rgba(0, 0, 0, 0.06)',
'itemColor': 'rgba(0, 0, 0, 0.65)',
'itemHoverColor': 'rgba(0, 0, 0, 0.85)',
'itemSelectedColor': 'rgb(24, 144, 255)',
'colorBgElevated': '#fff',
},
dark: {
'--primary-slider-bg': 'rgb(36, 37, 37)',
'--primary-header-bg': 'rgb(15, 28, 41)',
'--primary-shadow': 'rgba(13, 13, 13, 0.65)',
'--primary-slider-trigger-border': '#fff',
'--primary-sider-trigger-text-color': '#fff',
'--primary-header-text-color': '#fff',
'--primary-title-text-color': '#fff',
'--primary-content-bg': '#1d1d1d',
'itemSelectedBg': 'rgb(24, 144, 255)',
'colorItemBgSelected': '#fff',
'itemActiveBg': '#fff',
'horizontalItemSelectedBg': '#fff',
'itemColor': 'rgba(229, 224, 216, 0.85)',
'itemHoverColor': 'rgba(229, 224, 216, 0.85)',
'itemSelectedColor': '#fff',
'colorBgElevated': 'rgba(229, 224, 216, 0.85)',
},
}
}
}
token自定义BasicLayouts颜色
import BasicLayouts from '@antdp/basic-layouts';
import './index.css';
export default () => {
return (
<BasicLayouts
projectName="Ant Design Pro"
theme="light"
layout="slider"
token={{
menu: {
// menu 的背景颜色
colorMenuBackground: '#004FD9',
// menuItem 的 hover 背景颜色
colorBgMenuItemHover: 'rgba(0,0,0,0.06)',
// menuItem 的选中背景颜色
colorBgMenuItemSelected: 'rgba(0,0,0,0.15)',
// menuItem 的字体颜色
colorTextMenu: 'rgba(255,255,255,0.75)',
// menuItem hover 的选中字体颜色
colorTextMenuActive: 'rgba(255,255,255,0.95)',
// menuItem 的选中字体颜色
colorTextMenuSelected: '#fff',
// colorBgMenuItemCollapsedElevated
colorBgMenuItemCollapsedElevated: 'rgba(0,0,0,0.85)',
// 菜单底部操作栏boderTopColor
triggerColor: '#fff',
// 菜单底部操作栏字体颜色
triggerTextColor: '#fff',
},
header: {
// 头部背景色
colorHeaderBackground: '#fff',
// 头部文字颜色
headerTextColor: '#000',
},
// 项目名称颜色
titleColor: '#fff',
}}
/>
)
};
菜单国际化设置
import BasicLayouts from '@antdp/basic-layouts';
import { useIntl,SelectLang } from '@umijs/max';
const Demo = () => {
return (
<BasicLayouts
projectName="Ant Design Pro"
intlLanguage={useIntl()}
topRightLanguage={<SelectLang />}
/>
)
};
export default Demo
配置头部右侧菜单
import BasicLayouts from '@antdp/basic-layouts';
export default () => {
return (
<BasicLayouts
projectName="Ant Design Pro"
topRightMenu={[
{
title: '个人中心',
icon: <UserOutlined />,
onClick: () => {},
},
{
title: '个人设置',
link: '/setting/property',
icon: <SettingOutlined />,
},
{
divider: true,
},
{
title: '退出登录',
icon: <LogoutOutlined />,
onClick: () => {
logout();
},
},
]}
/>
)
};
Message
由于antd 5.x需全局包裹App,引用message组件。我们在basic-layouts下也进行了注册。
方法一
import { App } from 'antd';
import React from 'react';
const MyPage = () => {
const { message, notification, modal } = App.useApp();
message.success('Good!');
notification.info({ message: 'Good' });
modal.warning({ title: 'Good' });
// ....
// other message, notification, modal static function
return <div>Hello word</div>;
};
export default MyPage;
方法二
import { Button, Space } from 'antd';
import React from 'react';
import { message } from '@antdp/basic-layouts';
export default () => {
const showMessage = () => {
message.success('Success!');
};
return (
<Space>
<Button type="primary" onClick={showMessage}>
Open message
</Button>
</Space>
);
};
API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
logo | 项目logo | string | - |
projectName | 项目名称 | React.ReactNode | - |
children | 自定义内容 | React.ReactNode | - |
intlLanguage | 国际化语言转换方法 | IntlShape | |
topRightMenu | 头像下拉菜单 | TopRightMenuProps[] | - |
bodyPadding | 设置内容区域补白,默认 14px | number | - |
topRightLanguage | 顶部右方 | React.ReactNode | - |
siderWidth | 置最左边菜单宽度 | number | 180 |
profile | 用户信息显示 | {avatar?: string;name?: string} | - |
theme | 明暗主题 | dark \| light | light |
className | 样式 | string | - |
layout | 导航菜单模式,slider:右侧导航,topleft:顶部左侧导航,mix:混合导航 | LayoutModel | mix |
token | 导航和头部样式集合 | TokenProps | - |
TopRightMenuProps
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
icon | 图标 | React.ReactNode | - |
title | 标题 | React.ReactNode | - |
link | 链接 | string | - |
divider | 是否有下划线 | boolean | - |
onClick | 点击事件 | IntlShape |
TokenProps
export interface TokenProps {
menu?: {
colorMenuBackground?: string;
colorBgMenuItemHover?: string;
colorBgMenuItemSelected?: string;
colorTextMenu?: string;
colorTextMenuActive?: string;
colorTextMenuSelected?: string;
colorBgMenuItemCollapsedElevated?: string;
triggerColor?: string;
triggerTextColor?: string;
};
header?: {
colorHeaderBackground?: string;
headerTextColor?: string;
};
titleColor?: string;
shadowColor?: string;
contentBackground?: string;
}
22 days ago
22 days ago
22 days ago
5 months ago
6 months ago
8 months ago
11 months ago
11 months ago
11 months ago
11 months ago
10 months ago
11 months ago
10 months ago
10 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
1 year ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago