github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: add title prop for progress, close #4929

Browse Source
pull/5223/head
tangjinzhou 3 years ago
parent 42e34a63ec
commit 23624679fe
4 changed files with 51 additions and 39 deletions
Show Stats Download Patch File Download Diff File

44
components/progress/__tests__/__snapshots__/demo.test.js.snap
Unescape View File

@ -13,7 +13,7 @@ exports[`renders ./components/progress/demo/circle.vue correctly 1`] = `
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path> a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path>
</svg><span class="ant-progress-text">75%</span></div> </svg><span class="ant-progress-text" title="75%">75%</span></div>
</div> </div>
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-exception"> <div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-exception">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
@ -59,7 +59,7 @@ exports[`renders ./components/progress/demo/circle-dynamic.vue correctly 1`] = `
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path> a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path>
</svg><span class="ant-progress-text">0%</span></div> </svg><span class="ant-progress-text" title="0%">0%</span></div>
</div> </div>
<div class="ant-btn-group"><button class="ant-btn ant-btn-icon-only" type="button"><span role="img" aria-label="minus" class="anticon anticon-minus"><svg focusable="false" class="" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg></span></button><button class="ant-btn ant-btn-icon-only" type="button"><span role="img" aria-label="plus" class="anticon anticon-plus"><svg focusable="false" class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span></button></div> <div class="ant-btn-group"><button class="ant-btn ant-btn-icon-only" type="button"><span role="img" aria-label="minus" class="anticon anticon-minus"><svg focusable="false" class="" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg></span></button><button class="ant-btn ant-btn-icon-only" type="button"><span role="img" aria-label="plus" class="anticon anticon-plus"><svg focusable="false" class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span></button></div>
</div> </div>
@ -78,7 +78,7 @@ exports[`renders ./components/progress/demo/circle-mini.vue correctly 1`] = `
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path> a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path>
</svg><span class="ant-progress-text">30%</span></div> </svg><span class="ant-progress-text" title="30%">30%</span></div>
</div> </div>
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-exception"> <div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-exception">
<div class="ant-progress-inner" style="width: 80px; height: 80px; font-size: 18px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner" style="width: 80px; height: 80px; font-size: 18px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
@ -124,7 +124,7 @@ exports[`renders ./components/progress/demo/dashboard.vue correctly 1`] = `
<path d="M 50,50 m 0,47 <path d="M 50,50 m 0,47
a 47,47 0 1 1 0,-94 a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path> a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path>
</svg><span class="ant-progress-text">75%</span></div> </svg><span class="ant-progress-text" title="75%">75%</span></div>
</div> </div>
</div> </div>
`; `;
@ -137,7 +137,7 @@ exports[`renders ./components/progress/demo/dynamic.vue correctly 1`] = `
<div class="ant-progress-bg" style="width: 0%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 0%; height: 8px;"></div>
<!----> <!---->
</div> </div>
</div><span class="ant-progress-text">0%</span> </div><span class="ant-progress-text" title="0%">0%</span>
</div> </div>
<div class="ant-btn-group"><button class="ant-btn ant-btn-icon-only" type="button"><span role="img" aria-label="minus" class="anticon anticon-minus"><svg focusable="false" class="" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg></span></button><button class="ant-btn ant-btn-icon-only" type="button"><span role="img" aria-label="plus" class="anticon anticon-plus"><svg focusable="false" class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span></button></div> <div class="ant-btn-group"><button class="ant-btn ant-btn-icon-only" type="button"><span role="img" aria-label="minus" class="anticon anticon-minus"><svg focusable="false" class="" data-icon="minus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M872 474H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path></svg></span></button><button class="ant-btn ant-btn-icon-only" type="button"><span role="img" aria-label="plus" class="anticon anticon-plus"><svg focusable="false" class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span></button></div>
</div> </div>
@ -157,7 +157,7 @@ exports[`renders ./components/progress/demo/format.vue correctly 1`] = `
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path> a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path>
</svg><span class="ant-progress-text">75 Days</span></div> </svg><span class="ant-progress-text" title="75 Days">75 Days</span></div>
</div> </div>
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-success"> <div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-success">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
@ -171,7 +171,7 @@ exports[`renders ./components/progress/demo/format.vue correctly 1`] = `
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path> a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path>
</svg><span class="ant-progress-text">Done</span></div> </svg><span class="ant-progress-text" title="Done">Done</span></div>
</div> </div>
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
@ -198,7 +198,7 @@ exports[`renders ./components/progress/demo/gradient-line.vue correctly 1`] = `
<div class="ant-progress-bg" style="width: 99.9%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 99.9%; height: 8px;"></div>
<!----> <!---->
</div> </div>
</div><span class="ant-progress-text">99.9%</span> </div><span class="ant-progress-text" title="99.9%">99.9%</span>
</div> </div>
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-active"> <div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-active">
<div class="ant-progress-outer"> <div class="ant-progress-outer">
@ -206,7 +206,7 @@ exports[`renders ./components/progress/demo/gradient-line.vue correctly 1`] = `
<div class="ant-progress-bg" style="width: 99.9%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 99.9%; height: 8px;"></div>
<!----> <!---->
</div> </div>
</div><span class="ant-progress-text">99.9%</span> </div><span class="ant-progress-text" title="99.9%">99.9%</span>
</div> </div>
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal">
<div class="ant-progress-inner ant-progress-circle-gradient" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner ant-progress-circle-gradient" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
@ -225,7 +225,7 @@ exports[`renders ./components/progress/demo/gradient-line.vue correctly 1`] = `
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path> a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path>
</svg><span class="ant-progress-text">90%</span></div> </svg><span class="ant-progress-text" title="90%">90%</span></div>
</div> </div>
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-success"> <div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-success">
<div class="ant-progress-inner ant-progress-circle-gradient" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner ant-progress-circle-gradient" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
@ -256,7 +256,7 @@ exports[`renders ./components/progress/demo/line.vue correctly 1`] = `
<div class="ant-progress-bg" style="width: 30%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 30%; height: 8px;"></div>
<!----> <!---->
</div> </div>
</div><span class="ant-progress-text">30%</span> </div><span class="ant-progress-text" title="30%">30%</span>
</div> </div>
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-active"> <div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-active">
<div class="ant-progress-outer"> <div class="ant-progress-outer">
@ -264,7 +264,7 @@ exports[`renders ./components/progress/demo/line.vue correctly 1`] = `
<div class="ant-progress-bg" style="width: 50%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 50%; height: 8px;"></div>
<!----> <!---->
</div> </div>
</div><span class="ant-progress-text">50%</span> </div><span class="ant-progress-text" title="50%">50%</span>
</div> </div>
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-exception"> <div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-exception">
<div class="ant-progress-outer"> <div class="ant-progress-outer">
@ -301,7 +301,7 @@ exports[`renders ./components/progress/demo/line-mini.vue correctly 1`] = `
<div class="ant-progress-bg" style="width: 30%; height: 6px;"></div> <div class="ant-progress-bg" style="width: 30%; height: 6px;"></div>
<!----> <!---->
</div> </div>
</div><span class="ant-progress-text">30%</span> </div><span class="ant-progress-text" title="30%">30%</span>
</div> </div>
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-small ant-progress-status-active"> <div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-small ant-progress-status-active">
<div class="ant-progress-outer"> <div class="ant-progress-outer">
@ -309,7 +309,7 @@ exports[`renders ./components/progress/demo/line-mini.vue correctly 1`] = `
<div class="ant-progress-bg" style="width: 50%; height: 6px;"></div> <div class="ant-progress-bg" style="width: 50%; height: 6px;"></div>
<!----> <!---->
</div> </div>
</div><span class="ant-progress-text">50%</span> </div><span class="ant-progress-text" title="50%">50%</span>
</div> </div>
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-small ant-progress-status-exception"> <div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-small ant-progress-status-exception">
<div class="ant-progress-outer"> <div class="ant-progress-outer">
@ -338,7 +338,7 @@ exports[`renders ./components/progress/demo/linecap.vue correctly 1`] = `
<div class="ant-progress-bg" style="width: 75%; height: 8px; border-radius: 0;"></div> <div class="ant-progress-bg" style="width: 75%; height: 8px; border-radius: 0;"></div>
<!----> <!---->
</div> </div>
</div><span class="ant-progress-text">75%</span> </div><span class="ant-progress-text" title="75%">75%</span>
</div> </div>
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
@ -352,7 +352,7 @@ exports[`renders ./components/progress/demo/linecap.vue correctly 1`] = `
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="square" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path> a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="square" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path>
</svg><span class="ant-progress-text">75%</span></div> </svg><span class="ant-progress-text" title="75%">75%</span></div>
</div> </div>
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal">
<div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100"> <div class="ant-progress-inner" style="width: 120px; height: 120px; font-size: 24px;"><svg class="ant-progress-circle" viewBox="0 0 100 100">
@ -366,7 +366,7 @@ exports[`renders ./components/progress/demo/linecap.vue correctly 1`] = `
<path d="M 50,50 m 0,47 <path d="M 50,50 m 0,47
a 47,47 0 1 1 0,-94 a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke="" stroke-linecap="square" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path> a 47,47 0 1 1 0,94" stroke="" stroke-linecap="square" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path>
</svg><span class="ant-progress-text">75%</span></div> </svg><span class="ant-progress-text" title="75%">75%</span></div>
</div> </div>
</div> </div>
`; `;
@ -380,7 +380,7 @@ exports[`renders ./components/progress/demo/segment.vue correctly 1`] = `
<div class="ant-progress-bg" style="width: 60%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 60%; height: 8px;"></div>
<div class="ant-progress-success-bg" style="width: 30%; height: 8px;"></div> <div class="ant-progress-success-bg" style="width: 30%; height: 8px;"></div>
</div> </div>
</div><span class="ant-progress-text">60%</span> </div><span class="ant-progress-text" title="60%">60%</span>
</div> </div>
<!----> <!---->
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal">
@ -395,7 +395,7 @@ exports[`renders ./components/progress/demo/segment.vue correctly 1`] = `
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="1" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path> a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="1" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path>
</svg><span class="ant-progress-text">60%</span></div> </svg><span class="ant-progress-text" title="60%">60%</span></div>
</div> </div>
<!----> <!---->
<div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal"> <div class="ant-progress ant-progress-circle ant-progress-show-info ant-progress-default ant-progress-status-normal">
@ -410,7 +410,7 @@ exports[`renders ./components/progress/demo/segment.vue correctly 1`] = `
<path d="M 50,50 m 0,47 <path d="M 50,50 m 0,47
a 47,47 0 1 1 0,-94 a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" opacity="1" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path> a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" opacity="1" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path>
</svg><span class="ant-progress-text">60%</span></div> </svg><span class="ant-progress-text" title="60%">60%</span></div>
</div> </div>
</div> </div>
`; `;
@ -420,7 +420,7 @@ exports[`renders ./components/progress/demo/steps.vue correctly 1`] = `
<div class="ant-progress-steps-outer"> <div class="ant-progress-steps-outer">
<div class="ant-progress-steps-item ant-progress-steps-item-active" style="width: 14px; height: 8px;"></div> <div class="ant-progress-steps-item ant-progress-steps-item-active" style="width: 14px; height: 8px;"></div>
<div class="ant-progress-steps-item ant-progress-steps-item-active" style="width: 14px; height: 8px;"></div> <div class="ant-progress-steps-item ant-progress-steps-item-active" style="width: 14px; height: 8px;"></div>
<div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div><span class="ant-progress-text">50%</span> <div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div><span class="ant-progress-text" title="50%">50%</span>
</div> </div>
</div> </div>
<br> <br>
@ -430,7 +430,7 @@ exports[`renders ./components/progress/demo/steps.vue correctly 1`] = `
<div class="ant-progress-steps-item ant-progress-steps-item-active" style="width: 14px; height: 8px;"></div> <div class="ant-progress-steps-item ant-progress-steps-item-active" style="width: 14px; height: 8px;"></div>
<div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div> <div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div>
<div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div> <div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div>
<div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div><span class="ant-progress-text">30%</span> <div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div><span class="ant-progress-text" title="30%">30%</span>
</div> </div>
</div> </div>
<br> <br>

