Commit ac2f8493b1f79c5faaabddf8cba63832a91a3bee
1 parent
3f611f57
update Switch style
Showing
2 changed files
with
49 additions
and
25 deletions
Show diff stats
examples/routers/switch.vue
| @@ -6,13 +6,39 @@ | @@ -6,13 +6,39 @@ | ||
| 6 | </i-switch> | 6 | </i-switch> |
| 7 | {{ m1 }} | 7 | {{ m1 }} |
| 8 | <div @click="m1 = 'no'">toggle</div> | 8 | <div @click="m1 = 'no'">toggle</div> |
| 9 | + <br><br> | ||
| 10 | + <i-switch size="large"></i-switch> | ||
| 11 | + <i-switch></i-switch> | ||
| 12 | + <i-switch size="small"></i-switch> | ||
| 13 | + <br><br> | ||
| 14 | + <i-switch> | ||
| 15 | + <span slot="open">开</span> | ||
| 16 | + <span slot="close">关</span> | ||
| 17 | + </i-switch> | ||
| 18 | + <i-switch> | ||
| 19 | + <Icon type="android-done" slot="open"></Icon> | ||
| 20 | + <Icon type="android-close" slot="close"></Icon> | ||
| 21 | + </i-switch> | ||
| 22 | + <br><br> | ||
| 23 | + <i-switch size="large"> | ||
| 24 | + <span slot="open">开启</span> | ||
| 25 | + <span slot="close">关闭</span> | ||
| 26 | + </i-switch> | ||
| 27 | + <i-switch size="large"> | ||
| 28 | + <span slot="open">ON</span> | ||
| 29 | + <span slot="close">OFF</span> | ||
| 30 | + </i-switch> | ||
| 31 | + <br><br> | ||
| 32 | + <i-switch :disabled="disabled"></i-switch> | ||
| 33 | + <Button type="primary" @click="disabled = !disabled">Toggle Disabled</Button> | ||
| 9 | </div> | 34 | </div> |
| 10 | </template> | 35 | </template> |
| 11 | <script> | 36 | <script> |
| 12 | export default { | 37 | export default { |
| 13 | data () { | 38 | data () { |
| 14 | return { | 39 | return { |
| 15 | - m1: 'yes' | 40 | + m1: 'yes', |
| 41 | + disabled: true | ||
| 16 | } | 42 | } |
| 17 | }, | 43 | }, |
| 18 | methods: { | 44 | methods: { |
src/styles/components/switch.less
| @@ -2,10 +2,10 @@ | @@ -2,10 +2,10 @@ | ||
| 2 | 2 | ||
| 3 | .@{switch-prefix-cls} { | 3 | .@{switch-prefix-cls} { |
| 4 | display: inline-block; | 4 | display: inline-block; |
| 5 | - width: 48px; | ||
| 6 | - height: 24px; | ||
| 7 | - line-height: 22px; | ||
| 8 | - border-radius: 24px; | 5 | + width: 44px; |
| 6 | + height: 22px; | ||
| 7 | + line-height: 20px; | ||
| 8 | + border-radius: 22px; | ||
| 9 | vertical-align: middle; | 9 | vertical-align: middle; |
| 10 | border: 1px solid #ccc; | 10 | border: 1px solid #ccc; |
| 11 | background-color: #ccc; | 11 | background-color: #ccc; |
| @@ -18,7 +18,7 @@ | @@ -18,7 +18,7 @@ | ||
| 18 | color: #fff; | 18 | color: #fff; |
| 19 | font-size: @font-size-small; | 19 | font-size: @font-size-small; |
| 20 | position: absolute; | 20 | position: absolute; |
| 21 | - left: 25px; | 21 | + left: 23px; |
| 22 | 22 | ||
| 23 | i { | 23 | i { |
| 24 | width: 12px; | 24 | width: 12px; |
| @@ -29,9 +29,9 @@ | @@ -29,9 +29,9 @@ | ||
| 29 | 29 | ||
| 30 | &:after { | 30 | &:after { |
| 31 | content: ''; | 31 | content: ''; |
| 32 | - width: 20px; | ||
| 33 | - height: 20px; | ||
| 34 | - border-radius: 20px; | 32 | + width: 18px; |
| 33 | + height: 18px; | ||
| 34 | + border-radius: 18px; | ||
| 35 | background-color: #fff; | 35 | background-color: #fff; |
| 36 | position: absolute; | 36 | position: absolute; |
| 37 | left: 1px; | 37 | left: 1px; |
| @@ -54,14 +54,12 @@ | @@ -54,14 +54,12 @@ | ||
| 54 | } | 54 | } |
| 55 | 55 | ||
| 56 | &-small { | 56 | &-small { |
| 57 | - width: 24px; | ||
| 58 | - height: 12px; | ||
| 59 | - line-height: 10px; | 57 | + width: 28px; |
| 58 | + height: 16px; | ||
| 59 | + line-height: 14px; | ||
| 60 | &:after { | 60 | &:after { |
| 61 | - width: 10px; | ||
| 62 | - height: 10px; | ||
| 63 | - top: 0; | ||
| 64 | - left: 0; | 61 | + width: 12px; |
| 62 | + height: 12px; | ||
| 65 | } | 63 | } |
| 66 | &:active:after { | 64 | &:active:after { |
| 67 | width: 14px; | 65 | width: 14px; |
| @@ -69,30 +67,30 @@ | @@ -69,30 +67,30 @@ | ||
| 69 | } | 67 | } |
| 70 | 68 | ||
| 71 | &-small&-checked:after { | 69 | &-small&-checked:after { |
| 72 | - left: 12px; | 70 | + left: 13px; |
| 73 | } | 71 | } |
| 74 | 72 | ||
| 75 | &-small:active&-checked:after { | 73 | &-small:active&-checked:after { |
| 76 | - left: 8px; | 74 | + left: 11px; |
| 77 | } | 75 | } |
| 78 | 76 | ||
| 79 | &-large{ | 77 | &-large{ |
| 80 | - width: 60px; | 78 | + width: 56px; |
| 81 | &:active:after { | 79 | &:active:after { |
| 82 | width: 26px; | 80 | width: 26px; |
| 83 | } | 81 | } |
| 84 | } | 82 | } |
| 85 | 83 | ||
| 86 | &-large:active:after { | 84 | &-large:active:after { |
| 87 | - width: 32px; | 85 | + width: 30px; |
| 88 | } | 86 | } |
| 89 | 87 | ||
| 90 | &-large&-checked:after { | 88 | &-large&-checked:after { |
| 91 | - left: 37px; | 89 | + left: 35px; |
| 92 | } | 90 | } |
| 93 | 91 | ||
| 94 | &-large:active&-checked:after { | 92 | &-large:active&-checked:after { |
| 95 | - left: 25px; | 93 | + left: 23px; |
| 96 | } | 94 | } |
| 97 | 95 | ||
| 98 | &-checked { | 96 | &-checked { |
| @@ -100,15 +98,15 @@ | @@ -100,15 +98,15 @@ | ||
| 100 | background-color: @primary-color; | 98 | background-color: @primary-color; |
| 101 | 99 | ||
| 102 | .@{switch-prefix-cls}-inner { | 100 | .@{switch-prefix-cls}-inner { |
| 103 | - left: 8px; | 101 | + left: 7px; |
| 104 | } | 102 | } |
| 105 | 103 | ||
| 106 | &:after { | 104 | &:after { |
| 107 | - left: 25px; | 105 | + left: 23px; |
| 108 | } | 106 | } |
| 109 | 107 | ||
| 110 | &:active:after { | 108 | &:active:after { |
| 111 | - left: 19px; | 109 | + left: 15px; |
| 112 | } | 110 | } |
| 113 | } | 111 | } |
| 114 | 112 |