mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 12:09:14 +08:00
fix: gapDegree=0 in Dashboard progress is now working (#22462)
* fix: gapDegree=0 in Dashboard progress is now working * update jest snapshot for Progress * Add use case of gapDegree and test cases. Also doc error correction
This commit is contained in:
ThisRabbit
GitHub
parent
3dd2332549
commit
0519111a99
@ -48,7 +48,15 @@ const Circle: React.SFC<CircleProps> = props => {
|
||||
};
|
||||
const circleWidth = strokeWidth || 6;
|
||||
const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top';
|
||||
const gapDeg = gapDegree || (type === 'dashboard' ? 75 : undefined);
|
||||
// Support gapDeg = 0 when type = 'dashboard'
|
||||
let gapDeg;
|
||||
if (gapDegree || gapDegree === 0) {
|
||||
gapDeg = gapDegree;
|
||||
}
|
||||
else if (type === 'dashboard') {
|
||||
gapDeg = 75;
|
||||
}
|
||||
|
||||
// using className to style stroke color
|
||||
const strokeColor = getStrokeColor(props) as string | string[] | object;
|
||||
const isGradient = Object.prototype.toString.call(strokeColor) === '[object Object]';
|
||||
|
||||
@ -433,45 +433,88 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
|
||||
`;
|
||||
|
||||
exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = `
|
||||
<div
|
||||
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-progress-inner"
|
||||
style="width:120px;height:120px;font-size:24px"
|
||||
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
>
|
||||
<svg
|
||||
class="ant-progress-circle "
|
||||
viewBox="0 0 100 100"
|
||||
<div
|
||||
class="ant-progress-inner"
|
||||
style="width:120px;height:120px;font-size:24px"
|
||||
>
|
||||
<path
|
||||
class="ant-progress-circle-trail"
|
||||
d="M 50,50 m 0,47
|
||||
<svg
|
||||
class="ant-progress-circle "
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<path
|
||||
class="ant-progress-circle-trail"
|
||||
d="M 50,50 m 0,47
|
||||
a 47,47 0 1 1 0,-94
|
||||
a 47,47 0 1 1 0,94"
|
||||
fill-opacity="0"
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="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
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,47
|
||||
fill-opacity="0"
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="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
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,47
|
||||
a 47,47 0 1 1 0,-94
|
||||
a 47,47 0 1 1 0,94"
|
||||
fill-opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="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"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
title="75%"
|
||||
fill-opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="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"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
title="75%"
|
||||
>
|
||||
75%
|
||||
</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"
|
||||
style="width:120px;height:120px;font-size:24px"
|
||||
>
|
||||
75%
|
||||
</span>
|
||||
<svg
|
||||
class="ant-progress-circle "
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<path
|
||||
class="ant-progress-circle-trail"
|
||||
d="M 50,50 m 0,47
|
||||
a 47,47 0 1 1 0,-94
|
||||
a 47,47 0 1 1 0,94"
|
||||
fill-opacity="0"
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="stroke-dasharray:265.3097094374406px 295.3097094374406px;stroke-dashoffset:-15px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,47
|
||||
a 47,47 0 1 1 0,-94
|
||||
a 47,47 0 1 1 0,94"
|
||||
fill-opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="stroke-dasharray:198.98228207808043px 295.3097094374406px;stroke-dashoffset:-15px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
title="75%"
|
||||
>
|
||||
75%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@ -696,65 +739,6 @@ exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
|
||||
</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:24px"
|
||||
>
|
||||
<svg
|
||||
class="ant-progress-circle "
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="ant-progress-gradient-10"
|
||||
x1="100%"
|
||||
x2="0%"
|
||||
y1="0%"
|
||||
y2="0%"
|
||||
>
|
||||
<stop
|
||||
offset="0%"
|
||||
stop-color="#108ee9"
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
stop-color="#87d068"
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
class="ant-progress-circle-trail"
|
||||
d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94"
|
||||
fill-opacity="0"
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="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
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94"
|
||||
fill-opacity="0"
|
||||
stroke="url(#ant-progress-gradient-10)"
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
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"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
title="90%"
|
||||
>
|
||||
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"
|
||||
@ -801,6 +785,65 @@ exports[`renders ./components/progress/demo/gradient-line.md correctly 1`] = `
|
||||
stroke="url(#ant-progress-gradient-11)"
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
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"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
title="90%"
|
||||
>
|
||||
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:24px"
|
||||
>
|
||||
<svg
|
||||
class="ant-progress-circle "
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="ant-progress-gradient-12"
|
||||
x1="100%"
|
||||
x2="0%"
|
||||
y1="0%"
|
||||
y2="0%"
|
||||
>
|
||||
<stop
|
||||
offset="0%"
|
||||
stop-color="#108ee9"
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
stop-color="#87d068"
|
||||
/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
class="ant-progress-circle-trail"
|
||||
d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94"
|
||||
fill-opacity="0"
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="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
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,-47
|
||||
a 47,47 0 1 1 0,94
|
||||
a 47,47 0 1 1 0,-94"
|
||||
fill-opacity="0"
|
||||
stroke="url(#ant-progress-gradient-12)"
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
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"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
@ -1,5 +1,137 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Progress render dashboard 295 gapDegree 1`] = `
|
||||
<div
|
||||
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
>
|
||||
<div
|
||||
class="ant-progress-inner"
|
||||
style="width: 120px; height: 120px; font-size: 24px;"
|
||||
>
|
||||
<svg
|
||||
class="ant-progress-circle "
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<path
|
||||
class="ant-progress-circle-trail"
|
||||
d="M 50,50 m 0,47
|
||||
a 47,47 0 1 1 0,-94
|
||||
a 47,47 0 1 1 0,94"
|
||||
fill-opacity="0"
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="stroke-dasharray: 0.3097094374405742px 295.3097094374406px; stroke-dashoffset: -147.5px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,47
|
||||
a 47,47 0 1 1 0,-94
|
||||
a 47,47 0 1 1 0,94"
|
||||
fill-opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="0"
|
||||
style="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;"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
title="0%"
|
||||
>
|
||||
0%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Progress render dashboard 296 gapDegree 1`] = `
|
||||
<div
|
||||
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
>
|
||||
<div
|
||||
class="ant-progress-inner"
|
||||
style="width: 120px; height: 120px; font-size: 24px;"
|
||||
>
|
||||
<svg
|
||||
class="ant-progress-circle "
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<path
|
||||
class="ant-progress-circle-trail"
|
||||
d="M 50,50 m 0,47
|
||||
a 47,47 0 1 1 0,-94
|
||||
a 47,47 0 1 1 0,94"
|
||||
fill-opacity="0"
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="stroke-dasharray: -0.6902905625594258px 295.3097094374406px; stroke-dashoffset: -148px; transition: stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;"
|
||||
/>
|
||||
<path
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,47
|
||||
a 47,47 0 1 1 0,-94
|
||||
a 47,47 0 1 1 0,94"
|
||||
fill-opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="0"
|
||||
style="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;"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
title="0%"
|
||||
>
|
||||
0%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Progress render dashboard zero gapDegree 1`] = `
|
||||
<div
|
||||
class="ant-progress ant-progress-circle ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
>
|
||||
<div
|
||||
class="ant-progress-inner"
|
||||
style="width: 120px; height: 120px; font-size: 24px;"
|
||||
>
|
||||
<svg
|
||||
class="ant-progress-circle "
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<path
|
||||
class="ant-progress-circle-trail"
|
||||
d="M 50,50 m 0,47
|
||||
a 47,47 0 1 1 0,-94
|
||||
a 47,47 0 1 1 0,94"
|
||||
fill-opacity="0"
|
||||
stroke-linecap="round"
|
||||
stroke-width="6"
|
||||
style="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
|
||||
class="ant-progress-circle-path"
|
||||
d="M 50,50 m 0,47
|
||||
a 47,47 0 1 1 0,-94
|
||||
a 47,47 0 1 1 0,94"
|
||||
fill-opacity="0"
|
||||
stroke=""
|
||||
stroke-linecap="round"
|
||||
stroke-width="0"
|
||||
style="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;"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="ant-progress-text"
|
||||
title="0%"
|
||||
>
|
||||
0%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Progress render format 1`] = `
|
||||
<div
|
||||
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
@ -29,7 +161,7 @@ exports[`Progress render format 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Progress render negetive progress 1`] = `
|
||||
exports[`Progress render negative progress 1`] = `
|
||||
<div
|
||||
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
>
|
||||
@ -54,7 +186,7 @@ exports[`Progress render negetive progress 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Progress render negetive successPercent 1`] = `
|
||||
exports[`Progress render negative successPercent 1`] = `
|
||||
<div
|
||||
class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
>
|
||||
@ -240,7 +372,6 @@ exports[`Progress render strokeColor 1`] = `
|
||||
|
||||
exports[`Progress render strokeColor 2`] = `
|
||||
<Progress
|
||||
gapDegree={0}
|
||||
percent={50}
|
||||
showInfo={true}
|
||||
size="default"
|
||||
@ -258,7 +389,6 @@ exports[`Progress render strokeColor 2`] = `
|
||||
className="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
>
|
||||
<Line
|
||||
gapDegree={0}
|
||||
percent={50}
|
||||
prefixCls="ant-progress"
|
||||
showInfo={true}
|
||||
@ -305,7 +435,6 @@ exports[`Progress render strokeColor 2`] = `
|
||||
|
||||
exports[`Progress render strokeColor 3`] = `
|
||||
<Progress
|
||||
gapDegree={0}
|
||||
percent={50}
|
||||
showInfo={true}
|
||||
size="default"
|
||||
@ -323,7 +452,6 @@ exports[`Progress render strokeColor 3`] = `
|
||||
className="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
|
||||
>
|
||||
<Line
|
||||
gapDegree={0}
|
||||
percent={50}
|
||||
prefixCls="ant-progress"
|
||||
showInfo={true}
|
||||
|
||||
@ -30,12 +30,12 @@ describe('Progress', () => {
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('render negetive progress', () => {
|
||||
it('render negative progress', () => {
|
||||
const wrapper = mount(<Progress percent={-20} />);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('render negetive successPercent', () => {
|
||||
it('render negative successPercent', () => {
|
||||
const wrapper = mount(<Progress percent={50} successPercent={-20} />);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
@ -81,6 +81,21 @@ describe('Progress', () => {
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('render dashboard zero gapDegree', () => {
|
||||
const wrapper = mount(<Progress type="dashboard" gapDegree={0} />);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('render dashboard 295 gapDegree', () => {
|
||||
const wrapper = mount(<Progress type="dashboard" gapDegree={295} />);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('render dashboard 296 gapDegree', () => {
|
||||
const wrapper = mount(<Progress type="dashboard" gapDegree={296} />);
|
||||
expect(wrapper.render()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('get correct line-gradient', () => {
|
||||
expect(handleGradient({ from: 'test', to: 'test' }).backgroundImage).toBe(
|
||||
'linear-gradient(to right, test, test)',
|
||||
|
||||
@ -7,14 +7,19 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
通过设置 `type=dashboard`，可以很方便地实现仪表盘样式的进度条。
|
||||
通过设置 `type=dashboard`，可以很方便地实现仪表盘样式的进度条。若想要修改缺口的角度，可以设置 `gapDegree` 为你想要的值。
|
||||
|
||||
## en-US
|
||||
|
||||
By setting `type=dashboard`, you can get a dashboard style of progress easily.
|
||||
By setting `type=dashboard`, you can get a dashboard style of progress easily. Modify `gapDegree` to set the degree of gap.
|
||||
|
||||
```jsx
|
||||
import { Progress } from 'antd';
|
||||
|
||||
ReactDOM.render(<Progress type="dashboard" percent={75} />, mountNode);
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Progress type="dashboard" percent={75} />
|
||||
<Progress type="dashboard" percent={75} gapDegree={30} />
|
||||
</div>
|
||||
, mountNode);
|
||||
```
|
||||
|
||||
@ -7,11 +7,11 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
标准的进度条。
|
||||
标准的进度条。`type="circle|dashboard"` 时不支持分段颜色。
|
||||
|
||||
## en-US
|
||||
|
||||
A standard progress bar.
|
||||
A standard progress bar. Doesn't support trail color when `type="circle|dashboard"`.
|
||||
|
||||
```jsx
|
||||
import { Tooltip, Progress } from 'antd';
|
||||
|
||||
@ -51,5 +51,5 @@ Properties that shared by all types.
|
||||
| --- | --- | --- | --- |
|
||||
| width | to set the canvas width of the dashboard progress, unit: `px` | number | 132 |
|
||||
| strokeWidth | to set the width of the dashboard progress, unit: percentage of the canvas width | number | 6 |
|
||||
| gapDegree | the gap degree of half circle, 0 ~ 360 | number | 0 |
|
||||
| gapPosition | the gap position, options: `top` `bottom` `left` `right` | string | `top` |
|
||||
| gapDegree | the gap degree of half circle, 0 ~ 295 | number | 75 |
|
||||
| gapPosition | the gap position, options: `top` `bottom` `left` `right` | string | `bottom` |
|
||||
|
||||
@ -52,5 +52,5 @@ title: Progress
|
||||
| --- | --- | --- | --- |
|
||||
| width | 仪表盘进度条画布宽度，单位 px | number | 132 |
|
||||
| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
|
||||
| gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 360 | number | 0 |
|
||||
| gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `top` |
|
||||
| gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 295 | number | 75 |
|
||||
| gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `bottom` |
|
||||
|
||||
@ -49,7 +49,7 @@ export default class Progress extends React.Component<ProgressProps> {
|
||||
// null for different theme definition
|
||||
trailColor: null,
|
||||
size: 'default',
|
||||
gapDegree: 0,
|
||||
gapDegree: undefined,
|
||||
strokeLinecap: 'round',
|
||||
};
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user