Skip to content

Commit 5ee79c7

Browse files
myronliu347myronliu347
committed
feat(Card): add free card
1 parent 7ac35b0 commit 5ee79c7

16 files changed

+991
-146
lines changed

‎docs/card/demo/free.md

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
# 自定义卡片
2+
3+
- order: 5
4+
5+
与子组件的组合来自定义卡片样式
6+
7+
:::lang=en-us
8+
# Free Mode
9+
10+
- order: 5
11+
12+
Combination with subcomponents to customize card styles
13+
14+
:::
15+
16+
---
17+
18+
````jsx
19+
import { Card, Button } from '@alifd/next';
20+
21+
ReactDOM.render(
22+
<div>
23+
<Card
24+
className="free-card"
25+
free
26+
>
27+
<Card.Media style={{ height: 140 }} image="https://img.alicdn.com/tfs/TB1FNIOSFXXXXaWXXXXXXXXXXXX-260-188.png" />
28+
<Card.BulletHeader title="Title" subTitle="Sub Title" extra={<Button type="primary" text>Link</Button>} />
29+
<Card.CollaspeContent contentHeight="auto">
30+
Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. Ne petentium quaerendum nec, eos ex recteque mediocritatem, ex usu assum legendos temporibus. Ius feugiat pertinacia an, cu verterem praesent quo.
31+
</Card.CollaspeContent>
32+
<Card.Actions>
33+
<Button type="primary" key="action1" text>Action 1</Button>
34+
<Button type="primary" key="action2" text>Action 2</Button>
35+
</Card.Actions>
36+
</Card>
37+
38+
<Card
39+
className="free-card"
40+
free
41+
>
42+
<Card.Media style={{ height: 140 }} image="https://img.alicdn.com/tfs/TB1FNIOSFXXXXaWXXXXXXXXXXXX-260-188.png" />
43+
<Card.Header title="Title" subTitle="Sub Title" extra={<Button type="primary" text>Link</Button>} />
44+
<Card.Divider />
45+
<Card.Content>
46+
Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. Ne petentium quaerendum nec, eos ex recteque mediocritatem, ex usu assum legendos temporibus. Ius feugiat pertinacia an, cu verterem praesent quo.
47+
</Card.Content>
48+
<Card.Actions>
49+
<Button type="primary" key="action1" text>Action 1</Button>
50+
<Button type="primary" key="action2" text>Action 2</Button>
51+
</Card.Actions>
52+
</Card>
53+
<Card
54+
className="free-card custom"
55+
free
56+
>
57+
<Card.Media image="https://img.alicdn.com/tfs/TB1FNIOSFXXXXaWXXXXXXXXXXXX-260-188.png" />
58+
<div className="free-card-main">
59+
<Card.Header title="Title" subTitle="Sub Title" extra={<Button type="primary" text>Link</Button>} />
60+
<Card.Divider />
61+
<Card.Content>
62+
Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et.
63+
</Card.Content>
64+
<Card.Actions>
65+
<Button type="primary" key="action1" text>Action 1</Button>
66+
<Button type="primary" key="action2" text>Action 2</Button>
67+
</Card.Actions>
68+
</div>
69+
</Card>
70+
</div>
71+
, mountNode);
72+
````
73+
74+
````css
75+
.free-card {
76+
display: inline-block;
77+
width: 300px;
78+
vertical-align: top;
79+
}
80+
.free-card + .free-card {
81+
margin-left: 20px;
82+
}
83+
84+
.free-card.custom {
85+
display: flex;
86+
justify-content: space-between;
87+
width: 500px;
88+
height: 200px;
89+
}
90+
91+
.free-card.custom .next-card-media {
92+
height: 100%;
93+
width: 200px;
94+
flex-shrink: 0;
95+
}
96+
97+
.free-card-main {
98+
display: flex;
99+
flex-direction: column;
100+
align-items: stretch;
101+
}
102+
103+
.free-card-main .next-card-content-container {
104+
flex: 1;
105+
}
106+
107+
.free-card-main .next-card-actions {
108+
text-align: right;
109+
}
110+
````

