refactor(docs): add spacing for switch example (#5092)

docs/en-US/component/switch.md

@@ -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.

docs/examples/switch/basic.vue

@@ -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>

docs/examples/switch/custom-icons.vue

@@ -4,6 +4,7 @@
   <br />
   <el-switch
     v-model="value2"
+    class="mt-2"
     style="margin-left: 24px"
     inline-prompt
     :active-icon="Check"

docs/examples/switch/disabled.vue

@@ -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>

docs/examples/switch/loading.vue

@@ -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>

docs/examples/switch/prevent-switching.vue

@@ -6,6 +6,7 @@
   />
   <el-switch
     v-model="value2"
+    class="ml-2"
     :loading="loading2"
     :before-change="beforeChange2"
   />

docs/examples/switch/text-description.vue

@@ -1,6 +1,7 @@
 <template>
   <el-switch
     v-model="value1"
+    class="mb-2"
     active-text="Pay by month"
     inactive-text="Pay by year"
   >
@@ -8,6 +9,7 @@
   <br />
   <el-switch
     v-model="value2"
+    class="mb-2"
     active-color="#13ce66"
     inactive-color="#ff4949"
     active-text="Pay by month"
@@ -18,6 +20,7 @@
   </el-switch>
   <el-switch
     v-model="value4"
+    class="ml-2"
     inline-prompt
     active-color="#13ce66"
     inactive-color="#ff4949"

docs/examples/time-select/time-range.vue

@@ -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"
@@ -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>