forked from ant-design/pro-components
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(card): pro-card support Group and Divider (ant-design#992)
* feat: add divider and group * chore(card): update card snapshot * chore(card): move sub components to dir * chore(card): sub components
- Loading branch information
Showing
11 changed files
with
381 additions
and
98 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
@import (reference) '~antd/lib/style/themes/default'; | ||
@pro-card-prefix-cls: ~'@{ant-prefix}-pro-card'; | ||
|
||
@gradient-min: fade(@card-skeleton-bg, 20%); | ||
@gradient-max: fade(@card-skeleton-bg, 40%); | ||
|
||
.@{pro-card-prefix-cls} { | ||
&-loading { | ||
overflow: hidden; | ||
} | ||
|
||
&-loading &-body { | ||
user-select: none; | ||
} | ||
|
||
&-loading-content { | ||
p { | ||
margin: 0; | ||
} | ||
} | ||
|
||
&-loading-block { | ||
height: 14px; | ||
margin: 4px 0; | ||
background: linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min); | ||
background-size: 600% 600%; | ||
border-radius: @card-radius; | ||
animation: card-loading 1.4s ease infinite; | ||
} | ||
} | ||
|
||
@keyframes card-loading { | ||
0%, | ||
100% { | ||
background-position: 0 50%; | ||
} | ||
50% { | ||
background-position: 100% 50%; | ||
} | ||
} |
2 changes: 1 addition & 1 deletion
2
packages/card/src/cardLoading.tsx → ...card/src/components/CardLoading/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
@import (reference) '~antd/lib/style/themes/default'; | ||
@pro-card-prefix-cls: ~'@{ant-prefix}-pro-card'; | ||
|
||
.@{pro-card-prefix-cls} { | ||
// 分隔线 | ||
&-divider { | ||
&-line { | ||
width: @border-width-base; | ||
margin: @padding-lg @padding-xs; | ||
background-color: @border-color-split; | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import React, { useContext } from 'react'; | ||
import { ConfigProvider } from 'antd'; | ||
import classNames from 'classnames'; | ||
|
||
import './index.less'; | ||
|
||
export interface ProCardDividerProps { | ||
/** | ||
* @description 自定义前缀 | ||
* @ignore | ||
*/ | ||
prefixCls?: string; | ||
/** | ||
* @description 样式 | ||
* @ignore | ||
*/ | ||
style?: React.CSSProperties; | ||
/** | ||
* @description className | ||
* @ignore | ||
*/ | ||
className?: string; | ||
} | ||
|
||
const ProCardDivider: React.FC<ProCardDividerProps> = (props) => { | ||
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); | ||
const prefixCls = getPrefixCls('pro-card-divider'); | ||
|
||
const { className, style = {}, children } = props; | ||
|
||
const classString = classNames(prefixCls, className, { | ||
[`${prefixCls}-line`]: children === undefined, | ||
}); | ||
|
||
return ( | ||
<div className={classString} style={style}> | ||
{children} | ||
</div> | ||
); | ||
}; | ||
|
||
export default ProCardDivider; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
@import (reference) '~antd/lib/style/themes/default'; | ||
@pro-card-prefix-cls: ~'@{ant-prefix}-pro-card'; | ||
|
||
.@{pro-card-prefix-cls} { | ||
&-tabs { | ||
// 上 | ||
.@{ant-prefix}-tabs-top > .@{ant-prefix}-tabs-nav { | ||
margin-bottom: 0; | ||
.@{ant-prefix}-tabs-nav-list { | ||
padding-left: @padding-md; | ||
margin-top: @margin-xs; | ||
} | ||
} | ||
|
||
// 下 | ||
.@{ant-prefix}-tabs-bottom > .@{ant-prefix}-tabs-nav { | ||
margin-top: 0; | ||
.@{ant-prefix}-tabs-nav-list { | ||
padding-left: @padding-md; | ||
} | ||
} | ||
|
||
// 左 | ||
.@{ant-prefix}-tabs-left { | ||
.@{ant-prefix}-tabs-content-holder { | ||
.@{ant-prefix}-tabs-content { | ||
.@{ant-prefix}-tabs-tabpane { | ||
padding-left: 0; | ||
} | ||
} | ||
} | ||
} | ||
// 直接子元素才设置 | ||
.@{ant-prefix}-tabs-left > .@{ant-prefix}-tabs-nav { | ||
margin-right: 0; | ||
.@{ant-prefix}-tabs-nav-list { | ||
padding-top: @padding-md; | ||
} | ||
} | ||
|
||
// 右 | ||
.@{ant-prefix}-tabs-right { | ||
.@{ant-prefix}-tabs-content-holder { | ||
.@{ant-prefix}-tabs-content { | ||
.@{ant-prefix}-tabs-tabpane { | ||
padding-right: 0; | ||
} | ||
} | ||
} | ||
} | ||
// 直接子元素 | ||
.@{ant-prefix}-tabs-right > .@{ant-prefix}-tabs-nav { | ||
.@{ant-prefix}-tabs-nav-list { | ||
padding-top: @padding-md; | ||
} | ||
} | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
/** | ||
* uuid: ff1e143f | ||
* title: 分组指标 | ||
*/ | ||
|
||
import React from 'react'; | ||
import { Statistic } from 'antd'; | ||
import ProCard from '@ant-design/pro-card'; | ||
|
||
const { Divider } = ProCard; | ||
|
||
export default () => { | ||
return ( | ||
<ProCard.Group title="核心指标"> | ||
<ProCard> | ||
<Statistic title="今日UV" value={79.0} precision={2} /> | ||
</ProCard> | ||
<Divider /> | ||
<ProCard> | ||
<Statistic title="冻结金额" value={112893.0} precision={2} /> | ||
</ProCard> | ||
<Divider /> | ||
<ProCard> | ||
<Statistic title="信息完整度" value={93} suffix="/ 100" /> | ||
</ProCard> | ||
<ProCard> | ||
<Statistic title="冻结金额" value={112893.0} /> | ||
</ProCard> | ||
</ProCard.Group> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.