ProLayout 新版本欢迎试用

chenshuai2144 commented 2 years ago

基于 css in js 的方案让我们可以动态的设置布局的主题，以下是支持自定的token 列表。

Token

Token 是一种设计系统的基本元素，可以使用 Token 快速的修改组件库的基础样式。Layout 中可以通过 token 属性来配置这些颜色。

默认的 token 部分来自于 antd，可能会有一些改动，以下是 layout 依赖的部分。

token	说明	默认值
layoutBgColor	layout 的背景颜色	`#f0f2f5`
appListIconTextColor	跨站点应用的图标颜色	`#666`
appListIconHoverTextColor	跨站点应用的图标 hover 颜色	`rgba(0, 0, 0, 0.65)`
appListIconHoverTextColor	跨站点应用的图标 hover 背景颜色	`rgba(0, 0, 0, 0.04)`

Sider Token 是侧边菜单的色值，与顶部菜单不同。

token	说明	默认值
menuBackgroundColor	menu 的背景颜色	`transparent`
menuTitleTextColor	sider 的标题字体颜色	`headingColor`
menuItemDividerColor	menuItem 分割线的颜色	`borderColorSplit`
menuSubArrowColor	menuItem 的箭头颜色	`rgba(0, 0, 0, 0.25)`
menuTextColor	menuItem 的字体颜色	`textColor`
menuTextColorSecondary	menu 的二级字体颜色，比如 footer 和 action 的 icon	`textColor`
menuSelectedTextColor	menuItem 的选中字体颜色	`rgb(0,0,0)`
menuItemHoverBgColor	menuItem 的 hover 背景颜色	`rgba(90, 75, 75, 0.03)`
menuItemSelectedBgColor	menuItem 的选中背景颜色	`rgba(0, 0, 0, 0.04)`
menuItemCollapsedHoverBgColor	收起 menuItem 的 hover 背景颜色	`rgba(0, 145, 255, 0.1)`
menuItemCollapsedSelectedBgColor	收起 menuItem 的选中背景颜色	`rgba(0, 145, 255, 0.08)`
collapsedButtonBgColor	展开收起按钮背景颜色	`#fff`
collapsedButtonTextColor	展开收起按钮 hover 字体颜色	`menuTextColorSecondary`
collapsedButtonHoverTextColor	展开收起按钮 hover 时字体颜色	`menuTextColor`

token	说明	默认值
headerTitleColor	sider 的标题字体颜色	`headingColor`
menuTextColor	menuItem 的字体颜色	`textColor`
menuTextColorSecondary	menu 的二级字体颜色，比如 footer 和 action 的 icon	`textColor`
menuSelectedTextColor	menuItem 的选中字体颜色	`rgb(0,0,0)`
menuItemHoverBgColor	menuItem 的 hover 背景颜色	`rgba(90, 75, 75, 0.03)`
menuItemSelectedBgColor	menuItem 的选中背景颜色	`rgba(0, 0, 0, 0.04)`
menuItemCollapsedHoverBgColor	收起 menuItem 的 hover 背景颜色	`rgba(0, 145, 255, 0.1)`
menuItemCollapsedSelectedBgColor	收起 menuItem 的选中背景颜色	`rgba(0, 145, 255, 0.08)`
rightActionsItemTextColor	右上角字体颜色	`textColorSecondary`
rightActionsItemHoverBgColor	右上角选中的 hover 颜色	`rgba(0, 0, 0, 0.03)`

token	说明	默认值
pageContainerContentMargin	pageContainer 自带的 margin	`#fff`
pageContainerBgColor	pageContainer 的背景颜色	`transparent`
pageContainerFixedBgColor	pageContainer 被固定时的背景颜色	`#FFF`

测试版本暂时包含这部分内容，未来还会增加。

我们可以使用 next 标签来安装最新版本的 ProLayout。

yarn add @ant-design/pro-layout@next
npm i @ant-design/pro-layout@next --save

新版本的 ProLayout 主要是样式上的升级， API 变化不是很大的。

修改的 API 列表

参数	说明	类型	默认值
avatarProps	layout 的头像设置，不同的 layout 放在不同的位置	`[AvatarProps](https://ant.design/components/avatar-cn/)`	-
actionsRender	自定义操作列表	`(layoutProps)=>ReactNode[]`	-
appList	跨站点导航列表	`{ icon, title, desc:, url }[]`	-