You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
402 lines
31 KiB
402 lines
31 KiB
1 year ago
|
"use strict";(self.webpackChunkantd=self.webpackChunkantd||[]).push([[2599],{965741:function(m,r,t){t.r(r);var u=t(502143),_=t(968521),D=t(720719),b=t(28840),g=t(759907),o=t(828089),v=t(825673),I=t(902068),h=t(574399),Z=t(863942),f=t(316073),x=t(24628),P=t(719260),E=t(956140),c=t(127179),l=t(905388),R=t(40428),k=t(606965),C=t(268696),y=t(587302),i=t(424128),M=t(249706),B=t(795127),O=t(116846),A=t(212039),w=t(73024),T=t(553913),s=t(606641),a=t(667294),e=t(370917);function d(){var p=(0,s.eL)(),n=p.texts;return(0,e.tZ)(s.dY,null,(0,e.tZ)(a.Fragment,null,(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("p",null,n[0].value),(0,e.tZ)("h2",{id:"when-to-use"},(0,e.tZ)(i.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#when-to-use",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"When To Use"),(0,e.tZ)("p",null,n[1].value),(0,e.tZ)("h2",{id:"examples"},(0,e.tZ)(i.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#examples",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Examples")),(0,e.tZ)(l.Z,{items:[{demo:{id:"components-descriptions-demo-basic"},previewerProps:{title:"Basic",filename:"components/descriptions/demo/basic.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Descriptions } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<Descriptions title="User Info">
|
||
|
|
<Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Remark">empty</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Address">
|
||
|
|
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
|
||
|
|
</Descriptions.Item>
|
||
|
|
</Descriptions>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Simplest Usage.</p>"}},{demo:{id:"components-descriptions-demo-border"},previewerProps:{title:"border",filename:"components/descriptions/demo/border.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Badge, Descriptions } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<Descriptions title="User Info" bordered>
|
||
|
|
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Usage Time" span={2}>
|
||
|
|
2019-04-24 18:00:00
|
||
|
|
</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Status" span={3}>
|
||
|
|
<Badge status="processing" text="Running" />
|
||
|
|
</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Negotiated Amount">$80.00</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Discount">$20.00</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item>
|
||
|
|
<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 />
|
||
|
|
</Descriptions.Item>
|
||
|
|
</Descriptions>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Descriptions with border and background color.</p>"}},{demo:{id:"components-descriptions-demo-text"},previewerProps:{debug:!0,title:"border",filename:"components/descriptions/demo/text.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Badge, Descriptions, Table } from 'antd';
|
||
|
|
const dataSource = [
|
||
|
|
{
|
||
|
|
key: '1',
|
||
|
|
name: '\u80E1\u5F66\u658C',
|
||
|
|
age: 32,
|
||
|
|
address: '\u897F\u6E56\u533A\u6E56\u5E95\u516C\u56ED1\u53F7',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
key: '2',
|
||
|
|
name: '\u80E1\u5F66\u7956',
|
||
|
|
age: 42,
|
||
|
|
address: '\u897F\u6E56\u533A\u6E56\u5E95\u516C\u56ED1\u53F7',
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const columns = [
|
||
|
|
{
|
||
|
|
title: '\u59D3\u540D',
|
||
|
|
dataIndex: 'name',
|
||
|
|
key: 'name',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '\u5E74\u9F84',
|
||
|
|
dataIndex: 'age',
|
||
|
|
key: 'age',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: '\u4F4F\u5740',
|
||
|
|
dataIndex: 'address',
|
||
|
|
key: 'address',
|
||
|
|
},
|
||
|
|
];
|
||
|
|
const App = () => (
|
||
|
|
<Descriptions title="User Info" column={2}>
|
||
|
|
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
|
||
|
|
<Descriptions.Item
|
||
|
|
label={
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
display: 'flex',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
Billing Mode
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
>
|
||
|
|
Prepaid
|
||
|
|
</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Usage Time" span={2}>
|
||
|
|
2019-04-24 18:00:00
|
||
|
|
</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Status" span={3}>
|
||
|
|
<Badge status="processing" text="Running" />
|
||
|
|
</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Negotiated Amount">$80.00</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Discount">$20.00</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item>
|
||
|
|
<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 />
|
||
|
|
</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Config Info">
|
||
|
|
<Table size="small" pagination={false} dataSource={dataSource} columns={columns} />
|
||
|
|
</Descriptions.Item>
|
||
|
|
</Descriptions>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Descriptions with border and background color.</p>"}},{demo:{id:"components-descriptions-demo-size"},previewerProps:{title:"Custom size",filename:"components/descriptions/demo/size.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
||
|
|
import { Button, Descriptions, Radio } from 'antd';
|
||
|
|
const App = () => {
|
||
|
|
const [size, setSize] = useState('default');
|
||
|
|
const onChange = (e) => {
|
||
|
|
console.log('size checked', e.target.value);
|
||
|
|
setSize(e.target.value);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<Radio.Group onChange={onChange} value={size}>
|
||
|
|
<Radio value="default">default</Radio>
|
||
|
|
<Radio value="middle">middle</Radio>
|
||
|
|
<Radio value="small">small</Radio>
|
||
|
|
</Radio.Group>
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<Descriptions
|
||
|
|
bordered
|
||
|
|
title="Custom Size"
|
||
|
|
size={size}
|
||
|
|
extra={<Button type="primary">Edit</Button>}
|
||
|
|
>
|
||
|
|
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="time">18:00:00</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Amount">$80.00</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Discount">$20.00</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Official">$60.00</Descriptions.Item>
|
||
|
|
<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 />
|
||
|
|
</Descriptions.Item>
|
||
|
|
</Descriptions>
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<Descriptions title="Custom Size" size={size} extra={<Button type="primary">Edit</Button>}>
|
||
|
|
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="time">18:00:00</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Amount">$80.00</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Discount">$20.00</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Official">$60.00</Descriptions.Item>
|
||
|
|
</Descriptions>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Custom sizes to fit in a variety of containers.</p>"}},{demo:{id:"components-descriptions-demo-responsive"},previewerProps:{title:"responsive",filename:"components/descriptions/demo/responsive.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Descriptions } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<div>
|
||
|
|
<Descriptions
|
||
|
|
title="Responsive Descriptions"
|
||
|
|
bordered
|
||
|
|
column={{
|
||
|
|
xxl: 4,
|
||
|
|
xl: 3,
|
||
|
|
lg: 3,
|
||
|
|
md: 3,
|
||
|
|
sm: 2,
|
||
|
|
xs: 1,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="time">18:00:00</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Amount">$80.00</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Discount">$20.00</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Official">$60.00</Descriptions.Item>
|
||
|
|
<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
|
||
|
|
</Descriptions.Item>
|
||
|
|
</Descriptions>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Responsive configuration enables perfect presentation on small screen devices.</p>"}},{demo:{id:"components-descriptions-demo-vertical"},previewerProps:{title:"Vertical",filename:"components/descriptions/demo/vertical.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Descriptions } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<Descriptions title="User Info" layout="vertical">
|
||
|
|
<Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Address" span={2}>
|
||
|
|
No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
|
||
|
|
</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Remark">empty</Descriptions.Item>
|
||
|
|
</Descriptions>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Simplest Usage.</p>"}},{demo:{id:"components-descriptions-demo-vertical-border"},previewerProps:{title:"Vertical border",filename:"components/descriptions/demo/vertical-border.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React from 'react';
|
||
|
|
import { Badge, Descriptions } from 'antd';
|
||
|
|
const App = () => (
|
||
|
|
<Descriptions title="User Info" layout="vertical" bordered>
|
||
|
|
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Order time">2018-04-24 18:00:00</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Usage Time" span={2}>
|
||
|
|
2019-04-24 18:00:00
|
||
|
|
</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Status" span={3}>
|
||
|
|
<Badge status="processing" text="Running" />
|
||
|
|
</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Negotiated Amount">$80.00</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Discount">$20.00</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Official Receipts">$60.00</Descriptions.Item>
|
||
|
|
<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 />
|
||
|
|
</Descriptions.Item>
|
||
|
|
</Descriptions>
|
||
|
|
);
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Descriptions with border and background color.</p>"}},{demo:{id:"components-descriptions-demo-style"},previewerProps:{debug:!0,title:"Customize label & wrapper style",filename:"components/descriptions/demo/style.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import React, { useState } from 'react';
|
||
|
|
import { Descriptions, Divider, Radio, Switch } from 'antd';
|
||
|
|
const labelStyle = {
|
||
|
|
background: 'red',
|
||
|
|
};
|
||
|
|
const contentStyle = {
|
||
|
|
background: 'green',
|
||
|
|
};
|
||
|
|
const App = () => {
|
||
|
|
const [border, setBorder] = useState(true);
|
||
|
|
const [layout, setLayout] = useState('horizontal');
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Switch
|
||
|
|
checkedChildren="Border"
|
||
|
|
unCheckedChildren="No Border"
|
||
|
|
checked={border}
|
||
|
|
onChange={(e) => setBorder(e)}
|
||
|
|
/>
|
||
|
|
<Divider />
|
||
|
|
<Radio.Group onChange={(e) => setLayout(e.target.value)} value={layout}>
|
||
|
|
<Radio value="horizontal">horizontal</Radio>
|
||
|
|
<Radio value="vertical">vertical</Radio>
|
||
|
|
</Radio.Group>
|
||
|
|
<Divider />
|
||
|
|
<Descriptions title="User Info" bordered={border} layout={layout}>
|
||
|
|
<Descriptions.Item label="Product" labelStyle={labelStyle} contentStyle={contentStyle}>
|
||
|
|
Cloud Database
|
||
|
|
</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
|
||
|
|
</Descriptions>
|
||
|
|
<Divider />
|
||
|
|
<Descriptions
|
||
|
|
title="Root style"
|
||
|
|
labelStyle={labelStyle}
|
||
|
|
contentStyle={contentStyle}
|
||
|
|
bordered={border}
|
||
|
|
layout={layout}
|
||
|
|
>
|
||
|
|
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
|
||
|
|
<Descriptions.Item
|
||
|
|
label="Automatic Renewal"
|
||
|
|
labelStyle={{
|
||
|
|
color: 'orange',
|
||
|
|
}}
|
||
|
|
contentStyle={{
|
||
|
|
color: 'blue',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
YES
|
||
|
|
</Descriptions.Item>
|
||
|
|
</Descriptions>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Customize label & wrapper style</p>"}},{demo:{id:"components-descriptions-demo-component-token"},previewerProps:{debug:!0,title:"Component Token",filename:"components/descriptions/demo/component-token.tsx",pkgDependencyList:{"@ant-design/colors":"^7.0.0","@ant-design/cssinjs":"^1.10.1","@ant-design/icons":"^5.1.0","@ant-design/react-slick":"~1.0.0","@babel/runtime":"^7.18.3","@ctrl/tinycolor":"^3.6.0","@rc-component/color-picker":"~1.4.0","@rc-component/mutate-observer":"^1.0.0","@rc-component/tour":"~1.8.0","@rc-component/trigger":"^1.13.0",classnames:"^2.2.6","copy-to-clipboard":"^3.2.0",dayjs:"^1.11.1","qrcode.react":"^3.1.0","rc-cascader":"~3.12.0","rc-checkbox":"~3.1.0","rc-collapse":"~3.7.0","rc-dialog":"~9.1.0","rc-drawer":"~6.2.0","rc-dropdown":"~4.1.0","rc-field-form":"~1.34.0","rc-image":"~7.0.0","rc-input":"~1.1.0","rc-input-number":"~8.0.2","rc-mentions":"~2.5.0","rc-menu":"~9.10.0","rc-motion":"^2.7.3","rc-notification":"~5.0.4","rc-pagination":"~3.5.0","rc-picker":"~3.10.0","rc-progress":"~3.4.1","rc-rate":"~2.12.0","rc-resize-observer":"^1.2.0","rc-segmented":"~2.2.0","rc-select":"~14.5.0","rc-slider":"~10.1.0","rc-steps":"~6.0.0","rc-switch":"~4.1.0","rc-table":"~7.32.1","rc-tabs":"~12.9.0","rc-textarea":"~1.3.2","rc-tooltip":"~6.0.0","rc-tree":"~5.7.6","rc-tree-select":"~5.9.0","rc-upload":"~4.3.0","rc-util":"^5.32.0","scroll-into-view-if-needed":"^3.0.3","throttle-debounce":"^5.0.0"},jsx:`import { Button, ConfigProvider, Descriptions, Radio } from 'antd';
|
||
|
|
import React, { useState } from 'react';
|
||
|
|
const App = () => {
|
||
|
|
const [size, setSize] = useState('default');
|
||
|
|
const onChange = (e) => {
|
||
|
|
console.log('size checked', e.target.value);
|
||
|
|
setSize(e.target.value);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<ConfigProvider
|
||
|
|
theme={{
|
||
|
|
components: {
|
||
|
|
Descriptions: {
|
||
|
|
labelBg: 'red',
|
||
|
|
titleMarginBottom: 2,
|
||
|
|
itemPaddingBottom: 8,
|
||
|
|
colonMarginRight: 10,
|
||
|
|
colonMarginLeft: 20,
|
||
|
|
extraColor: 'blue',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<Radio.Group onChange={onChange} value={size}>
|
||
|
|
<Radio value="default">default</Radio>
|
||
|
|
<Radio value="middle">middle</Radio>
|
||
|
|
<Radio value="small">small</Radio>
|
||
|
|
</Radio.Group>
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<Descriptions bordered title="Custom Size" size={size} extra={<div>extra color: blue</div>}>
|
||
|
|
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="time">18:00:00</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Amount">$80.00</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Discount">$20.00</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Official">$60.00</Descriptions.Item>
|
||
|
|
<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 />
|
||
|
|
</Descriptions.Item>
|
||
|
|
</Descriptions>
|
||
|
|
<br />
|
||
|
|
<br />
|
||
|
|
<Descriptions title="Custom Size" size={size} extra={<Button type="primary">Edit</Button>}>
|
||
|
|
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Billing">Prepaid</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="time">18:00:00</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Amount">$80.00</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Discount">$20.00</Descriptions.Item>
|
||
|
|
<Descriptions.Item label="Official">$60.00</Descriptions.Item>
|
||
|
|
</Descriptions>
|
||
|
|
</div>
|
||
|
|
</ConfigProvider>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
export default App;
|
||
|
|
`,description:"<p>Component Token Debug.</p>"}}]}),(0,e.tZ)("div",{className:"markdown"},(0,e.tZ)("h2",{id:"api"},(0,e.tZ)(i.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#api",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"API"),(0,e.tZ)("h3",{id:"descriptions"},(0,e.tZ)(i.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#descriptions",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"Descriptions"),(0,e.tZ)(o.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,n[2].value),(0,e.tZ)("th",null,n[3].value),(0,e.tZ)("th",null,n[4].value),(0,e.tZ)("th",null,n[5].value),(0,e.tZ)("th",null,n[6].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[7].value),(0,e.tZ)("td",null,n[8].value),(0,e.tZ)("td",null,n[9].value),(0,e.tZ)("td",null,n[10].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[11].value),(0,e.tZ)("td",null,n[12].value,(0,e.tZ)("code",null,n[13].value),n[14].value),(0,e.tZ)("td",null,n[15].value),(0,e.tZ)("td",null,n[16].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[17].value),(0,e.tZ)("td",null,n[18].value,(0,e.tZ)("code",null,n[19].value),n[20].value,(0,e.tZ)("code",null,n[21].value),n[22].value,(0,e.tZ)("code",null,n[23].value),n[24].value),(0,e.tZ)("td",null,n[25].value,(0,e.tZ)(i.Z,{href:"https://github.com/ant-design/ant-design/blob/84ca0d23ae52e4f0940f20b0e22eabe743f90dca/components/descriptions/index.tsx#L111C21-L111C56",sourceType:"a"},n[26].value)),(0,e.tZ)("td",null,n[27].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[28].value),(0,e.tZ)("td",null,n[29].value),(0,e.tZ)("td",null,n[30].value),(0,e.tZ)("td",null,n[31].value),(0,e.tZ)("td",null,n[32].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[33].value),(0,e.tZ)("td",null,n[34].value),(0,e.tZ)("td",null,n[35].value),(0,e.tZ)("td",null,n[36].value),(0,e.tZ)("td",null,n[37].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[38].value),(0,e.tZ)("td",null,n[39].value),(0,e.tZ)("td",null,n[40].value),(0,e.tZ)("td",null,n[41].value),(0,e.tZ)("td",null,n[42].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[43].value),(0,e.tZ)("td",null,n[44].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[45].value),n[46].value,(0,e.tZ)("code",null,n[47].value)),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[48].value)),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[49].value),(0,e.tZ)("td",null,n[50].value,(0,e.tZ)("code",null,n[51].value),n[52].value,(0,e.tZ)("code",null,n[53].value),n[54].value),(0,e.tZ)("td",null,(0,e.tZ)("code",null,n[55].value),n[56].value,(0,e.tZ)("code",null,n[57].value),n[58].value,(0,e.tZ)("code",null,n[59].value)),(0,e.tZ)("td",null,n[60].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[61].value),(0,e.tZ)("td",null,n[62].value),(0,e.tZ)("td",null,n[63].value),(0,e.tZ)("td",null,n[64].value),(0,e.tZ)("td",null)))),(0,e.tZ)("h3",{id:"descriptionitem"},(0,e.tZ)(i.Z,{"aria-hidden":"true",tabIndex:"-1",href:"#descriptionitem",sourceType:"a"},(0,e.tZ)("span",{className:"icon icon-link"})),"DescriptionItem"),(0,e.tZ)(o.Z,{className:"component-api-table"},(0,e.tZ)("thead",null,(0,e.tZ)("tr",null,(0,e.tZ)("th",null,n[65].value),(0,e.tZ)("th",null,n[66].value),(0,e.tZ)("th",null,n[67].value),(0,e.tZ)("th",null,n[68].value),(0,e.tZ)("th",null,n[69].value))),(0,e.tZ)("tbody",null,(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[70].value),(0,e.tZ)("td",null,n[71].value),(0,e.tZ)("td",null,n[72].value),(0,e.tZ)("td",null,n[73].value),(0,e.tZ)("td",null,n[74].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[75].value),(0,e.tZ)("td",null,n[76].value),(0,e.tZ)("td",null,n[77].value),(0,e.tZ)("td",null,n[78].value),(0,e.tZ)("td",null)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[79].value),(0,e.tZ)("td",null,n[80].value),(0,e.tZ)("td",null,n[81].value),(0,e.tZ)("td",null,n[82].value),(0,e.tZ)("td",null,n[83].value)),(0,e.tZ)("tr",null,(0,e.tZ)("td",null,n[84].value),(0,e.tZ)("td",null,n[85].value),(0,e.tZ)("td",null,n[86].value),(0,e.tZ)("td",null,n[87].value),(0,e.tZ)("td",null)))),(0,e.tZ)("blockquote",nu
|