blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

style(Circle): add @circle-size less var

Browse Source
This commit is contained in:
chenjiahan 2020-11-30 22:53:23 +08:00 committed by neverland
parent 65a5ed8553
commit b57f7e9d98
7 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/circle/README.md
View File

@ -131,6 +131,7 @@ How to use: [Custom Theme](#/en-US/theme).
| Name | Default Value | Description | | Name | Default Value | Description |
| ------------------------ | ------------------- | ----------- | | ------------------------ | ------------------- | ----------- |
| @circle-size | `100px` | - |
| @circle-color | `@blue` | - | | @circle-color | `@blue` | - |
| @circle-layer-color | `@white` | - | | @circle-layer-color | `@white` | - |
| @circle-text-color | `@text-color` | - | | @circle-text-color | `@text-color` | - |

1
src/circle/README.zh-CN.md
View File

@ -142,6 +142,7 @@ export default {
| 名称 | 默认值 | 描述 | | 名称 | 默认值 | 描述 |
| ------------------------ | ------------------- | ---- | | ------------------------ | ------------------- | ---- |
| @circle-size | `100px` | - |
| @circle-color | `@blue` | - | | @circle-color | `@blue` | - |
| @circle-layer-color | `@white` | - | | @circle-layer-color | `@white` | - |
| @circle-text-color | `@text-color` | - | | @circle-text-color | `@text-color` | - |

5
src/circle/index.js
View File

@ -21,6 +21,7 @@ function getPath(clockwise, viewBoxSize) {
export default createComponent({ export default createComponent({
props: { props: {
text: String, text: String,
size: [Number, String],
color: [String, Object], color: [String, Object],
layerColor: String, layerColor: String,
strokeLinecap: String, strokeLinecap: String,
@ -32,10 +33,6 @@ export default createComponent({
type: [Number, String], type: [Number, String],
default: 0, default: 0,
}, },
size: {
type: [Number, String],
default: 100,
},
fill: { fill: {
type: String, type: String,
default: 'none', default: 'none',

2
src/circle/index.less
View File

@ -3,6 +3,8 @@
.van-circle { .van-circle {
position: relative; position: relative;
display: inline-block; display: inline-block;
width: @circle-size;
height: @circle-size;
text-align: center; text-align: center;
svg { svg {

10
src/circle/test/__snapshots__/demo.spec.js.snap
View File

@ -3,7 +3,7 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040"> <div class="van-circle"><svg viewBox="0 0 1040 1040">
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path> <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path> <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
</svg> </svg>
@ -11,19 +11,19 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1060 1060"> <div class="van-circle"><svg viewBox="0 0 1060 1060">
<path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 60px;"></path> <path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 60px;"></path>
<path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: undefined; stroke-width: 61px; stroke-dasharray: 2198px 3140px;"></path> <path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: undefined; stroke-width: 61px; stroke-dasharray: 2198px 3140px;"></path>
</svg> </svg>
<div class="van-circle__text">宽度定制</div> <div class="van-circle__text">宽度定制</div>
</div> </div>
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040"> <div class="van-circle"><svg viewBox="0 0 1040 1040">
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: #ebedf0; stroke-width: 40px;"></path> <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: #ebedf0; stroke-width: 40px;"></path>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#ee0a24" class="van-circle__hover" style="stroke: #ee0a24; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path> <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#ee0a24" class="van-circle__hover" style="stroke: #ee0a24; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
</svg> </svg>
<div class="van-circle__text">颜色定制</div> <div class="van-circle__text">颜色定制</div>
</div> </div>
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040"> <div class="van-circle"><svg viewBox="0 0 1040 1040">
<defs> <defs>
<linearGradient id="van-circle-gradient-3" x1="100%" y1="0%" x2="0%" y2="0%"> <linearGradient id="van-circle-gradient-3" x1="100%" y1="0%" x2="0%" y2="0%">
<stop offset="0%" stop-color="#3fecff"></stop> <stop offset="0%" stop-color="#3fecff"></stop>
@ -35,7 +35,7 @@ exports[`renders demo correctly 1`] = `
</svg> </svg>
<div class="van-circle__text">渐变色</div> <div class="van-circle__text">渐变色</div>
</div> </div>
<div class="van-circle" style="width: 100px; height: 100px; margin-top: 15px;"><svg viewBox="0 0 1040 1040"> <div class="van-circle" style="margin-top: 15px;"><svg viewBox="0 0 1040 1040">
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path> <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" stroke="#07c160" class="van-circle__hover" style="stroke: #07c160; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path> <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" stroke="#07c160" class="van-circle__hover" style="stroke: #07c160; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
</svg> </svg>

4
src/circle/test/__snapshots__/index.spec.js.snap
View File

@ -8,14 +8,14 @@ exports[`size prop 1`] = `
`; `;
exports[`speed is 0 1`] = ` exports[`speed is 0 1`] = `
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040"> <div class="van-circle"><svg viewBox="0 0 1040 1040">
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path> <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 1570px 3140px;"></path> <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: undefined; stroke-width: 41px; stroke-dasharray: 1570px 3140px;"></path>
</svg></div> </svg></div>
`; `;
exports[`stroke-linecap prop 1`] = ` exports[`stroke-linecap prop 1`] = `
<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040"> <div class="van-circle"><svg viewBox="0 0 1040 1040">
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path> <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__layer" style="fill: none; stroke: undefined; stroke-width: 40px;"></path>
<path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: undefined; stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"></path> <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="stroke: undefined; stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"></path>
</svg></div> </svg></div>

1
src/style/var.less
View File

@ -241,6 +241,7 @@
@checkbox-disabled-background-color: @border-color; @checkbox-disabled-background-color: @border-color;
// Circle // Circle
@circle-size: 100px;
@circle-color: @blue; @circle-color: @blue;
@circle-layer-color: @white; @circle-layer-color: @white;
@circle-text-color: @text-color; @circle-text-color: @text-color;