diff --git a/packages/vant/src/circle/README.md b/packages/vant/src/circle/README.md index 0d47de9c3..1faf3eaf9 100644 --- a/packages/vant/src/circle/README.md +++ b/packages/vant/src/circle/README.md @@ -47,6 +47,8 @@ export default { ### Custom Width +The width of the progress bar is controlled by the `stroke-width` prop, `stroke-width` refers to the width of `path` in SVG, and the default value is `40`. + ```html ``` +The unit of `stroke-width` is not `px`, if you want to know the relationship between `stroke-width` and `px`, you can use the following formula to calculate: + +```js +// viewBox size for SVG +const viewBox = 1000 + strokeWidth; + +// The width of the Circle component, the default is 100px +const circleWidth = 100; + +// Final rendered progress bar width (px) +const pxWidth = (strokeWidth * circleWidth) / viewBox; +``` + ### Custom Color ```html diff --git a/packages/vant/src/circle/README.zh-CN.md b/packages/vant/src/circle/README.zh-CN.md index 29668dad9..8a291d77e 100644 --- a/packages/vant/src/circle/README.zh-CN.md +++ b/packages/vant/src/circle/README.zh-CN.md @@ -49,7 +49,7 @@ export default { ### 宽度定制 -通过 `stroke-width` 属性来控制进度条宽度。 +通过 `stroke-width` 属性来控制进度条宽度,`stroke-width` 指的是 SVG 中 `path` 的宽度,默认值为 `40`。 ```html ``` +`stroke-width` 的单位不是 `px`,如果你想知道 `stroke-width` 与 `px` 的换算关系,可以通过如下公式计算: + +```js +// SVG 的 viewBox 大小 +const viewBox = 1000 + strokeWidth; + +// Circle 组件的宽度,默认为 100px +const circleWidth = 100; + +// 最终渲染出来的进度条宽度(px) +const pxWidth = (strokeWidth * circleWidth) / viewBox; +``` + ### 颜色定制 通过 `color` 属性来控制进度条颜色,`layer-color` 属性来控制轨道颜色。