mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 03:59:01 +08:00
docs: Adjust res page style (#37210)
* docs: Adjust res page style * chore: update check logic
This commit is contained in:
二货爱吃白萝卜
GitHub
parent
7dbd6cee27
commit
c56596ee9b
@ -18,34 +18,42 @@ Please find below some of the design resources and tools about Ant Design that w
|
||||
- https://gw.alipayobjects.com/zos/basement_prod/048ee28f-2c80-4d15-9aa3-4f5ddac50465.svg
|
||||
- Sketch Symbols for Desktop
|
||||
- https://gw.alipayobjects.com/os/bmw-prod/a5ff1d86-44cd-4b86-92f8-daab59cba5b7.sketch
|
||||
- Official
|
||||
- Sketch Symbols (Dark)
|
||||
- https://gw.alipayobjects.com/zos/basement_prod/048ee28f-2c80-4d15-9aa3-4f5ddac50465.svg
|
||||
- Sketch Symbols for Desktop with dark theme
|
||||
- https://gw.alipayobjects.com/os/bmw-prod/6b670a1c-26e3-4379-9c86-7a2b95e170e5.sketch
|
||||
- Official
|
||||
- Mobile Components
|
||||
- https://gw.alipayobjects.com/zos/basement_prod/c0c3852c-d245-4330-886b-cb02ef49eb6d.svg
|
||||
- Sketch Symbols File for Mobile
|
||||
- https://gw.alipayobjects.com/os/bmw-prod/d6266aef-25b7-4892-b275-ce214121831c.sketch
|
||||
- Official
|
||||
- Ant Design Pro
|
||||
- https://gw.alipayobjects.com/zos/basement_prod/5edc7f4d-3302-4710-963b-7b6c77ea8d06.svg
|
||||
- Common Templates and Pages
|
||||
- https://gw.alipayobjects.com/os/bmw-prod/22208f9d-f8c5-4d7c-b87a-fec290e96527.sketch
|
||||
- Official
|
||||
- Ant Design Library
|
||||
- https://gw.alipayobjects.com/zos/basement_prod/90740380-bbb7-4329-95e5-64533934c6cf.svg
|
||||
- A powerful Axure library
|
||||
- http://library.ant.design
|
||||
- Official
|
||||
- Kitchen
|
||||
- https://gw.alipayobjects.com/zos/basement_prod/d475d063-2754-4442-b9db-5d164e06acc9.svg
|
||||
- A Sketch plugin collection
|
||||
- http://kitchen.alipay.com
|
||||
- Official
|
||||
- Ant Design Landing
|
||||
- https://gw.alipayobjects.com/zos/basement_prod/b443f4be-5116-49b7-873f-a7c8502b8f0e.svg
|
||||
- Landing Templates
|
||||
- https://landing.ant.design/docs/download-cn
|
||||
- Official
|
||||
- Ant UX
|
||||
- https://gw.alipayobjects.com/zos/basement_prod/51682163-e01a-46fe-810c-ac0062379717.svg
|
||||
- A set of page logic prototype libraries
|
||||
- http://ux.ant.design
|
||||
- Official
|
||||
- Ant Design Prototype (xiaopiu)
|
||||
- https://gw.alipayobjects.com/zos/basement_prod/77e6a9ae-24a9-4be6-be42-f7fa8ee0eecf.svg
|
||||
- Online library and prototype
|
||||
@ -66,6 +74,7 @@ Please find below some of the design resources and tools about Ant Design that w
|
||||
- https://gw.alipayobjects.com/zos/basement_prod/a9dc586a-fe0a-4c7d-ab4f-f5ed779b963d.svg
|
||||
- Sketch Symbols for Chart
|
||||
- https://gw.alipayobjects.com/os/bmw-prod/704968a5-2641-484e-9f65-c2735b2c0287.sketch
|
||||
- Official
|
||||
- MockingBot
|
||||
- https://cdn.modao.cc/logo_mockingbot.svg
|
||||
- Rich component resources
|
||||
|
||||
@ -18,34 +18,42 @@ toc: false
|
||||
- https://gw.alipayobjects.com/zos/basement_prod/048ee28f-2c80-4d15-9aa3-4f5ddac50465.svg
|
||||
- 桌面组件 Sketch 模板包
|
||||
- https://gw.alipayobjects.com/os/bmw-prod/82c08c51-9993-4568-90c1-249c8301c0af.sketch
|
||||
- 官方
|
||||
- Sketch 组件包 (暗色)
|
||||
- https://gw.alipayobjects.com/zos/basement_prod/048ee28f-2c80-4d15-9aa3-4f5ddac50465.svg
|
||||
- 桌面组件 Sketch 模板包，内含暗色版本的 antd 组件
|
||||
- https://gw.alipayobjects.com/os/bmw-prod/f002145c-33d9-408e-ba75-a1a68896dfa3.sketch
|
||||
- 官方
|
||||
- Mobile Components
|
||||
- https://gw.alipayobjects.com/zos/basement_prod/c0c3852c-d245-4330-886b-cb02ef49eb6d.svg
|
||||
- 移动组件 Sketch 模板
|
||||
- https://gw.alipayobjects.com/os/bmw-prod/d6266aef-25b7-4892-b275-ce214121831c.sketch
|
||||
- 官方
|
||||
- Ant Design Pro
|
||||
- https://gw.alipayobjects.com/zos/basement_prod/5edc7f4d-3302-4710-963b-7b6c77ea8d06.svg
|
||||
- 典型页面 + 通用业务模板
|
||||
- https://gw.alipayobjects.com/os/bmw-prod/22208f9d-f8c5-4d7c-b87a-fec290e96527.sketch
|
||||
- 官方
|
||||
- Ant Design Library
|
||||
- https://gw.alipayobjects.com/zos/basement_prod/90740380-bbb7-4329-95e5-64533934c6cf.svg
|
||||
- 一套强大的 Axure 部件库
|
||||
- http://library.ant.design
|
||||
- 官方
|
||||
- Kitchen
|
||||
- https://gw.alipayobjects.com/zos/basement_prod/d475d063-2754-4442-b9db-5d164e06acc9.svg
|
||||
- Sketch 工具集
|
||||
- http://kitchen.alipay.com
|
||||
- 官方
|
||||
- Ant Design Landing
|
||||
- https://gw.alipayobjects.com/zos/basement_prod/b443f4be-5116-49b7-873f-a7c8502b8f0e.svg
|
||||
- 首页模板集
|
||||
- https://landing.ant.design/docs/download-cn
|
||||
- 官方
|
||||
- Ant UX
|
||||
- https://gw.alipayobjects.com/zos/basement_prod/51682163-e01a-46fe-810c-ac0062379717.svg
|
||||
- 一套页面逻辑原型库
|
||||
- http://ux.ant.design
|
||||
- 官方
|
||||
- Ant Design 原型 (xiaopiu)
|
||||
- https://gw.alipayobjects.com/zos/basement_prod/77e6a9ae-24a9-4be6-be42-f7fa8ee0eecf.svg
|
||||
- 可在线编辑的组件库和交互原型
|
||||
@ -62,6 +70,7 @@ toc: false
|
||||
- https://gw.alipayobjects.com/zos/basement_prod/a9dc586a-fe0a-4c7d-ab4f-f5ed779b963d.svg
|
||||
- 桌面组件 Chart 模板包
|
||||
- https://gw.alipayobjects.com/os/bmw-prod/704968a5-2641-484e-9f65-c2735b2c0287.sketch
|
||||
- 官方
|
||||
- 墨刀原型设计
|
||||
- https://cdn.modao.cc/logo_mockingbot.svg
|
||||
- 内置丰富的 Ant Design 组件资源
|
||||
|
||||
@ -68,6 +68,7 @@
|
||||
|
||||
.resource-cards {
|
||||
.resource-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
@ -90,6 +91,19 @@
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.resource-card-badge {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
padding: 4px 8px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
background: rgba(0, 0, 0, 0.65);
|
||||
border-radius: 1px;
|
||||
box-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.resource-card-title {
|
||||
margin: 16px 20px 8px;
|
||||
color: #0d1a26;
|
||||
|
||||
@ -43,7 +43,7 @@ interface ResourcesProps {
|
||||
}
|
||||
|
||||
function getUnitString(unit: ContentUnit[]): string {
|
||||
if (!unit) return '';
|
||||
if (!unit || unit.length <= 1) return '';
|
||||
|
||||
const last = unit[unit.length - 1];
|
||||
return Array.isArray(last) ? getUnitString(last) : (last as string);
|
||||
@ -53,8 +53,9 @@ function toCardList([, ...items]: ContentUnit[]): ContentUnit[] {
|
||||
return [
|
||||
'div',
|
||||
{ className: 'ant-row resource-cards', style: 'margin: -12px -12px 0 -12px' },
|
||||
...items.map(([, title, [, image, description, link]]: any) => {
|
||||
...items.map(([, title, [, image, description, link, badge]]: any) => {
|
||||
let titleStr = getUnitString(title);
|
||||
const badgeStr = getUnitString(badge);
|
||||
const imageStr = getUnitString(image);
|
||||
const descStr = getUnitString(description);
|
||||
const linkStr = getUnitString(link);
|
||||
@ -90,9 +91,17 @@ function toCardList([, ...items]: ContentUnit[]): ContentUnit[] {
|
||||
: {},
|
||||
},
|
||||
],
|
||||
badgeStr &&
|
||||
badgeStr !== '-' && [
|
||||
'div',
|
||||
{
|
||||
className: 'resource-card-badge',
|
||||
},
|
||||
badgeStr,
|
||||
],
|
||||
['p', { className: 'resource-card-title' }, titleStr],
|
||||
['p', { className: 'resource-card-description' }, descStr],
|
||||
],
|
||||
].filter(c => c),
|
||||
];
|
||||
}),
|
||||
];
|
||||
@ -123,9 +132,10 @@ const Resources = (props: ResourcesProps) => {
|
||||
const { localizedPageData, location } = props;
|
||||
const { locale } = useIntl();
|
||||
|
||||
const content = React.useMemo(() => injectCards(localizedPageData.content), [
|
||||
localizedPageData.content,
|
||||
]);
|
||||
const content = React.useMemo(
|
||||
() => injectCards(localizedPageData.content),
|
||||
[localizedPageData.content],
|
||||
);
|
||||
|
||||
return (
|
||||
<div id="resources-page">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user