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

feat: add title prop for progress, close #4929

pull/5223/head
tangjinzhou 3 years ago
parent
42e34a63ec
commit
23624679fe
4 changed files with 51 additions and 39 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 44
      components/progress/__tests__/__snapshots__/demo.test.js.snap
  2. 26
      components/progress/__tests__/__snapshots__/index.test.js.snap
  3. 19
      components/progress/progress.tsx
  4. 1
      components/progress/props.ts

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
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>
</svg><span class="ant-progress-text">75%</span></div>
</svg><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-exception">
<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
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>
</svg><span class="ant-progress-text">0%</span></div>
</svg><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>
@ -78,7 +78,7 @@ exports[`renders ./components/progress/demo/circle-mini.vue correctly 1`] = `
<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="" 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 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">
@ -124,7 +124,7 @@ exports[`renders ./components/progress/demo/dashboard.vue correctly 1`] = `
<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="" 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>
`;
@ -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>
</div><span class="ant-progress-text">0%</span>
</div><span class="ant-progress-text" title="0%">0%</span>
</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>
@ -157,7 +157,7 @@ exports[`renders ./components/progress/demo/format.vue correctly 1`] = `
<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="" 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 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">
@ -171,7 +171,7 @@ exports[`renders ./components/progress/demo/format.vue correctly 1`] = `
<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="" 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 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">
@ -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>
</div><span class="ant-progress-text">99.9%</span>
</div><span class="ant-progress-text" title="99.9%">99.9%</span>
</div>
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-active">
<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>
</div><span class="ant-progress-text">99.9%</span>
</div><span class="ant-progress-text" title="99.9%">99.9%</span>
</div>
<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">
@ -225,7 +225,7 @@ exports[`renders ./components/progress/demo/gradient-line.vue correctly 1`] = `
<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="" 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 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">
@ -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>
</div><span class="ant-progress-text">30%</span>
</div><span class="ant-progress-text" title="30%">30%</span>
</div>
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-active">
<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>
</div><span class="ant-progress-text">50%</span>
</div><span class="ant-progress-text" title="50%">50%</span>
</div>
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-default ant-progress-status-exception">
<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>
</div><span class="ant-progress-text">30%</span>
</div><span class="ant-progress-text" title="30%">30%</span>
</div>
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-small ant-progress-status-active">
<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>
</div><span class="ant-progress-text">50%</span>
</div><span class="ant-progress-text" title="50%">50%</span>
</div>
<div class="ant-progress ant-progress-line ant-progress-show-info ant-progress-small ant-progress-status-exception">
<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>
</div><span class="ant-progress-text">75%</span>
</div><span class="ant-progress-text" title="75%">75%</span>
</div>
<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">
@ -352,7 +352,7 @@ exports[`renders ./components/progress/demo/linecap.vue correctly 1`] = `
<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="" 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 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">
@ -366,7 +366,7 @@ exports[`renders ./components/progress/demo/linecap.vue correctly 1`] = `
<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="" 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>
`;
@ -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-success-bg" style="width: 30%; height: 8px;"></div>
</div>
</div><span class="ant-progress-text">60%</span>
</div><span class="ant-progress-text" title="60%">60%</span>
</div>
<!---->
<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
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>
</svg><span class="ant-progress-text">60%</span></div>
</svg><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">
@ -410,7 +410,7 @@ exports[`renders ./components/progress/demo/segment.vue correctly 1`] = `
<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="" 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>
`;
@ -420,7 +420,7 @@ exports[`renders ./components/progress/demo/steps.vue correctly 1`] = `
<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" 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>
<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" 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>
<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
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>
</svg><span class="ant-progress-text">0%</span></div>
</svg><span class="ant-progress-text" title="0%">0%</span></div>
</div>
`;
@ -30,7 +30,7 @@ exports[`Progress render dashboard 296 gapDegree 1`] = `
<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="" 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>
`;
@ -47,7 +47,7 @@ exports[`Progress render dashboard zero gapDegree 1`] = `
<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="" 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>
`;
@ -58,7 +58,7 @@ exports[`Progress render format 1`] = `
<div class="ant-progress-bg" style="width: 50%; height: 8px;"></div>
<div class="ant-progress-success-bg" style="width: 10%; height: 8px;"></div>
</div>
</div><span class="ant-progress-text">50 10</span>
</div><span class="ant-progress-text" title="50 10">50 10</span>
</div>
`;
@ -69,7 +69,7 @@ exports[`Progress render negative progress 1`] = `
<div class="ant-progress-bg" style="width: 0%; height: 8px;"></div>
<!---->
</div>
</div><span class="ant-progress-text">0%</span>
</div><span class="ant-progress-text" title="0%">0%</span>
</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-success-bg" style="width: 0%; height: 8px;"></div>
</div>
</div><span class="ant-progress-text">50%</span>
</div><span class="ant-progress-text" title="50%">50%</span>
</div>
`;
@ -91,7 +91,7 @@ exports[`Progress render normal progress 1`] = `
<div class="ant-progress-bg" style="width: 0%; height: 8px;"></div>
<!---->
</div>
</div><span class="ant-progress-text">0%</span>
</div><span class="ant-progress-text" title="0%">0%</span>
</div>
`;
@ -130,7 +130,7 @@ exports[`Progress render strokeColor 1`] = `
<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="" 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>
`;
@ -141,7 +141,7 @@ exports[`Progress render strokeColor 2`] = `
<div class="ant-progress-bg" style="width: 50%; height: 8px;"></div>
<!---->
</div>
</div><span class="ant-progress-text">50%</span>
</div><span class="ant-progress-text" title="50%">50%</span>
</div>
`;
@ -152,7 +152,7 @@ exports[`Progress render strokeColor 3`] = `
<div class="ant-progress-bg" style="width: 50%; height: 8px;"></div>
<!---->
</div>
</div><span class="ant-progress-text">50%</span>
</div><span class="ant-progress-text" title="50%">50%</span>
</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-success-bg" style="width: 30%; height: 8px; background-color: rgb(255, 255, 255);"></div>
</div>
</div><span class="ant-progress-text">60%</span>
</div><span class="ant-progress-text" title="60%">60%</span>
</div>
`;
@ -174,7 +174,7 @@ exports[`Progress render trailColor progress 1`] = `
<div class="ant-progress-bg" style="width: 0%; height: 8px;"></div>
<!---->
</div>
</div><span class="ant-progress-text">0%</span>
</div><span class="ant-progress-text" title="0%">0%</span>
</div>
`;
@ -183,7 +183,7 @@ exports[`Progress should support steps 1`] = `
<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><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>
`;

19
components/progress/progress.tsx
Unescape View File

@ -63,7 +63,7 @@ export default defineComponent({
});
const renderProcessInfo = () => {
const { showInfo, format, type, percent } = props;
const { showInfo, format, type, percent, title } = props;
const successPercent = getSuccessPercent(props);
if (!showInfo) return null;
@ -81,11 +81,18 @@ export default defineComponent({
} else if (progressStatus.value === 'success') {
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 () => {
const { type, steps, strokeColor } = props;
const { type, steps, strokeColor, title } = props;
const progressInfo = renderProcessInfo();
let progress: VueNode;
@ -118,7 +125,11 @@ export default defineComponent({
[`${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,
/** @deprecated Use `success` instead */
successPercent: PropTypes.number,
title: String,
});
export type ProgressProps = Partial<ExtractPropTypes<ReturnType<typeof progressProps>>>;

Write Preview
Loading…
Cancel
Save