mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
feat: Progress Component Token (#42757)
* feat: Progress Component Token * feat: add defaultColor&circleTextColor update infoTextColor -> textColor * chore: update * chore: add comment * chore: update snapshot * chore: fix lint * chore: rm ignore file --------- Signed-off-by: MadCcc <1075746765@qq.com> Co-authored-by: MadCcc <1075746765@qq.com>
This commit is contained in:
hms181231
GitHub
parent
6de03aef37
commit
db07a2fe0a
@ -643,6 +643,637 @@ exports[`renders components/progress/demo/circle-mini.tsx extend context correct
|
|||||||
|
|
||||||
exports[`renders components/progress/demo/circle-mini.tsx extend context correctly 2`] = `[]`;
|
exports[`renders components/progress/demo/circle-mini.tsx extend context correctly 2`] = `[]`;
|
||||||
|
|
||||||
|
exports[`renders components/progress/demo/component-token.tsx extend context correctly 1`] = `
|
||||||
|
Array [
|
||||||
|
<div
|
||||||
|
class="ant-space ant-space-vertical"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-bottom: 8px;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-line ant-progress-show-info ant-progress-default"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-outer"
|
||||||
|
style="width: 100%; height: 8px;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-inner"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-bg"
|
||||||
|
style="width: 50%; height: 8px;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="ant-progress-text"
|
||||||
|
title="50%"
|
||||||
|
>
|
||||||
|
50%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-bottom: 8px;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-line ant-progress-show-info ant-progress-small"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-outer"
|
||||||
|
style="width: 100%; height: 6px;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-inner"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-bg"
|
||||||
|
style="width: 50%; height: 6px;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="ant-progress-text"
|
||||||
|
title="50%"
|
||||||
|
>
|
||||||
|
50%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-line ant-progress-show-info"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-outer"
|
||||||
|
style="width: 300px; height: 20px;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-inner"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-bg"
|
||||||
|
style="width: 50%; height: 20px;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="ant-progress-text"
|
||||||
|
title="50%"
|
||||||
|
>
|
||||||
|
50%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
<br />,
|
||||||
|
<br />,
|
||||||
|
<div
|
||||||
|
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right: 30px;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info ant-progress-default"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-inner"
|
||||||
|
style="width: 120px; height: 120px; font-size: 24px;"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="ant-progress-circle"
|
||||||
|
role="presentation"
|
||||||
|
viewBox="-50 -50 100 100"
|
||||||
|
>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-trail"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
r="47"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="6"
|
||||||
|
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-path"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
opacity="1"
|
||||||
|
r="47"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="6"
|
||||||
|
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 150.6548547187203; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-path"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
opacity="0"
|
||||||
|
r="47"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="6"
|
||||||
|
style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span
|
||||||
|
class="ant-progress-text"
|
||||||
|
title="50%"
|
||||||
|
>
|
||||||
|
50%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right: 30px;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info ant-progress-small"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-inner"
|
||||||
|
style="width: 60px; height: 60px; font-size: 15px;"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="ant-progress-circle"
|
||||||
|
role="presentation"
|
||||||
|
viewBox="-50 -50 100 100"
|
||||||
|
>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-trail"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
r="47"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="6"
|
||||||
|
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-path"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
opacity="1"
|
||||||
|
r="47"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="6"
|
||||||
|
style="stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 150.6548547187203; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-path"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
opacity="0"
|
||||||
|
r="47"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="6"
|
||||||
|
style="stroke: #52C41A; stroke-dasharray: 295.3097094374406px 295.3097094374406; stroke-dashoffset: 295.2997094374406; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span
|
||||||
|
class="ant-progress-text"
|
||||||
|
title="50%"
|
||||||
|
>
|
||||||
|
50%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-inline-circle ant-progress-show-info"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-inner"
|
||||||
|
style="width: 20px; height: 20px; font-size: 9px;"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<svg
|
||||||
|
class="ant-progress-circle"
|
||||||
|
role="presentation"
|
||||||
|
viewBox="-50 -50 100 100"
|
||||||
|
>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-trail"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
r="42.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="15"
|
||||||
|
style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 0; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-path"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
opacity="1"
|
||||||
|
r="42.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="15"
|
||||||
|
style="stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 141.0176877775662; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-path"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
opacity="0"
|
||||||
|
r="42.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="15"
|
||||||
|
style="stroke: #52C41A; stroke-dasharray: 267.0353755551324px 267.0353755551324; stroke-dashoffset: 267.0253755551324; transform: rotate(-90deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; bottom: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-progress-text"
|
||||||
|
title="50%"
|
||||||
|
>
|
||||||
|
50%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
<br />,
|
||||||
|
<br />,
|
||||||
|
<div
|
||||||
|
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right: 30px;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info ant-progress-default"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-inner"
|
||||||
|
style="width: 120px; height: 120px; font-size: 24px;"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="ant-progress-circle"
|
||||||
|
role="presentation"
|
||||||
|
viewBox="-50 -50 100 100"
|
||||||
|
>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-trail"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
r="47"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="6"
|
||||||
|
style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-path"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
opacity="1"
|
||||||
|
r="47"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="6"
|
||||||
|
style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 119.89342665232022; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-path"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
opacity="0"
|
||||||
|
r="47"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="6"
|
||||||
|
style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 233.77685330464044; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span
|
||||||
|
class="ant-progress-text"
|
||||||
|
title="50%"
|
||||||
|
>
|
||||||
|
50%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right: 30px;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info ant-progress-small"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-inner"
|
||||||
|
style="width: 60px; height: 60px; font-size: 15px;"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="ant-progress-circle"
|
||||||
|
role="presentation"
|
||||||
|
viewBox="-50 -50 100 100"
|
||||||
|
>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-trail"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
r="47"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="6"
|
||||||
|
style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-path"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
opacity="1"
|
||||||
|
r="47"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="6"
|
||||||
|
style="stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 119.89342665232022; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-path"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
opacity="0"
|
||||||
|
r="47"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="6"
|
||||||
|
style="stroke: #52C41A; stroke-dasharray: 233.78685330464043px 295.3097094374406; stroke-dashoffset: 233.77685330464044; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span
|
||||||
|
class="ant-progress-text"
|
||||||
|
title="50%"
|
||||||
|
>
|
||||||
|
50%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-inner"
|
||||||
|
style="width: 20px; height: 20px; font-size: 9px;"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<svg
|
||||||
|
class="ant-progress-circle"
|
||||||
|
role="presentation"
|
||||||
|
viewBox="-50 -50 100 100"
|
||||||
|
>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-trail"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
r="42.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="15"
|
||||||
|
style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 0; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0;"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-path"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
opacity="1"
|
||||||
|
r="42.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="15"
|
||||||
|
style="stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 113.20150282390658; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-path"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
opacity="0"
|
||||||
|
r="42.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="15"
|
||||||
|
style="stroke: #52C41A; stroke-dasharray: 211.40300564781316px 267.0353755551324; stroke-dashoffset: 211.39300564781317; transform: rotate(127.5deg); transform-origin: 0 0; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s; fill-opacity: 0; transition-duration: 0s, 0s;"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-placement-top"
|
||||||
|
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-arrow"
|
||||||
|
style="position: absolute; bottom: 0px; left: 0px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-content"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="ant-progress-text"
|
||||||
|
title="50%"
|
||||||
|
>
|
||||||
|
50%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
<br />,
|
||||||
|
<br />,
|
||||||
|
<div
|
||||||
|
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||||
|
style="flex-wrap: wrap; margin-bottom: -30px;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right: 30px; padding-bottom: 30px;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-steps ant-progress-show-info ant-progress-default"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-outer"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-item ant-progress-steps-item-active"
|
||||||
|
style="width: 14px; height: 8px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-item ant-progress-steps-item-active"
|
||||||
|
style="width: 14px; height: 8px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-item"
|
||||||
|
style="width: 14px; height: 8px;"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-progress-text"
|
||||||
|
title="50%"
|
||||||
|
>
|
||||||
|
50%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right: 30px; padding-bottom: 30px;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-steps ant-progress-show-info ant-progress-small"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-outer"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-item ant-progress-steps-item-active"
|
||||||
|
style="width: 2px; height: 8px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-item ant-progress-steps-item-active"
|
||||||
|
style="width: 2px; height: 8px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-item"
|
||||||
|
style="width: 2px; height: 8px;"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-progress-text"
|
||||||
|
title="50%"
|
||||||
|
>
|
||||||
|
50%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right: 30px; padding-bottom: 30px;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-steps ant-progress-show-info"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-outer"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-item ant-progress-steps-item-active"
|
||||||
|
style="width: 20px; height: 20px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-item ant-progress-steps-item-active"
|
||||||
|
style="width: 20px; height: 20px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-item"
|
||||||
|
style="width: 20px; height: 20px;"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-progress-text"
|
||||||
|
title="50%"
|
||||||
|
>
|
||||||
|
50%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="padding-bottom: 30px;"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-steps ant-progress-show-info"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-outer"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-item ant-progress-steps-item-active"
|
||||||
|
style="width: 20px; height: 30px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-item ant-progress-steps-item-active"
|
||||||
|
style="width: 20px; height: 30px;"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-item"
|
||||||
|
style="width: 20px; height: 30px;"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-progress-text"
|
||||||
|
title="50%"
|
||||||
|
>
|
||||||
|
50%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
]
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders components/progress/demo/component-token.tsx extend context correctly 2`] = `[]`;
|
||||||
|
|
||||||
exports[`renders components/progress/demo/dashboard.tsx extend context correctly 1`] = `
|
exports[`renders components/progress/demo/dashboard.tsx extend context correctly 1`] = `
|
||||||
<div
|
<div
|
||||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||||
|
|||||||
@ -611,6 +611,587 @@ exports[`renders components/progress/demo/circle-mini.tsx correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
exports[`renders components/progress/demo/component-token.tsx correctly 1`] = `
|
||||||
|
Array [
|
||||||
|
<div
|
||||||
|
class="ant-space ant-space-vertical"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-bottom:8px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-line ant-progress-show-info ant-progress-default"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-outer"
|
||||||
|
style="width:100%;height:8px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-inner"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-bg"
|
||||||
|
style="width:50%;height:8px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="ant-progress-text"
|
||||||
|
title="50%"
|
||||||
|
>
|
||||||
|
50%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-bottom:8px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-line ant-progress-show-info ant-progress-small"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-outer"
|
||||||
|
style="width:100%;height:6px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-inner"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-bg"
|
||||||
|
style="width:50%;height:6px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="ant-progress-text"
|
||||||
|
title="50%"
|
||||||
|
>
|
||||||
|
50%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-line ant-progress-show-info"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-outer"
|
||||||
|
style="width:300px;height:20px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-inner"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-bg"
|
||||||
|
style="width:50%;height:20px"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="ant-progress-text"
|
||||||
|
title="50%"
|
||||||
|
>
|
||||||
|
50%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
<br />,
|
||||||
|
<br />,
|
||||||
|
<div
|
||||||
|
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:30px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info ant-progress-default"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-inner"
|
||||||
|
style="width:120px;height:120px;font-size:24px"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="ant-progress-circle"
|
||||||
|
role="presentation"
|
||||||
|
viewBox="-50 -50 100 100"
|
||||||
|
>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-trail"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
r="47"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="6"
|
||||||
|
style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-path"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
opacity="1"
|
||||||
|
r="47"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="6"
|
||||||
|
style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:150.6548547187203;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-path"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
opacity="0"
|
||||||
|
r="47"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="6"
|
||||||
|
style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span
|
||||||
|
class="ant-progress-text"
|
||||||
|
title="50%"
|
||||||
|
>
|
||||||
|
50%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:30px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info ant-progress-small"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-inner"
|
||||||
|
style="width:60px;height:60px;font-size:15px"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="ant-progress-circle"
|
||||||
|
role="presentation"
|
||||||
|
viewBox="-50 -50 100 100"
|
||||||
|
>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-trail"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
r="47"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="6"
|
||||||
|
style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-path"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
opacity="1"
|
||||||
|
r="47"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="6"
|
||||||
|
style="stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:150.6548547187203;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-path"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
opacity="0"
|
||||||
|
r="47"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="6"
|
||||||
|
style="stroke:#52C41A;stroke-dasharray:295.3097094374406px 295.3097094374406;stroke-dashoffset:295.2997094374406;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span
|
||||||
|
class="ant-progress-text"
|
||||||
|
title="50%"
|
||||||
|
>
|
||||||
|
50%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-inline-circle ant-progress-show-info"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-inner"
|
||||||
|
style="width:20px;height:20px;font-size:9px"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<svg
|
||||||
|
class="ant-progress-circle"
|
||||||
|
role="presentation"
|
||||||
|
viewBox="-50 -50 100 100"
|
||||||
|
>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-trail"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
r="42.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="15"
|
||||||
|
style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-path"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
opacity="1"
|
||||||
|
r="42.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="15"
|
||||||
|
style="stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:141.0176877775662;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-path"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
opacity="0"
|
||||||
|
r="42.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="15"
|
||||||
|
style="stroke:#52C41A;stroke-dasharray:267.0353755551324px 267.0353755551324;stroke-dashoffset:267.0253755551324;transform:rotate(-90deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
<br />,
|
||||||
|
<br />,
|
||||||
|
<div
|
||||||
|
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:30px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info ant-progress-default"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-inner"
|
||||||
|
style="width:120px;height:120px;font-size:24px"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="ant-progress-circle"
|
||||||
|
role="presentation"
|
||||||
|
viewBox="-50 -50 100 100"
|
||||||
|
>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-trail"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
r="47"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="6"
|
||||||
|
style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-path"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
opacity="1"
|
||||||
|
r="47"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="6"
|
||||||
|
style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:119.89342665232022;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-path"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
opacity="0"
|
||||||
|
r="47"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="6"
|
||||||
|
style="stroke:#52C41A;stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:233.77685330464044;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span
|
||||||
|
class="ant-progress-text"
|
||||||
|
title="50%"
|
||||||
|
>
|
||||||
|
50%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:30px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info ant-progress-small"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-inner"
|
||||||
|
style="width:60px;height:60px;font-size:15px"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="ant-progress-circle"
|
||||||
|
role="presentation"
|
||||||
|
viewBox="-50 -50 100 100"
|
||||||
|
>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-trail"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
r="47"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="6"
|
||||||
|
style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-path"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
opacity="1"
|
||||||
|
r="47"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="6"
|
||||||
|
style="stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:119.89342665232022;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-path"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
opacity="0"
|
||||||
|
r="47"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="6"
|
||||||
|
style="stroke:#52C41A;stroke-dasharray:233.78685330464043px 295.3097094374406;stroke-dashoffset:233.77685330464044;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
<span
|
||||||
|
class="ant-progress-text"
|
||||||
|
title="50%"
|
||||||
|
>
|
||||||
|
50%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-circle ant-progress-show-info"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-inner"
|
||||||
|
style="width:20px;height:20px;font-size:9px"
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
<svg
|
||||||
|
class="ant-progress-circle"
|
||||||
|
role="presentation"
|
||||||
|
viewBox="-50 -50 100 100"
|
||||||
|
>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-trail"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
r="42.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="15"
|
||||||
|
style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:0;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-path"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
opacity="1"
|
||||||
|
r="42.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="15"
|
||||||
|
style="stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:113.20150282390658;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ant-progress-circle-path"
|
||||||
|
cx="0"
|
||||||
|
cy="0"
|
||||||
|
opacity="0"
|
||||||
|
r="42.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-width="15"
|
||||||
|
style="stroke:#52C41A;stroke-dasharray:211.40300564781316px 267.0353755551324;stroke-dashoffset:211.39300564781317;transform:rotate(127.5deg);transform-origin:0 0;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;fill-opacity:0"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
<br />,
|
||||||
|
<br />,
|
||||||
|
<div
|
||||||
|
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||||
|
style="flex-wrap:wrap;margin-bottom:-30px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:30px;padding-bottom:30px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-steps ant-progress-show-info ant-progress-default"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-outer"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-item ant-progress-steps-item-active"
|
||||||
|
style="width:14px;height:8px"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-item ant-progress-steps-item-active"
|
||||||
|
style="width:14px;height:8px"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-item"
|
||||||
|
style="width:14px;height:8px"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-progress-text"
|
||||||
|
title="50%"
|
||||||
|
>
|
||||||
|
50%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:30px;padding-bottom:30px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-steps ant-progress-show-info ant-progress-small"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-outer"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-item ant-progress-steps-item-active"
|
||||||
|
style="width:2px;height:8px"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-item ant-progress-steps-item-active"
|
||||||
|
style="width:2px;height:8px"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-item"
|
||||||
|
style="width:2px;height:8px"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-progress-text"
|
||||||
|
title="50%"
|
||||||
|
>
|
||||||
|
50%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="margin-right:30px;padding-bottom:30px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-steps ant-progress-show-info"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-outer"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-item ant-progress-steps-item-active"
|
||||||
|
style="width:20px;height:20px"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-item ant-progress-steps-item-active"
|
||||||
|
style="width:20px;height:20px"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-item"
|
||||||
|
style="width:20px;height:20px"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-progress-text"
|
||||||
|
title="50%"
|
||||||
|
>
|
||||||
|
50%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="ant-space-item"
|
||||||
|
style="padding-bottom:30px"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
aria-valuenow="50"
|
||||||
|
class="ant-progress ant-progress-status-normal ant-progress-steps ant-progress-show-info"
|
||||||
|
role="progressbar"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-outer"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-item ant-progress-steps-item-active"
|
||||||
|
style="width:20px;height:30px"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-item ant-progress-steps-item-active"
|
||||||
|
style="width:20px;height:30px"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="ant-progress-steps-item"
|
||||||
|
style="width:20px;height:30px"
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
class="ant-progress-text"
|
||||||
|
title="50%"
|
||||||
|
>
|
||||||
|
50%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>,
|
||||||
|
]
|
||||||
|
`;
|
||||||
|
|
||||||
exports[`renders components/progress/demo/dashboard.tsx correctly 1`] = `
|
exports[`renders components/progress/demo/dashboard.tsx correctly 1`] = `
|
||||||
<div
|
<div
|
||||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||||
|
|||||||
7
components/progress/demo/component-token.md
Normal file
7
components/progress/demo/component-token.md
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
## zh-CN
|
||||||
|
|
||||||
|
组件 Token Debug.
|
||||||
|
|
||||||
|
## en-US
|
||||||
|
|
||||||
|
Component Token Debug.
|
||||||
52
components/progress/demo/component-token.tsx
Normal file
52
components/progress/demo/component-token.tsx
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { ConfigProvider, Progress, Space } from 'antd';
|
||||||
|
|
||||||
|
const App: React.FC = () => (
|
||||||
|
<ConfigProvider
|
||||||
|
theme={{
|
||||||
|
token: {
|
||||||
|
marginXXS: 20,
|
||||||
|
fontSizeSM: 24,
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Progress: {
|
||||||
|
defaultColor: '#bae0ff',
|
||||||
|
remainingColor: '#f5222d',
|
||||||
|
colorText: '#52c41a',
|
||||||
|
circleTextColor: '#52c41a',
|
||||||
|
lineBorderRadius: 50,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Space direction="vertical">
|
||||||
|
<Progress percent={50} />
|
||||||
|
<Progress percent={50} size="small" />
|
||||||
|
<Progress percent={50} size={[300, 20]} />
|
||||||
|
</Space>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<Space size={30}>
|
||||||
|
<Progress type="circle" percent={50} />
|
||||||
|
<Progress type="circle" percent={50} size="small" />
|
||||||
|
<Progress type="circle" percent={50} size={20} />
|
||||||
|
</Space>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<Space size={30}>
|
||||||
|
<Progress type="dashboard" percent={50} />
|
||||||
|
<Progress type="dashboard" percent={50} size="small" />
|
||||||
|
<Progress type="dashboard" percent={50} size={20} />
|
||||||
|
</Space>
|
||||||
|
<br />
|
||||||
|
<br />
|
||||||
|
<Space size={30} wrap>
|
||||||
|
<Progress steps={3} percent={50} />
|
||||||
|
<Progress steps={3} percent={50} size="small" />
|
||||||
|
<Progress steps={3} percent={50} size={20} />
|
||||||
|
<Progress steps={3} percent={50} size={[20, 30]} />
|
||||||
|
</Space>
|
||||||
|
</ConfigProvider>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default App;
|
||||||
@ -4,13 +4,35 @@ import { resetComponent } from '../../style';
|
|||||||
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
import type { FullToken, GenerateStyle } from '../../theme/internal';
|
||||||
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
|
||||||
|
|
||||||
export interface ComponentToken {}
|
export interface ComponentToken {
|
||||||
|
/**
|
||||||
|
* @desc 进度条默认颜色
|
||||||
|
* @descEN Default color of progress bar
|
||||||
|
*/
|
||||||
|
defaultColor: string;
|
||||||
|
/**
|
||||||
|
* @desc 进度条剩余部分颜色
|
||||||
|
* @descEN Color of remaining part of progress bar
|
||||||
|
*/
|
||||||
|
remainingColor: string;
|
||||||
|
/**
|
||||||
|
* @desc 圆形进度条文字颜色
|
||||||
|
* @descEN Text color of circular progress bar
|
||||||
|
*/
|
||||||
|
circleTextColor: string;
|
||||||
|
/**
|
||||||
|
* @desc 条状进度条圆角
|
||||||
|
* @descEN Border radius of line progress bar
|
||||||
|
*/
|
||||||
|
lineBorderRadius: number;
|
||||||
|
/**
|
||||||
|
* @desc 圆形进度条文本大小
|
||||||
|
* @descEN Text size of circular progress bar
|
||||||
|
*/
|
||||||
|
circleTextFontSize: string;
|
||||||
|
}
|
||||||
|
|
||||||
interface ProgressToken extends FullToken<'Progress'> {
|
interface ProgressToken extends FullToken<'Progress'> {
|
||||||
progressLineRadius: number;
|
|
||||||
progressInfoTextColor: string;
|
|
||||||
progressRemainingColor: string;
|
|
||||||
progressDefaultColor: string;
|
|
||||||
progressStepMinWidth: number;
|
progressStepMinWidth: number;
|
||||||
progressStepMarginInlineEnd: number;
|
progressStepMarginInlineEnd: number;
|
||||||
progressActiveMotionDuration: string;
|
progressActiveMotionDuration: string;
|
||||||
@ -73,20 +95,20 @@ const genBaseStyle: GenerateStyle<ProgressToken> = (token) => {
|
|||||||
width: '100%',
|
width: '100%',
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
verticalAlign: 'middle',
|
verticalAlign: 'middle',
|
||||||
backgroundColor: token.progressRemainingColor,
|
backgroundColor: token.remainingColor,
|
||||||
borderRadius: token.progressLineRadius,
|
borderRadius: token.lineBorderRadius,
|
||||||
},
|
},
|
||||||
|
|
||||||
[`${progressCls}-inner:not(${progressCls}-circle-gradient)`]: {
|
[`${progressCls}-inner:not(${progressCls}-circle-gradient)`]: {
|
||||||
[`${progressCls}-circle-path`]: {
|
[`${progressCls}-circle-path`]: {
|
||||||
stroke: token.colorInfo,
|
stroke: token.defaultColor,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
[`${progressCls}-success-bg, ${progressCls}-bg`]: {
|
[`${progressCls}-success-bg, ${progressCls}-bg`]: {
|
||||||
position: 'relative',
|
position: 'relative',
|
||||||
backgroundColor: token.colorInfo,
|
backgroundColor: token.defaultColor,
|
||||||
borderRadius: token.progressLineRadius,
|
borderRadius: token.lineBorderRadius,
|
||||||
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOutCirc}`,
|
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOutCirc}`,
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -101,7 +123,7 @@ const genBaseStyle: GenerateStyle<ProgressToken> = (token) => {
|
|||||||
display: 'inline-block',
|
display: 'inline-block',
|
||||||
width: '2em',
|
width: '2em',
|
||||||
marginInlineStart: token.marginXS,
|
marginInlineStart: token.marginXS,
|
||||||
color: token.progressInfoTextColor,
|
color: token.colorText,
|
||||||
lineHeight: 1,
|
lineHeight: 1,
|
||||||
whiteSpace: 'nowrap',
|
whiteSpace: 'nowrap',
|
||||||
textAlign: 'start',
|
textAlign: 'start',
|
||||||
@ -117,7 +139,7 @@ const genBaseStyle: GenerateStyle<ProgressToken> = (token) => {
|
|||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
inset: 0,
|
inset: 0,
|
||||||
backgroundColor: token.colorBgContainer,
|
backgroundColor: token.colorBgContainer,
|
||||||
borderRadius: token.progressLineRadius,
|
borderRadius: token.lineBorderRadius,
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
animationName: genAntProgressActive(),
|
animationName: genAntProgressActive(),
|
||||||
animationDuration: token.progressActiveMotionDuration,
|
animationDuration: token.progressActiveMotionDuration,
|
||||||
@ -173,7 +195,7 @@ const genCircleStyle: GenerateStyle<ProgressToken> = (token) => {
|
|||||||
return {
|
return {
|
||||||
[progressCls]: {
|
[progressCls]: {
|
||||||
[`${progressCls}-circle-trail`]: {
|
[`${progressCls}-circle-trail`]: {
|
||||||
stroke: token.progressRemainingColor,
|
stroke: token.remainingColor,
|
||||||
},
|
},
|
||||||
|
|
||||||
[`&${progressCls}-circle ${progressCls}-inner`]: {
|
[`&${progressCls}-circle ${progressCls}-inner`]: {
|
||||||
@ -189,7 +211,8 @@ const genCircleStyle: GenerateStyle<ProgressToken> = (token) => {
|
|||||||
width: '100%',
|
width: '100%',
|
||||||
margin: 0,
|
margin: 0,
|
||||||
padding: 0,
|
padding: 0,
|
||||||
color: token.colorText,
|
color: token.circleTextColor,
|
||||||
|
fontSize: token.circleTextFontSize,
|
||||||
lineHeight: 1,
|
lineHeight: 1,
|
||||||
whiteSpace: 'normal',
|
whiteSpace: 'normal',
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
@ -237,11 +260,11 @@ const genStepStyle: GenerateStyle<ProgressToken> = (token: ProgressToken): CSSOb
|
|||||||
flexShrink: 0,
|
flexShrink: 0,
|
||||||
minWidth: token.progressStepMinWidth,
|
minWidth: token.progressStepMinWidth,
|
||||||
marginInlineEnd: token.progressStepMarginInlineEnd,
|
marginInlineEnd: token.progressStepMarginInlineEnd,
|
||||||
backgroundColor: token.progressRemainingColor,
|
backgroundColor: token.remainingColor,
|
||||||
transition: `all ${token.motionDurationSlow}`,
|
transition: `all ${token.motionDurationSlow}`,
|
||||||
|
|
||||||
'&-active': {
|
'&-active': {
|
||||||
backgroundColor: token.colorInfo,
|
backgroundColor: token.defaultColor,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -262,22 +285,29 @@ const genSmallLine: GenerateStyle<ProgressToken> = (token: ProgressToken): CSSOb
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
export default genComponentStyleHook('Progress', (token) => {
|
export default genComponentStyleHook(
|
||||||
const progressStepMarginInlineEnd = token.marginXXS / 2;
|
'Progress',
|
||||||
|
(token) => {
|
||||||
|
const progressStepMarginInlineEnd = token.marginXXS / 2;
|
||||||
|
|
||||||
const progressToken = mergeToken<ProgressToken>(token, {
|
const progressToken = mergeToken<ProgressToken>(token, {
|
||||||
progressLineRadius: 100, // magic for capsule shape, should be a very large number
|
progressStepMarginInlineEnd,
|
||||||
progressInfoTextColor: token.colorText,
|
progressStepMinWidth: progressStepMarginInlineEnd,
|
||||||
progressDefaultColor: token.colorInfo,
|
progressActiveMotionDuration: '2.4s',
|
||||||
progressRemainingColor: token.colorFillSecondary,
|
});
|
||||||
progressStepMarginInlineEnd,
|
|
||||||
progressStepMinWidth: progressStepMarginInlineEnd,
|
return [
|
||||||
progressActiveMotionDuration: '2.4s',
|
genBaseStyle(progressToken),
|
||||||
});
|
genCircleStyle(progressToken),
|
||||||
return [
|
genStepStyle(progressToken),
|
||||||
genBaseStyle(progressToken),
|
genSmallLine(progressToken),
|
||||||
genCircleStyle(progressToken),
|
];
|
||||||
genStepStyle(progressToken),
|
},
|
||||||
genSmallLine(progressToken),
|
(token) => ({
|
||||||
];
|
circleTextColor: token.colorText,
|
||||||
});
|
defaultColor: token.colorInfo,
|
||||||
|
remainingColor: token.colorFillSecondary,
|
||||||
|
lineBorderRadius: 100, // magic for capsule shape, should be a very large number
|
||||||
|
circleTextFontSize: '1em',
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|||||||
@ -436,7 +436,19 @@ export default App;
|
|||||||
| `@popover-distance` | `marginXXS` | Global Token |
|
| `@popover-distance` | `marginXXS` | Global Token |
|
||||||
| `@popover-padding-horizontal` | - | Deprecated for style change |
|
| `@popover-padding-horizontal` | - | Deprecated for style change |
|
||||||
|
|
||||||
<!-- ### Progress -->
|
### Progress
|
||||||
|
|
||||||
|
<!-- prettier-ignore -->
|
||||||
|
| Less variables | Component Token | Note |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| `@progress-default-color` | `defaultColor` | - |
|
||||||
|
| `@progress-remaining-color` | `remainingColor` | - |
|
||||||
|
| `@progress-info-text-color` | `colorText` | Global Token |
|
||||||
|
| `@progress-text-color` | `circleTextColor` | - |
|
||||||
|
| `@progress-radius` | `lineBorderRadius` | - |
|
||||||
|
| `@progress-steps-item-bg` | `remainingColor` | - |
|
||||||
|
| `@progress-text-font-size` | `fontSizeSM` | Global Token |
|
||||||
|
| `@progress-circle-text-font-size` | `circleTextFontSize` | - |
|
||||||
|
|
||||||
### Radio
|
### Radio
|
||||||
|
|
||||||
|
|||||||
@ -433,7 +433,19 @@ Mentions 提及
|
|||||||
| `@popover-distance` | `marginXXS` | 全局 Token |
|
| `@popover-distance` | `marginXXS` | 全局 Token |
|
||||||
| `@popover-padding-horizontal` | - | 已废弃 |
|
| `@popover-padding-horizontal` | - | 已废弃 |
|
||||||
|
|
||||||
<!-- ### Progress 进度条 -->
|
### Progress 进度条
|
||||||
|
|
||||||
|
<!-- prettier-ignore -->
|
||||||
|
| less 变量 | Component Token | 备注 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| `@progress-default-color` | `defaultColor` | - |
|
||||||
|
| `@progress-remaining-color` | `remainingColor` | - |
|
||||||
|
| `@progress-info-text-color` | `colorText` | 全局 Token |
|
||||||
|
| `@progress-text-color` | `circleTextColor` | - |
|
||||||
|
| `@progress-radius` | `lineBorderRadius` | - |
|
||||||
|
| `@progress-steps-item-bg` | `remainingColor` | - |
|
||||||
|
| `@progress-text-font-size` | `fontSizeSM` | 全局 Token |
|
||||||
|
| `@progress-circle-text-font-size` | `circleTextFontSize` | - |
|
||||||
|
|
||||||
### Radio 单选框
|
### Radio 单选框
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user