feat(Switch): remove inline style (#4914)

This commit is contained in:
neverland 2019-11-04 17:37:46 +08:00 committed by GitHub
parent 9ace3320b8
commit a19d3cc5c0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 9 additions and 10 deletions

View File

@ -606,6 +606,7 @@
@swipe-indicator-inactive-background-color: @border-color; @swipe-indicator-inactive-background-color: @border-color;
// Switch // Switch
@switch-size: 30px;
@switch-width: 2em; @switch-width: 2em;
@switch-height: 1em; @switch-height: 1em;
@switch-node-size: 1em; @switch-node-size: 1em;

View File

@ -6,6 +6,7 @@
box-sizing: content-box; box-sizing: content-box;
width: @switch-width; width: @switch-width;
height: @switch-height; height: @switch-height;
font-size: @switch-size;
background-color: @switch-background-color; background-color: @switch-background-color;
border: @switch-border; border: @switch-border;
border-radius: @switch-node-size; border-radius: @switch-node-size;

View File

@ -14,6 +14,7 @@ export type SharedSwitchProps = {
}; };
export const switchProps = { export const switchProps = {
size: String,
value: null as any, value: null as any,
loading: Boolean, loading: Boolean,
disabled: Boolean, disabled: Boolean,
@ -26,9 +27,5 @@ export const switchProps = {
inactiveValue: { inactiveValue: {
type: null as any, type: null as any,
default: false default: false
},
size: {
type: String,
default: '30px'
} }
}; };

View File

@ -3,17 +3,17 @@
exports[`renders demo correctly 1`] = ` exports[`renders demo correctly 1`] = `
<div> <div>
<div> <div>
<div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 30px;"> <div role="switch" aria-checked="true" class="van-switch van-switch--on">
<div class="van-switch__node"></div> <div class="van-switch__node"></div>
</div> </div>
</div> </div>
<div> <div>
<div role="switch" aria-checked="true" class="van-switch van-switch--on van-switch--disabled" style="font-size: 30px;"> <div role="switch" aria-checked="true" class="van-switch van-switch--on van-switch--disabled">
<div class="van-switch__node"></div> <div class="van-switch__node"></div>
</div> </div>
</div> </div>
<div> <div>
<div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 30px;"> <div role="switch" aria-checked="true" class="van-switch van-switch--on">
<div class="van-switch__node"> <div class="van-switch__node">
<div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(25, 137, 250);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <div class="van-loading van-loading--circular van-switch__loading"><span class="van-loading__spinner van-loading__spinner--circular" style="color: rgb(25, 137, 250);"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
</div> </div>
@ -25,12 +25,12 @@ exports[`renders demo correctly 1`] = `
</div> </div>
</div> </div>
<div> <div>
<div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 30px; background-color: rgb(7, 193, 96);"> <div role="switch" aria-checked="true" class="van-switch van-switch--on" style="background-color: rgb(7, 193, 96);">
<div class="van-switch__node"></div> <div class="van-switch__node"></div>
</div> </div>
</div> </div>
<div> <div>
<div role="switch" aria-checked="true" class="van-switch van-switch--on" style="font-size: 30px;"> <div role="switch" aria-checked="true" class="van-switch van-switch--on">
<div class="van-switch__node"></div> <div class="van-switch__node"></div>
</div> </div>
</div> </div>

View File

@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP // Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`inactive-color prop 1`] = ` exports[`inactive-color prop 1`] = `
<div role="switch" aria-checked="false" class="van-switch" style="font-size: 30px; background-color: black;"> <div role="switch" aria-checked="false" class="van-switch" style="background-color: black;">
<div class="van-switch__node"></div> <div class="van-switch__node"></div>
</div> </div>
`; `;