mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
demo: update Radio demo (#52422)
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
Some checks are pending
Publish Any Commit / build (push) Waiting to run
🔀 Sync mirror to Gitee / mirror (push) Waiting to run
✅ test / lint (push) Waiting to run
✅ test / test-react-legacy (16, 1/2) (push) Waiting to run
✅ test / test-react-legacy (16, 2/2) (push) Waiting to run
✅ test / test-react-legacy (17, 1/2) (push) Waiting to run
✅ test / test-react-legacy (17, 2/2) (push) Waiting to run
✅ test / test-node (push) Waiting to run
✅ test / test-react-latest (dom, 1/2) (push) Waiting to run
✅ test / test-react-latest (dom, 2/2) (push) Waiting to run
✅ test / test-react-latest-dist (dist, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist, 2/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 1/2) (push) Blocked by required conditions
✅ test / test-react-latest-dist (dist-min, 2/2) (push) Blocked by required conditions
✅ test / test-coverage (push) Blocked by required conditions
✅ test / build (push) Waiting to run
✅ test / test lib/es module (es, 1/2) (push) Waiting to run
✅ test / test lib/es module (es, 2/2) (push) Waiting to run
✅ test / test lib/es module (lib, 1/2) (push) Waiting to run
✅ test / test lib/es module (lib, 2/2) (push) Waiting to run
👁️ Visual Regression Persist Start / test image (push) Waiting to run
* demo: update Radio demo * fix: fix * fix: update * fix: fix * fix: fix * update snap
This commit is contained in:
lijianan
GitHub
parent
39a9cd89f6
commit
3809585a55
@ -1065,7 +1065,31 @@ exports[`renders components/radio/demo/radiogroup.tsx extend context correctly 1
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
A
|
||||
<div
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-center ant-flex-gap-small ant-flex-vertical"
|
||||
>
|
||||
<span
|
||||
aria-label="line-chart"
|
||||
class="anticon anticon-line-chart"
|
||||
role="img"
|
||||
style="font-size: 18px;"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="line-chart"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M888 792H200V168c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h752c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM305.8 637.7c3.1 3.1 8.1 3.1 11.3 0l138.3-137.6L583 628.5c3.1 3.1 8.2 3.1 11.3 0l275.4-275.3c3.1-3.1 3.1-8.2 0-11.3l-39.6-39.6a8.03 8.03 0 00-11.3 0l-230 229.9L461.4 404a8.03 8.03 0 00-11.3 0L266.3 586.7a8.03 8.03 0 000 11.3l39.5 39.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
LineChart
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
@ -1085,7 +1109,31 @@ exports[`renders components/radio/demo/radiogroup.tsx extend context correctly 1
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
B
|
||||
<div
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-center ant-flex-gap-small ant-flex-vertical"
|
||||
>
|
||||
<span
|
||||
aria-label="dot-chart"
|
||||
class="anticon anticon-dot-chart"
|
||||
role="img"
|
||||
style="font-size: 18px;"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="dot-chart"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M888 792H200V168c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h752c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM288 604a64 64 0 10128 0 64 64 0 10-128 0zm118-224a48 48 0 1096 0 48 48 0 10-96 0zm158 228a96 96 0 10192 0 96 96 0 10-192 0zm148-314a56 56 0 10112 0 56 56 0 10-112 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
DotChart
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
@ -1105,7 +1153,31 @@ exports[`renders components/radio/demo/radiogroup.tsx extend context correctly 1
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
C
|
||||
<div
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-center ant-flex-gap-small ant-flex-vertical"
|
||||
>
|
||||
<span
|
||||
aria-label="bar-chart"
|
||||
class="anticon anticon-bar-chart"
|
||||
role="img"
|
||||
style="font-size: 18px;"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="bar-chart"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M888 792H200V168c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h752c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-600-80h56c4.4 0 8-3.6 8-8V560c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v144c0 4.4 3.6 8 8 8zm152 0h56c4.4 0 8-3.6 8-8V384c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v320c0 4.4 3.6 8 8 8zm152 0h56c4.4 0 8-3.6 8-8V462c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v242c0 4.4 3.6 8 8 8zm152 0h56c4.4 0 8-3.6 8-8V304c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v400c0 4.4 3.6 8 8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
BarChart
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
@ -1125,7 +1197,31 @@ exports[`renders components/radio/demo/radiogroup.tsx extend context correctly 1
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
D
|
||||
<div
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-center ant-flex-gap-small ant-flex-vertical"
|
||||
>
|
||||
<span
|
||||
aria-label="pie-chart"
|
||||
class="anticon anticon-pie-chart"
|
||||
role="img"
|
||||
style="font-size: 18px;"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="pie-chart"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
PieChart
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
@ -1340,108 +1436,89 @@ exports[`renders components/radio/demo/radiogroup-block.tsx extend context corre
|
||||
exports[`renders components/radio/demo/radiogroup-more.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-radio-group ant-radio-group-outline"
|
||||
style="display: flex; flex-direction: column; gap: 8px;"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
<label
|
||||
class="ant-radio-wrapper ant-radio-wrapper-checked"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
<span
|
||||
class="ant-radio ant-wave-target ant-radio-checked"
|
||||
>
|
||||
<label
|
||||
class="ant-radio-wrapper ant-radio-wrapper-checked"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target ant-radio-checked"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="1"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Option A
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
<input
|
||||
checked=""
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="1"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Option A
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target"
|
||||
>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="2"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Option B
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="2"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Option B
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target"
|
||||
>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="3"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Option C
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="3"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Option C
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target"
|
||||
>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="4"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
More...
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="4"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
More...
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
@ -1051,7 +1051,31 @@ exports[`renders components/radio/demo/radiogroup.tsx correctly 1`] = `
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
A
|
||||
<div
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-center ant-flex-gap-small ant-flex-vertical"
|
||||
>
|
||||
<span
|
||||
aria-label="line-chart"
|
||||
class="anticon anticon-line-chart"
|
||||
role="img"
|
||||
style="font-size:18px"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="line-chart"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M888 792H200V168c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h752c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM305.8 637.7c3.1 3.1 8.1 3.1 11.3 0l138.3-137.6L583 628.5c3.1 3.1 8.2 3.1 11.3 0l275.4-275.3c3.1-3.1 3.1-8.2 0-11.3l-39.6-39.6a8.03 8.03 0 00-11.3 0l-230 229.9L461.4 404a8.03 8.03 0 00-11.3 0L266.3 586.7a8.03 8.03 0 000 11.3l39.5 39.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
LineChart
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
@ -1071,7 +1095,31 @@ exports[`renders components/radio/demo/radiogroup.tsx correctly 1`] = `
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
B
|
||||
<div
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-center ant-flex-gap-small ant-flex-vertical"
|
||||
>
|
||||
<span
|
||||
aria-label="dot-chart"
|
||||
class="anticon anticon-dot-chart"
|
||||
role="img"
|
||||
style="font-size:18px"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="dot-chart"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M888 792H200V168c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h752c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM288 604a64 64 0 10128 0 64 64 0 10-128 0zm118-224a48 48 0 1096 0 48 48 0 10-96 0zm158 228a96 96 0 10192 0 96 96 0 10-192 0zm148-314a56 56 0 10112 0 56 56 0 10-112 0z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
DotChart
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
@ -1091,7 +1139,31 @@ exports[`renders components/radio/demo/radiogroup.tsx correctly 1`] = `
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
C
|
||||
<div
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-center ant-flex-gap-small ant-flex-vertical"
|
||||
>
|
||||
<span
|
||||
aria-label="bar-chart"
|
||||
class="anticon anticon-bar-chart"
|
||||
role="img"
|
||||
style="font-size:18px"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="bar-chart"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M888 792H200V168c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v688c0 4.4 3.6 8 8 8h752c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-600-80h56c4.4 0 8-3.6 8-8V560c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v144c0 4.4 3.6 8 8 8zm152 0h56c4.4 0 8-3.6 8-8V384c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v320c0 4.4 3.6 8 8 8zm152 0h56c4.4 0 8-3.6 8-8V462c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v242c0 4.4 3.6 8 8 8zm152 0h56c4.4 0 8-3.6 8-8V304c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v400c0 4.4 3.6 8 8 8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
BarChart
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
@ -1111,7 +1183,31 @@ exports[`renders components/radio/demo/radiogroup.tsx correctly 1`] = `
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
D
|
||||
<div
|
||||
class="ant-flex ant-flex-align-center ant-flex-justify-center ant-flex-gap-small ant-flex-vertical"
|
||||
>
|
||||
<span
|
||||
aria-label="pie-chart"
|
||||
class="anticon anticon-pie-chart"
|
||||
role="img"
|
||||
style="font-size:18px"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="pie-chart"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
PieChart
|
||||
</div>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
@ -1322,108 +1418,89 @@ exports[`renders components/radio/demo/radiogroup-block.tsx correctly 1`] = `
|
||||
exports[`renders components/radio/demo/radiogroup-more.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-radio-group ant-radio-group-outline"
|
||||
style="display:flex;flex-direction:column;gap:8px"
|
||||
>
|
||||
<div
|
||||
class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
|
||||
<label
|
||||
class="ant-radio-wrapper ant-radio-wrapper-checked"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
<span
|
||||
class="ant-radio ant-wave-target ant-radio-checked"
|
||||
>
|
||||
<label
|
||||
class="ant-radio-wrapper ant-radio-wrapper-checked"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target ant-radio-checked"
|
||||
>
|
||||
<input
|
||||
checked=""
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="1"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Option A
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
<input
|
||||
checked=""
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="1"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Option A
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target"
|
||||
>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="2"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Option B
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="2"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Option B
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target"
|
||||
>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="3"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Option C
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="3"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
Option C
|
||||
</span>
|
||||
</label>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target"
|
||||
>
|
||||
<label
|
||||
class="ant-radio-wrapper"
|
||||
>
|
||||
<span
|
||||
class="ant-radio ant-wave-target"
|
||||
>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="4"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
More...
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
class="ant-radio-input"
|
||||
name="test-id"
|
||||
type="radio"
|
||||
value="4"
|
||||
/>
|
||||
<span
|
||||
class="ant-radio-inner"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
More...
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
`;
|
||||
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import React from 'react';
|
||||
import { Flex, Radio } from 'antd';
|
||||
import type { CheckboxGroupProps } from 'antd/es/checkbox';
|
||||
|
||||
const options = [
|
||||
const options: CheckboxGroupProps<string>['options'] = [
|
||||
{ label: 'Apple', value: 'Apple' },
|
||||
{ label: 'Pear', value: 'Pear' },
|
||||
{ label: 'Orange', value: 'Orange' },
|
||||
|
||||
@ -1,27 +1,46 @@
|
||||
import React, { useState } from 'react';
|
||||
import type { RadioChangeEvent } from 'antd';
|
||||
import { Input, Radio, Space } from 'antd';
|
||||
import { Input, Radio } from 'antd';
|
||||
|
||||
const style: React.CSSProperties = {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 8,
|
||||
};
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [value, setValue] = useState(1);
|
||||
|
||||
const onChange = (e: RadioChangeEvent) => {
|
||||
console.log('radio checked', e.target.value);
|
||||
setValue(e.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Radio.Group onChange={onChange} value={value}>
|
||||
<Space direction="vertical">
|
||||
<Radio value={1}>Option A</Radio>
|
||||
<Radio value={2}>Option B</Radio>
|
||||
<Radio value={3}>Option C</Radio>
|
||||
<Radio value={4}>
|
||||
More...
|
||||
{value === 4 ? <Input style={{ width: 100, marginInlineStart: 10 }} /> : null}
|
||||
</Radio>
|
||||
</Space>
|
||||
</Radio.Group>
|
||||
<Radio.Group
|
||||
style={style}
|
||||
onChange={onChange}
|
||||
value={value}
|
||||
options={[
|
||||
{ value: 1, label: 'Option A' },
|
||||
{ value: 2, label: 'Option B' },
|
||||
{ value: 3, label: 'Option C' },
|
||||
{
|
||||
value: 4,
|
||||
label: (
|
||||
<>
|
||||
More...
|
||||
{value === 4 && (
|
||||
<Input
|
||||
variant="filled"
|
||||
placeholder="please input"
|
||||
style={{ width: 120, marginInlineStart: 12 }}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,14 +1,17 @@
|
||||
import React, { useState } from 'react';
|
||||
import type { RadioChangeEvent } from 'antd';
|
||||
import { Radio } from 'antd';
|
||||
import type { CheckboxGroupProps } from 'antd/es/checkbox';
|
||||
|
||||
const plainOptions = ['Apple', 'Pear', 'Orange'];
|
||||
const options = [
|
||||
const plainOptions: CheckboxGroupProps<string>['options'] = ['Apple', 'Pear', 'Orange'];
|
||||
|
||||
const options: CheckboxGroupProps<string>['options'] = [
|
||||
{ label: 'Apple', value: 'Apple' },
|
||||
{ label: 'Pear', value: 'Pear' },
|
||||
{ label: 'Orange', value: 'Orange', title: 'Orange' },
|
||||
];
|
||||
const optionsWithDisabled = [
|
||||
|
||||
const optionsWithDisabled: CheckboxGroupProps<string>['options'] = [
|
||||
{ label: 'Apple', value: 'Apple' },
|
||||
{ label: 'Pear', value: 'Pear' },
|
||||
{ label: 'Orange', value: 'Orange', disabled: true },
|
||||
|
||||
@ -2,12 +2,16 @@ import React from 'react';
|
||||
import { Radio } from 'antd';
|
||||
|
||||
const App: React.FC = () => (
|
||||
<Radio.Group name="radiogroup" defaultValue={1}>
|
||||
<Radio value={1}>A</Radio>
|
||||
<Radio value={2}>B</Radio>
|
||||
<Radio value={3}>C</Radio>
|
||||
<Radio value={4}>D</Radio>
|
||||
</Radio.Group>
|
||||
<Radio.Group
|
||||
name="radiogroup"
|
||||
defaultValue={1}
|
||||
options={[
|
||||
{ value: 1, label: 'A' },
|
||||
{ value: 2, label: 'B' },
|
||||
{ value: 3, label: 'C' },
|
||||
{ value: 4, label: 'D' },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,22 +1,63 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
BarChartOutlined,
|
||||
DotChartOutlined,
|
||||
LineChartOutlined,
|
||||
PieChartOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import type { RadioChangeEvent } from 'antd';
|
||||
import { Radio } from 'antd';
|
||||
import { Flex, Radio } from 'antd';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [value, setValue] = useState(1);
|
||||
|
||||
const onChange = (e: RadioChangeEvent) => {
|
||||
console.log('radio checked', e.target.value);
|
||||
setValue(e.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Radio.Group onChange={onChange} value={value}>
|
||||
<Radio value={1}>A</Radio>
|
||||
<Radio value={2}>B</Radio>
|
||||
<Radio value={3}>C</Radio>
|
||||
<Radio value={4}>D</Radio>
|
||||
</Radio.Group>
|
||||
<Radio.Group
|
||||
onChange={onChange}
|
||||
value={value}
|
||||
options={[
|
||||
{
|
||||
value: 1,
|
||||
label: (
|
||||
<Flex gap="small" justify="center" align="center" vertical>
|
||||
<LineChartOutlined style={{ fontSize: 18 }} />
|
||||
LineChart
|
||||
</Flex>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: (
|
||||
<Flex gap="small" justify="center" align="center" vertical>
|
||||
<DotChartOutlined style={{ fontSize: 18 }} />
|
||||
DotChart
|
||||
</Flex>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: (
|
||||
<Flex gap="small" justify="center" align="center" vertical>
|
||||
<BarChartOutlined style={{ fontSize: 18 }} />
|
||||
BarChart
|
||||
</Flex>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: 4,
|
||||
label: (
|
||||
<Flex gap="small" justify="center" align="center" vertical>
|
||||
<PieChartOutlined style={{ fontSize: 18 }} />
|
||||
PieChart
|
||||
</Flex>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,21 +1,19 @@
|
||||
import React from 'react';
|
||||
import { ConfigProvider, Radio } from 'antd';
|
||||
import type { CheckboxGroupProps } from 'antd/es/checkbox';
|
||||
|
||||
const options: CheckboxGroupProps<string | number>['options'] = [
|
||||
{ value: 1, label: 'A' },
|
||||
{ value: 2, label: 'B' },
|
||||
{ value: 3, label: 'C' },
|
||||
{ value: 4, label: 'D' },
|
||||
];
|
||||
|
||||
const App: React.FC = () => (
|
||||
<ConfigProvider theme={{ token: { wireframe: true } }}>
|
||||
<Radio.Group value={1}>
|
||||
<Radio value={1}>A</Radio>
|
||||
<Radio value={2}>B</Radio>
|
||||
<Radio value={3}>C</Radio>
|
||||
<Radio value={4}>D</Radio>
|
||||
</Radio.Group>
|
||||
<Radio.Group value={1} options={options} />
|
||||
<br />
|
||||
<Radio.Group value={1} disabled>
|
||||
<Radio value={1}>A</Radio>
|
||||
<Radio value={2}>B</Radio>
|
||||
<Radio value={3}>C</Radio>
|
||||
<Radio value={4}>D</Radio>
|
||||
</Radio.Group>
|
||||
<Radio.Group value={1} options={options} disabled />
|
||||
</ConfigProvider>
|
||||
);
|
||||
|
||||
|
||||
@ -14,6 +14,29 @@ demo:
|
||||
- Used to select a single state from multiple options.
|
||||
- The difference from Select is that Radio is visible to the user and can facilitate the comparison of choice, which means there shouldn't be too many of them.
|
||||
|
||||
```tsx
|
||||
// When use Radio.Group, recommended ✅
|
||||
return (
|
||||
<Radio.Group
|
||||
value={value}
|
||||
options={[
|
||||
{ value: 1, label: "A" },
|
||||
{ value: 2, label: "B"},
|
||||
{ value: 3, label: "C" },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
|
||||
// No recommended 🙅🏻♀️
|
||||
return (
|
||||
<Radio.Group value={value}>
|
||||
<Radio value={1}>A</Radio>
|
||||
<Radio value={2}>B</Radio>
|
||||
<Radio value={3}>C</Radio>
|
||||
</Radio.Group>
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
@ -15,6 +15,29 @@ demo:
|
||||
- 用于在多个备选项中选中单个状态。
|
||||
- 和 Select 的区别是，Radio 所有选项默认可见，方便用户在比较中选择，因此选项不宜过多。
|
||||
|
||||
```tsx
|
||||
// 使用 Radio.Group 组件时，推荐的写法 ✅
|
||||
return (
|
||||
<Radio.Group
|
||||
value={value}
|
||||
options={[
|
||||
{ value: 1, label: "A" },
|
||||
{ value: 2, label: "B"},
|
||||
{ value: 3, label: "C" },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
|
||||
// 不推荐的写法 🙅🏻♀️
|
||||
return (
|
||||
<Radio.Group value={value}>
|
||||
<Radio value={1}>A</Radio>
|
||||
<Radio value={2}>B</Radio>
|
||||
<Radio value={3}>C</Radio>
|
||||
</Radio.Group>
|
||||
);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
<!-- prettier-ignore-start -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user