mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 13:09:40 +08:00
feat: expand rate character (#24903)
* feat: expand rate character * fix: demo * fix: snap * Update components/rate/index.zh-CN.md Co-authored-by: 偏右 <afc163@gmail.com> * fix Co-authored-by: 偏右 <afc163@gmail.com>
This commit is contained in:
xrkffgg
GitHub
parent
aa6c0a19c8
commit
f37f471373
@ -310,7 +310,7 @@ exports[`renders ./components/rate/demo/basic.md correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders ./components/rate/demo/character.md correctly 1`] = `
|
||||
<div>
|
||||
Array [
|
||||
<ul
|
||||
class="ant-rate"
|
||||
role="radiogroup"
|
||||
@ -616,8 +616,8 @@ exports[`renders ./components/rate/demo/character.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<br />
|
||||
</ul>,
|
||||
<br />,
|
||||
<ul
|
||||
class="ant-rate"
|
||||
role="radiogroup"
|
||||
@ -734,8 +734,8 @@ exports[`renders ./components/rate/demo/character.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<br />
|
||||
</ul>,
|
||||
<br />,
|
||||
<ul
|
||||
class="ant-rate"
|
||||
role="radiogroup"
|
||||
@ -851,12 +851,440 @@ exports[`renders ./components/rate/demo/character.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ul>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/rate/demo/character-function.md correctly 1`] = `
|
||||
Array [
|
||||
<ul
|
||||
class="ant-rate"
|
||||
role="radiogroup"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
class="ant-rate-star ant-rate-star-zero"
|
||||
>
|
||||
<div
|
||||
aria-checked="false"
|
||||
aria-posinset="1"
|
||||
aria-setsize="5"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="ant-rate-star-first"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
<div
|
||||
class="ant-rate-star-second"
|
||||
>
|
||||
1
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-rate-star ant-rate-star-zero"
|
||||
>
|
||||
<div
|
||||
aria-checked="false"
|
||||
aria-posinset="2"
|
||||
aria-setsize="5"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="ant-rate-star-first"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
<div
|
||||
class="ant-rate-star-second"
|
||||
>
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-rate-star ant-rate-star-zero"
|
||||
>
|
||||
<div
|
||||
aria-checked="false"
|
||||
aria-posinset="3"
|
||||
aria-setsize="5"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="ant-rate-star-first"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
<div
|
||||
class="ant-rate-star-second"
|
||||
>
|
||||
3
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-rate-star ant-rate-star-zero"
|
||||
>
|
||||
<div
|
||||
aria-checked="false"
|
||||
aria-posinset="4"
|
||||
aria-setsize="5"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="ant-rate-star-first"
|
||||
>
|
||||
4
|
||||
</div>
|
||||
<div
|
||||
class="ant-rate-star-second"
|
||||
>
|
||||
4
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-rate-star ant-rate-star-zero"
|
||||
>
|
||||
<div
|
||||
aria-checked="false"
|
||||
aria-posinset="5"
|
||||
aria-setsize="5"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="ant-rate-star-first"
|
||||
>
|
||||
5
|
||||
</div>
|
||||
<div
|
||||
class="ant-rate-star-second"
|
||||
>
|
||||
5
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>,
|
||||
<br />,
|
||||
<ul
|
||||
class="ant-rate"
|
||||
role="radiogroup"
|
||||
tabindex="0"
|
||||
>
|
||||
<li
|
||||
class="ant-rate-star ant-rate-star-zero"
|
||||
>
|
||||
<div
|
||||
aria-checked="false"
|
||||
aria-posinset="1"
|
||||
aria-setsize="5"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="ant-rate-star-first"
|
||||
>
|
||||
<span
|
||||
aria-label="frown"
|
||||
class="anticon anticon-frown"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="frown"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM512 533c-85.5 0-155.6 67.3-160 151.6a8 8 0 008 8.4h48.1c4.2 0 7.8-3.2 8.1-7.4C420 636.1 461.5 597 512 597s92.1 39.1 95.8 88.6c.3 4.2 3.9 7.4 8.1 7.4H664a8 8 0 008-8.4C667.6 600.3 597.5 533 512 533z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-rate-star-second"
|
||||
>
|
||||
<span
|
||||
aria-label="frown"
|
||||
class="anticon anticon-frown"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="frown"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM512 533c-85.5 0-155.6 67.3-160 151.6a8 8 0 008 8.4h48.1c4.2 0 7.8-3.2 8.1-7.4C420 636.1 461.5 597 512 597s92.1 39.1 95.8 88.6c.3 4.2 3.9 7.4 8.1 7.4H664a8 8 0 008-8.4C667.6 600.3 597.5 533 512 533z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-rate-star ant-rate-star-zero"
|
||||
>
|
||||
<div
|
||||
aria-checked="false"
|
||||
aria-posinset="2"
|
||||
aria-setsize="5"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="ant-rate-star-first"
|
||||
>
|
||||
<span
|
||||
aria-label="frown"
|
||||
class="anticon anticon-frown"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="frown"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM512 533c-85.5 0-155.6 67.3-160 151.6a8 8 0 008 8.4h48.1c4.2 0 7.8-3.2 8.1-7.4C420 636.1 461.5 597 512 597s92.1 39.1 95.8 88.6c.3 4.2 3.9 7.4 8.1 7.4H664a8 8 0 008-8.4C667.6 600.3 597.5 533 512 533z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-rate-star-second"
|
||||
>
|
||||
<span
|
||||
aria-label="frown"
|
||||
class="anticon anticon-frown"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="frown"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM512 533c-85.5 0-155.6 67.3-160 151.6a8 8 0 008 8.4h48.1c4.2 0 7.8-3.2 8.1-7.4C420 636.1 461.5 597 512 597s92.1 39.1 95.8 88.6c.3 4.2 3.9 7.4 8.1 7.4H664a8 8 0 008-8.4C667.6 600.3 597.5 533 512 533z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-rate-star ant-rate-star-zero"
|
||||
>
|
||||
<div
|
||||
aria-checked="false"
|
||||
aria-posinset="3"
|
||||
aria-setsize="5"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="ant-rate-star-first"
|
||||
>
|
||||
<span
|
||||
aria-label="meh"
|
||||
class="anticon anticon-meh"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="meh"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 565H360c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h304c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-rate-star-second"
|
||||
>
|
||||
<span
|
||||
aria-label="meh"
|
||||
class="anticon anticon-meh"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="meh"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 565H360c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h304c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-rate-star ant-rate-star-zero"
|
||||
>
|
||||
<div
|
||||
aria-checked="false"
|
||||
aria-posinset="4"
|
||||
aria-setsize="5"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="ant-rate-star-first"
|
||||
>
|
||||
<span
|
||||
aria-label="smile"
|
||||
class="anticon anticon-smile"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="smile"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-rate-star-second"
|
||||
>
|
||||
<span
|
||||
aria-label="smile"
|
||||
class="anticon anticon-smile"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="smile"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
class="ant-rate-star ant-rate-star-zero"
|
||||
>
|
||||
<div
|
||||
aria-checked="false"
|
||||
aria-posinset="5"
|
||||
aria-setsize="5"
|
||||
role="radio"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="ant-rate-star-first"
|
||||
>
|
||||
<span
|
||||
aria-label="smile"
|
||||
class="anticon anticon-smile"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="smile"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-rate-star-second"
|
||||
>
|
||||
<span
|
||||
aria-label="smile"
|
||||
class="anticon anticon-smile"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="smile"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/rate/demo/clear.md correctly 1`] = `
|
||||
<div>
|
||||
Array [
|
||||
<ul
|
||||
class="ant-rate"
|
||||
role="radiogroup"
|
||||
@ -1162,13 +1590,13 @@ exports[`renders ./components/rate/demo/clear.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>,
|
||||
<span
|
||||
class="ant-rate-text"
|
||||
>
|
||||
allowClear: true
|
||||
</span>
|
||||
<br />
|
||||
</span>,
|
||||
<br />,
|
||||
<ul
|
||||
class="ant-rate"
|
||||
role="radiogroup"
|
||||
@ -1474,13 +1902,13 @@ exports[`renders ./components/rate/demo/clear.md correctly 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>,
|
||||
<span
|
||||
class="ant-rate-text"
|
||||
>
|
||||
allowClear: false
|
||||
</span>
|
||||
</div>
|
||||
</span>,
|
||||
]
|
||||
`;
|
||||
|
||||
exports[`renders ./components/rate/demo/disabled.md correctly 1`] = `
|
||||
|
||||
44
components/rate/demo/character-function.md
Normal file
44
components/rate/demo/character-function.md
Normal file
@ -0,0 +1,44 @@
|
||||
---
|
||||
order: 6
|
||||
title:
|
||||
zh-CN: 自定义字符
|
||||
en-US: Customize character
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
可以使用 `({ index }) => ReactNode` 的方式自定义每一个字符。
|
||||
|
||||
## en-US
|
||||
|
||||
Can customize each character using `({ index }) => ReactNode`.
|
||||
|
||||
```jsx
|
||||
import { Rate } from 'antd';
|
||||
import { FrownOutlined, MehOutlined, SmileOutlined } from '@ant-design/icons';
|
||||
|
||||
const customIcons = {
|
||||
1: <FrownOutlined />,
|
||||
2: <FrownOutlined />,
|
||||
3: <MehOutlined />,
|
||||
4: <SmileOutlined />,
|
||||
5: <SmileOutlined />,
|
||||
};
|
||||
|
||||
ReactDOM.render(
|
||||
<>
|
||||
<Rate
|
||||
character={({ index }) => {
|
||||
return index + 1;
|
||||
}}
|
||||
/>
|
||||
<br />
|
||||
<Rate
|
||||
character={({ index }) => {
|
||||
return customIcons[index + 1];
|
||||
}}
|
||||
/>
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
@ -18,13 +18,13 @@ import { Rate } from 'antd';
|
||||
import { HeartOutlined } from '@ant-design/icons';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<>
|
||||
<Rate character={<HeartOutlined />} allowHalf />
|
||||
<br />
|
||||
<Rate character="A" allowHalf style={{ fontSize: 36 }} />
|
||||
<br />
|
||||
<Rate character="好" allowHalf />
|
||||
</div>,
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
@ -17,13 +17,13 @@ Support set allow to clear star when click again.
|
||||
import { Rate } from 'antd';
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<>
|
||||
<Rate defaultValue={3} />
|
||||
<span className="ant-rate-text">allowClear: true</span>
|
||||
<br />
|
||||
<Rate allowClear={false} defaultValue={3} />
|
||||
<span className="ant-rate-text">allowClear: false</span>
|
||||
</div>,
|
||||
</>,
|
||||
mountNode,
|
||||
);
|
||||
```
|
||||
|
||||
@ -14,24 +14,24 @@ Rate component.
|
||||
|
||||
## API
|
||||
|
||||
| Property | Description | type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| allowClear | whether to allow clear when click again | boolean | true |
|
||||
| allowHalf | whether to allow semi selection | boolean | false |
|
||||
| autoFocus | get focus when component mounted | boolean | false |
|
||||
| character | custom character of rate | ReactNode | [`<StarFilled />`](/components/icon/) |
|
||||
| className | custom class name of rate | string | |
|
||||
| count | star count | number | 5 |
|
||||
| defaultValue | default value | number | 0 |
|
||||
| disabled | read only, unable to interact | boolean | false |
|
||||
| style | custom style object of rate | CSSProperties | |
|
||||
| tooltips | Customize tooltip by each character | string\[] | |
|
||||
| value | current value | number | |
|
||||
| onBlur | callback when component lose focus | Function() | |
|
||||
| onChange | callback when select value | Function(value: number) | |
|
||||
| onFocus | callback when component get focus | Function() | |
|
||||
| onHoverChange | callback when hover item | Function(value: number) | |
|
||||
| onKeyDown | callback when keydown on component | Function(event) | |
|
||||
| Property | Description | type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| allowClear | whether to allow clear when click again | boolean | true | |
|
||||
| allowHalf | whether to allow semi selection | boolean | false | |
|
||||
| autoFocus | get focus when component mounted | boolean | false | |
|
||||
| character | custom character of rate | ReactNode \| ({ index }) => ReactNode | [`<StarFilled />`](/components/icon/) | Function(): 4.4.0 |
|
||||
| className | custom class name of rate | string | | |
|
||||
| count | star count | number | 5 | |
|
||||
| defaultValue | default value | number | 0 | |
|
||||
| disabled | read only, unable to interact | boolean | false | |
|
||||
| style | custom style object of rate | CSSProperties | | |
|
||||
| tooltips | Customize tooltip by each character | string\[] | | |
|
||||
| value | current value | number | | |
|
||||
| onBlur | callback when component lose focus | Function() | | |
|
||||
| onChange | callback when select value | Function(value: number) | | |
|
||||
| onFocus | callback when component get focus | Function() | | |
|
||||
| onHoverChange | callback when hover item | Function(value: number) | | |
|
||||
| onKeyDown | callback when keydown on component | Function(event) | | |
|
||||
|
||||
## Methods
|
||||
|
||||
|
||||
@ -15,24 +15,24 @@ cover: https://gw.alipayobjects.com/zos/alicdn/R5uiIWmxe/Rate.svg
|
||||
|
||||
## API
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| allowClear | 是否允许再次点击后清除 | boolean | true |
|
||||
| allowHalf | 是否允许半选 | boolean | false |
|
||||
| autoFocus | 自动获取焦点 | boolean | false |
|
||||
| character | 自定义字符 | ReactNode | [`<StarFilled />`](/components/icon/) |
|
||||
| className | 自定义样式类名 | string | |
|
||||
| count | star 总数 | number | 5 |
|
||||
| defaultValue | 默认值 | number | 0 |
|
||||
| disabled | 只读，无法进行交互 | boolean | false |
|
||||
| style | 自定义样式对象 | CSSProperties | |
|
||||
| tooltips | 自定义每项的提示信息 | string\[] | |
|
||||
| value | 当前数，受控值 | number | |
|
||||
| onBlur | 失去焦点时的回调 | Function() | |
|
||||
| onChange | 选择时的回调 | Function(value: number) | |
|
||||
| onFocus | 获取焦点时的回调 | Function() | |
|
||||
| onHoverChange | 鼠标经过时数值变化的回调 | Function(value: number) | |
|
||||
| onKeyDown | 按键回调 | Function(event) | |
|
||||
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| allowClear | 是否允许再次点击后清除 | boolean | true | |
|
||||
| allowHalf | 是否允许半选 | boolean | false | |
|
||||
| autoFocus | 自动获取焦点 | boolean | false | |
|
||||
| character | 自定义字符 | ReactNode \| ({ index }) => ReactNode | [`<StarFilled />`](/components/icon/) | Function(): 4.4.0 |
|
||||
| className | 自定义样式类名 | string | | |
|
||||
| count | star 总数 | number | 5 | |
|
||||
| defaultValue | 默认值 | number | 0 | |
|
||||
| disabled | 只读，无法进行交互 | boolean | false | |
|
||||
| style | 自定义样式对象 | CSSProperties | | |
|
||||
| tooltips | 自定义每项的提示信息 | string\[] | | |
|
||||
| value | 当前数，受控值 | number | | |
|
||||
| onBlur | 失去焦点时的回调 | Function() | | |
|
||||
| onChange | 选择时的回调 | Function(value: number) | | |
|
||||
| onFocus | 获取焦点时的回调 | Function() | | |
|
||||
| onHoverChange | 鼠标经过时数值变化的回调 | Function(value: number) | | |
|
||||
| onKeyDown | 按键回调 | Function(event) | | |
|
||||
|
||||
## 方法
|
||||
|
||||
|
||||
@ -129,7 +129,7 @@
|
||||
"rc-pagination": "~2.2.5",
|
||||
"rc-picker": "~1.6.1",
|
||||
"rc-progress": "~3.0.0",
|
||||
"rc-rate": "~2.7.0",
|
||||
"rc-rate": "~2.8.0",
|
||||
"rc-resize-observer": "^0.2.3",
|
||||
"rc-select": "~11.0.0",
|
||||
"rc-slider": "~9.3.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user