mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 05:05:48 +08:00
Code Issues Actions 43 Packages Projects Releases Wiki Activity

docs: add ProComponents cards (#33647)

Browse Source 
* merge

* merge

* docs: add ProComponents cards

Co-authored-by: 期贤 <qixian.cs@antgroup.com>
This commit is contained in:
陈帅 2022-01-11 10:51:45 +08:00 committed by GitHub
parent b18c09cf32
commit 0eedd0ba7e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 96 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
site/theme/template/Content/ComponentOverview.jsx
View File

@ -104,11 +104,28 @@ const ComponentOverview = ({
const url = `${component.filename
.replace(/(\/index)?((\.zh-cn)|(\.en-us))?\.md$/i, '')
.toLowerCase()}/`;
const href = getLocalizedPathname(url, locale === 'zh-CN', location.query);
// 如果是 https 就不用处理了
const href = url.startsWith('http')
? url
: getLocalizedPathname(url, locale === 'zh-CN', location.query);
/** Link 不能跳转到外链 */
const ComponentLink = !url.startsWith('http') ? Link : 'a';
return (
<Col xs={24} sm={12} lg={8} xl={6} key={component.title}>
<Link to={href} onClick={() => onClickCard(href.onClickCard)}>
<ComponentLink
to={href}
href={href}
onClick={() => onClickCard(href.onClickCard)}
>
<Card
bodyStyle={{
backgroundRepeat: 'no-repeat',
backgroundPosition: 'bottom right',
backgroundImage: `url(${component.tag})`,
}}
size="small"
className="components-overview-card"
title={
@ -121,7 +138,7 @@ const ComponentOverview = ({
<img src={component.cover} alt={component.title} />
</div>
</Card>
</Link>
</ComponentLink>
</Col>
);
})}

77
site/theme/template/Content/MainContent.jsx
View File

@ -373,13 +373,84 @@ class MainContent extends Component {
renderMainContent({ theme, setIframeTheme }) {
const { localizedPageData, demos, location } = this.props;
if (location.pathname.includes('components/overview')) {
const type = utils.isZhCN(location.pathname) ? '重型组件' : 'ProComponents';
return (
<ComponentOverview
{...this.props}
doc={localizedPageData}
componentsData={getModuleData(this.props).filter(
({ meta }) => meta.category === 'Components',
)}
componentsData={getModuleData(this.props)
.filter(({ meta }) => meta.category === 'Components')
.concat([
{
meta: {
category: 'Components',
cover:
'https://gw.alipayobjects.com/zos/antfincdn/4n5H%24UX%24j/bianzu%2525204.svg',
filename: 'https://procomponents.ant.design/components/layout',
subtitle: '高级布局',
title: 'ProLayout',
type,
tag: 'https://gw.alipayobjects.com/zos/antfincdn/OG4ajVYzh/bianzu%2525202.svg',
},
},
{
meta: {
category: 'Components',
cover: 'https://gw.alipayobjects.com/zos/antfincdn/mStei5BFC/bianzu%2525207.svg',
filename: 'https://procomponents.ant.design/components/form',
subtitle: '高级表单',
title: 'ProForm',
type,
tag: 'https://gw.alipayobjects.com/zos/antfincdn/OG4ajVYzh/bianzu%2525202.svg',
},
},
{
meta: {
category: 'Components',
cover:
'https://gw.alipayobjects.com/zos/antfincdn/AwU0Cv%26Ju/bianzu%2525208.svg',
filename: 'https://procomponents.ant.design/components/table',
subtitle: '高级表格',
title: 'ProTable',
type,
tag: 'https://gw.alipayobjects.com/zos/antfincdn/OG4ajVYzh/bianzu%2525202.svg',
},
},
{
meta: {
category: 'Components',
cover:
'https://gw.alipayobjects.com/zos/antfincdn/H0%26LSYYfh/bianzu%2525209.svg',
filename: 'https://procomponents.ant.design/components/descriptions',
subtitle: '高级定义列表',
title: 'ProDescriptions',
type,
tag: 'https://gw.alipayobjects.com/zos/antfincdn/OG4ajVYzh/bianzu%2525202.svg',
},
},
{
meta: {
category: 'Components',
cover: 'https://gw.alipayobjects.com/zos/antfincdn/uZUmLtne5/bianzu%2525209.svg',
filename: 'https://procomponents.ant.design/components/list',
subtitle: '高级列表',
title: 'ProList',
type,
tag: 'https://gw.alipayobjects.com/zos/antfincdn/OG4ajVYzh/bianzu%2525202.svg',
},
},
{
meta: {
category: 'Components',
cover: 'https://gw.alipayobjects.com/zos/antfincdn/N3eU432oA/bianzu%2525209.svg',
filename: 'https://procomponents.ant.design/components/list',
subtitle: '可编辑表格',
title: 'EditableProTable',
type,
tag: 'https://gw.alipayobjects.com/zos/antfincdn/OG4ajVYzh/bianzu%2525202.svg',
},
},
])}
/>
);
}

2
site/themeConfig.js
View File

@ -36,6 +36,8 @@ module.exports = {
原则: 1,
Principles: 1,
全局规则: 2,
重型组件: 8,
ProComponents: 8,
'Global Rules': 2,
模板文档: 3,
'Template Document': 3,