kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-01-31 09:08:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #231 from unix/checkbox

Browse Source 
feat(checkbox): add support of different sizes
This commit is contained in:
witt
2020-05-23 08:07:46 +08:00
committed by GitHub
parent 4857adc6f0 d46e319d14
commit 470dedd2a2
9 changed files with 598 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

404
components/checkbox/__tests__/__snapshots__/group.test.tsx.snap
View File

@@ -15,9 +15,7 @@ initialize {
Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -52,8 +50,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -95,20 +93,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -171,16 +170,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -191,8 +186,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -234,20 +229,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -303,9 +299,7 @@ initialize {
"prev": Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -339,16 +333,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -384,20 +374,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -447,8 +438,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -467,9 +458,7 @@ initialize {
"prev": Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -503,16 +492,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -549,20 +534,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -611,8 +597,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -631,9 +617,7 @@ initialize {
"prev": Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -667,16 +651,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -706,20 +686,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -779,8 +760,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -799,9 +780,7 @@ initialize {
"prev": Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -835,16 +814,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -881,7 +856,8 @@ initialize {
Object {
"data": "
.group :global(label) {
margin-right: 1.875rem;
margin-right: calc(.875rem * 2);
--checkbox-size: .875rem;
}
",
"next": null,
@@ -915,7 +891,8 @@ initialize {
Object {
"data": "
.group :global(label) {
margin-right: 1.875rem;
margin-right: calc(.875rem * 2);
--checkbox-size: .875rem;
}
",
"next": null,
@@ -936,9 +913,7 @@ initialize {
Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -973,8 +948,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -1016,20 +991,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -1092,16 +1068,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -1112,8 +1084,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -1155,20 +1127,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -1224,9 +1197,7 @@ initialize {
"prev": Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -1260,16 +1231,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -1305,20 +1272,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -1368,8 +1336,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -1388,9 +1356,7 @@ initialize {
"prev": Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -1424,16 +1390,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -1470,20 +1432,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -1532,8 +1495,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -1552,9 +1515,7 @@ initialize {
"prev": Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -1588,16 +1549,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -1627,20 +1584,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -1700,8 +1658,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -1720,9 +1678,7 @@ initialize {
"prev": Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -1756,16 +1712,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -1849,3 +1801,191 @@ initialize {
},
}
`;
exports[`Checkbox Group should work correctly with different sizes 1`] = `
"<div><div class=\\"group \\"><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
svg {
display: inline-flex;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
}
</style><input type=\\"checkbox\\"><span class=\\"text\\">Sydney</span><style>
label {
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
input {
opacity: 0;
outline: none;
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
z-index: -1;
background-color: transparent;
}
</style></label><style>
.group :global(label) {
margin-right: calc(.75rem * 2);
--checkbox-size: .75rem;
}
</style></div><div class=\\"group \\"><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
svg {
display: inline-flex;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
}
</style><input type=\\"checkbox\\"><span class=\\"text\\">Sydney</span><style>
label {
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
input {
opacity: 0;
outline: none;
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
z-index: -1;
background-color: transparent;
}
</style></label><style>
.group :global(label) {
margin-right: calc(.875rem * 2);
--checkbox-size: .875rem;
}
</style></div><div class=\\"group \\"><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
svg {
display: inline-flex;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
}
</style><input type=\\"checkbox\\"><span class=\\"text\\">Sydney</span><style>
label {
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
input {
opacity: 0;
outline: none;
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
z-index: -1;
background-color: transparent;
}
</style></label><style>
.group :global(label) {
margin-right: calc(1rem * 2);
--checkbox-size: 1rem;
}
</style></div><div class=\\"group \\"><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
svg {
display: inline-flex;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
}
</style><input type=\\"checkbox\\"><span class=\\"text\\">Sydney</span><style>
label {
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
input {
opacity: 0;
outline: none;
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
z-index: -1;
background-color: transparent;
}
</style></label><style>
.group :global(label) {
margin-right: calc(1.125rem * 2);
--checkbox-size: 1.125rem;
}
</style></div></div>"
`;

273
components/checkbox/__tests__/__snapshots__/index.test.tsx.snap
View File

@@ -10,9 +10,7 @@ initialize {
Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -47,8 +45,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -90,20 +88,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -166,16 +165,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -186,8 +181,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -229,20 +224,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -298,9 +294,7 @@ initialize {
"prev": Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -334,16 +328,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -379,20 +369,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -442,8 +433,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -462,9 +453,7 @@ initialize {
"prev": Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -498,16 +487,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -544,20 +529,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -606,8 +592,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -626,9 +612,7 @@ initialize {
"prev": Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -662,16 +646,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -701,20 +681,21 @@ initialize {
Object {
"data": "
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
@@ -774,8 +755,8 @@ initialize {
"data": "
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
@@ -794,9 +775,7 @@ initialize {
"prev": Object {
"attribs": Object {
"fill": "none",
"height": "12px",
"viewBox": "0 0 12 12",
"width": "12px",
"xmlns": "http://www.w3.org/2000/svg",
},
"children": Array [
@@ -830,16 +809,12 @@ initialize {
"type": "tag",
"x-attribsNamespace": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "http://www.w3.org/2000/xmlns/",
},
"x-attribsPrefix": Object {
"fill": undefined,
"height": undefined,
"viewBox": undefined,
"width": undefined,
"xmlns": "",
},
},
@@ -905,3 +880,171 @@ initialize {
},
}
`;
exports[`Checkbox should work correctly with different sizes 1`] = `
"<div><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
svg {
display: inline-flex;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
}
</style><input type=\\"checkbox\\"><span class=\\"text\\">mini</span><style>
label {
--checkbox-size: .75rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
input {
opacity: 0;
outline: none;
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
z-index: -1;
background-color: transparent;
}
</style></label><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
svg {
display: inline-flex;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
}
</style><input type=\\"checkbox\\"><span class=\\"text\\">small</span><style>
label {
--checkbox-size: .875rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
input {
opacity: 0;
outline: none;
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
z-index: -1;
background-color: transparent;
}
</style></label><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
svg {
display: inline-flex;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
}
</style><input type=\\"checkbox\\"><span class=\\"text\\">medium</span><style>
label {
--checkbox-size: 1rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
input {
opacity: 0;
outline: none;
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
z-index: -1;
background-color: transparent;
}
</style></label><label class=\\"\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 12 12\\" fill=\\"none\\"><path d=\\"M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z\\" stroke=\\"#666\\"></path></svg><style>
svg {
display: inline-flex;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: 1;
cursor: pointer;
}
</style><input type=\\"checkbox\\"><span class=\\"text\\">large</span><style>
label {
--checkbox-size: 1.125rem;
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: pointer;
opacity: 1;
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: pointer;
}
input {
opacity: 0;
outline: none;
position: absolute;
width: 0;
height: 0;
margin: 0;
padding: 0;
z-index: -1;
background-color: transparent;
}
</style></label></div>"
`;

21
components/checkbox/__tests__/group.test.tsx
View File

@@ -18,6 +18,27 @@ describe('Checkbox Group', () => {
expect(rendered).toMatchSnapshot()
})
it('should work correctly with different sizes', () => {
const wrapper = mount(
<div>
<Checkbox.Group value={[]} size="mini">
<Checkbox value="sydney">Sydney</Checkbox>
</Checkbox.Group>
<Checkbox.Group value={[]} size="small">
<Checkbox value="sydney">Sydney</Checkbox>
</Checkbox.Group>
<Checkbox.Group value={[]} size="medium">
<Checkbox value="sydney">Sydney</Checkbox>
</Checkbox.Group>
<Checkbox.Group value={[]} size="large">
<Checkbox value="sydney">Sydney</Checkbox>
</Checkbox.Group>
</div>,
)
expect(wrapper.html()).toMatchSnapshot()
expect(() => wrapper.unmount()).not.toThrow()
})
it('should work correctly with initial value', () => {
let wrapper = mount(
<Checkbox.Group value={['sydney']}>

13
components/checkbox/__tests__/index.test.tsx
View File

@@ -10,6 +10,19 @@ describe('Checkbox', () => {
expect(rendered).toMatchSnapshot()
})
it('should work correctly with different sizes', () => {
const wrapper = mount(
<div>
<Checkbox size="mini">mini</Checkbox>
<Checkbox size="small">small</Checkbox>
<Checkbox size="medium">medium</Checkbox>
<Checkbox size="large">large</Checkbox>
</div>,
)
expect(wrapper.html()).toMatchSnapshot()
expect(() => wrapper.unmount()).not.toThrow()
})
it('should work correctly with initial value', () => {
let wrapper = mount(<Checkbox checked={true}>Sydney</Checkbox>)
let input = wrapper.find('input').getDOMNode()

18
components/checkbox/checkbox-group.tsx
View File

@@ -2,26 +2,40 @@ import React, { useEffect, useMemo, useState } from 'react'
import withDefaults from '../utils/with-defaults'
import { CheckboxContext } from './checkbox-context'
import useWarning from '../utils/use-warning'
import { NormalSizes } from '../utils/prop-types'
interface Props {
value: string[]
disabled?: boolean
size?: NormalSizes
onChange?: (values: string[]) => void
className?: string
}
const defaultProps = {
disabled: false,
size: 'small' as NormalSizes,
className: '',
}
type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
export type CheckboxGroupProps = Props & typeof defaultProps & NativeAttrs
export const getCheckboxSize = (size: NormalSizes): string => {
const sizes: { [key in NormalSizes]: string } = {
mini: '.75rem',
small: '.875rem',
medium: '1rem',
large: '1.125rem',
}
return sizes[size]
}
const CheckboxGroup: React.FC<React.PropsWithChildren<CheckboxGroupProps>> = ({
disabled,
onChange,
value,
size,
children,
className,
...props
@@ -47,6 +61,7 @@ const CheckboxGroup: React.FC<React.PropsWithChildren<CheckboxGroupProps>> = ({
values: selfVal,
}
}, [disabled, selfVal])
const fontSize = useMemo(() => getCheckboxSize(size), [size])
useEffect(() => {
setSelfVal(value)
@@ -58,7 +73,8 @@ const CheckboxGroup: React.FC<React.PropsWithChildren<CheckboxGroupProps>> = ({
{children}
<style jsx>{`
.group :global(label) {
margin-right: 1.875rem;
margin-right: calc(${fontSize} * 2);
--checkbox-size: ${fontSize};
}
`}</style>
</div>

18
components/checkbox/checkbox.icon.tsx
View File

@@ -20,12 +20,7 @@ const CheckboxIcon: React.FC<Props> = ({ disabled, checked }) => {
return (
<>
{checked ? (
<svg
width="12px"
height="12px"
viewBox="0 0 17 16"
fill="none"
xmlns="http://www.w3.org/2000/svg">
<svg viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M12.1429 0H3.85714C1.7269 0 0 1.79086 0 4V12C0 14.2091 1.7269 16 3.85714 16H12.1429C14.2731 16 16 14.2091 16 12V4C16 1.79086 14.2731 0 12.1429 0Z"
fill={fill}
@@ -33,12 +28,7 @@ const CheckboxIcon: React.FC<Props> = ({ disabled, checked }) => {
<path d="M16 3L7.72491 11L5 8" stroke={bg} strokeWidth="1.5" />
</svg>
) : (
<svg
xmlns="http://www.w3.org/2000/svg"
width="12px"
height="12px"
viewBox="0 0 12 12"
fill="none">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none">
<path
d="M8.5 0.5H3.5C1.84315 0.5 0.5 1.84315 0.5 3.5V8.5C0.5 10.1569 1.84315 11.5 3.5 11.5H8.5C10.1569 11.5 11.5 10.1569 11.5 8.5V3.5C11.5 1.84315 10.1569 0.5 8.5 0.5Z"
stroke={stroke}
@@ -48,8 +38,8 @@ const CheckboxIcon: React.FC<Props> = ({ disabled, checked }) => {
<style jsx>{`
svg {
display: inline-flex;
width: 12px;
height: 12px;
width: calc(0.86 * var(--checkbox-size));
height: calc(0.86 * var(--checkbox-size));
user-select: none;
opacity: ${disabled ? 0.4 : 1};
cursor: ${disabled ? 'not-allowed' : 'pointer'};

21
components/checkbox/checkbox.tsx
View File

@@ -1,8 +1,9 @@
import React, { useCallback, useEffect, useState } from 'react'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { useCheckbox } from './checkbox-context'
import CheckboxGroup from './checkbox-group'
import CheckboxGroup, { getCheckboxSize } from './checkbox-group'
import CheckboxIcon from './checkbox.icon'
import useWarning from '../utils/use-warning'
import { NormalSizes } from '../utils/prop-types'
interface CheckboxEventTarget {
checked: boolean
@@ -20,6 +21,7 @@ interface Props {
disabled?: boolean
initialChecked?: boolean
onChange?: (e: CheckboxEvent) => void
size?: NormalSizes
className?: string
value?: string
}
@@ -27,6 +29,7 @@ interface Props {
const defaultProps = {
disabled: false,
initialChecked: false,
size: 'small' as NormalSizes,
className: '',
value: '',
}
@@ -41,6 +44,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
onChange,
className,
children,
size,
value,
...props
}) => {
@@ -51,7 +55,6 @@ const Checkbox: React.FC<CheckboxProps> = ({
if (inGroup && checked) {
useWarning('Remove props "checked" when [Checkbox] component is in the group.', 'Checkbox')
}
if (inGroup) {
useEffect(() => {
const next = values.includes(value)
@@ -60,6 +63,7 @@ const Checkbox: React.FC<CheckboxProps> = ({
}, [values.join(',')])
}
const fontSize = useMemo(() => getCheckboxSize(size), [size])
const changeHandle = useCallback(
(ev: React.ChangeEvent) => {
if (isDisabled) return
@@ -94,20 +98,21 @@ const Checkbox: React.FC<CheckboxProps> = ({
<style jsx>{`
label {
height: 0.875rem;
line-height: 0.875rem;
--checkbox-size: ${fontSize};
display: inline-flex;
justify-content: center;
align-items: center;
width: auto;
cursor: ${isDisabled ? 'not-allowed' : 'pointer'};
opacity: ${isDisabled ? 0.75 : 1};
height: var(--checkbox-size);
line-height: var(--checkbox-size);
}
.text {
font-size: 0.875rem;
line-height: 0.875rem;
padding-left: 0.5rem;
font-size: var(--checkbox-size);
line-height: var(--checkbox-size);
padding-left: calc(var(--checkbox-size) * 0.57);
user-select: none;
cursor: ${isDisabled ? 'not-allowed' : 'pointer'};
}

27
pages/en-us/components/checkbox.mdx
View File

@@ -10,7 +10,6 @@ export const meta = {
Displays a boolean value.
<Playground
desc="Change state with `checked` props."
scope={{ Checkbox }}
@@ -18,6 +17,22 @@ Displays a boolean value.
<Checkbox checked={true}>Sydney</Checkbox>
`} />
<Playground
title="sizes"
desc="Checkbox of different sizes."
scope={{ Checkbox, Spacer }}
code={`
<>
<Checkbox checked={true} size="mini">mini</Checkbox>
<Spacer y={.5} />
<Checkbox checked={true} size="small">small</Checkbox>
<Spacer y={.5} />
<Checkbox checked={true} size="medium">medium</Checkbox>
<Spacer y={.5} />
<Checkbox checked={true} size="large">large</Checkbox>
</>
`} />
<Playground
title="disable"
scope={{ Checkbox, Spacer }}
@@ -59,6 +74,7 @@ Displays a boolean value.
| **onChange** | change event handler | `CheckboxEvent` | - | - |
| **value** | unique identification value (only in group) | `string` | - | - |
| **disabled** | disable checkbox | `boolean` | - | `false` |
| **size** | checkbox size | `NormalSizes` | [NormalSizes](#normalsizes) | `small` |
| ... | native props | `LabelHTMLAttributes` | `'form', 'className', ...` | - |
<Attributes.Title>Checkbox.Group.Props</Attributes.Title>
@@ -68,7 +84,14 @@ Displays a boolean value.
| **value** | checked children | `Array<string>` | - | `[]` |
| **disabled** | disable checkbox group | `boolean` | - | `false` |
| **onChange** | change event handler | `(values: string[]) => void` | - | - |
| ... | native props | `HTMLAttributes` | `'spellCheck', 'style', 'className', ...` | - |
| **size** | size of all checkboxes in the group | `NormalSizes` | [NormalSizes](#normalsizes) | `small` |
| ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - |
<Attributes.Title>NormalSizes</Attributes.Title>
```ts
type NormalSizes = 'mini' | 'small' | 'medium' | 'large'
```
<Attributes.Title>CheckboxEvent</Attributes.Title>

26
pages/zh-cn/components/checkbox.mdx
View File

@@ -18,6 +18,22 @@ export const meta = {
<Checkbox initialChecked={true}>墨西哥</Checkbox>
`} />
<Playground
title="大小"
desc="不同大小的复选框。"
scope={{ Checkbox, Spacer }}
code={`
<>
<Checkbox checked={true} size="mini">最小</Checkbox>
<Spacer y={.5} />
<Checkbox checked={true} size="small">较小</Checkbox>
<Spacer y={.5} />
<Checkbox checked={true} size="medium">中等</Checkbox>
<Spacer y={.5} />
<Checkbox checked={true} size="large">最大</Checkbox>
</>
`} />
<Playground
title="禁用的"
scope={{ Checkbox, Spacer }}
@@ -59,6 +75,7 @@ export const meta = {
| **onChange** | 复选框的变化事件 | `CheckboxEvent` | - | - |
| **value** | 唯一的鉴别值 (仅在组内可用) | `string` | - | - |
| **disabled** | 禁用复选框 | `boolean` | - | `false` |
| **size** | 复选框的大小 | `NormalSizes` | [NormalSizes](#normalsizes) | `small` |
| ... | 原生属性 | `LabelHTMLAttributes` | `'form', 'className', ...` | - |
<Attributes.Title>Checkbox.Group.Props</Attributes.Title>
@@ -68,7 +85,14 @@ export const meta = {
| **value** | 选中的一组值 | `Array<string>` | - | `[]` |
| **disabled** | 禁用一个组的复选框 | `boolean` | - | `false` |
| **onChange** | 复选框的变化事件 | `(values: string[]) => void` | - | - |
| ... | 原生属性 | `HTMLAttributes` | `'spellCheck', 'style', 'className', ...` | - |
| **size** | 组内所有复选框的大小 | `NormalSizes` | [NormalSizes](#normalsizes) | `small` |
| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - |
<Attributes.Title>NormalSizes</Attributes.Title>
```ts
type NormalSizes = 'mini' | 'small' | 'medium' | 'large'
```
<Attributes.Title>CheckboxEvent</Attributes.Title>