docs(switch): add activeValue

koory1st · Mar 3, 2024 · 8b0c532 · 8b0c532
1 parent 8a653b9
commit 8b0c532
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/docs/src/lib/i18n/zh/switch.js b/docs/src/lib/i18n/zh/switch.js
@@ -12,4 +12,7 @@ export default {
   cswitch05010: '显示自定义图标',
   cswitch05020:
     '使用 activeIcon 和 inactiveIcon slot来添加图标。 使用 inlinePrompt 属性来控制图标显示在点内。',
+  cswitch06010: '扩展的 value 类型',
+  cswitch06020:
+    '你可以设置 activeValue 和 inactiveValue 属性， 它们接受 Boolean、String 或 Number 类型的值。',
 };
diff --git a/docs/src/routes/component/switch/+page.svelte b/docs/src/routes/component/switch/+page.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { SvelSwitch } from '@svelement-ui/all';
+  import { SvelSwitch, SvelTooltip } from '@svelement-ui/all';
   import { Check, Close } from '@svelement-ui/icon';
   import Example from '$lib/example.svelte';
   import { getContext } from 'svelte';
@@ -8,6 +8,8 @@
 
   let value1 = true;
   let value2 = true;
+
+  let value3 = '100';
 </script>
 
 <h1>{$langFn('cswitch01010')}</h1>
@@ -127,5 +129,17 @@
   </SvelSwitch>
 </Example>
 
+<h2>{$langFn('cswitch06010')}</h2>
+<p>{$langFn('cswitch06020')}</p>
+
+<Example
+  code={`
+`}
+>
+  <SvelTooltip content={value3}>
+    <SvelSwitch activeValue="100" bind:value={value3} inactiveValue="0" />
+  </SvelTooltip>
+</Example>
+
 <style>
 </style>