docs(switch): custom icon

koory1st · Mar 7, 2024 · 27294ba · 27294ba
1 parent c0d8606
commit 27294ba
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 3 deletions.
diff --git a/docs/src/lib/i18n/zh/switch.js b/docs/src/lib/i18n/zh/switch.js
@@ -21,4 +21,6 @@ export default {
   cswitch08020: '设置loading属性，接受一个Boolean，设置true即加载中状态。',
   cswitch09010: '阻止切换',
   cswitch09020: '设置beforeChange属性，若返回 false 或者返回 Promise 且被 reject，则停止切换。',
+  cswitch10010: '自定义动作图标',
+  cswitch10020: '使用 activeActionIcon 和 inactiveActionIcon slot来添加图标。',
 };
diff --git a/docs/src/routes/component/switch/+page.svelte b/docs/src/routes/component/switch/+page.svelte
@@ -1,6 +1,6 @@
 <script>
   import { SvelSwitch, SvelTooltip } from '@svelement-ui/all';
-  import { Check, Close } from '@svelement-ui/icon';
+  import { Check, Close, Hide, View } from '@svelement-ui/icon';
   import Example from '$lib/example.svelte';
   import { getContext } from 'svelte';
 
@@ -201,13 +201,51 @@
 
 <Example
   code={`
-  <SvelSwitch bind:value={value5} loading />
-  <SvelSwitch class="ml-2" loading />
+<script>
+  let value6 = false;
+  let loading1;
+  const beforeChange1 = () => {
+    loading1 = true;
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        loading1 = false;
+        return resolve(true);
+      }, 1000);
+    });
+  };
+
+  let value7 = false;
+  let loading2;
+  const beforeChange2 = () => {
+    loading2 = true;
+    return new Promise((_, reject) => {
+      setTimeout(() => {
+        loading2 = false;
+        return reject(new Error('Error'));
+      }, 1000);
+    });
+  };
+@@@/>
+  <SvelSwitch beforeChange={beforeChange1} bind:value={value6} loading={loading1} />
+  <SvelSwitch beforeChange={beforeChange2} bind:value={value7} loading={loading2} />
 `}
 >
   <SvelSwitch beforeChange={beforeChange1} bind:value={value6} loading={loading1} />
   <SvelSwitch beforeChange={beforeChange2} bind:value={value7} loading={loading2} />
 </Example>
 
+<h2>{$langFn('cswitch10010')}</h2>
+<p>{$langFn('cswitch10020')}</p>
+
+<Example
+  code={`
+`}
+>
+  <SvelSwitch>
+    <View slot="activeActionIcon" />
+    <Hide slot="inactiveActionIcon" />
+  </SvelSwitch>
+</Example>
+
 <style>
 </style>