Feat(Card): Add Card component.

docs/Router.js

@@ -18,6 +18,7 @@ import hotkeys from 'bundle-loader?lazy&name=hotkeys!./pages/hotkeys';
 import FormCom from 'bundle-loader?lazy&name=form!./pages/form';
 import radio from 'bundle-loader?lazy&name=radio!./pages/radio';
 import checkbox from 'bundle-loader?lazy&name=checkbox!./pages/checkbox';
+import card from 'bundle-loader?lazy&name=card!./pages/card';
 import select from 'bundle-loader?lazy&name=select!./pages/select';
 import SwitchCom from 'bundle-loader?lazy&name=switch!./pages/switch';
 import slider from 'bundle-loader?lazy&name=slider!./pages/slider';
@@ -101,6 +102,7 @@ const routes = {
       { path: "/:lang/badge", component: asyncComponent(badge) },
       { path: "/:lang/calendar", component: asyncComponent(calendar) },
       { path: "/:lang/carousel", component: asyncComponent(carousel) },
+      { path: "/:lang/card", component: asyncComponent(card) },
       { path: "/:lang/progress", component: asyncComponent(progress) },
       { path: "/:lang/rate", component: asyncComponent(rate) },
       { path: "/:lang/table", component: asyncComponent(table) },

docs/locales/cn.js

@@ -4,6 +4,7 @@ module.exports = {
     'theme': '主题定制',
     'color': 'Color 颜色',
     'checkbox': 'Checkbox 多选框',
+    'card': 'Card 卡片',
     'date-picker': 'Date Picker 日期选择器',
     'dropdown': 'Dropdown 下拉菜单',
     'hotkeys': "Hotkeys 快捷键",

docs/locales/en.js

@@ -4,6 +4,7 @@ module.exports = {
     'theme': 'Theme',
     'color': 'Color',
     'checkbox': 'Checkbox',
+    'card': 'Card',
     'date-picker': 'Date Picker',
     'dropdown': 'Dropdown',
     'hotkeys': "Hotkeys",

docs/md/cn/card.md

@@ -0,0 +1,123 @@
+Card 卡片
+===
+
+通用卡片容器，将信息聚合在卡片容器中展示，用来显示文字、列表、图文等内容。
+
+
+## 基础用法
+
+包含标题、内容、操作区域。
+
+<!--DemoStart--> 
+```js
+render() {
+  return (
+    <Card title="Card标题" extra={<a href="#">更多</a>} style={{ width: 300 }}>
+      卡片内容<br/>
+      卡片内容<br/>
+      卡片内容<br/>
+    </Card>
+  )
+}
+```
+<!--End-->
+
+## 无边框
+
+在灰色背景上使用无边框的卡片。
+
+<!--DemoStart--> 
+```js
+render() {
+  return (
+    <div style={{ background: '#ECECEC', padding: '30px' }}>
+      <Card title="Card标题" bordered={false} style={{ width: 300 }}>
+        卡片内容<br/>
+        卡片内容<br/>
+        卡片内容<br/>
+      </Card>
+    </div>
+  )
+}
+```
+<!--End-->
+
+## 简洁卡片
+
+只包含内容区域。
+
+<!--DemoStart--> 
+```js
+render() {
+  return (
+    <Card style={{ width: 300 }}>
+      卡片内容<br/>
+      卡片内容<br/>
+      卡片内容<br/>
+    </Card>
+  )
+}
+```
+<!--End-->
+
+## 更灵活的内容展示
+
+可以调整默认边距，设定宽度。
+
+<!--DemoStart--> 
+```js
+render() {
+  let titleStyle = {padding: `10px 16px`}
+  return (
+    <Card style={{ width: 240 }} bodyStyle={{ padding: 0 }}>
+      <div>
+        <img alt="example" width="100%" src="http://7xi8d6.com1.z0.glb.clouddn.com/20171018091347_Z81Beh_nini.nicky_18_10_2017_9_13_35_727.jpeg" />
+      </div>
+      <div style={titleStyle}>
+        <h3 style={{margin:0}}>我爱漂亮妹妹</h3>
+        <p style={{margin:0}}><a href="https://uiw-react.github.io">https://uiw-react.github.io</a></p>
+      </div>
+    </Card>
+  )
+}
+```
+<!--End-->
+
+## 更灵活的内容展示
+
+可以调整默认边距，设定宽度。
+
+<!--DemoStart--> 
+```js
+render() {
+  const {Row,Col} = Layout;
+  return (
+  <div style={{ background: '#ECECEC', padding: '20px 10px' }}>
+    <Row gutter={16}>
+      <Col span={8}>
+        <Card title="卡片标题" bordered={false}>卡片内容！</Card>
+      </Col>
+      <Col span={8}>
+        <Card title="卡片标题" bordered={false}>卡片内容！</Card>
+      </Col>
+      <Col span={8}>
+        <Card title="卡片标题" bordered={false}>卡片内容！</Card>
+      </Col>
+    </Row>
+  </div>
+  )
+}
+```
+<!--End-->
+
+## API
+
+### Card
+
+| 参数 | 说明 | 类型 | 默认值 |
+|--------- |-------- |--------- |-------- |
+| title | 卡片标题 | String/ReactNode | - |
+| extra | 卡片右上角的操作区域 | String/ReactNode | - |
+| bordered | 是否显示边框 | Boolean | `true` |
+| noHover | 取消鼠标移过浮起 | Boolean | `false` |
+| bodyStyle | 设置 body 的样式 | Object | - |

docs/pages/card/index.js

@@ -0,0 +1,5 @@
+import Markdown from '../../libs/markdown/';
+
+export default class App extends Markdown {
+
+}

docs/style/base.less

@@ -2,7 +2,7 @@
 body{
   color: #343b41;
   a{
-    color: #363636;
+    color: #328dd0;
     &:hover{
       color: #0089ff;
     }
@@ -228,7 +228,4 @@ body::selection {
   margin: 0 20px;
   line-height: 24px;
   color: #909090;
-  a{
-    color: #909090;
-  }
 }

docs/style/code.less

@@ -17,13 +17,8 @@ pre[class*="language-"] {
   word-wrap: normal;
   line-height: 1.5;
 
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
   tab-size: 4;
 
-  -webkit-hyphens: none;
-  -moz-hyphens: none;
-  -ms-hyphens: none;
   hyphens: none;
 }
 
@@ -50,7 +45,6 @@ code[class*="language-"]::selection, code[class*="language-"] ::selection {
 pre[class*="language-"] {
   padding: 1em;
   overflow: auto;
-  margin-bottom: 0.5em;
 }
 
 :not(pre) > code[class*="language-"],

src/card/Card.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Component, PropTypes } from '../utils/';
+
+export default class Card extends Component {
+  render() {
+    const { prefixCls, className, title, extra, bordered, noHover, bodyStyle, children, ...resetProps } = this.props;
+
+    const cls = this.classNames(prefixCls, className, {
+      [`${prefixCls}-bordered`]: bordered,
+      [`${prefixCls}-no-hover`]: noHover,
+    });
+
+    let head;
+    if (title || extra) {
+      head = (
+        <div className={`${prefixCls}-head`}>
+          {title ? <div className={`${prefixCls}-head-title`}>{title}</div> : null}
+          {extra ? <div className={`${prefixCls}-extra`}>{extra}</div> : null}
+        </div>
+      );
+    }
+    return (
+      <div {...resetProps} className={cls}>
+        {head}
+        <div className={`${prefixCls}-body`} style={bodyStyle}>{children}</div>
+      </div>
+    );
+  }
+}
+
+Card.propTypes = {
+  prefixCls: PropTypes.string,
+  bordered: PropTypes.bool,
+  extra: PropTypes.node,
+  noHover: PropTypes.bool,
+  bodyStyle: PropTypes.object,
+}
+
+Card.defaultProps = {
+  prefixCls: 'w-card',
+  bordered: true,
+  noHover: false,
+}

src/card/index.js

@@ -0,0 +1,3 @@
+import Card from './Card';
+import "./style/index.less";
+export default Card;

src/card/style/index.less

@@ -0,0 +1,47 @@
+@import "../../style/variables.less";
+@import "../../style/mixins/index.less";
+
+@card-prefix: ~"w-card";
+
+.@{card-prefix}{
+  background: #fff;
+  border-radius: 5px;
+  font-size: 12px;
+  position: relative;
+  transition: all .3s;
+  overflow: hidden;
+  &:not(&-no-hovering):hover {
+    box-shadow: 0 1px 6px rgba(0,0,0,.2);
+    border-color: rgba(0,0,0,.2);
+  }
+  &-bordered{
+    border: 1px solid #e9e9e9;
+  }
+  &-head{
+    height: 48px;
+    line-height: 48px;
+    border-bottom: 1px solid #e9e9e9;
+    padding: 0 14px;
+    border-radius: 2px 2px 0 0;
+    zoom: 1;
+  }
+
+  &-head-title{
+    font-size: 14px;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    color: rgba(0,0,0,.85);
+    font-weight: 500;
+    display: inline-block;
+  }
+  &-extra{
+    position: absolute;
+    right: 16px;
+    top: 0px;
+  }
+  &-body{
+    padding:14px;
+  }
+}

src/index.js

@@ -6,6 +6,7 @@ export { default as Breadcrumb } from './breadcrumb/';
 export { default as Badge } from './badge/';
 export { default as Calendar } from './calendar/';
 export { default as Checkbox } from './checkbox/';
+export { default as Card } from './card/';
 export { default as Hotkeys } from './hotkeys/';
 export { default as Modal } from './modal/';
 export { default as Message } from './message/';