From b7396dc602444378c69db96d757d961991c5db7d Mon Sep 17 00:00:00 2001 From: wangxueliang Date: Fri, 27 Jul 2018 15:30:24 +0800 Subject: [PATCH] fix: support card description and title slot --- components/card/Card.jsx | 2 +- components/card/Grid.jsx | 4 +- components/card/Meta.jsx | 11 +++-- .../__tests__/__snapshots__/demo.test.js.snap | 45 +++++++++++++------ components/card/demo/flexible-content.md | 28 ++++++++++++ components/card/demo/index.vue | 2 + components/card/demo/loading.md | 23 ++++++++-- components/card/demo/moreConfigs.md | 8 ++-- components/card/index.en-US.md | 16 +++---- components/card/index.zh-CN.md | 16 +++---- site/dev.js | 2 +- 11 files changed, 111 insertions(+), 46 deletions(-) create mode 100644 components/card/demo/flexible-content.md diff --git a/components/card/Card.jsx b/components/card/Card.jsx index 7b89971db..f460297ba 100644 --- a/components/card/Card.jsx +++ b/components/card/Card.jsx @@ -12,7 +12,7 @@ export default { mixins: [BaseMixin], props: { prefixCls: PropTypes.string.def('ant-card'), - title: PropTypes.string, + title: PropTypes.any, extra: PropTypes.any, bordered: PropTypes.bool.def(true), bodyStyle: PropTypes.object, diff --git a/components/card/Grid.jsx b/components/card/Grid.jsx index f87cc820c..9b9dd6097 100644 --- a/components/card/Grid.jsx +++ b/components/card/Grid.jsx @@ -7,12 +7,12 @@ export default { prefixCls: PropTypes.string.def('ant-card'), }, render () { - const { prefixCls = 'ant-card', ...others } = this.$props + const { prefixCls = 'ant-card' } = this.$props const classString = { [`${prefixCls}-grid`]: true, } return ( -
{this.$slots.default}
+
{this.$slots.default}
) }, } diff --git a/components/card/Meta.jsx b/components/card/Meta.jsx index ee776b3e2..e8817a183 100644 --- a/components/card/Meta.jsx +++ b/components/card/Meta.jsx @@ -6,16 +6,19 @@ export default { name: 'ACardMeta', props: { prefixCls: PropTypes.string.def('ant-card'), - title: PropTypes.string, - description: PropTypes.string, + title: PropTypes.any, + description: PropTypes.any, }, render () { - const { prefixCls = 'ant-card', title, description, ...others } = this.$props + const { prefixCls = 'ant-card' } = this.$props const classString = { [`${prefixCls}-meta`]: true, } const avatar = getComponentFromProp(this, 'avatar') + const title = getComponentFromProp(this, 'title') + const description = getComponentFromProp(this, 'description') + const avatarDom = avatar ?
{avatar}
: null const titleDom = title ?
{title}
: null const descriptionDom = description @@ -26,7 +29,7 @@ export default { {descriptionDom} : null return ( -
+
{avatarDom} {MetaDetail}
diff --git a/components/card/__tests__/__snapshots__/demo.test.js.snap b/components/card/__tests__/__snapshots__/demo.test.js.snap index 334c1104b..e4775f581 100644 --- a/components/card/__tests__/__snapshots__/demo.test.js.snap +++ b/components/card/__tests__/__snapshots__/demo.test.js.snap @@ -71,6 +71,22 @@ exports[`renders ./components/card/demo/concise.md correctly 1`] = `
`; +exports[`renders ./components/card/demo/flexible-content.md correctly 1`] = ` +
+
+ example +
+
+
+
+
Europe Street beat
+
www.instagram.com
+
+
+
+
+`; + exports[`renders ./components/card/demo/grid.md correctly 1`] = `
@@ -130,21 +146,24 @@ exports[`renders ./components/card/demo/inline.md correctly 1`] = ` `; exports[`renders ./components/card/demo/loading.md correctly 1`] = ` -
-
-
-
Card title
-
-
-
-
-

-

-

-

-

+
+
+
+
+
Card title
+
+
+
+
+

+

+

+

+

+
+
`; diff --git a/components/card/demo/flexible-content.md b/components/card/demo/flexible-content.md new file mode 100644 index 000000000..cb4152346 --- /dev/null +++ b/components/card/demo/flexible-content.md @@ -0,0 +1,28 @@ + + #### 更灵活的内容展示 + 可以利用 `Card.Meta` 支持更灵活的内容 + + + + #### Customized content + You can use `Card.Meta` to support more flexible content. + + +```html + +``` diff --git a/components/card/demo/index.vue b/components/card/demo/index.vue index c93a00884..3ca9324bb 100644 --- a/components/card/demo/index.vue +++ b/components/card/demo/index.vue @@ -8,6 +8,7 @@ import Grid from './grid' import Inline from './inline' import TabsCard from './tabsCard' import MoreConfigs from './moreConfigs' +import FlexibleContent from './flexible-content' import CN from './../index.zh-CN.md' import US from './../index.en-US.md' @@ -41,6 +42,7 @@ export default { + diff --git a/components/card/demo/loading.md b/components/card/demo/loading.md index b87b999dc..d9e341c7b 100644 --- a/components/card/demo/loading.md +++ b/components/card/demo/loading.md @@ -10,10 +10,27 @@ ```html + ``` diff --git a/components/card/demo/moreConfigs.md b/components/card/demo/moreConfigs.md index 4469dafb1..186556e03 100644 --- a/components/card/demo/moreConfigs.md +++ b/components/card/demo/moreConfigs.md @@ -1,11 +1,11 @@ - #### 更灵活的内容展示 - 可以利用 `Card.Meta` 支持更灵活的内容 + #### 支持更多内容配置 + 一种支持封面、头像、标题和描述信息的卡片。 - #### Customized content - You can use `Card.Meta` to support more flexible content. + #### Support more content configuration + A Card that supports `cover`, `avatar`, `title` and `description`. ```html diff --git a/components/card/index.en-US.md b/components/card/index.en-US.md index a5c733498..a1bc6f042 100644 --- a/components/card/index.en-US.md +++ b/components/card/index.en-US.md @@ -18,19 +18,17 @@ | type | Card style type, can be set to `inner` or not set | string | - | | onTabChange | Callback when tab is switched | (key) => void | - | -### Card.Grid +### events +| Events Name | Description | Arguments | +| --- | --- | --- | +| tabChange | Callback when tab is switched | (key) => void | - | -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | -| className | className of container | string | - | -| style | style object of container | object | - | +### Card.Grid ### Card.Meta | Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | | avatar | avatar or icon | slot | - | -| className | className of container | string | - | -| description | description content | slot | - | -| style | style object of container | object | - | -| title | title content | slot | - | +| description | description content | string\|slot | - | +| title | title content | string\|slot | - | diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md index 15b95c35c..ac65955a0 100644 --- a/components/card/index.zh-CN.md +++ b/components/card/index.zh-CN.md @@ -19,19 +19,17 @@ | type | 卡片类型，可设置为 `inner` 或 不设置 | string | - | | onTabChange | 页签切换的回调 | (key) => void | - | -### Card.Grid +### 事件 +| 事件名称 | 说明 | 回调参数 | +| --- | --- | --- | +| tabChange | 页签切换的回调 | (key) => void | - | -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | -| className | 网格容器类名 | string | - | -| style | 定义网格容器类名的样式 | object | - | +### Card.Grid ### Card.Meta | Property | Description | Type | Default | | -------- | ----------- | ---- | ------- | | avatar | 头像/图标 | slot | - | -| className | 容器类名 | string | - | -| description | 描述内容 | slot | - | -| style | 定义容器类名的样式 | object | - | -| title | 标题内容 | slot | - | +| description | 描述内容 | string\|slot | - | +| title | 标题内容 | string\|slot | - | diff --git a/site/dev.js b/site/dev.js index 3eb5bfb83..07e68c526 100644 --- a/site/dev.js +++ b/site/dev.js @@ -10,7 +10,7 @@ import Api from './components/api' import './components' import demoBox from './components/demoBox' import demoContainer from './components/demoContainer' -import Test from '../components/test/index' +import Test from '../components/card/demo/index' Vue.use(VueClipboard) Vue.use(VueRouter)