26
components/progress/__tests__/__snapshots__/index.test.js.snap
Unescape View File

@ -13,7 +13,7 @@ exports[`Progress render dashboard 295 gapDegree 1`] = `
<path d="M 50,50 m 0,47 <path d="M 50,50 m 0,47
a 47,47 0 1 1 0,-94 a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -147.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path> a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -147.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
</svg><span class="ant-progress-text">0%</span></div> </svg><span class="ant-progress-text" title="0%">0%</span></div>
</div> </div>
`; `;
@ -30,7 +30,7 @@ exports[`Progress render dashboard 296 gapDegree 1`] = `
<path d="M 50,50 m 0,47 <path d="M 50,50 m 0,47
a 47,47 0 1 1 0,-94 a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -148px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path> a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; stroke-dasharray: 0px 295.3097094374406px; stroke-dashoffset: -148px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s;"></path>
</svg><span class="ant-progress-text">0%</span></div> </svg><span class="ant-progress-text" title="0%">0%</span></div>
</div> </div>
`; `;
@ -47,7 +47,7 @@ exports[`Progress render dashboard zero gapDegree 1`] = `
<path d="M 50,50 m 0,47 <path d="M 50,50 m 0,47
a 47,47 0 1 1 0,-94 a 47,47 0 1 1 0,-94
a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path> a 47,47 0 1 1 0,94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path>
</svg><span class="ant-progress-text">0%</span></div> </svg><span class="ant-progress-text" title="0%">0%</span></div>
</div> </div>
`; `;
@ -58,7 +58,7 @@ exports[`Progress render format 1`] = `
<div class="ant-progress-bg" style="width: 50%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 50%; height: 8px;"></div>
<div class="ant-progress-success-bg" style="width: 10%; height: 8px;"></div> <div class="ant-progress-success-bg" style="width: 10%; height: 8px;"></div>
</div> </div>
</div><span class="ant-progress-text">50 10</span> </div><span class="ant-progress-text" title="50 10">50 10</span>
</div> </div>
`; `;
@ -69,7 +69,7 @@ exports[`Progress render negative progress 1`] = `
<div class="ant-progress-bg" style="width: 0%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 0%; height: 8px;"></div>
<!----> <!---->
</div> </div>
</div><span class="ant-progress-text">0%</span> </div><span class="ant-progress-text" title="0%">0%</span>
</div> </div>
`; `;
@ -80,7 +80,7 @@ exports[`Progress render negative successPercent 1`] = `
<div class="ant-progress-bg" style="width: 50%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 50%; height: 8px;"></div>
<div class="ant-progress-success-bg" style="width: 0%; height: 8px;"></div> <div class="ant-progress-success-bg" style="width: 0%; height: 8px;"></div>
</div> </div>
</div><span class="ant-progress-text">50%</span> </div><span class="ant-progress-text" title="50%">50%</span>
</div> </div>
`; `;
@ -91,7 +91,7 @@ exports[`Progress render normal progress 1`] = `
<div class="ant-progress-bg" style="width: 0%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 0%; height: 8px;"></div>
<!----> <!---->
</div> </div>
</div><span class="ant-progress-text">0%</span> </div><span class="ant-progress-text" title="0%">0%</span>
</div> </div>
`; `;
@ -130,7 +130,7 @@ exports[`Progress render strokeColor 1`] = `
<path d="M 50,50 m 0,-47 <path d="M 50,50 m 0,-47
a 47,47 0 1 1 0,94 a 47,47 0 1 1 0,94
a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path> a 47,47 0 1 1 0,-94" stroke="" stroke-linecap="round" stroke-width="6" opacity="0" fill-opacity="0" class="ant-progress-circle-path" style="stroke: #52C41A; 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, opacity .3s ease 0s;"></path>
</svg><span class="ant-progress-text">50%</span></div> </svg><span class="ant-progress-text" title="50%">50%</span></div>
</div> </div>
`; `;
@ -141,7 +141,7 @@ exports[`Progress render strokeColor 2`] = `
<div class="ant-progress-bg" style="width: 50%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 50%; height: 8px;"></div>
<!----> <!---->
</div> </div>
</div><span class="ant-progress-text">50%</span> </div><span class="ant-progress-text" title="50%">50%</span>
</div> </div>
`; `;
@ -152,7 +152,7 @@ exports[`Progress render strokeColor 3`] = `
<div class="ant-progress-bg" style="width: 50%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 50%; height: 8px;"></div>
<!----> <!---->
</div> </div>
</div><span class="ant-progress-text">50%</span> </div><span class="ant-progress-text" title="50%">50%</span>
</div> </div>
`; `;
@ -163,7 +163,7 @@ exports[`Progress render successColor progress 1`] = `
<div class="ant-progress-bg" style="width: 60%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 60%; height: 8px;"></div>
<div class="ant-progress-success-bg" style="width: 30%; height: 8px; background-color: rgb(255, 255, 255);"></div> <div class="ant-progress-success-bg" style="width: 30%; height: 8px; background-color: rgb(255, 255, 255);"></div>
</div> </div>
</div><span class="ant-progress-text">60%</span> </div><span class="ant-progress-text" title="60%">60%</span>
</div> </div>
`; `;
@ -174,7 +174,7 @@ exports[`Progress render trailColor progress 1`] = `
<div class="ant-progress-bg" style="width: 0%; height: 8px;"></div> <div class="ant-progress-bg" style="width: 0%; height: 8px;"></div>
<!----> <!---->
</div> </div>
</div><span class="ant-progress-text">0%</span> </div><span class="ant-progress-text" title="0%">0%</span>
</div> </div>
`; `;
@ -183,7 +183,7 @@ exports[`Progress should support steps 1`] = `
<div class="ant-progress-steps-outer"> <div class="ant-progress-steps-outer">
<div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div> <div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div>
<div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div> <div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div>
<div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div><span class="ant-progress-text">0%</span> <div class="ant-progress-steps-item" style="width: 14px; height: 8px;"></div><span class="ant-progress-text" title="0%">0%</span>
</div> </div>
</div> </div>
`; `;

19
components/progress/progress.tsx
Unescape View File

@ -63,7 +63,7 @@ export default defineComponent({
}); });
const renderProcessInfo = () => { const renderProcessInfo = () => {
const { showInfo, format, type, percent } = props; const { showInfo, format, type, percent, title } = props;
const successPercent = getSuccessPercent(props); const successPercent = getSuccessPercent(props);
if (!showInfo) return null; if (!showInfo) return null;
@ -81,11 +81,18 @@ export default defineComponent({
} else if (progressStatus.value === 'success') { } else if (progressStatus.value === 'success') {
text = isLineType ? <CheckCircleFilled /> : <CheckOutlined />; text = isLineType ? <CheckCircleFilled /> : <CheckOutlined />;
} }
return <span class={`${prefixCls.value}-text`}>{text}</span>; return (
<span
class={`${prefixCls.value}-text`}
title={title === undefined && typeof text === 'string' ? text : undefined}
>
{text}
</span>
);
}; };
return () => { return () => {
const { type, steps, strokeColor } = props; const { type, steps, strokeColor, title } = props;
const progressInfo = renderProcessInfo(); const progressInfo = renderProcessInfo();
let progress: VueNode; let progress: VueNode;
@ -118,7 +125,11 @@ export default defineComponent({
[`${prefixCls.value}-status-${progressStatus.value}`]: true, [`${prefixCls.value}-status-${progressStatus.value}`]: true,
}; };
return <div class={classNames}>{progress}</div>; return (
<div class={classNames} title={title}>
{progress}
</div>
);
}; };
}, },
}); });

1
components/progress/props.ts
Unescape View File

@ -42,6 +42,7 @@ export const progressProps = () => ({
steps: PropTypes.number, steps: PropTypes.number,
/** @deprecated Use `success` instead */ /** @deprecated Use `success` instead */
successPercent: PropTypes.number, successPercent: PropTypes.number,
title: String,
}); });
export type ProgressProps = Partial<ExtractPropTypes<ReturnType<typeof progressProps>>>; export type ProgressProps = Partial<ExtractPropTypes<ReturnType<typeof progressProps>>>;

Write Preview
Loading…
Cancel
Save