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