ProLayout 新版本欢迎试用

[chenshuai2144]

查看这里直接访问 https://next-procomponents.ant.design/components/layout

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

Token

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

默认的 token

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

token	说明	默认值
primaryColor	主色	#1677FF
errorColor	错误色	#ff4d4f
successColor	成功色	#52c41a
infoColor	通知色	#1677FF
warningColor	警告色	#faad14
headingColor	标题色	rgba(0, 0, 0, 0.85)
textColor	正文色	rgba(0, 0, 0, 0.65)
textColorSecondary	次级色	rgba(0, 0, 0, 0.45)
borderColorBase	边框基本色	#d9d9d9
borderColorSplit	分隔边框的颜色	rgba(0, 0, 0, 0.06)
borderRadiusBase	默认圆角	4px

Layout 的 token

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

Sider Token

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

Header Token

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)

pageContainer Token

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 变化不是很大的。
​

• rightContentRender修改为 avatarProps 和 actionsRender, 对头像模式做了默认抽象。
• layout=sider 模式下，header 消失，只保留了侧边栏，增大可视面积。
• layout=sider 模式下，header 消失后，右侧操作区域修改为左下角。
• 增加了 appList，用于进行多站点之前的导航。

修改的 API 列表

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

另外此次的最大改变在于样式的重写，减少了 less 的导入，所以样式覆盖的功能需要重新设置。
​

​

🙋‍ 反馈给我们

ProLayout 暂时还在测试模式，并且使用了 css in js 的技术，可能会有一些无法覆盖的角落，如果你在使用中碰到了问题，欢迎来给我们报告。
​

你可以在钉钉群 和 github 中找到我们。
​

​

​

​

[Dunqing]

Amazing😆

可以在@umijs/plugin-layout中使用吗？

[chenshuai2144]

可以的， @umijs/plugin-layout 会拿用户package.json 的问题

[leshalv]

PageContainer 区域颜色搭配上会不会太丑了

[chenshuai2144]

PageContainer 区域颜色搭配上会不会太丑了

做了 token 可以配置，设计师是想让主要内容更吸引注意力

[aikin-vip]

有没有一个在线预览的新版本呢

[Dunqing]

有没有一个在线预览的新版本呢

这里看 https://pro-components-preview-pr-4734.surge.sh/components/layout

相关pr: #4734 (comment)

[XuJin186]

PageContainer 区域颜色搭配上会不会太丑了

的确是不好看

[lukezzz]

token headerBgColor 设置无效， header background始终为transparent

[chenshuai2144]

token headerBgColor 设置无效， header background始终为transparent

升级一下最新的版本。

[lukezzz]

升级一下最新的版本。

升级了下到7.0.1-beta.2，设置 headerBgColor还是无效

[leshalv]

pro 大概什么时候换上呀？ @chenshuai2144

[chenshuai2144]

@leshalv 要等antd的新版本发布了

[wangxin305]

菜单没有选中效果了
https://6237lu.csb.app/?layout=mix&splitMenus=true

[chenshuai2144]

菜单没有选中效果了
https://6237lu.csb.app/?layout=mix&splitMenus=true

网站上看起来没问题，你有复现吗

[Dunqing]

layoutbug.mp4

看起来是一个bug

收起后打开闪了一下

[scrapstation]

移动端有适配计划吗？

[leshalv]

https://pro-components-preview-pr-4734.surge.sh/~demos/layout-base/?layout=mix&splitMenus=true

F12缩小屏幕，点击展开按钮，无法打开菜单

[shaodahong]

navTheme="dark" 好像不生效了

[leshalv]

内容区域使用 Tabs，有一个 Tab 为Form并采用固定页脚，另一个Tab 是 Table，切换到Table后，还是展示固定页脚。 @chenshuai2144

[fgprodigal]

移动端侧边栏收起后，trigger按钮样式错位且无法点击

[kaoding]

ant-design/ant-design-pro#9993

[skyunBoss]

splitMenus false时， headerBgColor生效，headerTitleColor不生效

[drizzlesconsin]

Token 对应的颜色，放出设计稿 + 标注一下多好啊！更清晰、一目了然。
现在这样对得头疼。

[drizzlesconsin]

#4741 (comment)

看这个效果图，submenuitem 文本的 margin-left: 8px; 样式，没有打包上。

[tinystorm]

token特性正式版本有了吗

[phoema]

最新的版本那个收缩按钮能够保持和老版本一样的位置吗，在左下角。
我们页面如果改动了位置，需要各种评审。
而且这个按钮位置没有必要破坏性升级吧。
如果靠自定义写一遍，纯后台程序员有点费劲。

[drizzlesconsin]

想要 menu type: group 生效，一定要这样么，感觉用起来有点麻烦。

const [pathname, setPathname] = useState('/list/xxx');

location={{
    pathname,
}}
menuItemRender={(item, dom) => (
  <div onClick={() => setPathname(item.path || '/welcome')}>
    {dom}
  </div>
)}

在旧版的 app.tsx layout 里没法用。

[yangxiaoqiao2016]

[netcore-jroger]

TS2305: Module '"@ant-design/pro-components"' has no exported member 'BasicLayoutProps'.
    1 | import React from 'react';
  > 2 | import { BasicLayoutProps, MenuDataItem } from '@ant-design/pro-components';
      |          ^^^^^^^^^^^^^^^^

@ant-design/pro-components:2.0.4

[mushroomlb]

一级菜单个数超过页面能显示的数量后没有增加省略号显示，而是覆盖了头像区域

[daifuyang]

token Sider Token 缺少 menuItem 的选中字体颜色

[arifszn]

In my case, the token is not behaving dynamically. Is there any way to achieve dynamic dark mode for the Pro Layout?

Please see my #6056 (comment).