drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Switch style

Browse source
This commit is contained in:
梁灏 2018-06-21 19:51:38 +08:00
parent 3f611f57ed
commit ac2f8493b1
2 changed files with 49 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
examples/routers/switch.vue
View file

@ -6,13 +6,39 @@
</i-switch> </i-switch>
{{ m1 }} {{ m1 }}
<div @click="m1 = 'no'">toggle</div> <div @click="m1 = 'no'">toggle</div>
<br><br>
<i-switch size="large"></i-switch>
<i-switch></i-switch>
<i-switch size="small"></i-switch>
<br><br>
<i-switch>
<span slot="open">开</span>
<span slot="close">关</span>
</i-switch>
<i-switch>
<Icon type="android-done" slot="open"></Icon>
<Icon type="android-close" slot="close"></Icon>
</i-switch>
<br><br>
<i-switch size="large">
<span slot="open">开启</span>
<span slot="close">关闭</span>
</i-switch>
<i-switch size="large">
<span slot="open">ON</span>
<span slot="close">OFF</span>
</i-switch>
<br><br>
<i-switch :disabled="disabled"></i-switch>
<Button type="primary" @click="disabled = !disabled">Toggle Disabled</Button>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
m1: 'yes' m1: 'yes',
disabled: true
} }
}, },
methods: { methods: {

46
src/styles/components/switch.less
View file

@ -2,10 +2,10 @@
.@{switch-prefix-cls} { .@{switch-prefix-cls} {
display: inline-block; display: inline-block;
width: 48px; width: 44px;
height: 24px; height: 22px;
line-height: 22px; line-height: 20px;
border-radius: 24px; border-radius: 22px;
vertical-align: middle; vertical-align: middle;
border: 1px solid #ccc; border: 1px solid #ccc;
background-color: #ccc; background-color: #ccc;
@ -18,7 +18,7 @@
color: #fff; color: #fff;
font-size: @font-size-small; font-size: @font-size-small;
position: absolute; position: absolute;
left: 25px; left: 23px;
i { i {
width: 12px; width: 12px;
@ -29,9 +29,9 @@
&:after { &:after {
content: ''; content: '';
width: 20px; width: 18px;
height: 20px; height: 18px;
border-radius: 20px; border-radius: 18px;
background-color: #fff; background-color: #fff;
position: absolute; position: absolute;
left: 1px; left: 1px;
@ -54,14 +54,12 @@
} }
&-small { &-small {
width: 24px; width: 28px;
height: 12px; height: 16px;
line-height: 10px; line-height: 14px;
&:after { &:after {
width: 10px; width: 12px;
height: 10px; height: 12px;
top: 0;
left: 0;
} }
&:active:after { &:active:after {
width: 14px; width: 14px;
@ -69,30 +67,30 @@
} }
&-small&-checked:after { &-small&-checked:after {
left: 12px; left: 13px;
} }
&-small:active&-checked:after { &-small:active&-checked:after {
left: 8px; left: 11px;
} }
&-large{ &-large{
width: 60px; width: 56px;
&:active:after { &:active:after {
width: 26px; width: 26px;
} }
} }
&-large:active:after { &-large:active:after {
width: 32px; width: 30px;
} }
&-large&-checked:after { &-large&-checked:after {
left: 37px; left: 35px;
} }
&-large:active&-checked:after { &-large:active&-checked:after {
left: 25px; left: 23px;
} }
&-checked { &-checked {
@ -100,15 +98,15 @@
background-color: @primary-color; background-color: @primary-color;
.@{switch-prefix-cls}-inner { .@{switch-prefix-cls}-inner {
left: 8px; left: 7px;
} }
&:after { &:after {
left: 25px; left: 23px;
} }
&:active:after { &:active:after {
left: 19px; left: 15px;
} }
} }