feat: progress support custom line-gradiend
tangjinzhou
parent
c250fbf60c
commit
f7ad7defe5
|
|
@ -1,5 +1,5 @@
|
|||
module.exports = {
|
||||
dev: {
|
||||
componentName: 'popover', // dev components
|
||||
componentName: 'progress', // dev components
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
|
|||
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
<path d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
</svg><span title="75%" class="ant-progress-text">75%</span></div>
|
||||
</div>
|
||||
<div class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default">
|
||||
|
|
@ -19,7 +19,7 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
|
|||
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
<path d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #ff5500; stroke-dasharray: 206.7167966062084px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #ff5500; stroke-dasharray: 206.7167966062084px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
</svg><span class="ant-progress-text"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></div>
|
||||
</div>
|
||||
<div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default">
|
||||
|
|
@ -29,7 +29,7 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
|
|||
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
<path d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
</svg><span class="ant-progress-text"><i aria-label="icon: check" class="anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -44,7 +44,7 @@ exports[`renders ./components/progress/demo/circle-dynamic.md correctly 1`] = `
|
|||
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
<path d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
</svg><span title="0%" class="ant-progress-text">0%</span></div>
|
||||
</div>
|
||||
<div class="ant-btn-group"><button type="button" class="ant-btn ant-btn-icon-only"><i aria-label="icon: minus" class="anticon anticon-minus"><svg viewBox="64 64 896 896" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class="">
|
||||
|
|
@ -65,7 +65,7 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
|
|||
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
<path d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 88.59291283123217px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 88.59291283123217px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
</svg><span title="30%" class="ant-progress-text">30%</span></div>
|
||||
</div>
|
||||
<div class="ant-progress ant-progress-circle ant-progress-status-exception ant-progress-show-info ant-progress-default">
|
||||
|
|
@ -75,7 +75,7 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
|
|||
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
<path d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #ff5500; stroke-dasharray: 206.7167966062084px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #ff5500; stroke-dasharray: 206.7167966062084px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
</svg><span class="ant-progress-text"><i aria-label="icon: close" class="anticon anticon-close"><svg viewBox="64 64 896 896" data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"></path></svg></i></span></div>
|
||||
</div>
|
||||
<div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default">
|
||||
|
|
@ -85,7 +85,7 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
|
|||
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
<path d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
</svg><span class="ant-progress-text"><i aria-label="icon: check" class="anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -100,7 +100,7 @@ exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = `
|
|||
a 47,47 0 1 1 0,94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
<path d="M 50,50 m 0,47
|
||||
a 47,47 0 1 1 0,-94
|
||||
a 47,47 0 1 1 0,94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 165.23228207808043px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 165.23228207808043px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
</svg><span title="75%" class="ant-progress-text">75%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -135,7 +135,7 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
|
|||
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
<path d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
</svg><span title="75 Days" class="ant-progress-text">75 Days</span></div>
|
||||
</div>
|
||||
<div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default">
|
||||
|
|
@ -145,7 +145,7 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
|
|||
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
<path d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
</svg><span title="Done" class="ant-progress-text">Done</span></div>
|
||||
</div>
|
||||
<div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
|
||||
|
|
@ -155,12 +155,67 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
|
|||
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
<path d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
</svg><span class="ant-progress-text"><span style="color: red;">75</span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
|
||||
<div>
|
||||
<div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default">
|
||||
<div>
|
||||
<div class="ant-progress-outer">
|
||||
<div class="ant-progress-inner">
|
||||
<div class="ant-progress-bg" style="width: 99.9%; height: 8px; border-radius: 100px;"></div>
|
||||
</div>
|
||||
</div><span title="99.9%" class="ant-progress-text">99.9%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-progress ant-progress-line ant-progress-status-active ant-progress-show-info ant-progress-default">
|
||||
<div>
|
||||
<div class="ant-progress-outer">
|
||||
<div class="ant-progress-inner">
|
||||
<div class="ant-progress-bg" style="width: 99.9%; height: 8px; border-radius: 100px;"></div>
|
||||
</div>
|
||||
</div><span title="99.9%" class="ant-progress-text">99.9%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
|
||||
<div class="ant-progress-inner ant-progress-circle-gradient" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
|
||||
<defs>
|
||||
<linearGradient id="ant-progress-gradient-11" x1="100%" y1="0%" x2="0%" y2="0%">
|
||||
<stop offset="0%" stop-color="#108ee9"></stop>
|
||||
<stop offset="100%" stop-color="#87d068"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
<path d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94" stroke="url(#ant-progress-gradient-11)" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: [object Object]; stroke-dasharray: 265.77873849369655px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
</svg><span title="90%" class="ant-progress-text">90%</span></div>
|
||||
</div>
|
||||
<div class="ant-progress ant-progress-circle ant-progress-status-success ant-progress-show-info ant-progress-default">
|
||||
<div class="ant-progress-inner ant-progress-circle-gradient" style="width: 120px; height: 120px; font-size: 24;"><svg viewBox="0 0 100 100" class="ant-progress-circle">
|
||||
<defs>
|
||||
<linearGradient id="ant-progress-gradient-12" x1="100%" y1="0%" x2="0%" y2="0%">
|
||||
<stop offset="0%" stop-color="#108ee9"></stop>
|
||||
<stop offset="100%" stop-color="#87d068"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
<path d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94" stroke="url(#ant-progress-gradient-12)" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: [object Object]; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
</svg><span class="ant-progress-text"><i aria-label="icon: check" class="anticon anticon-check"><svg viewBox="64 64 896 896" data-icon="check" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false" class=""><path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"></path></svg></i></span></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/progress/demo/line.md correctly 1`] = `
|
||||
<div>
|
||||
<div class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default">
|
||||
|
|
@ -270,7 +325,7 @@ exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
|
|||
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
<path d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 221.48228207808043px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
</svg><span title="75%" class="ant-progress-text">75%</span></div>
|
||||
</div>
|
||||
<div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
|
||||
|
|
@ -280,7 +335,7 @@ exports[`renders ./components/progress/demo/linecap.md correctly 1`] = `
|
|||
a 47,47 0 1 1 0,94" stroke="#f3f3f3" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
<path d="M 50,50 m 0,47
|
||||
a 47,47 0 1 1 0,-94
|
||||
a 47,47 0 1 1 0,94" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 165.23228207808043px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
a 47,47 0 1 1 0,94" stroke="" stroke-linecap="square" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 165.23228207808043px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
</svg><span title="75%" class="ant-progress-text">75%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -293,7 +348,7 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
|
|||
<div class="ant-progress-outer">
|
||||
<div class="ant-progress-inner">
|
||||
<div class="ant-progress-bg" style="width: 60%; height: 8px; border-radius: 100px;"></div>
|
||||
<div class="ant-progress-success-bg" style="width: 30%; height: 8px; border-radius: 100px;"></div>
|
||||
<div class="ant-progress-success-bg" style="width: 30%; height: 8px;"></div>
|
||||
</div>
|
||||
</div><span title="60%" class="ant-progress-text">60%</span>
|
||||
</div>
|
||||
|
|
@ -305,10 +360,10 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
|
|||
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
<path d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 88.59291283123217px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 88.59291283123217px 295.3097094374406px; stroke-dashoffset: -88.59291283123217px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
<path d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 88.59291283123217px 295.3097094374406px; stroke-dashoffset: -88.59291283123217px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 88.59291283123217px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
</svg><span title="60%" class="ant-progress-text">60%</span></div>
|
||||
</div>
|
||||
<div class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default">
|
||||
|
|
@ -318,10 +373,10 @@ exports[`renders ./components/progress/demo/segment.md correctly 1`] = `
|
|||
a 47,47 0 1 1 0,94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 220.30970943744057px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
<path d="M 50,50 m 0,47
|
||||
a 47,47 0 1 1 0,-94
|
||||
a 47,47 0 1 1 0,94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 66.09291283123217px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 66.09291283123217px 295.3097094374406px; stroke-dashoffset: -103.59291283123217px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
<path d="M 50,50 m 0,47
|
||||
a 47,47 0 1 1 0,-94
|
||||
a 47,47 0 1 1 0,94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #108ee9; stroke-dasharray: 66.09291283123217px 295.3097094374406px; stroke-dashoffset: -103.59291283123217px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #87d068; stroke-dasharray: 66.09291283123217px 295.3097094374406px; stroke-dashoffset: -37.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
</svg><span title="60%" class="ant-progress-text">60%</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ exports[`Progress render format 1`] = `
|
|||
a 47,47 0 1 1 0,-94" stroke="#f3f3f3" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-trail" style="stroke: #f3f3f3; stroke-dasharray: 295.3097094374406px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
<path d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: red; stroke-dasharray: 147.6548547187203px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" fill-opacity="0" class="ant-progress-circle-path" style="stroke: red; stroke-dasharray: 147.6548547187203px 295.3097094374406px; stroke-dashoffset: -0px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"></path>
|
||||
</svg><span title="50%" class="ant-progress-text">50%</span></div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -31,7 +31,7 @@ exports[`Progress render negetive successPercent 1`] = `
|
|||
<div class="ant-progress-outer">
|
||||
<div class="ant-progress-inner">
|
||||
<div class="ant-progress-bg" style="width: 50%; height: 8px; border-radius: 100px;"></div>
|
||||
<div class="ant-progress-success-bg" style="width: 0%; height: 8px; border-radius: 100px;"></div>
|
||||
<div class="ant-progress-success-bg" style="width: 0%; height: 8px;"></div>
|
||||
</div>
|
||||
</div><span title="50%" class="ant-progress-text">50%</span>
|
||||
</div>
|
||||
|
|
@ -44,7 +44,7 @@ exports[`Progress render negetive successPercent 2`] = `
|
|||
<div class="ant-progress-outer">
|
||||
<div class="ant-progress-inner">
|
||||
<div class="ant-progress-bg" style="width: 50%; height: 8px; border-radius: 100px;"></div>
|
||||
<div class="ant-progress-success-bg" style="width: 10%; height: 8px; border-radius: 100px;"></div>
|
||||
<div class="ant-progress-success-bg" style="width: 10%; height: 8px;"></div>
|
||||
</div>
|
||||
</div><span title="50 10" class="ant-progress-text">50 10</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -44,14 +44,21 @@ const Circle = {
|
|||
const circleWidth = strokeWidth || 6;
|
||||
const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top';
|
||||
const gapDeg = gapDegree || (type === 'dashboard' && 75);
|
||||
const strokeColor = getStrokeColor(props);
|
||||
const isGradient = Object.prototype.toString.call(strokeColor) === '[object Object]';
|
||||
|
||||
const wrapperClassName = {
|
||||
[`${prefixCls}-inner`]: true,
|
||||
[`${prefixCls}-circle-gradient`]: isGradient,
|
||||
};
|
||||
|
||||
return (
|
||||
<div class={`${prefixCls}-inner`} style={circleStyle}>
|
||||
<div class={wrapperClassName} style={circleStyle}>
|
||||
<VCCircle
|
||||
percent={getPercentage(props)}
|
||||
strokeWidth={circleWidth}
|
||||
trailWidth={circleWidth}
|
||||
strokeColor={getStrokeColor(props)}
|
||||
strokeColor={strokeColor}
|
||||
strokeLinecap={strokeLinecap}
|
||||
trailColor={trailColor}
|
||||
prefixCls={prefixCls}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,47 @@
|
|||
<cn>
|
||||
#### 自定义进度条渐变色
|
||||
`linear-gradient` 的封装。推荐只传两种颜色。
|
||||
</cn>
|
||||
|
||||
<us>
|
||||
#### Custom line gradient
|
||||
A package of `linear-gradient`. It is recommended to only pass two colors.
|
||||
</us>
|
||||
|
||||
```tpl
|
||||
<template>
|
||||
<div>
|
||||
<a-progress
|
||||
:strokeColor="{
|
||||
'0%': '#108ee9',
|
||||
'100%': '#87d068',
|
||||
}"
|
||||
:percent="99.9"
|
||||
/>
|
||||
<a-progress
|
||||
:strokeColor="{
|
||||
from: '#108ee9',
|
||||
to: '#87d068',
|
||||
}"
|
||||
:percent="99.9"
|
||||
status="active"
|
||||
/>
|
||||
<a-progress
|
||||
type="circle"
|
||||
:strokeColor="{
|
||||
'0%': '#108ee9',
|
||||
'100%': '#87d068',
|
||||
}"
|
||||
:percent="90"
|
||||
/>
|
||||
<a-progress
|
||||
type="circle"
|
||||
:strokeColor="{
|
||||
'0%': '#108ee9',
|
||||
'100%': '#87d068',
|
||||
}"
|
||||
:percent="100"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
|
@ -9,6 +9,7 @@ import Dynamic from './dynamic.md';
|
|||
import Dashboard from './dashboard.md';
|
||||
import Segment from './segment.md';
|
||||
import Linecap from './linecap.md';
|
||||
import GradientLine from './gradient-line';
|
||||
import CN from '../index.zh-CN.md';
|
||||
import US from '../index.en-US.md';
|
||||
|
||||
|
|
@ -40,27 +41,17 @@ export default {
|
|||
return (
|
||||
<div>
|
||||
<md cn={md.cn} us={md.us} />
|
||||
<br />
|
||||
<Line />
|
||||
<br />
|
||||
<Circle />
|
||||
<br />
|
||||
<LineMini />
|
||||
<br />
|
||||
<CircleMini />
|
||||
<br />
|
||||
<CircleDynamic />
|
||||
<br />
|
||||
<Format />
|
||||
<br />
|
||||
<Dynamic />
|
||||
<br />
|
||||
<Dashboard />
|
||||
<br />
|
||||
<Segment />
|
||||
<br />
|
||||
<Linecap />
|
||||
<br />
|
||||
<GradientLine />
|
||||
<api>
|
||||
<template slot="cn">
|
||||
<CN />
|
||||
|
|
|
|||
|
|
@ -8,23 +8,25 @@ Properties that shared by all types.
|
|||
| format | template function of the content | function(percent, successPercent) \| v-slot:format="percent, successPercent" | `percent => percent + '%'` |
|
||||
| percent | to set the completion percentage | number | 0 |
|
||||
| showInfo | whether to display the progress value and the status icon | boolean | true |
|
||||
| status | to set the status of the Progress, options: `success` `exception` `active` `normal` | string | - |
|
||||
| status | to set the status of the Progress, options: `success` `exception` `normal` `active`(line only) | string | - |
|
||||
| strokeLinecap | to set the style of the progress linecap | Enum{ 'round', 'square' } | `round` |
|
||||
| strokeColor | color of progress bar | string | - |
|
||||
| successPercent | segmented success percent | number | 0 |
|
||||
|
||||
### `type="line"`
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| ----------- | ------------------------------------------------ | ------ | ------- |
|
||||
| strokeWidth | to set the width of the progress bar, unit: `px` | number | 10 |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| strokeWidth | to set the width of the progress bar, unit: `px` | number | 10 | |
|
||||
| strokeColor | color of progress bar, render `linear-gradient` when passing an object | string \| { from: string; to: string; direction: string } | - | 1.5.0 |
|
||||
|
||||
### `type="circle"`
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| width | to set the canvas width of the circular progress, unit: `px` | number | 132 |
|
||||
| strokeWidth | to set the width of the circular progress, unit: percentage of the canvas width | number | 6 |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| width | to set the canvas width of the circular progress, unit: `px` | number | 132 | |
|
||||
| strokeWidth | to set the width of the circular progress, unit: percentage of the canvas width | number | 6 | |
|
||||
| strokeColor | color of circular progress, render `linear-gradient` when passing an object | string \| object | - | 1.5.0 |
|
||||
|
||||
### `type="dashboard"`
|
||||
|
||||
|
|
|
|||
|
|
@ -8,23 +8,25 @@
|
|||
| format | 内容的模板函数 | function(percent, successPercent) \| v-slot:format="percent, successPercent" | `percent => percent + '%'` |
|
||||
| percent | 百分比 | number | 0 |
|
||||
| showInfo | 是否显示进度数值或状态图标 | boolean | true |
|
||||
| status | 状态，可选：`success` `exception` `active` `normal` | string | - |
|
||||
| status | 状态，可选：`success` `exception` `normal` `active`(仅限 line) | string | - |
|
||||
| strokeLinecap | | Enum{ 'round', 'square' } | `round` |
|
||||
| strokeColor | 进度条的色彩 | string | - |
|
||||
| successPercent | 已完成的分段百分比 | number | 0 |
|
||||
|
||||
### `type="line"`
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| ----------- | ----------------------- | ------ | ------ |
|
||||
| strokeWidth | 进度条线的宽度，单位 px | number | 10 |
|
||||
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| strokeWidth | 进度条线的宽度，单位 px | number | 10 | |
|
||||
| strokeColor | 进度条的色彩，传入 object 时为渐变 | string \| { from: string; to: string; direction: string } | - | 1.5.0 |
|
||||
|
||||
### `type="circle"`
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| ----------- | ------------------------------------------------ | ------ | ------ |
|
||||
| width | 圆形进度条画布宽度，单位 px | number | 132 |
|
||||
| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
|
||||
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| width | 圆形进度条画布宽度，单位 px | number | 132 | |
|
||||
| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | |
|
||||
| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| object | - | 1.5.0 |
|
||||
|
||||
### `type="dashboard"`
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,55 @@
|
|||
import { validProgress } from './utils';
|
||||
|
||||
/**
|
||||
* {
|
||||
* '0%': '#afc163',
|
||||
* '75%': '#009900',
|
||||
* '50%': 'green', ====> '#afc163 0%, #66FF00 25%, #00CC00 50%, #009900 75%, #ffffff 100%'
|
||||
* '25%': '#66FF00',
|
||||
* '100%': '#ffffff'
|
||||
* }
|
||||
*/
|
||||
export const sortGradient = gradients => {
|
||||
let tempArr = [];
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
for (const [key, value] of Object.entries(gradients)) {
|
||||
const formatKey = parseFloat(key.replace(/%/g, ''));
|
||||
if (isNaN(formatKey)) {
|
||||
return {};
|
||||
}
|
||||
tempArr.push({
|
||||
key: formatKey,
|
||||
value,
|
||||
});
|
||||
}
|
||||
tempArr = tempArr.sort((a, b) => a.key - b.key);
|
||||
return tempArr.map(({ key, value }) => `${value} ${key}%`).join(', ');
|
||||
};
|
||||
|
||||
/**
|
||||
* {
|
||||
* '0%': '#afc163',
|
||||
* '25%': '#66FF00',
|
||||
* '50%': '#00CC00', ====> linear-gradient(to right, #afc163 0%, #66FF00 25%,
|
||||
* '75%': '#009900', #00CC00 50%, #009900 75%, #ffffff 100%)
|
||||
* '100%': '#ffffff'
|
||||
* }
|
||||
*
|
||||
* Then this man came to realize the truth:
|
||||
* Besides six pence, there is the moon.
|
||||
* Besides bread and butter, there is the bug.
|
||||
* And...
|
||||
* Besides women, there is the code.
|
||||
*/
|
||||
export const handleGradient = strokeColor => {
|
||||
const { from = '#1890ff', to = '#1890ff', direction = 'to right', ...rest } = strokeColor;
|
||||
if (Object.keys(rest).length !== 0) {
|
||||
const sortedGradients = sortGradient(rest);
|
||||
return { backgroundImage: `linear-gradient(${direction}, ${sortedGradients})` };
|
||||
}
|
||||
return { backgroundImage: `linear-gradient(${direction}, ${from}, ${to})` };
|
||||
};
|
||||
|
||||
const Line = {
|
||||
functional: true,
|
||||
render(h, context) {
|
||||
|
|
@ -13,16 +63,25 @@ const Line = {
|
|||
strokeColor,
|
||||
strokeLinecap,
|
||||
} = props;
|
||||
let backgroundProps;
|
||||
if (strokeColor && typeof strokeColor !== 'string') {
|
||||
backgroundProps = handleGradient(strokeColor);
|
||||
} else {
|
||||
backgroundProps = {
|
||||
background: strokeColor,
|
||||
};
|
||||
}
|
||||
const percentStyle = {
|
||||
width: `${validProgress(percent)}%`,
|
||||
height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`,
|
||||
background: strokeColor,
|
||||
borderRadius: strokeLinecap === 'square' ? 0 : '100px',
|
||||
...backgroundProps,
|
||||
};
|
||||
const successPercentStyle = {
|
||||
width: `${validProgress(successPercent)}%`,
|
||||
height: `${strokeWidth || (size === 'small' ? 6 : 8)}px`,
|
||||
borderRadius: strokeLinecap === 'square' ? 0 : '100px',
|
||||
borderRadius: strokeLinecap === 'square' ? 0 : '',
|
||||
};
|
||||
const successSegment =
|
||||
successPercent !== undefined ? (
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ function addUnit(num, unit) {
|
|||
const unitType = unit || 'px';
|
||||
return num ? num + unitType : null;
|
||||
}
|
||||
|
||||
const ProgressStatuses = ['normal', 'exception', 'active', 'success'];
|
||||
export const ProgressType = PropTypes.oneOf(['line', 'circle', 'dashboard']);
|
||||
export const ProgressSize = PropTypes.oneOf(['default', 'small']);
|
||||
|
||||
|
|
@ -21,11 +21,11 @@ export const ProgressProps = {
|
|||
percent: PropTypes.number,
|
||||
successPercent: PropTypes.number,
|
||||
format: PropTypes.func,
|
||||
status: PropTypes.oneOf(['normal', 'success', 'active', 'exception']),
|
||||
status: PropTypes.oneOf(ProgressStatuses),
|
||||
showInfo: PropTypes.bool,
|
||||
strokeWidth: PropTypes.number,
|
||||
strokeLinecap: PropTypes.oneOf(['round', 'square']),
|
||||
strokeColor: PropTypes.string,
|
||||
strokeLinecap: PropTypes.oneOf(['butt', 'round', 'square']),
|
||||
strokeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
|
||||
trailColor: PropTypes.string,
|
||||
width: PropTypes.number,
|
||||
gapDegree: PropTypes.number,
|
||||
|
|
@ -48,6 +48,21 @@ export default {
|
|||
configProvider: { default: () => ConfigConsumerProps },
|
||||
},
|
||||
methods: {
|
||||
getPercentNumber() {
|
||||
const { successPercent, percent = 0 } = this.$props;
|
||||
return parseInt(
|
||||
successPercent !== undefined ? successPercent.toString() : percent.toString(),
|
||||
10,
|
||||
);
|
||||
},
|
||||
|
||||
getProgressStatus() {
|
||||
const { status } = this.$props;
|
||||
if (ProgressStatuses.indexOf(status) < 0 && this.getPercentNumber() >= 100) {
|
||||
return 'success';
|
||||
}
|
||||
return status || 'normal';
|
||||
},
|
||||
renderProcessInfo(prefixCls, progressStatus) {
|
||||
const { showInfo, format, type, percent, successPercent } = this.$props;
|
||||
if (!showInfo) return null;
|
||||
|
|
@ -96,15 +111,11 @@ export default {
|
|||
} = props;
|
||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||
const prefixCls = getPrefixCls('progress', customizePrefixCls);
|
||||
|
||||
const progressStatus =
|
||||
parseInt(successPercent !== undefined ? successPercent.toString() : percent.toString(), 10) >=
|
||||
100 && !('status' in props)
|
||||
? 'success'
|
||||
: status || 'normal';
|
||||
let progress;
|
||||
const progressStatus = this.getProgressStatus();
|
||||
const progressInfo = this.renderProcessInfo(prefixCls, progressStatus);
|
||||
|
||||
let progress;
|
||||
|
||||
// Render progress shape
|
||||
if (type === 'line') {
|
||||
const lineProps = {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
export function validProgress(progress) {
|
||||
if (!progress || progress < 0) {
|
||||
return 0;
|
||||
} else if (progress > 100) {
|
||||
}
|
||||
if (progress > 100) {
|
||||
return 100;
|
||||
}
|
||||
return progress;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// based on rc-progress 2.3.0
|
||||
// based on rc-progress 2.5.2
|
||||
import Progress, { Line, Circle } from './src/';
|
||||
|
||||
export { Line, Circle };
|
||||
|
|
|
|||
|
|
@ -18,13 +18,17 @@ const circleDefaultProps = {
|
|||
|
||||
Vue.use(ref, { name: 'ant-ref' });
|
||||
|
||||
const Circle = {
|
||||
props: initDefaultProps(circlePropTypes, circleDefaultProps),
|
||||
created() {
|
||||
this.paths = {};
|
||||
},
|
||||
methods: {
|
||||
getPathStyles(offset, percent, strokeColor, strokeWidth, gapDegree = 0, gapPosition) {
|
||||
let gradientSeed = 0;
|
||||
|
||||
function stripPercentToNumber(percent) {
|
||||
return +percent.replace('%', '');
|
||||
}
|
||||
|
||||
function toArray(symArray) {
|
||||
return Array.isArray(symArray) ? symArray : [symArray];
|
||||
}
|
||||
|
||||
function getPathStyles(offset, percent, strokeColor, strokeWidth, gapDegree = 0, gapPosition) {
|
||||
const radius = 50 - strokeWidth / 2;
|
||||
let beginPositionX = 0;
|
||||
let beginPositionY = -radius;
|
||||
|
|
@ -53,6 +57,7 @@ const Circle = {
|
|||
a ${radius},${radius} 0 1 1 ${endPositionX},${-endPositionY}
|
||||
a ${radius},${radius} 0 1 1 ${-endPositionX},${endPositionY}`;
|
||||
const len = Math.PI * 2 * radius;
|
||||
|
||||
const pathStyle = {
|
||||
stroke: strokeColor,
|
||||
strokeDasharray: `${(percent / 100) * (len - gapDegree)}px ${len}px`,
|
||||
|
|
@ -60,11 +65,21 @@ const Circle = {
|
|||
transition:
|
||||
'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s', // eslint-disable-line
|
||||
};
|
||||
|
||||
return {
|
||||
pathString,
|
||||
pathStyle,
|
||||
};
|
||||
}
|
||||
|
||||
const Circle = {
|
||||
props: initDefaultProps(circlePropTypes, circleDefaultProps),
|
||||
created() {
|
||||
this.paths = {};
|
||||
this.gradientId = gradientSeed;
|
||||
gradientSeed += 1;
|
||||
},
|
||||
methods: {
|
||||
getStokeList() {
|
||||
const {
|
||||
prefixCls,
|
||||
|
|
@ -75,13 +90,17 @@ const Circle = {
|
|||
gapDegree,
|
||||
gapPosition,
|
||||
} = this.$props;
|
||||
const percentList = Array.isArray(percent) ? percent : [percent];
|
||||
const strokeColorList = Array.isArray(strokeColor) ? strokeColor : [strokeColor];
|
||||
const percentList = toArray(percent);
|
||||
const strokeColorList = toArray(strokeColor);
|
||||
|
||||
let stackPtg = 0;
|
||||
return percentList.map((ptg, index) => {
|
||||
const color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1];
|
||||
const { pathString, pathStyle } = this.getPathStyles(
|
||||
const stroke =
|
||||
Object.prototype.toString.call(color) === '[object Object]'
|
||||
? `url(#${prefixCls}-gradient-${this.gradientId})`
|
||||
: '';
|
||||
const { pathString, pathStyle } = getPathStyles(
|
||||
stackPtg,
|
||||
ptg,
|
||||
color,
|
||||
|
|
@ -96,6 +115,7 @@ const Circle = {
|
|||
key: index,
|
||||
attrs: {
|
||||
d: pathString,
|
||||
stroke,
|
||||
'stroke-linecap': strokeLinecap,
|
||||
'stroke-width': ptg === 0 ? 0 : strokeWidth,
|
||||
'fill-opacity': '0',
|
||||
|
|
@ -125,9 +145,10 @@ const Circle = {
|
|||
gapPosition,
|
||||
trailColor,
|
||||
strokeLinecap,
|
||||
strokeColor,
|
||||
...restProps
|
||||
} = this.$props;
|
||||
const { pathString, pathStyle } = this.getPathStyles(
|
||||
const { pathString, pathStyle } = getPathStyles(
|
||||
0,
|
||||
100,
|
||||
trailColor,
|
||||
|
|
@ -136,7 +157,10 @@ const Circle = {
|
|||
gapPosition,
|
||||
);
|
||||
delete restProps.percent;
|
||||
delete restProps.strokeColor;
|
||||
const strokeColorList = toArray(strokeColor);
|
||||
const gradient = strokeColorList.find(
|
||||
color => Object.prototype.toString.call(color) === '[object Object]',
|
||||
);
|
||||
const pathFirst = {
|
||||
attrs: {
|
||||
d: pathString,
|
||||
|
|
@ -151,8 +175,25 @@ const Circle = {
|
|||
|
||||
return (
|
||||
<svg class={`${prefixCls}-circle`} viewBox="0 0 100 100" {...restProps}>
|
||||
{gradient && (
|
||||
<defs>
|
||||
<linearGradient
|
||||
id={`${prefixCls}-gradient-${this.gradientId}`}
|
||||
x1="100%"
|
||||
y1="0%"
|
||||
x2="0%"
|
||||
y2="0%"
|
||||
>
|
||||
{Object.keys(gradient)
|
||||
.sort((a, b) => stripPercentToNumber(a) - stripPercentToNumber(b))
|
||||
.map((key, index) => (
|
||||
<stop key={index} offset={key} stop-color={gradient[key]} />
|
||||
))}
|
||||
</linearGradient>
|
||||
</defs>
|
||||
)}
|
||||
<path {...pathFirst} />
|
||||
{this.getStokeList()}
|
||||
{this.getStokeList().reverse()}
|
||||
</svg>
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ const Line = {
|
|||
strokeWidth,
|
||||
trailColor,
|
||||
trailWidth,
|
||||
transition,
|
||||
...restProps
|
||||
} = this.$props;
|
||||
|
||||
|
|
@ -59,6 +60,7 @@ const Line = {
|
|||
strokeDasharray: `${ptg}px, 100px`,
|
||||
strokeDashoffset: `-${stackPtg}px`,
|
||||
transition:
|
||||
transition ||
|
||||
'stroke-dashoffset 0.3s ease 0s, stroke-dasharray .3s ease 0s, stroke 0.3s linear',
|
||||
};
|
||||
const color = strokeColorList[index] || strokeColorList[strokeColorList.length - 1];
|
||||
|
|
|
|||
|
|
@ -17,7 +17,11 @@ export const propTypes = {
|
|||
// className: PropTypes.string,
|
||||
percent: PropTypes.oneOfType([mixedType, PropTypes.arrayOf(mixedType)]),
|
||||
prefixCls: PropTypes.string,
|
||||
strokeColor: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
|
||||
strokeColor: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
|
||||
PropTypes.object,
|
||||
]),
|
||||
strokeLinecap: PropTypes.oneOf(['butt', 'round', 'square']),
|
||||
strokeWidth: mixedType,
|
||||
// style: PropTypes.object,
|
||||
|
|
|
|||
|
|
@ -4,6 +4,9 @@
|
|||
|
||||
import { AntdComponent } from './component';
|
||||
|
||||
export type StringGradients = { [percentage: string]: string };
|
||||
type FromToGradients = { from: string; to: string };
|
||||
export type ProgressGradient = { direction?: string } & (StringGradients | FromToGradients);
|
||||
export declare class Progress extends AntdComponent {
|
||||
/**
|
||||
* template function of the content
|
||||
|
|
@ -60,13 +63,13 @@ export declare class Progress extends AntdComponent {
|
|||
* @default 'round'
|
||||
* @type Enum{ 'round', 'square' }
|
||||
*/
|
||||
strokeLinecap: 'round' | 'square';
|
||||
strokeLinecap: 'butt' | 'square' | 'round';
|
||||
|
||||
/**
|
||||
* color of progress bar
|
||||
* @type string
|
||||
*/
|
||||
strokeColor: string;
|
||||
strokeColor: string | ProgressGradient;
|
||||
|
||||
/**
|
||||
* segmented success percent, works when type="line"
|
||||
|
|
|
|||
Loading…
Reference in New Issue