chenhaodong / mew-iview

Commit ac2f8493b1f79c5faaabddf8cba63832a91a3bee

Authored by 梁灏
1 parent 3f611f57

update Switch style

Showing 2 changed files with 49 additions and 25 deletions   Show diff stats
Inline Side-by-side
examples/routers/switch.vue
  Show/Hide comments   View file @ac2f849
... ... @@ -6,13 +6,39 @@
6 6 </i-switch>
7 7 {{ m1 }}
8 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 34 </div>
10 35 </template>
11 36 <script>
12 37 export default {
13 38 data () {
14 39 return {
15   - m1: 'yes'
  40 + m1: 'yes',
  41 + disabled: true
16 42 }
17 43 },
18 44 methods: {
... ...
src/styles/components/switch.less
  Show/Hide comments   View file @ac2f849
... ... @@ -2,10 +2,10 @@
2 2  
3 3 .@{switch-prefix-cls} {
4 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 9 vertical-align: middle;
10 10 border: 1px solid #ccc;
11 11 background-color: #ccc;
... ... @@ -18,7 +18,7 @@
18 18 color: #fff;
19 19 font-size: @font-size-small;
20 20 position: absolute;
21   - left: 25px;
  21 + left: 23px;
22 22  
23 23 i {
24 24 width: 12px;
... ... @@ -29,9 +29,9 @@
29 29  
30 30 &:after {
31 31 content: '';
32   - width: 20px;
33   - height: 20px;
34   - border-radius: 20px;
  32 + width: 18px;
  33 + height: 18px;
  34 + border-radius: 18px;
35 35 background-color: #fff;
36 36 position: absolute;
37 37 left: 1px;
... ... @@ -54,14 +54,12 @@
54 54 }
55 55  
56 56 &-small {
57   - width: 24px;
58   - height: 12px;
59   - line-height: 10px;
  57 + width: 28px;
  58 + height: 16px;
  59 + line-height: 14px;
60 60 &:after {
61   - width: 10px;
62   - height: 10px;
63   - top: 0;
64   - left: 0;
  61 + width: 12px;
  62 + height: 12px;
65 63 }
66 64 &:active:after {
67 65 width: 14px;
... ... @@ -69,30 +67,30 @@
69 67 }
70 68  
71 69 &-small&-checked:after {
72   - left: 12px;
  70 + left: 13px;
73 71 }
74 72  
75 73 &-small:active&-checked:after {
76   - left: 8px;
  74 + left: 11px;
77 75 }
78 76  
79 77 &-large{
80   - width: 60px;
  78 + width: 56px;
81 79 &:active:after {
82 80 width: 26px;
83 81 }
84 82 }
85 83  
86 84 &-large:active:after {
87   - width: 32px;
  85 + width: 30px;
88 86 }
89 87  
90 88 &-large&-checked:after {
91   - left: 37px;
  89 + left: 35px;
92 90 }
93 91  
94 92 &-large:active&-checked:after {
95   - left: 25px;
  93 + left: 23px;
96 94 }
97 95  
98 96 &-checked {
... ... @@ -100,15 +98,15 @@
100 98 background-color: @primary-color;
101 99  
102 100 .@{switch-prefix-cls}-inner {
103   - left: 8px;
  101 + left: 7px;
104 102 }
105 103  
106 104 &:after {
107   - left: 25px;
  105 + left: 23px;
108 106 }
109 107  
110 108 &:active:after {
111   - left: 19px;
  109 + left: 15px;
112 110 }
113 111 }
114 112  
... ...