diff --git a/components/descriptions/__tests__/__snapshots__/demo.test.js.snap b/components/descriptions/__tests__/__snapshots__/demo.test.js.snap index 05474ada34..2d685644f9 100644 --- a/components/descriptions/__tests__/__snapshots__/demo.test.js.snap +++ b/components/descriptions/__tests__/__snapshots__/demo.test.js.snap @@ -5,9 +5,13 @@ exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = ` class="ant-descriptions" >
- User Info +
+ User Info +
- User Info +
+ User Info +
- Responsive Descriptions +
+ Responsive Descriptions +
- Custom Size +
+ Custom Size +
+
+ +
- Custom Size +
+ Custom Size +
+
+ +
- User Info +
+ User Info +
- User Info +
+ User Info +
{ expect(wrapper.find('th').hasClass('ant-descriptions-item-label')).toBeTruthy(); expect(wrapper.find('td').hasClass('ant-descriptions-item-content')).toBeTruthy(); }); + + it('Descriptions support extra', () => { + const wrapper = mount( + + Zhou Maomao + , + ); + expect(wrapper.find('.ant-descriptions-extra').exists()).toBe(true); + wrapper.setProps({ extra: undefined }); + expect(wrapper.find('.ant-descriptions-extra').exists()).toBe(false); + }); }); diff --git a/components/descriptions/demo/size.md b/components/descriptions/demo/size.md index 530d6b9357..75c624e017 100644 --- a/components/descriptions/demo/size.md +++ b/components/descriptions/demo/size.md @@ -14,7 +14,7 @@ title: Custom sizes to fit in a variety of containers. ```jsx -import { Descriptions, Radio } from 'antd'; +import { Descriptions, Radio, Button } from 'antd'; class Demo extends React.Component { state = { @@ -38,7 +38,12 @@ class Demo extends React.Component {

- + Edit} + > Cloud Database Prepaid 18:00:00 @@ -61,7 +66,11 @@ class Demo extends React.Component {

- + Edit} + > Cloud Database Prepaid 18:00:00 diff --git a/components/descriptions/index.en-US.md b/components/descriptions/index.en-US.md index 252a087f19..285dbfb41b 100644 --- a/components/descriptions/index.en-US.md +++ b/components/descriptions/index.en-US.md @@ -19,6 +19,7 @@ Commonly displayed on the details page. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | title | The title of the description list, placed at the top | ReactNode | - | | +| extra | The action area of the description list, placed at the top-right | string \| ReactNode | - | 4.5.0 | | bordered | Whether to display the border | boolean | false | | | column | The number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect) | number | 3 | | | size | Set the size of the list. Can be set to `middle`,`small`, or not filled | `default` \| `middle` \| `small` | - | | diff --git a/components/descriptions/index.tsx b/components/descriptions/index.tsx index b65a00a22d..83eb185474 100644 --- a/components/descriptions/index.tsx +++ b/components/descriptions/index.tsx @@ -100,6 +100,7 @@ export interface DescriptionsProps { size?: 'middle' | 'small' | 'default'; children?: React.ReactNode; title?: React.ReactNode; + extra?: React.ReactNode; column?: number | Partial>; layout?: 'horizontal' | 'vertical'; colon?: boolean; @@ -108,6 +109,7 @@ export interface DescriptionsProps { function Descriptions({ prefixCls: customizePrefixCls, title, + extra, column = DEFAULT_COLUMN_MAP, colon = true, bordered, @@ -148,7 +150,12 @@ function Descriptions({ })} style={style} > - {title &&
{title}
} + {(title || extra) && ( +
+ {title &&
{title}
} + {extra &&
{extra}
} +
+ )}
diff --git a/components/descriptions/index.zh-CN.md b/components/descriptions/index.zh-CN.md index 30bc7e872f..de32c221da 100644 --- a/components/descriptions/index.zh-CN.md +++ b/components/descriptions/index.zh-CN.md @@ -20,6 +20,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/MjtG9_FOI/Descriptions.svg | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | title | 描述列表的标题，显示在最顶部 | ReactNode | - | | +| extra | 描述列表的操作区域，显示在右上方 | string \| ReactNode | - | 4.5.0 | | bordered | 是否展示边框 | boolean | false | | | column | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number | 3 | | | size | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效） | `default` \| `middle` \| `small` | - | | diff --git a/components/descriptions/style/index.less b/components/descriptions/style/index.less index 96fbb980a8..0350526c43 100644 --- a/components/descriptions/style/index.less +++ b/components/descriptions/style/index.less @@ -4,12 +4,27 @@ @descriptions-prefix-cls: ~'@{ant-prefix}-descriptions'; .@{descriptions-prefix-cls} { - &-title { + &-header { + display: flex; + align-items: center; margin-bottom: @descriptions-title-margin-bottom; + } + + &-title { + flex: auto; + overflow: hidden; color: @heading-color; font-weight: bold; font-size: @font-size-lg; line-height: @line-height-base; + white-space: nowrap; + text-overflow: ellipsis; + } + + &-extra { + margin-left: auto; + color: @descriptions-extra-color; + font-size: @font-size-base; } &-view { diff --git a/components/style/themes/default.less b/components/style/themes/default.less index 2ad5d8740a..3339247863 100644 --- a/components/style/themes/default.less +++ b/components/style/themes/default.less @@ -239,6 +239,7 @@ @descriptions-item-trailing-colon: true; @descriptions-item-label-colon-margin-right: 8px; @descriptions-item-label-colon-margin-left: 2px; +@descriptions-extra-color: @text-color; // Divider @divider-text-padding: 1em;