diff --git a/components/card/demo/basic.md b/components/card/demo/basic.md index ff212fa640..deeab91b38 100644 --- a/components/card/demo/basic.md +++ b/components/card/demo/basic.md @@ -10,7 +10,9 @@ import { Card } from 'antd'; ReactDOM.render( 更多} style={{ width: 300 }}> - 卡片的内容 +

卡片的内容

+

卡片的内容

+

卡片的内容

, mountNode); ```` diff --git a/components/card/demo/border-less.md b/components/card/demo/border-less.md new file mode 100644 index 0000000000..dd0766c775 --- /dev/null +++ b/components/card/demo/border-less.md @@ -0,0 +1,20 @@ +--- +order: 1 +title: 无边框 +--- + +在灰色背景上使用无边框的卡片。 + +````jsx +import { Card } from 'antd'; + +ReactDOM.render( +
+ +

卡片的内容

+

卡片的内容

+

卡片的内容

+
+
+, mountNode); +```` diff --git a/components/card/demo/grid.md b/components/card/demo/grid.md index 51bdbda570..db607c8fdf 100644 --- a/components/card/demo/grid.md +++ b/components/card/demo/grid.md @@ -1,5 +1,5 @@ --- -order: 3 +order: 4 title: 栅格卡片 --- @@ -9,17 +9,19 @@ title: 栅格卡片 import { Card, Col, Row } from 'antd'; ReactDOM.render( - - - 卡片的内容 - - - 卡片的内容 - - - 卡片的内容 - - +
+ + + 卡片的内容 + + + 卡片的内容 + + + 卡片的内容 + + +
, mountNode); ```` diff --git a/components/card/demo/loading.md b/components/card/demo/loading.md index d9c2d0ec52..736b27f494 100644 --- a/components/card/demo/loading.md +++ b/components/card/demo/loading.md @@ -1,5 +1,5 @@ --- -order: 4 +order: 5 title: 预加载的卡片 --- @@ -8,15 +8,9 @@ title: 预加载的卡片 ````jsx import { Card } from 'antd'; -const App = React.createClass({ - render() { - return ( - - Whatever content - - ); - }, -}); - -ReactDOM.render(, mountNode); +ReactDOM.render( + + Whatever content + +, mountNode); ```` diff --git a/components/card/demo/no-padding.md b/components/card/demo/no-padding.md index 68a60278ac..512caeca33 100644 --- a/components/card/demo/no-padding.md +++ b/components/card/demo/no-padding.md @@ -1,5 +1,5 @@ --- -order: 2 +order: 3 title: 更灵活的内容展示 --- diff --git a/components/card/demo/simple.md b/components/card/demo/simple.md index 1b55a6a605..5d738a457c 100644 --- a/components/card/demo/simple.md +++ b/components/card/demo/simple.md @@ -1,5 +1,5 @@ --- -order: 1 +order: 2 title: 简洁卡片 --- @@ -10,7 +10,9 @@ import { Card } from 'antd'; ReactDOM.render( - 卡片的内容 +

卡片的内容

+

卡片的内容

+

卡片的内容

, mountNode); ```` diff --git a/components/card/index.jsx b/components/card/index.jsx index 50bc4a9298..0d3213ff47 100644 --- a/components/card/index.jsx +++ b/components/card/index.jsx @@ -2,11 +2,13 @@ import React from 'react'; import classNames from 'classnames'; 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({ [prefixCls]: true, [className]: !!className, [`${prefixCls}-loading`]: loading, + [`${prefixCls}-bordered`]: bordered, }); if (loading) { diff --git a/components/card/index.md b/components/card/index.md index 0259f589d2..cf9af8fd64 100644 --- a/components/card/index.md +++ b/components/card/index.md @@ -20,6 +20,7 @@ english: Card | 参数 | 说明 | 类型 | 默认值 | |----------|----------------|----------|--------------| -| title | 卡片标题 | React.Element | 无 | -| extra | 卡片右上角的操作区域 | React.Element | 无 | -| bodyStyle | 内容区域自定义样式 | Object | 无 | +| title | 卡片标题 | React.Element | - | +| extra | 卡片右上角的操作区域 | React.Element | - | +| bordered | 是否有边框 | Boolean | true | +| bodyStyle | 内容区域自定义样式 | Object | - | diff --git a/style/components/card.less b/style/components/card.less index cc01f01a0b..bf000bab87 100644 --- a/style/components/card.less +++ b/style/components/card.less @@ -4,10 +4,19 @@ .@{card-prefix-cls} { background: #fff; border-radius: @border-radius-sm; - box-shadow: @box-shadow-base; font-size: @font-size-base; position: relative; 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 { height: 48px;