Skip to content

Commit

Permalink
refactor(docs): add spacing for switch example (element-plus#5092)
Browse files Browse the repository at this point in the history
  • Loading branch information
YunYouJun authored Dec 31, 2021
1 parent 2f146e8 commit 59759c9
Show file tree
Hide file tree
Showing 8 changed files with 14 additions and 17 deletions.
8 changes: 0 additions & 8 deletions docs/en-US/component/switch.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,6 @@ lang: en-US

Switch is used for switching between two opposing states.

<style lang="scss">
.example-showcase {
.el-switch + .el-switch {
margin-left: 10px;
}
}
</style>

## Basic usage

:::demo Bind `v-model` to a `Boolean` typed variable. The `active-color` and `inactive-color` attribute decides the background color in two states.
Expand Down
7 changes: 6 additions & 1 deletion docs/examples/switch/basic.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
<template>
<el-switch v-model="value1" />
<el-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949" />
<el-switch
v-model="value2"
class="ml-2"
active-color="#13ce66"
inactive-color="#ff4949"
/>
</template>

<script lang="ts" setup>
Expand Down
1 change: 1 addition & 0 deletions docs/examples/switch/custom-icons.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<br />
<el-switch
v-model="value2"
class="mt-2"
style="margin-left: 24px"
inline-prompt
:active-icon="Check"
Expand Down
2 changes: 1 addition & 1 deletion docs/examples/switch/disabled.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<el-switch v-model="value1" disabled />
<el-switch v-model="value2" />
<el-switch v-model="value2" class="ml-2" />
</template>

<script lang="ts" setup>
Expand Down
2 changes: 1 addition & 1 deletion docs/examples/switch/loading.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<el-switch v-model="value1" loading />
<el-switch v-model="value2" loading />
<el-switch v-model="value2" loading class="ml-2" />
</template>

<script lang="ts" setup>
Expand Down
1 change: 1 addition & 0 deletions docs/examples/switch/prevent-switching.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
/>
<el-switch
v-model="value2"
class="ml-2"
:loading="loading2"
:before-change="beforeChange2"
/>
Expand Down
3 changes: 3 additions & 0 deletions docs/examples/switch/text-description.vue
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
<template>
<el-switch
v-model="value1"
class="mb-2"
active-text="Pay by month"
inactive-text="Pay by year"
>
</el-switch>
<br />
<el-switch
v-model="value2"
class="mb-2"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="Pay by month"
Expand All @@ -18,6 +20,7 @@
</el-switch>
<el-switch
v-model="value4"
class="ml-2"
inline-prompt
active-color="#13ce66"
inactive-color="#ff4949"
Expand Down
7 changes: 1 addition & 6 deletions docs/examples/time-select/time-range.vue
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<div class="demo-time-range">
<el-time-select
v-model="startTime"
class="mr-4"
placeholder="Start time"
start="08:30"
step="00:15"
Expand All @@ -26,9 +27,3 @@ import { ref } from 'vue'
const startTime = ref('')
const endTime = ref('')
</script>

<style>
.demo-time-range .el-select {
margin-right: 8px;
}
</style>

0 comments on commit 59759c9

Please sign in to comment.