mirror of
				https://gitee.com/vant-contrib/vant.git
				synced 2025-11-04 04:42:09 +08:00 
			
		
		
		
	feat(Switch): remove inline style (#4914)
This commit is contained in:
		
							parent
							
								
									9ace3320b8
								
							
						
					
					
						commit
						a19d3cc5c0
					
				@ -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;
 | 
				
			||||||
 | 
				
			|||||||
@ -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;
 | 
				
			||||||
 | 
				
			|||||||
@ -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'
 | 
					 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
};
 | 
					};
 | 
				
			||||||
 | 
				
			|||||||
@ -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>
 | 
				
			||||||
 | 
				
			|||||||
@ -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>
 | 
				
			||||||
`;
 | 
					`;
 | 
				
			||||||
 | 
				
			|||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user