mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-10 19:19:20 +08:00
fix: Descriptions labelStyle unsuccessful (#29942)
* fix: Descriptions labelStyle unsuccessful * use hook * Update components/descriptions/demo/style.md * fix lint * fix ts
This commit is contained in:
xrkffgg
GitHub
parent
8e885a7e08
commit
7f15e7f38e
@ -47,7 +47,8 @@ const Cell: React.FC<CellProps> = ({
|
|||||||
style={style}
|
style={style}
|
||||||
colSpan={span}
|
colSpan={span}
|
||||||
>
|
>
|
||||||
{notEmpty(label) ? label : content}
|
{notEmpty(label) && <span style={labelStyle}>{label}</span>}
|
||||||
|
{notEmpty(content) && <span style={contentStyle}>{content}</span>}
|
||||||
</Component>
|
</Component>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -152,37 +152,49 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
|
|||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Product
|
Product
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Cloud Database
|
Cloud Database
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<th
|
<th
|
||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Billing Mode
|
Billing Mode
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Prepaid
|
Prepaid
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<th
|
<th
|
||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Automatic Renewal
|
Automatic Renewal
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
YES
|
YES
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
@ -192,25 +204,33 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
|
|||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Order time
|
Order time
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
2018-04-24 18:00:00
|
2018-04-24 18:00:00
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<th
|
<th
|
||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Usage Time
|
Usage Time
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="3"
|
colspan="3"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
2019-04-24 18:00:00
|
2019-04-24 18:00:00
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
@ -220,12 +240,15 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
|
|||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Status
|
Status
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="5"
|
colspan="5"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
<span
|
<span
|
||||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||||
>
|
>
|
||||||
@ -238,6 +261,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
|
|||||||
Running
|
Running
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
@ -247,37 +271,49 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
|
|||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Negotiated Amount
|
Negotiated Amount
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
$80.00
|
$80.00
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<th
|
<th
|
||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Discount
|
Discount
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
$20.00
|
$20.00
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<th
|
<th
|
||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Official Receipts
|
Official Receipts
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
$60.00
|
$60.00
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
@ -287,12 +323,15 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
|
|||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Config Info
|
Config Info
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="5"
|
colspan="5"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Data disk type: MongoDB
|
Data disk type: MongoDB
|
||||||
<br />
|
<br />
|
||||||
Database version: 3.4
|
Database version: 3.4
|
||||||
@ -305,6 +344,7 @@ exports[`renders ./components/descriptions/demo/border.md correctly 1`] = `
|
|||||||
<br />
|
<br />
|
||||||
Region: East China 1
|
Region: East China 1
|
||||||
<br />
|
<br />
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
@ -339,37 +379,49 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
|
|||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Product
|
Product
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Cloud Database
|
Cloud Database
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<th
|
<th
|
||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Billing
|
Billing
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Prepaid
|
Prepaid
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<th
|
<th
|
||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
time
|
time
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
18:00:00
|
18:00:00
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
@ -379,37 +431,49 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
|
|||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Amount
|
Amount
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
$80.00
|
$80.00
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<th
|
<th
|
||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Discount
|
Discount
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
$20.00
|
$20.00
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<th
|
<th
|
||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Official
|
Official
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
$60.00
|
$60.00
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
@ -419,12 +483,15 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
|
|||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Config Info
|
Config Info
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="5"
|
colspan="5"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Data disk type: MongoDB
|
Data disk type: MongoDB
|
||||||
<br />
|
<br />
|
||||||
Database version: 3.4
|
Database version: 3.4
|
||||||
@ -436,6 +503,7 @@ exports[`renders ./components/descriptions/demo/responsive.md correctly 1`] = `
|
|||||||
Replication factor: 3
|
Replication factor: 3
|
||||||
<br />
|
<br />
|
||||||
Region: East China 1
|
Region: East China 1
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
@ -547,37 +615,49 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
|
|||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Product
|
Product
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Cloud Database
|
Cloud Database
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<th
|
<th
|
||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Billing
|
Billing
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Prepaid
|
Prepaid
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<th
|
<th
|
||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
time
|
time
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
18:00:00
|
18:00:00
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
@ -587,37 +667,49 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
|
|||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Amount
|
Amount
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
$80.00
|
$80.00
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<th
|
<th
|
||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Discount
|
Discount
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
$20.00
|
$20.00
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<th
|
<th
|
||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Official
|
Official
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
$60.00
|
$60.00
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
@ -627,12 +719,15 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
|
|||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Config Info
|
Config Info
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="5"
|
colspan="5"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Data disk type: MongoDB
|
Data disk type: MongoDB
|
||||||
<br />
|
<br />
|
||||||
Database version: 3.4
|
Database version: 3.4
|
||||||
@ -645,6 +740,7 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
|
|||||||
<br />
|
<br />
|
||||||
Region: East China 1
|
Region: East China 1
|
||||||
<br />
|
<br />
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
@ -813,90 +909,72 @@ exports[`renders ./components/descriptions/demo/size.md correctly 1`] = `
|
|||||||
|
|
||||||
exports[`renders ./components/descriptions/demo/style.md correctly 1`] = `
|
exports[`renders ./components/descriptions/demo/style.md correctly 1`] = `
|
||||||
Array [
|
Array [
|
||||||
<div
|
<button
|
||||||
class="ant-descriptions"
|
aria-checked="true"
|
||||||
|
class="ant-switch ant-switch-checked"
|
||||||
|
role="switch"
|
||||||
|
type="button"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-descriptions-header"
|
class="ant-switch-handle"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-switch-inner"
|
||||||
>
|
>
|
||||||
|
Border
|
||||||
|
</span>
|
||||||
|
</button>,
|
||||||
<div
|
<div
|
||||||
class="ant-descriptions-title"
|
class="ant-divider ant-divider-horizontal"
|
||||||
>
|
role="separator"
|
||||||
User Info
|
/>,
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
class="ant-descriptions-view"
|
class="ant-radio-group ant-radio-group-outline"
|
||||||
>
|
>
|
||||||
<table>
|
<label
|
||||||
<tbody>
|
class="ant-radio-wrapper ant-radio-wrapper-checked"
|
||||||
<tr
|
|
||||||
class="ant-descriptions-row"
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="ant-descriptions-item"
|
|
||||||
colspan="1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-descriptions-item-container"
|
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="ant-descriptions-item-label"
|
class="ant-radio ant-radio-checked"
|
||||||
style="background:red"
|
|
||||||
>
|
>
|
||||||
Product
|
<input
|
||||||
</span>
|
checked=""
|
||||||
|
class="ant-radio-input"
|
||||||
|
type="radio"
|
||||||
|
value="horizontal"
|
||||||
|
/>
|
||||||
<span
|
<span
|
||||||
class="ant-descriptions-item-content"
|
class="ant-radio-inner"
|
||||||
style="background:green"
|
/>
|
||||||
>
|
|
||||||
Cloud Database
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
<span>
|
||||||
</td>
|
horizontal
|
||||||
<td
|
</span>
|
||||||
class="ant-descriptions-item"
|
</label>
|
||||||
colspan="1"
|
<label
|
||||||
>
|
class="ant-radio-wrapper"
|
||||||
<div
|
|
||||||
class="ant-descriptions-item-container"
|
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
class="ant-descriptions-item-label"
|
class="ant-radio"
|
||||||
>
|
>
|
||||||
Billing Mode
|
<input
|
||||||
</span>
|
class="ant-radio-input"
|
||||||
|
type="radio"
|
||||||
|
value="vertical"
|
||||||
|
/>
|
||||||
<span
|
<span
|
||||||
class="ant-descriptions-item-content"
|
class="ant-radio-inner"
|
||||||
>
|
/>
|
||||||
Prepaid
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
<span>
|
||||||
</td>
|
vertical
|
||||||
<td
|
|
||||||
class="ant-descriptions-item"
|
|
||||||
colspan="1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-descriptions-item-container"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="ant-descriptions-item-label"
|
|
||||||
>
|
|
||||||
Automatic Renewal
|
|
||||||
</span>
|
</span>
|
||||||
<span
|
</label>
|
||||||
class="ant-descriptions-item-content"
|
|
||||||
>
|
|
||||||
YES
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>,
|
</div>,
|
||||||
|
<div
|
||||||
|
class="ant-divider ant-divider-horizontal"
|
||||||
|
role="separator"
|
||||||
|
/>,
|
||||||
<div
|
<div
|
||||||
class="ant-descriptions ant-descriptions-bordered"
|
class="ant-descriptions ant-descriptions-bordered"
|
||||||
>
|
>
|
||||||
@ -922,38 +1000,50 @@ Array [
|
|||||||
colspan="1"
|
colspan="1"
|
||||||
style="background:red"
|
style="background:red"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Product
|
Product
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
style="background:green"
|
style="background:green"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Cloud Database
|
Cloud Database
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<th
|
<th
|
||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Billing Mode
|
Billing Mode
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Prepaid
|
Prepaid
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<th
|
<th
|
||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Automatic Renewal
|
Automatic Renewal
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
YES
|
YES
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
@ -964,94 +1054,6 @@ Array [
|
|||||||
class="ant-divider ant-divider-horizontal"
|
class="ant-divider ant-divider-horizontal"
|
||||||
role="separator"
|
role="separator"
|
||||||
/>,
|
/>,
|
||||||
<div
|
|
||||||
class="ant-descriptions"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-descriptions-header"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-descriptions-title"
|
|
||||||
>
|
|
||||||
Root style
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="ant-descriptions-view"
|
|
||||||
>
|
|
||||||
<table>
|
|
||||||
<tbody>
|
|
||||||
<tr
|
|
||||||
class="ant-descriptions-row"
|
|
||||||
>
|
|
||||||
<td
|
|
||||||
class="ant-descriptions-item"
|
|
||||||
colspan="1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-descriptions-item-container"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="ant-descriptions-item-label"
|
|
||||||
style="background:red"
|
|
||||||
>
|
|
||||||
Product
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="ant-descriptions-item-content"
|
|
||||||
style="background:green"
|
|
||||||
>
|
|
||||||
Cloud Database
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td
|
|
||||||
class="ant-descriptions-item"
|
|
||||||
colspan="1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-descriptions-item-container"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="ant-descriptions-item-label"
|
|
||||||
style="background:red"
|
|
||||||
>
|
|
||||||
Billing Mode
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="ant-descriptions-item-content"
|
|
||||||
style="background:green"
|
|
||||||
>
|
|
||||||
Prepaid
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
<td
|
|
||||||
class="ant-descriptions-item"
|
|
||||||
colspan="1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="ant-descriptions-item-container"
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
class="ant-descriptions-item-label"
|
|
||||||
style="background:red;color:orange"
|
|
||||||
>
|
|
||||||
Automatic Renewal
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="ant-descriptions-item-content"
|
|
||||||
style="background:green;color:blue"
|
|
||||||
>
|
|
||||||
YES
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>,
|
|
||||||
<div
|
<div
|
||||||
class="ant-descriptions ant-descriptions-bordered"
|
class="ant-descriptions ant-descriptions-bordered"
|
||||||
>
|
>
|
||||||
@ -1077,42 +1079,54 @@ Array [
|
|||||||
colspan="1"
|
colspan="1"
|
||||||
style="background:red"
|
style="background:red"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Product
|
Product
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
style="background:green"
|
style="background:green"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Cloud Database
|
Cloud Database
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<th
|
<th
|
||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
style="background:red"
|
style="background:red"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Billing Mode
|
Billing Mode
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
style="background:green"
|
style="background:green"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Prepaid
|
Prepaid
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<th
|
<th
|
||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
style="background:red;color:orange"
|
style="background:red;color:orange"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Automatic Renewal
|
Automatic Renewal
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
style="background:green;color:blue"
|
style="background:green;color:blue"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
YES
|
YES
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
@ -1726,19 +1740,25 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
|
|||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Product
|
Product
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Billing Mode
|
Billing Mode
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Automatic Renewal
|
Automatic Renewal
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
@ -1748,19 +1768,25 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
|
|||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Cloud Database
|
Cloud Database
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Prepaid
|
Prepaid
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
YES
|
YES
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
@ -1770,13 +1796,17 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
|
|||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Order time
|
Order time
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="2"
|
colspan="2"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Usage Time
|
Usage Time
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
@ -1786,13 +1816,17 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
|
|||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
2018-04-24 18:00:00
|
2018-04-24 18:00:00
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="2"
|
colspan="2"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
2019-04-24 18:00:00
|
2019-04-24 18:00:00
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
@ -1802,7 +1836,9 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
|
|||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="3"
|
colspan="3"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Status
|
Status
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
@ -1812,6 +1848,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
|
|||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="3"
|
colspan="3"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
<span
|
<span
|
||||||
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
|
||||||
>
|
>
|
||||||
@ -1824,6 +1861,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
|
|||||||
Running
|
Running
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
@ -1833,19 +1871,25 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
|
|||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Negotiated Amount
|
Negotiated Amount
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Discount
|
Discount
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
<th
|
<th
|
||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Official Receipts
|
Official Receipts
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
@ -1855,19 +1899,25 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
|
|||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
$80.00
|
$80.00
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
$20.00
|
$20.00
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td
|
<td
|
||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="1"
|
colspan="1"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
$60.00
|
$60.00
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
@ -1877,7 +1927,9 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
|
|||||||
class="ant-descriptions-item-label"
|
class="ant-descriptions-item-label"
|
||||||
colspan="3"
|
colspan="3"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Config Info
|
Config Info
|
||||||
|
</span>
|
||||||
</th>
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
<tr
|
<tr
|
||||||
@ -1887,6 +1939,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
|
|||||||
class="ant-descriptions-item-content"
|
class="ant-descriptions-item-content"
|
||||||
colspan="3"
|
colspan="3"
|
||||||
>
|
>
|
||||||
|
<span>
|
||||||
Data disk type: MongoDB
|
Data disk type: MongoDB
|
||||||
<br />
|
<br />
|
||||||
Database version: 3.4
|
Database version: 3.4
|
||||||
@ -1899,6 +1952,7 @@ exports[`renders ./components/descriptions/demo/vertical-border.md correctly 1`]
|
|||||||
<br />
|
<br />
|
||||||
Region: East China 1
|
Region: East China 1
|
||||||
<br />
|
<br />
|
||||||
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
|
|||||||
@ -15,30 +15,45 @@ debug: true
|
|||||||
Customize label & wrapper style
|
Customize label & wrapper style
|
||||||
|
|
||||||
```tsx
|
```tsx
|
||||||
import { Descriptions, Divider } from 'antd';
|
import { Descriptions, Divider, Switch, Radio } from 'antd';
|
||||||
|
|
||||||
const labelStyle: React.CSSProperties = { background: 'red' };
|
const labelStyle: React.CSSProperties = { background: 'red' };
|
||||||
const contentStyle: React.CSSProperties = { background: 'green' };
|
const contentStyle: React.CSSProperties = { background: 'green' };
|
||||||
|
|
||||||
function renderCelledDesc(bordered?: boolean) {
|
type LayoutType = 'horizontal' | 'vertical' | undefined;
|
||||||
|
|
||||||
|
const Demo = () => {
|
||||||
|
const [border, setBorder] = React.useState(true);
|
||||||
|
const [layout, setLayout] = React.useState('horizontal' as LayoutType);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Descriptions title="User Info" bordered={bordered}>
|
<>
|
||||||
|
<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}>
|
<Descriptions.Item label="Product" labelStyle={labelStyle} contentStyle={contentStyle}>
|
||||||
Cloud Database
|
Cloud Database
|
||||||
</Descriptions.Item>
|
</Descriptions.Item>
|
||||||
<Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
|
<Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
|
||||||
<Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
|
<Descriptions.Item label="Automatic Renewal">YES</Descriptions.Item>
|
||||||
</Descriptions>
|
</Descriptions>
|
||||||
);
|
<Divider />
|
||||||
}
|
|
||||||
|
|
||||||
function renderRootDesc(bordered?: boolean) {
|
|
||||||
return (
|
|
||||||
<Descriptions
|
<Descriptions
|
||||||
title="Root style"
|
title="Root style"
|
||||||
labelStyle={labelStyle}
|
labelStyle={labelStyle}
|
||||||
contentStyle={contentStyle}
|
contentStyle={contentStyle}
|
||||||
bordered={bordered}
|
bordered={border}
|
||||||
|
layout={layout}
|
||||||
>
|
>
|
||||||
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
|
<Descriptions.Item label="Product">Cloud Database</Descriptions.Item>
|
||||||
<Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
|
<Descriptions.Item label="Billing Mode">Prepaid</Descriptions.Item>
|
||||||
@ -50,19 +65,9 @@ function renderRootDesc(bordered?: boolean) {
|
|||||||
YES
|
YES
|
||||||
</Descriptions.Item>
|
</Descriptions.Item>
|
||||||
</Descriptions>
|
</Descriptions>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(<Demo />, mountNode);
|
||||||
<>
|
|
||||||
{renderCelledDesc()}
|
|
||||||
{renderCelledDesc(true)}
|
|
||||||
|
|
||||||
<Divider />
|
|
||||||
|
|
||||||
{renderRootDesc()}
|
|
||||||
{renderRootDesc(true)}
|
|
||||||
</>,
|
|
||||||
mountNode,
|
|
||||||
);
|
|
||||||
```
|
```
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user