‎docs/card/demo/media.md

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
# 多媒体内容
2+
3+
- order: 4
4+
5+
下面是一个使用图像来增强内容的卡片示例。
6+
7+
:::lang=en-us
8+
# Media Content
9+
10+
- order: 4
11+
12+
Here is an example of a card that uses images to enhance content.
13+
14+
:::
15+
16+
---
17+
18+
````jsx
19+
import { Card, Button } from '@alifd/next';
20+
21+
ReactDOM.render(
22+
<Card
23+
className="media-card"
24+
media={<img src="https://img.alicdn.com/tfs/TB1FNIOSFXXXXaWXXXXXXXXXXXX-260-188.png" />}
25+
contentHeight="auto"
26+
title="Title"
27+
subTitle="Sub Title"
28+
extra={[
29+
<Button type="primary" key="action1" text>More</Button>
30+
]}
31+
actions={[
32+
<Button type="primary" key="action1" text>Action 1</Button>,
33+
<Button type="primary" key="action2" text>Action 2</Button>
34+
]}
35+
>
36+
Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. Ne petentium quaerendum nec, eos ex recteque mediocritatem, ex usu assum legendos temporibus. Ius feugiat pertinacia an, cu verterem praesent quo.
37+
38+
</Card>
39+
, mountNode);
40+
````
41+
42+
````css
43+
.media-card {
44+
width: 300px;
45+
}
46+
47+
.custom-card p {
48+
color: #999;
49+
}
50+
````

‎docs/card/index.en-us.md

