Feat descriptions (#1251)
* feat: add descriptions * fix: add descriptions types and fix docs * fix: lint change code * fix: demo warning * fix: update demo, snapshot and remove classnamespull/1498/head
zkwolf
tangjinzhou
parent
237b620fec
commit
dff0951dcd
|
|
@ -0,0 +1,96 @@
|
||||||
|
// matchMedia polyfill for
|
||||||
|
// https://github.com/WickyNilliams/enquire.js/issues/82
|
||||||
|
let enquire;
|
||||||
|
|
||||||
|
// TODO: Will be removed in antd 4.0 because we will no longer support ie9
|
||||||
|
if (typeof window !== 'undefined') {
|
||||||
|
const matchMediaPolyfill = (mediaQuery) => {
|
||||||
|
return {
|
||||||
|
media: mediaQuery,
|
||||||
|
matches: false,
|
||||||
|
addListener() {},
|
||||||
|
removeListener() {},
|
||||||
|
};
|
||||||
|
};
|
||||||
|
// ref: https://github.com/ant-design/ant-design/issues/18774
|
||||||
|
if (!window.matchMedia) window.matchMedia = matchMediaPolyfill;
|
||||||
|
// eslint-disable-next-line global-require
|
||||||
|
enquire = require('enquire.js');
|
||||||
|
}
|
||||||
|
|
||||||
|
export const responsiveArray = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
|
||||||
|
|
||||||
|
export const responsiveMap = {
|
||||||
|
xs: '(max-width: 575px)',
|
||||||
|
sm: '(min-width: 576px)',
|
||||||
|
md: '(min-width: 768px)',
|
||||||
|
lg: '(min-width: 992px)',
|
||||||
|
xl: '(min-width: 1200px)',
|
||||||
|
xxl: '(min-width: 1600px)',
|
||||||
|
};
|
||||||
|
|
||||||
|
let subscribers = [];
|
||||||
|
let subUid = -1;
|
||||||
|
let screens = {};
|
||||||
|
|
||||||
|
const responsiveObserve = {
|
||||||
|
dispatch(pointMap) {
|
||||||
|
screens = pointMap;
|
||||||
|
if (subscribers.length < 1) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
subscribers.forEach(item => {
|
||||||
|
item.func(screens);
|
||||||
|
});
|
||||||
|
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
subscribe(func) {
|
||||||
|
if (subscribers.length === 0) {
|
||||||
|
this.register();
|
||||||
|
}
|
||||||
|
const token = (++subUid).toString();
|
||||||
|
subscribers.push({
|
||||||
|
token,
|
||||||
|
func,
|
||||||
|
});
|
||||||
|
func(screens);
|
||||||
|
return token;
|
||||||
|
},
|
||||||
|
unsubscribe(token) {
|
||||||
|
subscribers = subscribers.filter(item => item.token !== token);
|
||||||
|
if (subscribers.length === 0) {
|
||||||
|
this.unregister();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
unregister() {
|
||||||
|
Object.keys(responsiveMap).map((screen) =>
|
||||||
|
enquire.unregister(responsiveMap[screen]),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
register() {
|
||||||
|
Object.keys(responsiveMap).map((screen) =>
|
||||||
|
enquire.register(responsiveMap[screen], {
|
||||||
|
match: () => {
|
||||||
|
const pointMap = {
|
||||||
|
...screens,
|
||||||
|
[screen]: true,
|
||||||
|
};
|
||||||
|
this.dispatch(pointMap);
|
||||||
|
},
|
||||||
|
unmatch: () => {
|
||||||
|
const pointMap = {
|
||||||
|
...screens,
|
||||||
|
[screen]: false,
|
||||||
|
};
|
||||||
|
this.dispatch(pointMap);
|
||||||
|
},
|
||||||
|
// Keep a empty destory to avoid triggering unmatch when unregister
|
||||||
|
destroy() {},
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default responsiveObserve;
|
||||||
|
|
@ -0,0 +1,74 @@
|
||||||
|
import PropTypes from '../_util/vue-types';
|
||||||
|
import { getOptionProps, getSlots, getComponentFromProp } from '../_util/props-util';
|
||||||
|
|
||||||
|
const ColProps = {
|
||||||
|
child: PropTypes.any,
|
||||||
|
bordered: PropTypes.bool,
|
||||||
|
colon: PropTypes.bool,
|
||||||
|
type: PropTypes.oneOf(['label', 'content']),
|
||||||
|
layout: PropTypes.oneOf(['horizontal', 'vertical']),
|
||||||
|
};
|
||||||
|
|
||||||
|
const Col = {
|
||||||
|
props: ColProps,
|
||||||
|
render() {
|
||||||
|
const { child, bordered, colon, type, layout } = this.$props;
|
||||||
|
const { prefixCls, span = 1 } = getOptionProps(child);
|
||||||
|
|
||||||
|
const label = getComponentFromProp(child, 'label');
|
||||||
|
const slots = getSlots(child);
|
||||||
|
const labelProps = {
|
||||||
|
attrs: {},
|
||||||
|
class: [`${prefixCls}-item-label`, {
|
||||||
|
[`${prefixCls}-item-colon`]: colon,
|
||||||
|
[`${prefixCls}-item-no-label`]: !label,
|
||||||
|
}],
|
||||||
|
key: 'label',
|
||||||
|
};
|
||||||
|
if (layout === 'vertical') {
|
||||||
|
labelProps.attrs.colSpan = span * 2 - 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (bordered) {
|
||||||
|
if (type === 'label') {
|
||||||
|
return <th {...labelProps}>{label}</th>;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<td class={`${prefixCls}-item-content`} key="content" colSpan={span * 2 - 1}>
|
||||||
|
{slots.default}
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (layout === 'vertical') {
|
||||||
|
if (type === 'content') {
|
||||||
|
return (
|
||||||
|
<td colSpan={span} class={`${prefixCls}-item`}>
|
||||||
|
<span class={`${prefixCls}-item-content`} key="content">
|
||||||
|
{slots.default}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<td colSpan={span} class={`${prefixCls}-item`}>
|
||||||
|
<span
|
||||||
|
class={[`${prefixCls}-item-label`, { [`${prefixCls}-item-colon`]: colon }]}
|
||||||
|
key="label"
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<td colSpan={span} class={`${prefixCls}-item`}>
|
||||||
|
<span {...labelProps}>{label}</span>
|
||||||
|
<span class={`${prefixCls}-item-content`} key="content">
|
||||||
|
{slots.default}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Col;
|
||||||
|
|
@ -0,0 +1,287 @@
|
||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`renders ./components/descriptions/demo/basic.md correctly 1`] = `
|
||||||
|
<div class="ant-descriptions">
|
||||||
|
<div class="ant-descriptions-title">User Info</div>
|
||||||
|
<div class="ant-descriptions-view">
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">UserName</span><span class="ant-descriptions-item-content">Zhou Maomao</span></td>
|
||||||
|
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Telephone</span><span class="ant-descriptions-item-content">1810000000</span></td>
|
||||||
|
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Live</span><span class="ant-descriptions-item-content">Hangzhou, Zhejiang</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Remark</span><span class="ant-descriptions-item-content">empty</span></td>
|
||||||
|
<td colspan="2" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Address</span><span class="ant-descriptions-item-content">
|
||||||
|
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
|
||||||
|
</span></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
|
||||||
|
<div class="ant-descriptions ant-descriptions-bordered">
|
||||||
|
<div class="ant-descriptions-title">User Info</div>
|
||||||
|
<div class="ant-descriptions-view">
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<th class="ant-descriptions-item-label ant-descriptions-item-colon">Product</th>
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">Cloud Database</td>
|
||||||
|
<th class="ant-descriptions-item-label ant-descriptions-item-colon">Billing Mode</th>
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">Prepaid</td>
|
||||||
|
<th class="ant-descriptions-item-label ant-descriptions-item-colon">Automatic Renewal</th>
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">YES</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<th class="ant-descriptions-item-label ant-descriptions-item-colon">Order time</th>
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">2018-04-24 18:00:00</td>
|
||||||
|
<th class="ant-descriptions-item-label ant-descriptions-item-colon">Usage Time</th>
|
||||||
|
<td colspan="3" class="ant-descriptions-item-content">
|
||||||
|
2019-04-24 18:00:00
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<th class="ant-descriptions-item-label ant-descriptions-item-colon">Status</th>
|
||||||
|
<td colspan="5" class="ant-descriptions-item-content"><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-processing"></span><span class="ant-badge-status-text">Running</span></span></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<th class="ant-descriptions-item-label ant-descriptions-item-colon">Negotiated Amount</th>
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">$80.00</td>
|
||||||
|
<th class="ant-descriptions-item-label ant-descriptions-item-colon">Discount</th>
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">$20.00</td>
|
||||||
|
<th class="ant-descriptions-item-label ant-descriptions-item-colon">Official Receipts</th>
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">$60.00</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<th class="ant-descriptions-item-label ant-descriptions-item-colon">Config Info</th>
|
||||||
|
<td colspan="5" class="ant-descriptions-item-content">
|
||||||
|
Data disk type: MongoDB
|
||||||
|
<br>
|
||||||
|
Database version: 3.4
|
||||||
|
<br>
|
||||||
|
Package: dds.mongo.mid
|
||||||
|
<br>
|
||||||
|
Storage space: 10 GB
|
||||||
|
<br>
|
||||||
|
Replication_factor:3
|
||||||
|
<br>
|
||||||
|
Region: East China 1<br></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
|
||||||
|
<div>
|
||||||
|
<div class="ant-descriptions ant-descriptions-bordered">
|
||||||
|
<div class="ant-descriptions-title">Responsive Descriptions</div>
|
||||||
|
<div class="ant-descriptions-view">
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<th class="ant-descriptions-item-label ant-descriptions-item-colon">Product</th>
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">Cloud Database</td>
|
||||||
|
<th class="ant-descriptions-item-label ant-descriptions-item-colon">Billing</th>
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">Prepaid</td>
|
||||||
|
<th class="ant-descriptions-item-label ant-descriptions-item-colon">time</th>
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">18:00:00</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<th class="ant-descriptions-item-label ant-descriptions-item-colon">Amount</th>
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">$80.00</td>
|
||||||
|
<th class="ant-descriptions-item-label ant-descriptions-item-colon">Discount</th>
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">$20.00</td>
|
||||||
|
<th class="ant-descriptions-item-label ant-descriptions-item-colon">Official</th>
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">$60.00</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<th class="ant-descriptions-item-label ant-descriptions-item-colon">Config Info</th>
|
||||||
|
<td colspan="5" class="ant-descriptions-item-content">
|
||||||
|
Data disk type: MongoDB
|
||||||
|
<br>
|
||||||
|
Database version: 3.4
|
||||||
|
<br>
|
||||||
|
Package: dds.mongo.mid
|
||||||
|
<br>
|
||||||
|
Storage space: 10 GB
|
||||||
|
<br>
|
||||||
|
Replication_factor:3
|
||||||
|
<br>
|
||||||
|
Region: East China 1
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
|
||||||
|
<div>
|
||||||
|
<div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper ant-radio-wrapper-checked"><span class="ant-radio ant-radio-checked"><input type="radio" class="ant-radio-input" value="default"><span class="ant-radio-inner"></span></span><span>default</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="middle"><span class="ant-radio-inner"></span></span><span>middle</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="small"><span class="ant-radio-inner"></span></span><span>small</span></label></div> <br> <br>
|
||||||
|
<div class="ant-descriptions ant-descriptions-bordered">
|
||||||
|
<div class="ant-descriptions-title">Custom Size</div>
|
||||||
|
<div class="ant-descriptions-view">
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<th class="ant-descriptions-item-label ant-descriptions-item-colon">Product</th>
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">Cloud Database</td>
|
||||||
|
<th class="ant-descriptions-item-label ant-descriptions-item-colon">Billing</th>
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">Prepaid</td>
|
||||||
|
<th class="ant-descriptions-item-label ant-descriptions-item-colon">time</th>
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">18:00:00</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<th class="ant-descriptions-item-label ant-descriptions-item-colon">Amount</th>
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">$80.00</td>
|
||||||
|
<th class="ant-descriptions-item-label ant-descriptions-item-colon">Discount</th>
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">$20.00</td>
|
||||||
|
<th class="ant-descriptions-item-label ant-descriptions-item-colon">Official</th>
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">$60.00</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<th class="ant-descriptions-item-label ant-descriptions-item-colon">Config Info</th>
|
||||||
|
<td colspan="5" class="ant-descriptions-item-content">
|
||||||
|
Data disk type: MongoDB
|
||||||
|
<br>
|
||||||
|
Database version: 3.4
|
||||||
|
<br>
|
||||||
|
Package: dds.mongo.mid
|
||||||
|
<br>
|
||||||
|
Storage space: 10 GB
|
||||||
|
<br>
|
||||||
|
Replication_factor:3
|
||||||
|
<br>
|
||||||
|
Region: East China 1<br></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div> <br> <br>
|
||||||
|
<div class="ant-descriptions">
|
||||||
|
<div class="ant-descriptions-title">Custom Size</div>
|
||||||
|
<div class="ant-descriptions-view">
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Product</span><span class="ant-descriptions-item-content">Cloud Database</span></td>
|
||||||
|
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Billing</span><span class="ant-descriptions-item-content">Prepaid</span></td>
|
||||||
|
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">time</span><span class="ant-descriptions-item-content">18:00:00</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Amount</span><span class="ant-descriptions-item-content">$80.00</span></td>
|
||||||
|
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Discount</span><span class="ant-descriptions-item-content">$20.00</span></td>
|
||||||
|
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Official</span><span class="ant-descriptions-item-content">$60.00</span></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./components/descriptions/demo/vertical.md correctly 1`] = `
|
||||||
|
<div class="ant-descriptions">
|
||||||
|
<div class="ant-descriptions-title">User Info</div>
|
||||||
|
<div class="ant-descriptions-view">
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">UserName</span></td>
|
||||||
|
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Telephone</span></td>
|
||||||
|
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Live</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-content">Zhou Maomao</span></td>
|
||||||
|
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-content">1810000000</span></td>
|
||||||
|
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-content">Hangzhou, Zhejiang</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<td colspan="2" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Address</span></td>
|
||||||
|
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-label ant-descriptions-item-colon">Remark</span></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<td colspan="2" class="ant-descriptions-item"><span class="ant-descriptions-item-content">
|
||||||
|
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
|
||||||
|
</span></td>
|
||||||
|
<td colspan="1" class="ant-descriptions-item"><span class="ant-descriptions-item-content">empty</span></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`] = `
|
||||||
|
<div class="ant-descriptions ant-descriptions-bordered">
|
||||||
|
<div class="ant-descriptions-title">User Info</div>
|
||||||
|
<div class="ant-descriptions-view">
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<th colspan="1" class="ant-descriptions-item-label ant-descriptions-item-colon">Product</th>
|
||||||
|
<th colspan="1" class="ant-descriptions-item-label ant-descriptions-item-colon">Billing Mode</th>
|
||||||
|
<th colspan="1" class="ant-descriptions-item-label ant-descriptions-item-colon">Automatic Renewal</th>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">Cloud Database</td>
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">Prepaid</td>
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">YES</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<th colspan="1" class="ant-descriptions-item-label ant-descriptions-item-colon">Order time</th>
|
||||||
|
<th colspan="3" class="ant-descriptions-item-label ant-descriptions-item-colon">Usage Time</th>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">2018-04-24 18:00:00</td>
|
||||||
|
<td colspan="3" class="ant-descriptions-item-content">
|
||||||
|
2019-04-24 18:00:00
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<th colspan="5" class="ant-descriptions-item-label ant-descriptions-item-colon">Status</th>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<td colspan="5" class="ant-descriptions-item-content"><span class="ant-badge ant-badge-status ant-badge-not-a-wrapper"><span class="ant-badge-status-dot ant-badge-status-processing"></span><span class="ant-badge-status-text">Running</span></span></td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<th colspan="1" class="ant-descriptions-item-label ant-descriptions-item-colon">Negotiated Amount</th>
|
||||||
|
<th colspan="1" class="ant-descriptions-item-label ant-descriptions-item-colon">Discount</th>
|
||||||
|
<th colspan="1" class="ant-descriptions-item-label ant-descriptions-item-colon">Official Receipts</th>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">$80.00</td>
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">$20.00</td>
|
||||||
|
<td colspan="1" class="ant-descriptions-item-content">$60.00</td>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<th colspan="5" class="ant-descriptions-item-label ant-descriptions-item-colon">Config Info</th>
|
||||||
|
</tr>
|
||||||
|
<tr class="ant-descriptions-row">
|
||||||
|
<td colspan="5" class="ant-descriptions-item-content">
|
||||||
|
Data disk type: MongoDB
|
||||||
|
<br>
|
||||||
|
Database version: 3.4
|
||||||
|
<br>
|
||||||
|
Package: dds.mongo.mid
|
||||||
|
<br>
|
||||||
|
Storage space: 10 GB
|
||||||
|
<br>
|
||||||
|
Replication_factor:3
|
||||||
|
<br>
|
||||||
|
Region: East China 1<br></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import demoTest from '../../../tests/shared/demoTest';
|
||||||
|
|
||||||
|
demoTest('descriptions');
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
<cn>
|
||||||
|
#### 基本
|
||||||
|
简单的展示。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Basic
|
||||||
|
Simplest Usage.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```tpl
|
||||||
|
<template>
|
||||||
|
<a-descriptions title="User Info">
|
||||||
|
<a-descriptions-item label="UserName">Zhou Maomao</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Telephone">1810000000</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Live">Hangzhou, Zhejiang</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Remark">empty</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Address">
|
||||||
|
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
|
||||||
|
</a-descriptions-item>
|
||||||
|
</a-descriptions>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<cn>
|
||||||
|
#### 带边框的
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### border
|
||||||
|
Descriptions with border and background color.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```tpl
|
||||||
|
<template>
|
||||||
|
<a-descriptions title="User Info" bordered>
|
||||||
|
<a-descriptions-item label="Product">Cloud Database</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Billing Mode">Prepaid</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Automatic Renewal">YES</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Order time">2018-04-24 18:00:00</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Usage Time" :span="2">
|
||||||
|
2019-04-24 18:00:00
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Status" :span="3">
|
||||||
|
<a-badge status="processing" text="Running" />
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Negotiated Amount">$80.00</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Discount">$20.00</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Official Receipts">$60.00</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Config Info">
|
||||||
|
Data disk type: MongoDB
|
||||||
|
<br />
|
||||||
|
Database version: 3.4
|
||||||
|
<br />
|
||||||
|
Package: dds.mongo.mid
|
||||||
|
<br />
|
||||||
|
Storage space: 10 GB
|
||||||
|
<br />
|
||||||
|
Replication_factor:3
|
||||||
|
<br />
|
||||||
|
Region: East China 1<br />
|
||||||
|
</a-descriptions-item>
|
||||||
|
</a-descriptions>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,53 @@
|
||||||
|
<script>
|
||||||
|
import Basic from './basic.md';
|
||||||
|
import Border from './border.md';
|
||||||
|
import Responsive from './responsive.md';
|
||||||
|
import Size from './size.md';
|
||||||
|
import VerticalBorder from './vertical-border.md';
|
||||||
|
import Vertical from './vertical.md';
|
||||||
|
|
||||||
|
import CN from '../index.zh-CN.md';
|
||||||
|
import US from '../index.en-US.md';
|
||||||
|
|
||||||
|
import '../style';
|
||||||
|
|
||||||
|
const md = {
|
||||||
|
cn: `# Descriptions 描述列表
|
||||||
|
成组展示多个只读字段。
|
||||||
|
## 何时使用
|
||||||
|
常见于详情页的信息展示。
|
||||||
|
## 代码演示
|
||||||
|
`,
|
||||||
|
us: `# Descriptions
|
||||||
|
Display multiple read-only fields in groups.
|
||||||
|
## When To Use
|
||||||
|
Commonly displayed on the details page.
|
||||||
|
## Examples
|
||||||
|
`,
|
||||||
|
};
|
||||||
|
export default {
|
||||||
|
category: 'Components',
|
||||||
|
type: 'Data Display',
|
||||||
|
zhType: '数据展示',
|
||||||
|
title: 'Descriptions',
|
||||||
|
subtitle: '描述列表',
|
||||||
|
cols: 1,
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<md cn={md.cn} us={md.us} />
|
||||||
|
<Basic />
|
||||||
|
<Border />
|
||||||
|
<Size />
|
||||||
|
<Responsive />
|
||||||
|
<Vertical />
|
||||||
|
<VerticalBorder />
|
||||||
|
<api>
|
||||||
|
<CN slot="cn" />
|
||||||
|
<US />
|
||||||
|
</api>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
<cn>
|
||||||
|
#### 响应式
|
||||||
|
通过响应式的配置可以实现在小屏幕设备上的完美呈现。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### responsive
|
||||||
|
通过响应式的配置可以实现在小屏幕设备上的完美呈现。
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```tpl
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<a-descriptions
|
||||||
|
title="Responsive Descriptions"
|
||||||
|
bordered
|
||||||
|
:column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
|
||||||
|
>
|
||||||
|
<a-descriptions-item label="Product">Cloud Database</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Billing">Prepaid</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="time">18:00:00</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Amount">$80.00</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Discount">$20.00</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Official">$60.00</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Config Info">
|
||||||
|
Data disk type: MongoDB
|
||||||
|
<br />
|
||||||
|
Database version: 3.4
|
||||||
|
<br />
|
||||||
|
Package: dds.mongo.mid
|
||||||
|
<br />
|
||||||
|
Storage space: 10 GB
|
||||||
|
<br />
|
||||||
|
Replication_factor:3
|
||||||
|
<br />
|
||||||
|
Region: East China 1
|
||||||
|
</a-descriptions-item>
|
||||||
|
</a-descriptions>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,69 @@
|
||||||
|
<cn>
|
||||||
|
#### 自定义尺寸
|
||||||
|
自定义尺寸，适应在各种容器中展示。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Custom size
|
||||||
|
Custom sizes to fit in a variety of containers.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```tpl
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<a-radio-group @change="onChange" v-model="size">
|
||||||
|
<a-radio value="default">default</a-radio>
|
||||||
|
<a-radio value="middle">middle</a-radio>
|
||||||
|
<a-radio value="small">small</a-radio>
|
||||||
|
</a-radio-group>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<a-descriptions bordered title="Custom Size" :size="size">
|
||||||
|
<a-descriptions-item label="Product">Cloud Database</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Billing">Prepaid</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="time">18:00:00</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Amount">$80.00</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Discount">$20.00</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Official">$60.00</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Config Info">
|
||||||
|
Data disk type: MongoDB
|
||||||
|
<br />
|
||||||
|
Database version: 3.4
|
||||||
|
<br />
|
||||||
|
Package: dds.mongo.mid
|
||||||
|
<br />
|
||||||
|
Storage space: 10 GB
|
||||||
|
<br />
|
||||||
|
Replication_factor:3
|
||||||
|
<br />
|
||||||
|
Region: East China 1<br />
|
||||||
|
</a-descriptions-item>
|
||||||
|
</a-descriptions>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<a-descriptions title="Custom Size" :size="size">
|
||||||
|
<a-descriptions-item label="Product">Cloud Database</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Billing">Prepaid</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="time">18:00:00</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Amount">$80.00</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Discount">$20.00</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Official">$60.00</a-descriptions-item>
|
||||||
|
</a-descriptions>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
size: 'default',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onChange(e) {
|
||||||
|
console.log('size checked', e.target.value);
|
||||||
|
this.size= e.target.value
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
<cn>
|
||||||
|
#### 垂直带边框的
|
||||||
|
垂直带边框和背景颜色的列表。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Vertical border
|
||||||
|
Descriptions with border and background color.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```tpl
|
||||||
|
<template>
|
||||||
|
<a-descriptions title="User Info" layout="vertical" bordered>
|
||||||
|
<a-descriptions-item label="Product">Cloud Database</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Billing Mode">Prepaid</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Automatic Renewal">YES</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Order time">2018-04-24 18:00:00</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Usage Time" :span="2">
|
||||||
|
2019-04-24 18:00:00
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Status" :span="3">
|
||||||
|
<a-badge status="processing" text="Running" />
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Negotiated Amount">$80.00</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Discount">$20.00</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Official Receipts">$60.00</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Config Info">
|
||||||
|
Data disk type: MongoDB
|
||||||
|
<br />
|
||||||
|
Database version: 3.4
|
||||||
|
<br />
|
||||||
|
Package: dds.mongo.mid
|
||||||
|
<br />
|
||||||
|
Storage space: 10 GB
|
||||||
|
<br />
|
||||||
|
Replication_factor:3
|
||||||
|
<br />
|
||||||
|
Region: East China 1<br />
|
||||||
|
</a-descriptions-item>
|
||||||
|
</a-descriptions>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,23 @@
|
||||||
|
<cn>
|
||||||
|
#### 垂直
|
||||||
|
垂直的列表。
|
||||||
|
</cn>
|
||||||
|
|
||||||
|
<us>
|
||||||
|
#### Vertical
|
||||||
|
Simplest Usage.
|
||||||
|
</us>
|
||||||
|
|
||||||
|
```tpl
|
||||||
|
<template>
|
||||||
|
<a-descriptions title="User Info" layout="vertical">
|
||||||
|
<a-descriptions-item label="UserName">Zhou Maomao</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Telephone">1810000000</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Live">Hangzhou, Zhejiang</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Address" span="2">
|
||||||
|
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
|
||||||
|
</a-descriptions-item>
|
||||||
|
<a-descriptions-item label="Remark">empty</a-descriptions-item>
|
||||||
|
</a-descriptions>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Descriptions props
|
||||||
|
|
||||||
|
| Property | Description | Type | Default |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| title | The title of the description list, placed at the top | string \| VNode \| v-slot:title | - |
|
||||||
|
| 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` | `default` |
|
||||||
|
| layout | Define description layout | `horizontal | vertical` | `horizontal` |
|
||||||
|
| colon | change default props `colon` value of `Descriptions.Item` | boolean | true |
|
||||||
|
|
||||||
|
### Item props
|
||||||
|
|
||||||
|
| Property | Description | Type | Default |
|
||||||
|
| -------- | ------------------------------ | ------------------------------- | ------- |
|
||||||
|
| label | description of the content | string \| VNode \| v-slot:label | - |
|
||||||
|
| span | The number of columns included | number | 1 |
|
||||||
|
|
||||||
|
> The number of span Descriptions.Item. span={2} takes up the width of two DescriptionsItems.
|
||||||
|
|
@ -0,0 +1,264 @@
|
||||||
|
import warning from '../_util/warning';
|
||||||
|
import ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve';
|
||||||
|
import { ConfigConsumerProps } from '../config-provider';
|
||||||
|
import Col from './Col';
|
||||||
|
import PropTypes from '../_util/vue-types';
|
||||||
|
import {
|
||||||
|
initDefaultProps,
|
||||||
|
isValidElement,
|
||||||
|
getOptionProps,
|
||||||
|
getComponentFromProp,
|
||||||
|
} from '../_util/props-util';
|
||||||
|
import BaseMixin from '../_util/BaseMixin';
|
||||||
|
import Base from '../base';
|
||||||
|
import { cloneElement } from '../_util/vnode';
|
||||||
|
|
||||||
|
export const DescriptionsItemProps = {
|
||||||
|
prefixCls: PropTypes.string,
|
||||||
|
label: PropTypes.any,
|
||||||
|
span: PropTypes.number,
|
||||||
|
};
|
||||||
|
|
||||||
|
function toArray(value) {
|
||||||
|
let ret = value;
|
||||||
|
if (value === undefined) {
|
||||||
|
ret = [];
|
||||||
|
} else if (!Array.isArray(value)) {
|
||||||
|
ret = [value];
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const DescriptionsItem = {
|
||||||
|
name: 'ADescriptionsItem',
|
||||||
|
props: initDefaultProps(DescriptionsItemProps, { span: 1 }),
|
||||||
|
};
|
||||||
|
|
||||||
|
export const DescriptionsProps = {
|
||||||
|
prefixCls: PropTypes.string,
|
||||||
|
bordered: PropTypes.bool,
|
||||||
|
size: PropTypes.oneOf(['default', 'middle', 'small']).def('default'),
|
||||||
|
title: PropTypes.any,
|
||||||
|
column: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
|
||||||
|
layout: PropTypes.oneOf(['horizontal', 'vertical']),
|
||||||
|
colon: PropTypes.bool,
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Convert children into `column` groups.
|
||||||
|
* @param children: DescriptionsItem
|
||||||
|
* @param column: number
|
||||||
|
*/
|
||||||
|
const generateChildrenRows = (children, column) => {
|
||||||
|
const rows = [];
|
||||||
|
let columns = null;
|
||||||
|
let leftSpans;
|
||||||
|
|
||||||
|
const itemNodes = toArray(children);
|
||||||
|
itemNodes.forEach((node, index) => {
|
||||||
|
const itemProps = getOptionProps(node);
|
||||||
|
let itemNode = node;
|
||||||
|
|
||||||
|
if (!columns) {
|
||||||
|
leftSpans = column;
|
||||||
|
columns = [];
|
||||||
|
rows.push(columns);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Always set last span to align the end of Descriptions
|
||||||
|
const lastItem = index === itemNodes.length - 1;
|
||||||
|
let lastSpanSame = true;
|
||||||
|
if (lastItem) {
|
||||||
|
lastSpanSame = !itemProps.span || itemProps.span === leftSpans;
|
||||||
|
itemNode = cloneElement(itemNode, {
|
||||||
|
props: {
|
||||||
|
span: leftSpans,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate left fill span
|
||||||
|
const { span = 1 } = itemProps;
|
||||||
|
columns.push(itemNode);
|
||||||
|
leftSpans -= span;
|
||||||
|
|
||||||
|
if (leftSpans <= 0) {
|
||||||
|
columns = null;
|
||||||
|
|
||||||
|
warning(
|
||||||
|
leftSpans === 0 && lastSpanSame,
|
||||||
|
'Descriptions: Sum of column `span` in a line exceeds `column` of Descriptions.',
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return rows;
|
||||||
|
};
|
||||||
|
|
||||||
|
const defaultColumnMap = {
|
||||||
|
xxl: 3,
|
||||||
|
xl: 3,
|
||||||
|
lg: 3,
|
||||||
|
md: 3,
|
||||||
|
sm: 2,
|
||||||
|
xs: 1,
|
||||||
|
};
|
||||||
|
|
||||||
|
const Descriptions = {
|
||||||
|
name: 'ADescriptions',
|
||||||
|
Item: DescriptionsItem,
|
||||||
|
mixins: [BaseMixin],
|
||||||
|
inject: {
|
||||||
|
configProvider: { default: () => ConfigConsumerProps },
|
||||||
|
},
|
||||||
|
props: initDefaultProps(DescriptionsProps, {
|
||||||
|
column: defaultColumnMap,
|
||||||
|
}),
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
screens: {},
|
||||||
|
token: undefined,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getColumn() {
|
||||||
|
const { column } = this.$props;
|
||||||
|
if (typeof column === 'object') {
|
||||||
|
for (let i = 0; i < responsiveArray.length; i++) {
|
||||||
|
const breakpoint = responsiveArray[i];
|
||||||
|
if (this.screens[breakpoint] && column[breakpoint] !== undefined) {
|
||||||
|
return column[breakpoint] || defaultColumnMap[breakpoint];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// If the configuration is not an object, it is a number, return number
|
||||||
|
if (typeof column === 'number') {
|
||||||
|
return column;
|
||||||
|
}
|
||||||
|
// If it is an object, but no response is found, this happens only in the test.
|
||||||
|
// Maybe there are some strange environments
|
||||||
|
return 3;
|
||||||
|
},
|
||||||
|
renderRow(children, index, { prefixCls }, bordered, layout, colon) {
|
||||||
|
const renderCol = (colItem, type, idx) => {
|
||||||
|
return (
|
||||||
|
<Col
|
||||||
|
child={colItem}
|
||||||
|
bordered={bordered}
|
||||||
|
colon={colon}
|
||||||
|
type={type}
|
||||||
|
key={`${type}-${colItem.key || idx}`}
|
||||||
|
layout={layout}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const cloneChildren = [];
|
||||||
|
const cloneContentChildren = [];
|
||||||
|
toArray(children).forEach((childrenItem, idx) => {
|
||||||
|
cloneChildren.push(renderCol(childrenItem, 'label', idx));
|
||||||
|
if (layout === 'vertical') {
|
||||||
|
cloneContentChildren.push(renderCol(childrenItem, 'content', idx));
|
||||||
|
} else if (bordered) {
|
||||||
|
cloneChildren.push(renderCol(childrenItem, 'content', idx));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (layout === 'vertical') {
|
||||||
|
return [
|
||||||
|
<tr class={`${prefixCls}-row`} key={`label-${index}`}>
|
||||||
|
{cloneChildren}
|
||||||
|
</tr>,
|
||||||
|
<tr class={`${prefixCls}-row`} key={`content-${index}`}>
|
||||||
|
{cloneContentChildren}
|
||||||
|
</tr>,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<tr class={`${prefixCls}-row`} key={index}>
|
||||||
|
{cloneChildren}
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const { column } = this.$props;
|
||||||
|
this.token = ResponsiveObserve.subscribe(screens => {
|
||||||
|
if (typeof column !== 'object') {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.setState({
|
||||||
|
screens,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
beforeDestory() {
|
||||||
|
ResponsiveObserve.unsubscribe(this.token);
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
prefixCls: customizePrefixCls,
|
||||||
|
size,
|
||||||
|
bordered = false,
|
||||||
|
layout = 'horizontal',
|
||||||
|
colon = true,
|
||||||
|
} = this.$props;
|
||||||
|
const title = getComponentFromProp(this, 'title') || null;
|
||||||
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||||
|
const prefixCls = getPrefixCls('descriptions', customizePrefixCls);
|
||||||
|
|
||||||
|
const column = this.getColumn();
|
||||||
|
const children = this.$slots.default;
|
||||||
|
const cloneChildren = toArray(children)
|
||||||
|
.map(child => {
|
||||||
|
if (isValidElement(child)) {
|
||||||
|
return cloneElement(child, {
|
||||||
|
props: {
|
||||||
|
prefixCls,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
})
|
||||||
|
.filter(node => node);
|
||||||
|
|
||||||
|
const childrenArray = generateChildrenRows(cloneChildren, column);
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
class={[prefixCls, {
|
||||||
|
[`${prefixCls}-${size}`]: size !== 'default',
|
||||||
|
[`${prefixCls}-bordered`]: !!bordered,
|
||||||
|
}]}
|
||||||
|
>
|
||||||
|
{title && <div class={`${prefixCls}-title`}>{title}</div>}
|
||||||
|
<div class={`${prefixCls}-view`}>
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
{childrenArray.map((child, index) =>
|
||||||
|
this.renderRow(
|
||||||
|
child,
|
||||||
|
index,
|
||||||
|
{
|
||||||
|
prefixCls,
|
||||||
|
},
|
||||||
|
bordered,
|
||||||
|
layout,
|
||||||
|
colon,
|
||||||
|
),
|
||||||
|
)}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
Descriptions.install = function(Vue) {
|
||||||
|
Vue.use(Base);
|
||||||
|
Vue.component(Descriptions.name, Descriptions);
|
||||||
|
Vue.component(Descriptions.Item.name, Descriptions.Item);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Descriptions;
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
## API
|
||||||
|
|
||||||
|
### Descriptions props
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| --- | --- | --- | --- |
|
||||||
|
| title | 描述列表的标题，显示在最顶部 | string \| VNode \| v-slot:title | - |
|
||||||
|
| bordered | 是否展示边框 | boolean | false |
|
||||||
|
| column | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number | 3 |
|
||||||
|
| size | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效） | `default | middle | small` | `default` |
|
||||||
|
| layout | 描述布局 | `horizontal | vertical` | `horizontal` |
|
||||||
|
| colon | 配置 `Descriptions.Item` 的 `colon` 的默认值 | boolean | true |
|
||||||
|
|
||||||
|
### Item props
|
||||||
|
|
||||||
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
|
| ----- | ------------ | ------------------------------- | ------ |
|
||||||
|
| label | 内容的描述 | string \| VNode \| v-slot:label | - |
|
||||||
|
| span | 包含列的数量 | number | 1 |
|
||||||
|
|
||||||
|
> span 是 Descriptions.Item 的数量。 span={2} 会占用两个 DescriptionsItem 的宽度。
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
import '../../style/index.less';
|
||||||
|
import './index.less';
|
||||||
|
|
@ -0,0 +1,145 @@
|
||||||
|
@import '../../style/themes/default';
|
||||||
|
@import '../../style/mixins/index';
|
||||||
|
|
||||||
|
@descriptions-prefix-cls: ~'@{ant-prefix}-descriptions';
|
||||||
|
|
||||||
|
@descriptions-default-padding: 16px 24px;
|
||||||
|
@descriptions-middle-padding: 12px 24px;
|
||||||
|
@descriptions-small-padding: 8px 16px;
|
||||||
|
|
||||||
|
.@{descriptions-prefix-cls} {
|
||||||
|
&-title {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: @heading-color;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: @font-size-lg;
|
||||||
|
line-height: @line-height-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-view {
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: @border-radius-base;
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
table-layout: fixed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-row {
|
||||||
|
> th,
|
||||||
|
> td {
|
||||||
|
padding-bottom: 16px;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-item-label {
|
||||||
|
color: @heading-color;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: @font-size-base;
|
||||||
|
line-height: @line-height-base;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
position: relative;
|
||||||
|
top: -0.5px;
|
||||||
|
margin: 0 8px 0 2px;
|
||||||
|
content: ' ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-item-colon {
|
||||||
|
&::after {
|
||||||
|
content: ':';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-item-no-label {
|
||||||
|
&::after {
|
||||||
|
margin: 0;
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-item-content {
|
||||||
|
display: table-cell;
|
||||||
|
color: @text-color;
|
||||||
|
font-size: @font-size-base;
|
||||||
|
line-height: @line-height-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
padding-bottom: 0;
|
||||||
|
> span {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-middle {
|
||||||
|
.@{descriptions-prefix-cls}-row {
|
||||||
|
> th,
|
||||||
|
> td {
|
||||||
|
padding-bottom: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-small {
|
||||||
|
.@{descriptions-prefix-cls}-row {
|
||||||
|
> th,
|
||||||
|
> td {
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-bordered {
|
||||||
|
.@{descriptions-prefix-cls}-view {
|
||||||
|
border: 1px solid @border-color-split;
|
||||||
|
> table {
|
||||||
|
table-layout: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{descriptions-prefix-cls}-item-label,
|
||||||
|
.@{descriptions-prefix-cls}-item-content {
|
||||||
|
padding: @descriptions-default-padding;
|
||||||
|
border-right: 1px solid @border-color-split;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{descriptions-prefix-cls}-item-label {
|
||||||
|
background-color: @descriptions-bg;
|
||||||
|
&::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{descriptions-prefix-cls}-row {
|
||||||
|
border-bottom: 1px solid @border-color-split;
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.@{descriptions-prefix-cls}-middle {
|
||||||
|
.@{descriptions-prefix-cls}-item-label,
|
||||||
|
.@{descriptions-prefix-cls}-item-content {
|
||||||
|
padding: @descriptions-middle-padding;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.@{descriptions-prefix-cls}-small {
|
||||||
|
.@{descriptions-prefix-cls}-item-label,
|
||||||
|
.@{descriptions-prefix-cls}-item-content {
|
||||||
|
padding: @descriptions-small-padding;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -139,6 +139,8 @@ import { default as Empty } from './empty';
|
||||||
|
|
||||||
import { default as Result } from './result';
|
import { default as Result } from './result';
|
||||||
|
|
||||||
|
import { default as Descriptions } from './descriptions';
|
||||||
|
|
||||||
const components = [
|
const components = [
|
||||||
Base,
|
Base,
|
||||||
Affix,
|
Affix,
|
||||||
|
|
@ -198,6 +200,7 @@ const components = [
|
||||||
ConfigProvider,
|
ConfigProvider,
|
||||||
Empty,
|
Empty,
|
||||||
Result,
|
Result,
|
||||||
|
Descriptions,
|
||||||
];
|
];
|
||||||
|
|
||||||
const install = function(Vue) {
|
const install = function(Vue) {
|
||||||
|
|
@ -283,6 +286,7 @@ export {
|
||||||
ConfigProvider,
|
ConfigProvider,
|
||||||
Empty,
|
Empty,
|
||||||
Result,
|
Result,
|
||||||
|
Descriptions,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
|
|
||||||
|
|
@ -56,3 +56,4 @@ import './config-provider/style';
|
||||||
import './empty/style';
|
import './empty/style';
|
||||||
import './statistic/style';
|
import './statistic/style';
|
||||||
import './result/style';
|
import './result/style';
|
||||||
|
import './descriptions/style';
|
||||||
|
|
|
||||||
|
|
@ -174,6 +174,9 @@
|
||||||
@checkbox-check-color: #fff;
|
@checkbox-check-color: #fff;
|
||||||
@checkbox-border-width: @border-width-base;
|
@checkbox-border-width: @border-width-base;
|
||||||
|
|
||||||
|
// Descriptions
|
||||||
|
@descriptions-bg: #fafafa;
|
||||||
|
|
||||||
// Empty
|
// Empty
|
||||||
@empty-font-size: @font-size-base;
|
@empty-font-size: @font-size-base;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -62,6 +62,7 @@ import {
|
||||||
Empty,
|
Empty,
|
||||||
Base,
|
Base,
|
||||||
Result,
|
Result,
|
||||||
|
Descriptions,
|
||||||
} from 'ant-design-vue';
|
} from 'ant-design-vue';
|
||||||
|
|
||||||
Vue.prototype.$message = message;
|
Vue.prototype.$message = message;
|
||||||
|
|
@ -132,6 +133,7 @@ Vue.use(Comment);
|
||||||
Vue.use(ConfigProvider);
|
Vue.use(ConfigProvider);
|
||||||
Vue.use(Empty);
|
Vue.use(Empty);
|
||||||
Vue.use(Result);
|
Vue.use(Result);
|
||||||
|
Vue.use(Descriptions);
|
||||||
|
|
||||||
/* v1.1.2 registration methods */
|
/* v1.1.2 registration methods */
|
||||||
// Vue.component(Affix.name, Affix) // a-affix
|
// Vue.component(Affix.name, Affix) // a-affix
|
||||||
|
|
|
||||||
|
|
@ -364,4 +364,10 @@ export default {
|
||||||
type: 'Data Display',
|
type: 'Data Display',
|
||||||
title: 'Statistic',
|
title: 'Statistic',
|
||||||
},
|
},
|
||||||
|
descriptions: {
|
||||||
|
category: 'Components',
|
||||||
|
subtitle: '描述列表',
|
||||||
|
type: 'Data Display',
|
||||||
|
title: 'Descriptions'
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -463,4 +463,12 @@ export default [
|
||||||
path: 'result-cn',
|
path: 'result-cn',
|
||||||
component: () => import('../components/result/demo/index.vue'),
|
component: () => import('../components/result/demo/index.vue'),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'descriptions',
|
||||||
|
component: () => import('../components/descriptions/demo/index.vue'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'descriptions-cn',
|
||||||
|
component: () => import('../components/descriptions/demo/index.vue'),
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
|
||||||
|
|
@ -63,6 +63,7 @@ Array [
|
||||||
"Comment",
|
"Comment",
|
||||||
"ConfigProvider",
|
"ConfigProvider",
|
||||||
"Empty",
|
"Empty",
|
||||||
|
"Descriptions",
|
||||||
"default",
|
"default",
|
||||||
]
|
]
|
||||||
`;
|
`;
|
||||||
|
|
|
||||||
|
|
@ -62,6 +62,7 @@ import { Timeline } from './timeline/timeline';
|
||||||
import { Tooltip } from './tootip/tooltip';
|
import { Tooltip } from './tootip/tooltip';
|
||||||
import { Upload } from './upload';
|
import { Upload } from './upload';
|
||||||
import { Result } from './result';
|
import { Result } from './result';
|
||||||
|
import { Descriptions } from './descriptions/descriptions'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Install all ant-design-vue components into Vue.
|
* Install all ant-design-vue components into Vue.
|
||||||
|
|
@ -131,4 +132,5 @@ export {
|
||||||
Drawer,
|
Drawer,
|
||||||
Skeleton,
|
Skeleton,
|
||||||
Result,
|
Result,
|
||||||
|
Descriptions,
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
// Project: https://github.com/vueComponent/ant-design-vue
|
||||||
|
// Definitions by: akki-jat <https://github.com/akki-jat>
|
||||||
|
// Definitions: https://github.com/vueComponent/ant-design-vue/types
|
||||||
|
|
||||||
|
import { AntdComponent } from '../component';
|
||||||
|
|
||||||
|
export declare class DescriptionsItem extends AntdComponent {
|
||||||
|
/**
|
||||||
|
* the label of descriptions item
|
||||||
|
* @type any
|
||||||
|
*/
|
||||||
|
label: any;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* can be set to small large or omitted
|
||||||
|
* @default 1
|
||||||
|
* @type number
|
||||||
|
*/
|
||||||
|
span: number;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,57 @@
|
||||||
|
// Project: https://github.com/vueComponent/ant-design-vue
|
||||||
|
// Definitions by: akki-jat <https://github.com/akki-jat>
|
||||||
|
// Definitions: https://github.com/vueComponent/ant-design-vue/types
|
||||||
|
|
||||||
|
import { AntdComponent } from '../component';
|
||||||
|
import { DescriptionsItem } from './descriptions-item';
|
||||||
|
|
||||||
|
export declare class Descriptions extends AntdComponent {
|
||||||
|
static Item: typeof DescriptionsItem;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* descriptions size type
|
||||||
|
* @default 'default'
|
||||||
|
* @type string
|
||||||
|
*/
|
||||||
|
size: 'default' | 'middle' | 'small';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* custom prefixCls
|
||||||
|
* @type string
|
||||||
|
*/
|
||||||
|
prefixCls: string;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* whether descriptions have border
|
||||||
|
* @default false
|
||||||
|
* @type boolean
|
||||||
|
*/
|
||||||
|
bordered: boolean;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* custom title
|
||||||
|
* @type any
|
||||||
|
*/
|
||||||
|
title: any;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* the number of descriptionsitem in one line
|
||||||
|
* @default 3
|
||||||
|
* @type number | object
|
||||||
|
*/
|
||||||
|
column: number | object;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* descriptions layout
|
||||||
|
* @default 'horizontal'
|
||||||
|
* @type string
|
||||||
|
*/
|
||||||
|
layout: 'horizontal' | 'vertical';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* whether have colon in descriptionsitem
|
||||||
|
* @default true
|
||||||
|
* @type boolean
|
||||||
|
*/
|
||||||
|
colon: boolean;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue