mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 19:19:57 +08:00
Code Issues Actions 31 Packages Projects Releases Wiki Activity

Add card borderd prop

Browse Source
This commit is contained in:
afc163 2016-04-10 15:38:52 +08:00
parent fe92cd79a7
commit 700a07047b
9 changed files with 65 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/card/demo/basic.md
View File

@ -10,7 +10,9 @@ import { Card } from 'antd';
ReactDOM.render( ReactDOM.render(
<Card title="卡片标题" extra={<a href="#">更多</a>} style={{ width: 300 }}> <Card title="卡片标题" extra={<a href="#">更多</a>} style={{ width: 300 }}>
卡片的内容 <p>卡片的内容</p>
<p>卡片的内容</p>
<p>卡片的内容</p>
</Card> </Card>
, mountNode); , mountNode);
```` ````

20
components/card/demo/border-less.md Normal file
View File

@ -0,0 +1,20 @@
---
order: 1
title: 无边框
---
在灰色背景上使用无边框的卡片。
````jsx
import { Card } from 'antd';
ReactDOM.render(
<div style={{ background: '#ECECEC', padding: '30px' }}>
<Card title="卡片标题" bordered={false} style={{ width: 300 }}>
<p>卡片的内容</p>
<p>卡片的内容</p>
<p>卡片的内容</p>
</Card>
</div>
, mountNode);
````

26
components/card/demo/grid.md
View File

@ -1,5 +1,5 @@
--- ---
order: 3 order: 4
title: 栅格卡片 title: 栅格卡片
--- ---
@ -9,17 +9,19 @@ title: 栅格卡片
import { Card, Col, Row } from 'antd'; import { Card, Col, Row } from 'antd';
ReactDOM.render( ReactDOM.render(
<Row> <div style={{ background: '#ECECEC', padding: '30px' }}>
<Col span="8"> <Row>
<Card title="卡片标题">卡片的内容</Card> <Col span="8">
</Col> <Card title="卡片标题" bordered={false}>卡片的内容</Card>
<Col span="8"> </Col>
<Card title="卡片标题">卡片的内容</Card> <Col span="8">
</Col> <Card title="卡片标题" bordered={false}>卡片的内容</Card>
<Col span="8"> </Col>
<Card title="卡片标题">卡片的内容</Card> <Col span="8">
</Col> <Card title="卡片标题" bordered={false}>卡片的内容</Card>
</Row> </Col>
</Row>
</div>
, mountNode); , mountNode);
```` ````

18
components/card/demo/loading.md
View File

@ -1,5 +1,5 @@
--- ---
order: 4 order: 5
title: 预加载的卡片 title: 预加载的卡片
--- ---
@ -8,15 +8,9 @@ title: 预加载的卡片
````jsx ````jsx
import { Card } from 'antd'; import { Card } from 'antd';
const App = React.createClass({ ReactDOM.render(
render() { <Card loading title="卡片标题" style={{ width: 300 }}>
return ( Whatever content
<Card loading title="卡片标题" style={{ width: 300 }}> </Card>
Whatever content , mountNode);
</Card>
);
},
});
ReactDOM.render(<App />, mountNode);
```` ````

2
components/card/demo/no-padding.md
View File

@ -1,5 +1,5 @@
--- ---
order: 2 order: 3
title: 更灵活的内容展示 title: 更灵活的内容展示
--- ---

6
components/card/demo/simple.md
View File

@ -1,5 +1,5 @@
--- ---
order: 1 order: 2
title: 简洁卡片 title: 简洁卡片
--- ---
@ -10,7 +10,9 @@ import { Card } from 'antd';
ReactDOM.render( ReactDOM.render(
<Card style={{ width: 300 }}> <Card style={{ width: 300 }}>
卡片的内容 <p>卡片的内容</p>
<p>卡片的内容</p>
<p>卡片的内容</p>
</Card> </Card>
, mountNode); , mountNode);
```` ````

4
components/card/index.jsx
View File

@ -2,11 +2,13 @@ import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
export default props => { export default props => {
let { prefixCls = 'ant-card', className, children, extra, bodyStyle, title, loading, ...other } = props; let { prefixCls = 'ant-card', className, children, extra, bodyStyle,
title, loading, bordered = true, ...other } = props;
const classString = classNames({ const classString = classNames({
[prefixCls]: true, [prefixCls]: true,
[className]: !!className, [className]: !!className,
[`${prefixCls}-loading`]: loading, [`${prefixCls}-loading`]: loading,
[`${prefixCls}-bordered`]: bordered,
}); });
if (loading) { if (loading) {

7
components/card/index.md
View File

@ -20,6 +20,7 @@ english: Card
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------| |----------|----------------|----------|--------------|
| title | 卡片标题 | React.Element | 无 | | title | 卡片标题 | React.Element | - |
| extra | 卡片右上角的操作区域 | React.Element | 无 | | extra | 卡片右上角的操作区域 | React.Element | - |
| bodyStyle | 内容区域自定义样式 | Object | 无 | | bordered | 是否有边框 | Boolean | true |
| bodyStyle | 内容区域自定义样式 | Object | - |

11
style/components/card.less
View File

@ -4,10 +4,19 @@
.@{card-prefix-cls} { .@{card-prefix-cls} {
background: #fff; background: #fff;
border-radius: @border-radius-sm; border-radius: @border-radius-sm;
box-shadow: @box-shadow-base;
font-size: @font-size-base; font-size: @font-size-base;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
transition: all .3s;
&:hover {
box-shadow: 0 1px 4px rgba(100, 100, 100, .2);
}
&-bordered {
border: 1px solid @border-color-base;
border-color: @border-color-split;
}
&-head { &-head {
height: 48px; height: 48px;