+38
Original file line numberDiff line numberDiff line change
@@ -27,3 +27,41 @@ A card could contain a photo, text, and a link about a single subject.
2727
| showHeadDivider | If show head divider | Boolean | true |
2828
| contentHeight | Height of content | String/Number | 120 |
2929
| extra | Extra of card header | ReactNode | - |
30+
| media | Media content | ReactNode | - |
31+
| actions | Actions of card | ReactNode | - |
32+
| free | Whether to open free mode, if opened, can`t set title subTitle ..., must use Card.Header Card.Content ... to set Card | Boolean | - |
33+
34+
### Card.Actions
35+
36+
| 参数 | 说明 | 类型 | 默认值 |
37+
| --------- | ------ | ------ | ----- |
38+
| component | The html tag to be rendered | custom | 'div' |
39+
40+
### Card.Content
41+
42+
| 参数 | 说明 | 类型 | 默认值 |
43+
| --------- | ------ | ------ | ----- |
44+
| component | The html tag to be rendered | custom | 'div' |
45+
46+
### Card.Divider
47+
48+
| 参数 | 说明 | 类型 | 默认值 |
49+
| --------- | ------ | ------ | ---- |
50+
| component | The html tag to be rendered | custom | 'hr' |
51+
52+
### Card.Header
53+
54+
| 参数 | 说明 | 类型 | 默认值 |
55+
| --------- | ------------ | --------- | ----- |
56+
| title | Title of card | ReactNode | - |
57+
| subTitle | Sub Title of Card | ReactNode | - |
58+
| extra | Extra of card header | ReactNode | - |
59+
| component | The html tag to be rendered | custom | 'div' |
60+
61+
### Card.Media
62+
63+
| 参数 | 说明 | 类型 | 默认值 |
64+
| --------- | ------- | ------ | ----- |
65+
| component | The html tag to be rendered | custom | 'div' |
66+
| image | Media background image | String | - |
67+
| src | Media source URL | String | - |

‎docs/card/index.md

+46-8
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,49 @@
1919

2020
### Card
2121

22-
| 参数 | 说明 | 类型 | 默认值 |
23-
| --------------- | ------------ | ------------- | ---- |
24-
| title | 卡片的标题 | ReactNode | - |
25-
| subTitle | 卡片的副标题 | ReactNode | - |
26-
| showTitleBullet | 是否显示标题的项目符号 | Boolean | true |
27-
| showHeadDivider | 是否展示头部的分隔线 | Boolean | true |
28-
| contentHeight | 内容区域的固定高度 | String/Number | 120 |
29-
| extra | 标题区域的用户自定义内容 | ReactNode | - |
22+
| 参数 | 说明 | 类型 | 默认值 |
23+
| --------------- | ------------------------------------------------------------ | ------------- | ----- |
24+
| media | 卡片的上的图片 / 视频 | ReactNode | - |
25+
| title | 卡片的标题 | ReactNode | - |
26+
| subTitle | 卡片的副标题 | ReactNode | - |
27+
| actions | 卡片操作组，位置在卡片底部 | ReactNode | - |
28+
| showTitleBullet | 是否显示标题的项目符号 | Boolean | true |
29+
| showHeadDivider | 是否展示头部的分隔线 | Boolean | true |
30+
| contentHeight | 内容区域的固定高度 | String/Number | 120 |
31+
| extra | 标题区域的用户自定义内容 | ReactNode | - |
32+
| free | 是否开启自由模式，开启后card 将使用子组件配合使用, 设置此项后 title, subtitle, 等等属性都将失效 | Boolean | false |
33+
34+
### Card.Actions
35+
36+
| 参数 | 说明 | 类型 | 默认值 |
37+
| --------- | ------ | ------ | ----- |
38+
| component | 设置标签类型 | custom | 'div' |
39+
40+
### Card.Content
41+
42+
| 参数 | 说明 | 类型 | 默认值 |
43+
| --------- | ------ | ------ | ----- |
44+
| component | 设置标签类型 | custom | 'div' |
45+
46+
### Card.Divider
47+
48+
| 参数 | 说明 | 类型 | 默认值 |
49+
| --------- | ------ | ------ | ---- |
50+
| component | 设置标签类型 | custom | 'hr' |
51+
52+
### Card.Header
53+
54+
| 参数 | 说明 | 类型 | 默认值 |
55+
| --------- | ------------ | --------- | ----- |
56+
| title | 卡片的标题 | ReactNode | - |
57+
| subTitle | 卡片的副标题 | ReactNode | - |
58+
| extra | 标题区域的用户自定义内容 | ReactNode | - |
59+
| component | 设置标签类型 | custom | 'div' |
60+
61+
### Card.Media
62+
63+
| 参数 | 说明 | 类型 | 默认值 |
64+
| --------- | ------- | ------ | ----- |
65+
| component | 设置标签类型 | custom | 'div' |
66+
| image | 背景图片地址 | String | - |
67+
| src | 媒体源文件地址 | String | - |

‎src/card/actions.jsx

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React, { PureComponent } from 'react';
2+
import PropTypes from 'prop-types';
3+
import classNames from 'classnames';
4+
import ConfigProvider from '../config-provider';
5+
6+
/**
7+
* Card.Actions
8+
*/
9+
class CardActions extends PureComponent {
10+
static propTypes = {
11+
prefix: PropTypes.string,
12+
/**
13+
* 设置标签类型
14+
*/
15+
component: PropTypes.elementType,
16+
className: PropTypes.string,
17+
};
18+
19+
static defaultProps = {
20+
prefix: 'next-',
21+
component: 'div',
22+
};
23+
24+
render() {
25+
const {
26+
prefix,
27+
component: Component,
28+
className,
29+
...others
30+
} = this.props;
31+
return (
32+
<Component
33+
{...others}
34+
className={classNames(`${prefix}card-actions`, className)}
35+
/>
36+
);
37+
}
38+
}
39+
40+
export default ConfigProvider.config(CardActions);

‎src/card/bullet-header.jsx

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React, { Component } from 'react';
2+
import PropTypes from 'prop-types';
3+
import classNames from 'classnames';
4+
import ConfigProvider from '../config-provider';
5+
6+
/**
7+
* Card.BulletHeader
8+
*/
9+
class CardBulletHeader extends Component {
10+
static propTypes = {
11+
prefix: PropTypes.string,
12+
/**
13+
* 卡片的标题
14+
*/
15+
title: PropTypes.node,
16+
/**
17+
* 卡片的副标题
18+
*/
19+
subTitle: PropTypes.node,
20+
/**
21+
* 是否显示标题的项目符号
22+
*/
23+
showTitleBullet: PropTypes.bool,
24+
/**
25+
* 标题区域的用户自定义内容
26+
*/
27+
extra: PropTypes.node,
28+
};
29+
30+
static defaultProps = {
31+
prefix: 'next-',
32+
showTitleBullet: true,
33+
};
34+
35+
render() {
36+
const { prefix, title, subTitle, extra, showTitleBullet } = this.props;
37+
38+
if (!title) return null;
39+
40+
const headCls = classNames({
41+
[`${prefix}card-head`]: true,
42+
[`${prefix}card-head-show-bullet`]: showTitleBullet,
43+
});
44+
45+
const headExtra = extra ? (
46+
<div className={`${prefix}card-extra`}>{extra}</div>
47+
) : null;
48+
49+
return (
50+
<div className={headCls}>
51+
<div className={`${prefix}card-head-main`}>
52+
<div className={`${prefix}card-title`}>
53+
{title}
54+
{subTitle ? (
55+
<span className={`${prefix}card-subtitle`}>
56+
{subTitle}
57+
</span>
58+
) : null}
59+
</div>
60+
{headExtra}
61+
</div>
62+
</div>
63+
);
64+
}
65+
}
66+
67+
export default ConfigProvider.config(CardBulletHeader, {
68+
componentName: 'Card',
69+
});

0 commit comments

Comments
 (0)