pro-components
pro-components copied to clipboard
ProLayout -“商业品质,包容,生长”
基于 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 中找到我们。
⚡️ Deploying PR Preview...
size-limit report 📦
Path | Size |
---|---|
packages/card/dist/card.js | 22.28 KB (0%) |
packages/descriptions/dist/descriptions.js | 28.24 KB (0%) |
packages/field/dist/field.js | 102.99 KB (0%) |
packages/form/dist/form.js | 207.21 KB (0%) |
packages/layout/dist/layout.js | 164.53 KB (+16.97% 🔺) |
packages/list/dist/list.js | 165.54 KB (+0.54% 🔺) |
packages/provider/dist/provider.js | 25.67 KB (0%) |
packages/skeleton/dist/skeleton.js | 5.31 KB (0%) |
packages/table/dist/table.js | 104.75 KB (0%) |
This pull request introduces 3 alerts when merging 19c9730a8a0c030b0c3c0a128913eccab34a0871 into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com
new alerts:
- 2 for Useless conditional
- 1 for Overwritten property
Codecov Report
Merging #4734 (4bb3e3f) into master (4bb3e3f) will not change coverage. The diff coverage is
n/a
.
:exclamation: Current head 4bb3e3f differs from pull request most recent head c9cec43. Consider uploading reports for the commit c9cec43 to get more accurate results
@@ Coverage Diff @@
## master #4734 +/- ##
=======================================
Coverage 99.52% 99.52%
=======================================
Files 208 208
Lines 6927 6927
Branches 2467 2467
=======================================
Hits 6894 6894
Misses 33 33
Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.
This pull request introduces 3 alerts when merging fc6be746c45c439f979f673f4407e0aaba34bbb2 into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com
new alerts:
- 2 for Useless conditional
- 1 for Overwritten property
This pull request introduces 3 alerts when merging 395ec023f730cbb5f56cdf2283cd9d6ba62d86ea into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com
new alerts:
- 2 for Useless conditional
- 1 for Overwritten property
This pull request introduces 3 alerts when merging e7ba49c90f87fe9bf034d1ba2b205333c1a0fdff into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com
new alerts:
- 2 for Useless conditional
- 1 for Overwritten property
This pull request introduces 3 alerts when merging d0f29f85303717164597ec5a9369b9cb1c034caa into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com
new alerts:
- 2 for Useless conditional
- 1 for Overwritten property
This pull request introduces 3 alerts when merging 911fede5443473b11b9f1ed9828d8c1fc037bb3a into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com
new alerts:
- 2 for Useless conditional
- 1 for Overwritten property
设计思路和设计稿有没?
This pull request introduces 3 alerts when merging 0c9224f1301fe846fb2ddb03f07392388f9b216f into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com
new alerts:
- 2 for Useless conditional
- 1 for Overwritten property
This pull request introduces 3 alerts when merging 927f306b12a4575107bee71df91778d179ee6cb6 into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com
new alerts:
- 2 for Useless conditional
- 1 for Overwritten property
This pull request introduces 3 alerts when merging df01165f1db28d0d0e8566fb3a20c80abcee5937 into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com
new alerts:
- 2 for Useless conditional
- 1 for Overwritten property
This pull request introduces 3 alerts when merging 9d35894f16380d8b7a21ff89aa79cf29a25318a5 into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com
new alerts:
- 2 for Useless conditional
- 1 for Overwritten property
This pull request introduces 3 alerts when merging e9cb0d2fd8bfeec7266eb07fdb6aacefb78cda3b into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com
new alerts:
- 2 for Useless conditional
- 1 for Overwritten property
This pull request introduces 3 alerts when merging 463d78ad12440c49e861b8642f3ef92a7bd4088e into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com
new alerts:
- 2 for Useless conditional
- 1 for Overwritten property
This pull request introduces 3 alerts when merging 3500237a401fc2b85a5f0131fbf9f60368b859dd into 8629397fb3de0d6148c40eeedddae97dca2cf0e0 - view on LGTM.com
new alerts:
- 2 for Useless conditional
- 1 for Overwritten property
This pull request introduces 3 alerts when merging 59a074461779f1346647041dbcc744d357d3c790 into 66f815ef13a0a7e42ee7f2376740634bce1bf513 - view on LGTM.com
new alerts:
- 2 for Useless conditional
- 1 for Overwritten property
This pull request introduces 3 alerts when merging e80a8f088cbad9d2ebca5b5166edcecb32727b7f into 66f815ef13a0a7e42ee7f2376740634bce1bf513 - view on LGTM.com
new alerts:
- 2 for Useless conditional
- 1 for Overwritten property
This pull request introduces 3 alerts when merging 2b482400e5b39ed12e2eb2df79eece9f0781b1a1 into 9173858d5d869272c1b155f725887f7e6d635743 - view on LGTM.com
new alerts:
- 2 for Useless conditional
- 1 for Overwritten property
This pull request introduces 3 alerts when merging 365e49b0c65101317108e72d05f7d65db8cc37a3 into 9173858d5d869272c1b155f725887f7e6d635743 - view on LGTM.com
new alerts:
- 2 for Useless conditional
- 1 for Overwritten property
This pull request introduces 3 alerts when merging 19faf385e4e83f91c9ba4e16c993ccbb2b22e7ab into 9173858d5d869272c1b155f725887f7e6d635743 - view on LGTM.com
new alerts:
- 2 for Useless conditional
- 1 for Overwritten property
This pull request introduces 3 alerts when merging f4cbf5259246d81bdd65d6ff8b782c362813e7d2 into 9173858d5d869272c1b155f725887f7e6d635743 - view on LGTM.com
new alerts:
- 2 for Useless conditional
- 1 for Overwritten property
This pull request introduces 3 alerts when merging 6b9010e9ee72439435fd6576b5f4b254b8d5f7d0 into 2828fac182e110c11e053085cceac4051c0835c5 - view on LGTM.com
new alerts:
- 2 for Useless conditional
- 1 for Overwritten property
This pull request introduces 3 alerts when merging 2d886afddb79d5d3b3006b0aa70cc02f2e8ce8f8 into 2828fac182e110c11e053085cceac4051c0835c5 - view on LGTM.com
new alerts:
- 2 for Useless conditional
- 1 for Overwritten property
This pull request introduces 3 alerts when merging 1320d0e8704469ec5b98abc5cb9f8abdf71b561b into 2828fac182e110c11e053085cceac4051c0835c5 - view on LGTM.com
new alerts:
- 2 for Useless conditional
- 1 for Overwritten property
This pull request introduces 3 alerts when merging a4c59a2bcf9e8663abbd9807ace8785b6bb871c3 into c7c584ddc3b425bf52508d9c0cb9286ae42aed87 - view on LGTM.com
new alerts:
- 2 for Useless conditional
- 1 for Overwritten property
This pull request introduces 2 alerts when merging 81ca764ae0eef0c855c771b4a857333fbdab61c0 into 016e1450e5b633608ef8047ea2792f136ddf9e4d - view on LGTM.com
new alerts:
- 1 for Useless conditional
- 1 for Overwritten property
This pull request introduces 2 alerts when merging b20807d3e9ba29d9c211d7e5005359f16e773234 into 016e1450e5b633608ef8047ea2792f136ddf9e4d - view on LGTM.com
new alerts:
- 1 for Useless conditional
- 1 for Overwritten property
This pull request introduces 2 alerts when merging b947519534c4c6e7bce51eeddc20b0701e9e335a into 016e1450e5b633608ef8047ea2792f136ddf9e4d - view on LGTM.com
new alerts:
- 1 for Useless conditional
- 1 for Overwritten property