diff --git a/docs/src/lib/i18n/zh/switch.js b/docs/src/lib/i18n/zh/switch.js index 3529e47..e56dc8c 100644 --- 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 index 7f2c1e9..4cf24a3 100644 --- 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>