@antdp/basic-layouts
Advanced tools
入口公共界面
$ 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
import React from 'react';
import BasicLayouts from '@antdp/basic-layouts';
const Demo = () => {
return (
<BasicLayouts
layout="slider"
/>
)
};
import React from 'react';
import BasicLayouts from '@antdp/basic-layouts';
const Demo = () => {
return (
<BasicLayouts
layout="mix"
/>
)
};
import React from 'react';
import BasicLayouts from '@antdp/basic-layouts';
const Demo = () => {
return (
<BasicLayouts
layout="topleft"
/>
)
};
import BasicLayouts from '@antdp/basic-layouts';
export default () => {
return (
<BasicLayouts
theme="light"
projectName="Ant Design Pro"
/>
)
};
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)',
},
}
}
}
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();
},
},
]}
/>
)
};
由于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>
);
};
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| 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 | - |
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| icon | 图标 | React.ReactNode | - |
| title | 标题 | React.ReactNode | - |
| link | 链接 | string | - |
| divider | 是否有下划线 | boolean | - |
| onClick | 点击事件 | IntlShape |
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;
}
FAQs
We found that @antdp/basic-layouts demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.