3 rokov pred · a869c26f74
--- a/demo/index.html
+++ b/demo/index.html
@@ -1,17 +1,15 @@
 
				-<!DOCTYPE html>
			
 
				+<!doctype html>
			
 
				 <html>
			
 
				+	<head>
			
 
				+		<meta charset="UTF-8" />
			
 
				+		<link rel="icon" type="image/svg+xml" href="./stdf_dark.svg" media="(prefers-color-scheme: dark)" />
			
 
				+		<link rel="icon" type="image/svg+xml" href="./stdf.svg" media="(prefers-color-scheme: light)" />
			
 
				+		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
			
 
				+		<title>Demo STDF</title>
			
 
				+	</head>
			
 
				 
			
 
				-<head>
			
 
				-    <meta charset="UTF-8" />
			
 
				-    <link rel="icon" type="image/svg+xml" href="./stdf_dark.svg" media="(prefers-color-scheme: dark)" />
			
 
				-    <link rel="icon" type="image/svg+xml" href="./stdf.svg" media="(prefers-color-scheme: light)" />
			
 
				-    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
			
 
				-    <title>Demo STDF</title>
			
 
				-</head>
			
 
				-
			
 
				-<body>
			
 
				-    <div id="app"></div>
			
 
				-    <script type="module" src="/src/main.js"></script>
			
 
				-</body>
			
 
				-
			
 
				-</html>
			
 
				+	<body>
			
 
				+		<div id="app"></div>
			
 
				+		<script type="module" src="/src/main.js"></script>
			
 
				+	</body>
			
 
				+</html>
			
--- a/demo/package.json
+++ b/demo/package.json
@@ -1,97 +1,97 @@
 
				 {
			
 
				-    "name": "demo-stdf",
			
 
				-    "private": true,
			
 
				-    "version": "0.0.0",
			
 
				-    "type": "module",
			
 
				-    "devDependencies": {
			
 
				-        "@sveltejs/vite-plugin-svelte": "^2.4.5",
			
 
				-        "autoprefixer": "^10.4.14",
			
 
				-        "postcss": "^8.4.27",
			
 
				-        "stdf": "file:../packages/stdf",
			
 
				-        "svelte": "^4.1.1",
			
 
				-        "svelte-spa-router": "^3.3.0",
			
 
				-        "tailwindcss": "^3.3.3",
			
 
				-        "vite": "^4.4.6",
			
 
				-        "rollup-plugin-stdf-icon": "file:../packages/rollup-plugin-stdf-icon"
			
 
				-    },
			
 
				-    "scripts": {
			
 
				-        "dev": "vite",
			
 
				-        "build": "vite build",
			
 
				-        "preview": "vite preview",
			
 
				-        "dev_en": "vite --mode english",
			
 
				-        "button": "vite --mode button",
			
 
				-        "icon": "vite --mode icon",
			
 
				-        "navBar": "vite --mode navBar",
			
 
				-        "divider": "vite --mode divider",
			
 
				-        "cell": "vite --mode cell",
			
 
				-        "switch": "vite --mode switch",
			
 
				-        "avatar": "vite --mode avatar",
			
 
				-        "tabs": "vite --mode tabs",
			
 
				-        "tabBar": "vite --mode tabBar",
			
 
				-        "steps": "vite --mode steps",
			
 
				-        "indexBar": "vite --mode indexBar",
			
 
				-        "radio": "vite --mode radio",
			
 
				-        "checkbox": "vite --mode checkbox",
			
 
				-        "input": "vite --mode input",
			
 
				-        "grids": "vite --mode grids",
			
 
				-        "swiper": "vite --mode swiper",
			
 
				-        "placeholder": "vite --mode placeholder",
			
 
				-        "skeleton": "vite --mode skeleton",
			
 
				-        "rate": "vite --mode rate",
			
 
				-        "slider": "vite --mode slider",
			
 
				-        "badge": "vite --mode badge",
			
 
				-        "noticeBar": "vite --mode noticeBar",
			
 
				-        "progress": "vite --mode progress",
			
 
				-        "progressLoop": "vite --mode progressLoop",
			
 
				-        "mask": "vite --mode mask",
			
 
				-        "toast": "vite --mode toast",
			
 
				-        "loading": "vite --mode loading",
			
 
				-        "popup": "vite --mode popup",
			
 
				-        "bottomSheet": "vite --mode bottomSheet",
			
 
				-        "modal": "vite --mode modal",
			
 
				-        "dialog": "vite --mode dialog",
			
 
				-        "actionSheet": "vite --mode actionSheet",
			
 
				-        "picker": "vite --mode picker",
			
 
				-        "asyncPicker": "vite --mode asyncPicker",
			
 
				-        "timePicker": "vite --mode timePicker",
			
 
				-        "calendar": "vite --mode calendar",
			
 
				-        "pagination": "vite --mode pagination",
			
 
				-        "button_en": "vite --mode button_en",
			
 
				-        "icon_en": "vite --mode icon_en",
			
 
				-        "navBar_en": "vite --mode navBar_en",
			
 
				-        "divider_en": "vite --mode divider_en",
			
 
				-        "cell_en": "vite --mode cell_en",
			
 
				-        "switch_en": "vite --mode switch_en",
			
 
				-        "avatar_en": "vite --mode avatar_en",
			
 
				-        "tabs_en": "vite --mode tabs_en",
			
 
				-        "tabBar_en": "vite --mode tabBar_en",
			
 
				-        "steps_en": "vite --mode steps_en",
			
 
				-        "indexBar_en": "vite --mode indexBar_en",
			
 
				-        "radio_en": "vite --mode radio_en",
			
 
				-        "checkbox_en": "vite --mode checkbox_en",
			
 
				-        "input_en": "vite --mode input_en",
			
 
				-        "grids_en": "vite --mode grids_en",
			
 
				-        "swiper_en": "vite --mode swiper_en",
			
 
				-        "placeholder_en": "vite --mode placeholder_en",
			
 
				-        "skeleton_en": "vite --mode skeleton_en",
			
 
				-        "rate_en": "vite --mode rate_en",
			
 
				-        "slider_en": "vite --mode slider_en",
			
 
				-        "badge_en": "vite --mode badge_en",
			
 
				-        "noticeBar_en": "vite --mode noticeBar_en",
			
 
				-        "progress_en": "vite --mode progress_en",
			
 
				-        "progressLoop_en": "vite --mode progressLoop_en",
			
 
				-        "mask_en": "vite --mode mask_en",
			
 
				-        "toast_en": "vite --mode toast_en",
			
 
				-        "loading_en": "vite --mode loading_en",
			
 
				-        "popup_en": "vite --mode popup_en",
			
 
				-        "bottomSheet_en": "vite --mode bottomSheet_en",
			
 
				-        "modal_en": "vite --mode modal_en",
			
 
				-        "dialog_en": "vite --mode dialog_en",
			
 
				-        "actionSheet_en": "vite --mode actionSheet_en",
			
 
				-        "picker_en": "vite --mode picker_en",
			
 
				-        "asyncPicker_en": "vite --mode asyncPicker_en",
			
 
				-        "timePicker_en": "vite --mode timePicker_en",
			
 
				-        "calendar_en": "vite --mode calendar_en",
			
 
				-        "pagination_en": "vite --mode pagination_en"
			
 
				-    }
			
 
				+	"name": "demo-stdf",
			
 
				+	"private": true,
			
 
				+	"version": "0.0.0",
			
 
				+	"type": "module",
			
 
				+	"devDependencies": {
			
 
				+		"@sveltejs/vite-plugin-svelte": "^2.4.5",
			
 
				+		"autoprefixer": "^10.4.14",
			
 
				+		"postcss": "^8.4.27",
			
 
				+		"stdf": "file:../packages/stdf",
			
 
				+		"svelte": "^4.1.1",
			
 
				+		"svelte-spa-router": "^3.3.0",
			
 
				+		"tailwindcss": "^3.3.3",
			
 
				+		"vite": "^4.4.6",
			
 
				+		"rollup-plugin-stdf-icon": "file:../packages/rollup-plugin-stdf-icon"
			
 
				+	},
			
 
				+	"scripts": {
			
 
				+		"dev": "vite",
			
 
				+		"build": "vite build",
			
 
				+		"preview": "vite preview",
			
 
				+		"dev_en": "vite --mode english",
			
 
				+		"button": "vite --mode button",
			
 
				+		"icon": "vite --mode icon",
			
 
				+		"navBar": "vite --mode navBar",
			
 
				+		"divider": "vite --mode divider",
			
 
				+		"cell": "vite --mode cell",
			
 
				+		"switch": "vite --mode switch",
			
 
				+		"avatar": "vite --mode avatar",
			
 
				+		"tabs": "vite --mode tabs",
			
 
				+		"tabBar": "vite --mode tabBar",
			
 
				+		"steps": "vite --mode steps",
			
 
				+		"indexBar": "vite --mode indexBar",
			
 
				+		"radio": "vite --mode radio",
			
 
				+		"checkbox": "vite --mode checkbox",
			
 
				+		"input": "vite --mode input",
			
 
				+		"grids": "vite --mode grids",
			
 
				+		"swiper": "vite --mode swiper",
			
 
				+		"placeholder": "vite --mode placeholder",
			
 
				+		"skeleton": "vite --mode skeleton",
			
 
				+		"rate": "vite --mode rate",
			
 
				+		"slider": "vite --mode slider",
			
 
				+		"badge": "vite --mode badge",
			
 
				+		"noticeBar": "vite --mode noticeBar",
			
 
				+		"progress": "vite --mode progress",
			
 
				+		"progressLoop": "vite --mode progressLoop",
			
 
				+		"mask": "vite --mode mask",
			
 
				+		"toast": "vite --mode toast",
			
 
				+		"loading": "vite --mode loading",
			
 
				+		"popup": "vite --mode popup",
			
 
				+		"bottomSheet": "vite --mode bottomSheet",
			
 
				+		"modal": "vite --mode modal",
			
 
				+		"dialog": "vite --mode dialog",
			
 
				+		"actionSheet": "vite --mode actionSheet",
			
 
				+		"picker": "vite --mode picker",
			
 
				+		"asyncPicker": "vite --mode asyncPicker",
			
 
				+		"timePicker": "vite --mode timePicker",
			
 
				+		"calendar": "vite --mode calendar",
			
 
				+		"pagination": "vite --mode pagination",
			
 
				+		"button_en": "vite --mode button_en",
			
 
				+		"icon_en": "vite --mode icon_en",
			
 
				+		"navBar_en": "vite --mode navBar_en",
			
 
				+		"divider_en": "vite --mode divider_en",
			
 
				+		"cell_en": "vite --mode cell_en",
			
 
				+		"switch_en": "vite --mode switch_en",
			
 
				+		"avatar_en": "vite --mode avatar_en",
			
 
				+		"tabs_en": "vite --mode tabs_en",
			
 
				+		"tabBar_en": "vite --mode tabBar_en",
			
 
				+		"steps_en": "vite --mode steps_en",
			
 
				+		"indexBar_en": "vite --mode indexBar_en",
			
 
				+		"radio_en": "vite --mode radio_en",
			
 
				+		"checkbox_en": "vite --mode checkbox_en",
			
 
				+		"input_en": "vite --mode input_en",
			
 
				+		"grids_en": "vite --mode grids_en",
			
 
				+		"swiper_en": "vite --mode swiper_en",
			
 
				+		"placeholder_en": "vite --mode placeholder_en",
			
 
				+		"skeleton_en": "vite --mode skeleton_en",
			
 
				+		"rate_en": "vite --mode rate_en",
			
 
				+		"slider_en": "vite --mode slider_en",
			
 
				+		"badge_en": "vite --mode badge_en",
			
 
				+		"noticeBar_en": "vite --mode noticeBar_en",
			
 
				+		"progress_en": "vite --mode progress_en",
			
 
				+		"progressLoop_en": "vite --mode progressLoop_en",
			
 
				+		"mask_en": "vite --mode mask_en",
			
 
				+		"toast_en": "vite --mode toast_en",
			
 
				+		"loading_en": "vite --mode loading_en",
			
 
				+		"popup_en": "vite --mode popup_en",
			
 
				+		"bottomSheet_en": "vite --mode bottomSheet_en",
			
 
				+		"modal_en": "vite --mode modal_en",
			
 
				+		"dialog_en": "vite --mode dialog_en",
			
 
				+		"actionSheet_en": "vite --mode actionSheet_en",
			
 
				+		"picker_en": "vite --mode picker_en",
			
 
				+		"asyncPicker_en": "vite --mode asyncPicker_en",
			
 
				+		"timePicker_en": "vite --mode timePicker_en",
			
 
				+		"calendar_en": "vite --mode calendar_en",
			
 
				+		"pagination_en": "vite --mode pagination_en"
			
 
				+	}
			
 
				 }
			
--- a/demo/postcss.config.cjs
+++ b/demo/postcss.config.cjs
@@ -3,5 +3,5 @@ import tailwindConfig from './tailwind.config.cjs';
 
				 import autoprefixer from 'autoprefixer';
			
 
				 
			
 
				 export default {
			
 
				-    plugins: [tailwind(tailwindConfig), autoprefixer],
			
 
				+	plugins: [tailwind(tailwindConfig), autoprefixer],
			
 
				 };
			
--- a/demo/src/App.svelte
+++ b/demo/src/App.svelte
@@ -1,108 +1,108 @@
 
				 <script>
			
 
				-    import { setContext, onMount } from 'svelte';
			
 
				-    import Router, { querystring, location, push } from 'svelte-spa-router';
			
 
				-    import { routes, routes_en } from './route';
			
 
				-    import { NavBar, Icon } from 'stdf';
			
 
				-    import zh_CN from 'stdf/lang/zh_CN';
			
 
				-    import en_US from 'stdf/lang/en_US';
			
 
				-    import menuList from './data/menuList';
			
 
				+	import { setContext, onMount } from 'svelte';
			
 
				+	import Router, { querystring, location, push } from 'svelte-spa-router';
			
 
				+	import { routes, routes_en } from './route';
			
 
				+	import { NavBar, Icon } from 'stdf';
			
 
				+	import zh_CN from 'stdf/lang/zh_CN';
			
 
				+	import en_US from 'stdf/lang/en_US';
			
 
				+	import menuList from './data/menuList';
			
 
				 
			
 
				-    // 循环 menuList，将所有元素的 childs 组成一个数组
			
 
				-    // Cycle menuList, and combine the childs of all elements into an array
			
 
				-    const menuListArr = menuList.reduce((acc, cur) => {
			
 
				-        if (cur.childs) {
			
 
				-            acc.push(...cur.childs);
			
 
				-        }
			
 
				-        return acc;
			
 
				-    }, []);
			
 
				-    //获取参数
			
 
				-    // get parameters
			
 
				-    const params = new URLSearchParams('?' + $querystring);
			
 
				-    // 判断是否是iframe
			
 
				-    // judge whether it is iframe
			
 
				-    const isIframe = params.get('channel') && params.get('channel') === 'iframe' ? '1' : '0';
			
 
				-    // 设置iframe
			
 
				-    // setting iframe
			
 
				-    setContext('iframe', isIframe);
			
 
				-    let theme = localStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
			
 
				-    // 设置语言
			
 
				-    // setting language
			
 
				-    const isZh = sessionStorage.getItem('lang') === 'zh_CN';
			
 
				-    setContext('STDF_lang', isZh ? zh_CN : en_US);
			
 
				-    $: showLeft = isIframe === '1' ? false : $location !== '/';
			
 
				-    //手动切换主题
			
 
				-    // manually switch theme
			
 
				-    const toggleFun = () => {
			
 
				-        if (theme === 'dark') {
			
 
				-            // 切换到light
			
 
				-            // switch to light
			
 
				-            theme = 'light';
			
 
				-            localStorage.setItem('theme', 'light');
			
 
				-            document.documentElement.classList.remove('dark');
			
 
				-        } else {
			
 
				-            // 切换到dark
			
 
				-            // switch to dark
			
 
				-            theme = 'dark';
			
 
				-            localStorage.setItem('theme', 'dark');
			
 
				-            document.documentElement.classList.add('dark');
			
 
				-        }
			
 
				-    };
			
 
				-    // 返回首页
			
 
				-    // return to home
			
 
				-    const toHomeFun = () => {
			
 
				-        push(`/`);
			
 
				-    };
			
 
				-    const mode = import.meta.env.MODE;
			
 
				-    // 判断 mode 后三个字符是否是 _en
			
 
				-    // Determine whether the last three characters of mode are _en
			
 
				-    const englishMode = mode.slice(-3) === '_en';
			
 
				-    onMount(() => {
			
 
				-        if (mode != 'production' && mode != 'development' && mode != 'english') {
			
 
				-            // 英文模式去掉 mode 后面的 _en 作为 nav
			
 
				-            // English mode removes _en after mode as nav
			
 
				-            const nav = englishMode ? mode.slice(0, -3) : mode;
			
 
				-            push(`/${nav}`);
			
 
				-        }
			
 
				-    });
			
 
				+	// 循环 menuList，将所有元素的 childs 组成一个数组
			
 
				+	// Cycle menuList, and combine the childs of all elements into an array
			
 
				+	const menuListArr = menuList.reduce((acc, cur) => {
			
 
				+		if (cur.childs) {
			
 
				+			acc.push(...cur.childs);
			
 
				+		}
			
 
				+		return acc;
			
 
				+	}, []);
			
 
				+	//获取参数
			
 
				+	// get parameters
			
 
				+	const params = new URLSearchParams('?' + $querystring);
			
 
				+	// 判断是否是iframe
			
 
				+	// judge whether it is iframe
			
 
				+	const isIframe = params.get('channel') && params.get('channel') === 'iframe' ? '1' : '0';
			
 
				+	// 设置iframe
			
 
				+	// setting iframe
			
 
				+	setContext('iframe', isIframe);
			
 
				+	let theme = localStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
			
 
				+	// 设置语言
			
 
				+	// setting language
			
 
				+	const isZh = sessionStorage.getItem('lang') === 'zh_CN';
			
 
				+	setContext('STDF_lang', isZh ? zh_CN : en_US);
			
 
				+	$: showLeft = isIframe === '1' ? false : $location !== '/';
			
 
				+	//手动切换主题
			
 
				+	// manually switch theme
			
 
				+	const toggleFun = () => {
			
 
				+		if (theme === 'dark') {
			
 
				+			// 切换到light
			
 
				+			// switch to light
			
 
				+			theme = 'light';
			
 
				+			localStorage.setItem('theme', 'light');
			
 
				+			document.documentElement.classList.remove('dark');
			
 
				+		} else {
			
 
				+			// 切换到dark
			
 
				+			// switch to dark
			
 
				+			theme = 'dark';
			
 
				+			localStorage.setItem('theme', 'dark');
			
 
				+			document.documentElement.classList.add('dark');
			
 
				+		}
			
 
				+	};
			
 
				+	// 返回首页
			
 
				+	// return to home
			
 
				+	const toHomeFun = () => {
			
 
				+		push(`/`);
			
 
				+	};
			
 
				+	const mode = import.meta.env.MODE;
			
 
				+	// 判断 mode 后三个字符是否是 _en
			
 
				+	// Determine whether the last three characters of mode are _en
			
 
				+	const englishMode = mode.slice(-3) === '_en';
			
 
				+	onMount(() => {
			
 
				+		if (mode != 'production' && mode != 'development' && mode != 'english') {
			
 
				+			// 英文模式去掉 mode 后面的 _en 作为 nav
			
 
				+			// English mode removes _en after mode as nav
			
 
				+			const nav = englishMode ? mode.slice(0, -3) : mode;
			
 
				+			push(`/${nav}`);
			
 
				+		}
			
 
				+	});
			
 
				 </script>
			
 
				 
			
 
				 <main class="bg-gray9 dark:bg-gray3 text-black dark:text-white/90 relative min-h-screen text-justify w-screen antialiased">
			
 
				-    <div class="sticky z-10 top-0">
			
 
				-        <NavBar
			
 
				-            left={showLeft ? 'back' : ''}
			
 
				-            title={$location === '/'
			
 
				-                ? isZh
			
 
				-                    ? 'STDF 示例'
			
 
				-                    : 'STDF Demo'
			
 
				-                : menuListArr.filter(item => item.nav === $location.substring(1))[0][isZh ? 'title_zh' : 'title_en'] +
			
 
				-                  (isZh ? '示例' : ' Demo')}
			
 
				-            rightSlot
			
 
				-            on:clickleft={toHomeFun}
			
 
				-            injClass="bg-white/60 dark:bg-gray1/60 backdrop-blur"
			
 
				-        >
			
 
				-            <div slot="right" class="flex text-center">
			
 
				-                {#if isIframe === '0'}
			
 
				-                    <div class="h-12 w-10 leading-10">
			
 
				-                        <a href="https://github.com/dufu1991/stdf" target="_blank" rel="noreferrer">
			
 
				-                            <Icon name="ri-github-fill" />
			
 
				-                        </a>
			
 
				-                    </div>
			
 
				-                    <div class="h-12 w-10 leading-10">
			
 
				-                        <a
			
 
				-                            href={`https://stdf.design${$location === '/' ? '' : `/#/components?nav=${$location.substring(1)}&tab=0`}`}
			
 
				-                            target="_blank"
			
 
				-                            rel="noreferrer"
			
 
				-                        >
			
 
				-                            <Icon name="ri-compass-line" />
			
 
				-                        </a>
			
 
				-                    </div>
			
 
				-                {/if}
			
 
				-                <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-                <div class="h-12 w-10 leading-10" on:click={toggleFun}>
			
 
				-                    <Icon name={theme === 'dark' ? 'ri-moon-fill' : 'ri-sun-line'} theme={true} />
			
 
				-                </div>
			
 
				-            </div>
			
 
				-        </NavBar>
			
 
				-    </div>
			
 
				-    <Router routes={isZh ? routes : routes_en} />
			
 
				+	<div class="sticky z-10 top-0">
			
 
				+		<NavBar
			
 
				+			left={showLeft ? 'back' : ''}
			
 
				+			title={$location === '/'
			
 
				+				? isZh
			
 
				+					? 'STDF 示例'
			
 
				+					: 'STDF Demo'
			
 
				+				: menuListArr.filter(item => item.nav === $location.substring(1))[0][isZh ? 'title_zh' : 'title_en'] + (isZh ? '示例' : ' Demo')}
			
 
				+			rightSlot
			
 
				+			on:clickleft={toHomeFun}
			
 
				+			injClass="bg-white/60 dark:bg-gray1/60 backdrop-blur"
			
 
				+		>
			
 
				+			<div slot="right" class="flex text-center">
			
 
				+				{#if isIframe === '0'}
			
 
				+					<div class="h-12 w-10 leading-10">
			
 
				+						<a href="https://github.com/dufu1991/stdf" target="_blank" rel="noreferrer">
			
 
				+							<Icon name="ri-github-fill" />
			
 
				+						</a>
			
 
				+					</div>
			
 
				+					<div class="h-12 w-10 leading-10">
			
 
				+						<a
			
 
				+							href={`https://stdf.design${$location === '/' ? '' : `/#/components?nav=${$location.substring(1)}&tab=0`}`}
			
 
				+							target="_blank"
			
 
				+							rel="noreferrer"
			
 
				+						>
			
 
				+							<Icon name="ri-compass-line" />
			
 
				+						</a>
			
 
				+					</div>
			
 
				+				{/if}
			
 
				+				<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+				<!-- svelte-ignore a11y-no-static-element-interactions -->
			
 
				+				<div class="h-12 w-10 leading-10" on:click={toggleFun}>
			
 
				+					<Icon name={theme === 'dark' ? 'ri-moon-fill' : 'ri-sun-line'} theme={true} />
			
 
				+				</div>
			
 
				+			</div>
			
 
				+		</NavBar>
			
 
				+	</div>
			
 
				+	<Router routes={isZh ? routes : routes_en} />
			
 
				 </main>
			
--- a/demo/src/app.css
+++ b/demo/src/app.css
@@ -3,32 +3,32 @@
 
				 @tailwind utilities;
			
 
				 
			
 
				 *::-webkit-scrollbar {
			
 
				-    width: 6px;
			
 
				+	width: 6px;
			
 
				 }
			
 
				 *::-webkit-scrollbar-thumb {
			
 
				-    border-radius: 3px;
			
 
				-    background-color: rgba(133, 133, 133, 0.3);
			
 
				+	border-radius: 3px;
			
 
				+	background-color: rgba(133, 133, 133, 0.3);
			
 
				 }
			
 
				 *::-webkit-scrollbar-track {
			
 
				-    background-color: rgba(133, 133, 133, 0.1);
			
 
				+	background-color: rgba(133, 133, 133, 0.1);
			
 
				 }
			
 
				 
			
 
				 html {
			
 
				-    overflow-y: overlay;
			
 
				-    -webkit-tap-highlight-color: transparent;
			
 
				-    scrollbar-width: none; /* Firefox */
			
 
				+	overflow-y: overlay;
			
 
				+	-webkit-tap-highlight-color: transparent;
			
 
				+	scrollbar-width: none; /* Firefox */
			
 
				 }
			
 
				 body::-webkit-scrollbar {
			
 
				-    display: none;
			
 
				+	display: none;
			
 
				 }
			
 
				 body {
			
 
				-    -ms-overflow-style: none;
			
 
				+	-ms-overflow-style: none;
			
 
				 }
			
 
				 
			
 
				 * {
			
 
				-    -webkit-overflow-scrolling: touch;
			
 
				+	-webkit-overflow-scrolling: touch;
			
 
				 }
			
 
				 
			
 
				 button:focus {
			
 
				-    outline: none;
			
 
				+	outline: none;
			
 
				 }
			
--- a/demo/src/components/Aphorism.svelte
+++ b/demo/src/components/Aphorism.svelte
@@ -1,26 +1,26 @@
 
				 <script>
			
 
				-    // 引入数据
			
 
				-    // import data
			
 
				-    import aphorisms from '../data/aphorisms';
			
 
				+	// 引入数据
			
 
				+	// import data
			
 
				+	import aphorisms from '../data/aphorisms';
			
 
				 
			
 
				-    // 显示条数
			
 
				-    // number of items to display
			
 
				-    export let num = 0;
			
 
				+	// 显示条数
			
 
				+	// number of items to display
			
 
				+	export let num = 0;
			
 
				 
			
 
				-    // 是否紧凑模式
			
 
				-    // whether to use compact mode
			
 
				-    export let compact = false;
			
 
				+	// 是否紧凑模式
			
 
				+	// whether to use compact mode
			
 
				+	export let compact = false;
			
 
				 
			
 
				-    // 从 aphorisms 随机取出 num 条数据
			
 
				-    // get num items from aphorisms randomly
			
 
				-    const aphorismsList = aphorisms.sort(() => Math.random() - 0.5).slice(0, num);
			
 
				+	// 从 aphorisms 随机取出 num 条数据
			
 
				+	// get num items from aphorisms randomly
			
 
				+	const aphorismsList = aphorisms.sort(() => Math.random() - 0.5).slice(0, num);
			
 
				 </script>
			
 
				 
			
 
				 <div class={`${compact ? '' : 'px-4 py-8 '}divide-y divide-black/5 dark:divide-white/5`}>
			
 
				-    {#each aphorismsList as item}
			
 
				-        <div class:py-6={num > 1}>
			
 
				-            <div class="text-sm text-justify">{item.text}</div>
			
 
				-            <div class="text-right mt-1" class:italic={item.fromItalic}>{item.from}</div>
			
 
				-        </div>
			
 
				-    {/each}
			
 
				+	{#each aphorismsList as item}
			
 
				+		<div class:py-6={num > 1}>
			
 
				+			<div class="text-sm text-justify">{item.text}</div>
			
 
				+			<div class="text-right mt-1" class:italic={item.fromItalic}>{item.from}</div>
			
 
				+		</div>
			
 
				+	{/each}
			
 
				 </div>
			
--- a/demo/src/data/aphorisms.js
+++ b/demo/src/data/aphorisms.js
@@ -1,50 +1,50 @@
 
				 export default [
			
 
				-    // 中文
			
 
				-    { text: '爱是永恒不变的力量，能够超越所有维度，当我归来，你已垂暮，我一次呼吸划过了你一辈子的岁月。', from: '—— 《星际穿越》' },
			
 
				-    { text: '爱一朵花不猜它能开多久，放宽了心情，把什么都变美了。', from: '—— 郭静《在树上唱歌》' },
			
 
				-    { text: '不是所有的坚持都有结果，但是总有一些坚持，能从一寸冰封的土地里，培育出十万朵怒放的蔷薇。', from: '—— 八月长安《最好的我们》' },
			
 
				-    { text: '当没有任何一个人信任你的时候，沉默和坚持就是最好的反击和证明。', from: '—— 《沉默的羔羊》' },
			
 
				-    { text: '既不回头，何必不忘。既然无缘，何需誓言。今日种种，似水无痕。明夕何夕，君已陌路。', from: '—— 《仙剑奇侠传一》' },
			
 
				-    { text: '记忆是相见的另一种方式。', from: '—— 纪伯伦' },
			
 
				-    { text: '没有值得不值得，只有愿意不愿意。', from: '—— 彩衣' },
			
 
				-    { text: '每朵云都下落不明，每盏月亮都不知所踪。', from: '—— 八月长安《暗恋》' },
			
 
				-    { text: '让人类永远保持理智，是一种奢求。', from: '—— MOSS' },
			
 
				-    { text: '生命的闪耀不坚持到底怎能看到 ，与其苟延残喘不如纵情燃烧 。', from: '—— 《追梦赤子心》' },
			
 
				-    { text: '生活坏到一定程度就会好起来，因为它无法更坏，努力过后，才知道许多事情，坚持坚持，就过来了。', from: '—— 宫崎骏《千与千寻》' },
			
 
				-    {
			
 
				-        text: '我每天醒在鸟声里。我从梦里就听到鸟叫，直到我醒来。我听得出几种极熟悉的叫声，那是每天都叫的，似乎每天都在那个固定的枝头。',
			
 
				-        from: '—— 汪曾祺',
			
 
				-    },
			
 
				-    { text: '我相信人类的勇气可以跨越时间，跨越当下，跨越未来。', from: '—— 《流浪地球2》' },
			
 
				-    {
			
 
				-        text: '于千万人之中遇见你所要遇见的人，于千万年之中，时间的无涯的荒野里，没有早一步，也没有晚一步，刚巧赶上了，那也没有别的话可说，惟有轻轻地问一声：“噢，你也在这里吗？”',
			
 
				-        from: '—— 张爱玲《爱》',
			
 
				-    },
			
 
				-    { text: '御剑乘风来，除魔天地间，有酒乐逍遥，无酒我亦癫。一饮尽江河，再饮吞日月，千杯醉不倒，唯我酒剑仙。', from: '—— 酒剑仙' },
			
 
				-    { text: '最美的不是下雨天，是曾与你躲过雨的屋檐。', from: '—— 周杰伦《不能说的秘密》' },
			
 
				-    // English
			
 
				-    { text: 'All the splendor in the world is not worth a good friend.', from: '— Voltaire' },
			
 
				-    { text: 'Continuous labor is the life of the iron law, also the art of iron.', from: '— Balzac' },
			
 
				-    {
			
 
				-        text: 'Do not go gentle into that good night; Old age should burn and rave at close of day. Rage, rage against the dying of the light.',
			
 
				-        from: '— Dylan Thomas',
			
 
				-    },
			
 
				-    {
			
 
				-        text: 'Hope is a good thing, maybe the best of things and no good thing ever dies.',
			
 
				-        from: '— The Shawshank Redemption',
			
 
				-        fromItalic: true,
			
 
				-    },
			
 
				-    { text: 'Honesty and diligence should be your eternal mates.', from: '— Franklin' },
			
 
				-    { text: 'If a man deceives me once, shame on him; if twice,shame on me.', from: '— John Ray' },
			
 
				-    { text: 'Life is a kind of endless yearning, eager to continue to rise, become more great and noble.', from: '— Du Charm' },
			
 
				-    { text: 'The best way to find yourself is to lose yourself in the service of others.', from: '— Gandhi' },
			
 
				-    { text: 'The best way to cheer yourself up is to try to cheer somebody else up.', from: '— Mark Twain' },
			
 
				-    {
			
 
				-        text: 'The body is always in the end. In addition to thinking, there is no beautiful and interesting things to stay, because thought is life.',
			
 
				-        from: '— Bernard Shaw',
			
 
				-    },
			
 
				-    {
			
 
				-        text: "We should not be at any price to keep our friendship, so that it is defiled. If you have to sacrifice friendship for that great love, that's no way to do it; but if you can keep it, it will be a perfect state.",
			
 
				-        from: '— Tagore',
			
 
				-    },
			
 
				+	// 中文
			
 
				+	{ text: '爱是永恒不变的力量，能够超越所有维度，当我归来，你已垂暮，我一次呼吸划过了你一辈子的岁月。', from: '—— 《星际穿越》' },
			
 
				+	{ text: '爱一朵花不猜它能开多久，放宽了心情，把什么都变美了。', from: '—— 郭静《在树上唱歌》' },
			
 
				+	{ text: '不是所有的坚持都有结果，但是总有一些坚持，能从一寸冰封的土地里，培育出十万朵怒放的蔷薇。', from: '—— 八月长安《最好的我们》' },
			
 
				+	{ text: '当没有任何一个人信任你的时候，沉默和坚持就是最好的反击和证明。', from: '—— 《沉默的羔羊》' },
			
 
				+	{ text: '既不回头，何必不忘。既然无缘，何需誓言。今日种种，似水无痕。明夕何夕，君已陌路。', from: '—— 《仙剑奇侠传一》' },
			
 
				+	{ text: '记忆是相见的另一种方式。', from: '—— 纪伯伦' },
			
 
				+	{ text: '没有值得不值得，只有愿意不愿意。', from: '—— 彩衣' },
			
 
				+	{ text: '每朵云都下落不明，每盏月亮都不知所踪。', from: '—— 八月长安《暗恋》' },
			
 
				+	{ text: '让人类永远保持理智，是一种奢求。', from: '—— MOSS' },
			
 
				+	{ text: '生命的闪耀不坚持到底怎能看到 ，与其苟延残喘不如纵情燃烧 。', from: '—— 《追梦赤子心》' },
			
 
				+	{ text: '生活坏到一定程度就会好起来，因为它无法更坏，努力过后，才知道许多事情，坚持坚持，就过来了。', from: '—— 宫崎骏《千与千寻》' },
			
 
				+	{
			
 
				+		text: '我每天醒在鸟声里。我从梦里就听到鸟叫，直到我醒来。我听得出几种极熟悉的叫声，那是每天都叫的，似乎每天都在那个固定的枝头。',
			
 
				+		from: '—— 汪曾祺',
			
 
				+	},
			
 
				+	{ text: '我相信人类的勇气可以跨越时间，跨越当下，跨越未来。', from: '—— 《流浪地球2》' },
			
 
				+	{
			
 
				+		text: '于千万人之中遇见你所要遇见的人，于千万年之中，时间的无涯的荒野里，没有早一步，也没有晚一步，刚巧赶上了，那也没有别的话可说，惟有轻轻地问一声：“噢，你也在这里吗？”',
			
 
				+		from: '—— 张爱玲《爱》',
			
 
				+	},
			
 
				+	{ text: '御剑乘风来，除魔天地间，有酒乐逍遥，无酒我亦癫。一饮尽江河，再饮吞日月，千杯醉不倒，唯我酒剑仙。', from: '—— 酒剑仙' },
			
 
				+	{ text: '最美的不是下雨天，是曾与你躲过雨的屋檐。', from: '—— 周杰伦《不能说的秘密》' },
			
 
				+	// English
			
 
				+	{ text: 'All the splendor in the world is not worth a good friend.', from: '— Voltaire' },
			
 
				+	{ text: 'Continuous labor is the life of the iron law, also the art of iron.', from: '— Balzac' },
			
 
				+	{
			
 
				+		text: 'Do not go gentle into that good night; Old age should burn and rave at close of day. Rage, rage against the dying of the light.',
			
 
				+		from: '— Dylan Thomas',
			
 
				+	},
			
 
				+	{
			
 
				+		text: 'Hope is a good thing, maybe the best of things and no good thing ever dies.',
			
 
				+		from: '— The Shawshank Redemption',
			
 
				+		fromItalic: true,
			
 
				+	},
			
 
				+	{ text: 'Honesty and diligence should be your eternal mates.', from: '— Franklin' },
			
 
				+	{ text: 'If a man deceives me once, shame on him; if twice,shame on me.', from: '— John Ray' },
			
 
				+	{ text: 'Life is a kind of endless yearning, eager to continue to rise, become more great and noble.', from: '— Du Charm' },
			
 
				+	{ text: 'The best way to find yourself is to lose yourself in the service of others.', from: '— Gandhi' },
			
 
				+	{ text: 'The best way to cheer yourself up is to try to cheer somebody else up.', from: '— Mark Twain' },
			
 
				+	{
			
 
				+		text: 'The body is always in the end. In addition to thinking, there is no beautiful and interesting things to stay, because thought is life.',
			
 
				+		from: '— Bernard Shaw',
			
 
				+	},
			
 
				+	{
			
 
				+		text: "We should not be at any price to keep our friendship, so that it is defiled. If you have to sacrifice friendship for that great love, that's no way to do it; but if you can keep it, it will be a perfect state.",
			
 
				+		from: '— Tagore',
			
 
				+	},
			
 
				 ];
			
--- a/demo/src/data/menuList.js
+++ b/demo/src/data/menuList.js
@@ -1,371 +1,383 @@
 
				 export default [
			
 
				-    {
			
 
				-        class: '通用',
			
 
				-        class_en: 'Universal',
			
 
				-        childs: [
			
 
				-            {
			
 
				-                title: '按钮 Button',
			
 
				-                title_zh: '按钮',
			
 
				-                title_en: 'Button',
			
 
				-                nav: 'button',
			
 
				-                tip: '按下它，让世界变得更美好吧。',
			
 
				-                tip_en: 'Press it and make the world a better place.',
			
 
				-                alias: 'button|按钮',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '底部浮窗 BottomSheet',
			
 
				-                title_zh: '底部浮窗',
			
 
				-                title_en: 'BottomSheet',
			
 
				-                nav: 'bottomSheet',
			
 
				-                tip: '浮窗犹如小偷，突然出现让你焦灼，却也能唤起你的警觉。',
			
 
				-                tip_en: 'The floating window is like a thief, suddenly appearing to make you anxious, but it can also arouse your alertness.',
			
 
				-                alias: 'bottomSheet|底部浮窗|底部|底|部|浮窗|bottomSheet底部浮窗|bottomSheet 底部浮窗|底部弹窗|bottomSheet底部弹窗|bottomSheet 底部弹窗|底部弹出框|bottomSheet底部弹出框|bottomSheet 底部弹出框|底部弹出层|bottomSheet底部弹出层|bottomSheet 底部弹出层',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '图标 Icon',
			
 
				-                title_zh: '图标',
			
 
				-                title_en: 'Icon',
			
 
				-                nav: 'icon',
			
 
				-                tip: '使用 SVG Sprites，请参照指南引入与使用。',
			
 
				-                tip_en: 'Use SVG Sprites, please refer to the guide to import and use.',
			
 
				-                alias: 'icon|图标|svg',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '遮罩 Mask',
			
 
				-                title_zh: '遮罩',
			
 
				-                title_en: 'Mask',
			
 
				-                nav: 'mask',
			
 
				-                tip: '遮罩虽能掩盖身形，却无法掩藏内心。',
			
 
				-                tip_en: 'Although the mask can cover the figure, it cannot hide the heart.',
			
 
				-                alias: 'mask|遮罩|遮|罩|mask遮罩|mask 遮罩|遮罩层|mask遮罩层|mask 遮罩层|Overlay|maskOverlay|mask Overlay',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '弹出层 Popup',
			
 
				-                title_zh: '弹出层',
			
 
				-                title_en: 'Popup',
			
 
				-                nav: 'popup',
			
 
				-                tip: '机会就像弹珠，只有你努力地推它，它才会弹出来。',
			
 
				-                tip_en: 'Opportunity is like a marble, only if you push it hard, it will pop out.',
			
 
				-                alias: 'popup|弹出层|弹出|弹|出|层|popup弹出层|popup 弹出层|弹窗|popup弹窗|popup 弹窗|弹出框|popup弹出框|popup 弹出框|弹出层|popup弹出层|popup 弹出层',
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        class: '布局',
			
 
				-        class_en: 'Layout',
			
 
				-        childs: [
			
 
				-            {
			
 
				-                title: '分割线 Divider',
			
 
				-                title_zh: '分割线',
			
 
				-                title_en: 'Divider',
			
 
				-                nav: 'divider',
			
 
				-                tip: '分开的日子越久，最初的喜悦越发淡薄。',
			
 
				-                tip_en: 'The longer the days are separated, the more the initial joy fades.',
			
 
				-                alias: 'divider|分割线|分割|line',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '网格 Grids',
			
 
				-                title_zh: '网格',
			
 
				-                title_en: 'Grids',
			
 
				-                nav: 'grids',
			
 
				-                tip: '可是怎么说，总觉得，我们之间留了太多空白格。',
			
 
				-                tip_en: 'How can I say, I always feel that there are too many blank grids between us.',
			
 
				-                alias: 'grids|网格|grid|row|col|column',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '占位符 Placeholder',
			
 
				-                title_zh: '占位符',
			
 
				-                title_en: 'Placeholder',
			
 
				-                nav: 'placeholder',
			
 
				-                tip: '人生重要的不是所站的位置，而是所朝的方向。',
			
 
				-                tip_en: 'What is important in life is not the position you stand, but the direction you face.',
			
 
				-                alias: 'placeholder|占位符|占位',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '骨架屏 Skeleton',
			
 
				-                title_zh: '骨架屏',
			
 
				-                title_en: 'Skeleton',
			
 
				-                nav: 'skeleton',
			
 
				-                tip: '骨架是支撑身体的关键，而人生信念则是支撑生命的骨架。',
			
 
				-                tip_en: 'The skeleton is the key to supporting the body, and the belief in life is the skeleton that supports life.',
			
 
				-                alias: 'skeleton|骨架屏|骨架',
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        class: '导航',
			
 
				-        class_en: 'Navigation',
			
 
				-        childs: [
			
 
				-            {
			
 
				-                title: '索引栏 IndexBar',
			
 
				-                title_zh: '索引栏',
			
 
				-                title_en: 'IndexBar',
			
 
				-                nav: 'indexBar',
			
 
				-                tip: '你不迷途知返，我怎么给你以索引？',
			
 
				-                tip_en: "If you don't know the way back, how can I give you an index?",
			
 
				-                alias: 'indexBar|索引栏|indexbar|index|bar|索引|index 栏|索引条|index条|index 条',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '导航栏 NavBar',
			
 
				-                title_zh: '导航栏',
			
 
				-                title_en: 'NavBar',
			
 
				-                nav: 'navBar',
			
 
				-                tip: '没有指引，在黑暗中只能乱撞。',
			
 
				-                tip_en: 'Without guidance, you can only bump in the dark.',
			
 
				-                alias: 'navBar|导航栏|navbar|nav|bar|导航|nav-bar|nav bar',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '分页 Pagination',
			
 
				-                title_zh: '分页',
			
 
				-                title_en: 'Pagination',
			
 
				-                nav: 'pagination',
			
 
				-                tip: '人生就像一部电影，不论多么精彩，也有谢幕的时候。',
			
 
				-                tip_en: 'Life is like a movie, no matter how wonderful it is, there is a curtain call.',
			
 
				-                alias: 'pagination|分页|page|分|页|pagination分页|pagination 分页|page分页|page 分页',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '步骤条 Steps',
			
 
				-                title_zh: '步骤条',
			
 
				-                title_en: 'Steps',
			
 
				-                nav: 'steps',
			
 
				-                tip: '人生没有白走的路，每一步都算数。',
			
 
				-                tip_en: 'Life has no wasted steps, every step counts.',
			
 
				-                alias: 'steps|step|步骤条|步骤|step条|step 条|步骤栏|step栏|step 栏',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '标签栏 TabBar',
			
 
				-                title_zh: '标签栏',
			
 
				-                title_en: 'TabBar',
			
 
				-                nav: 'tabBar',
			
 
				-                tip: '看脚下一片黑暗，望头顶星光璀璨。',
			
 
				-                tip_en: "Looking down, it's all darkness; looking up, the stars are shining brightly.",
			
 
				-                alias: 'tabBar|标签栏|tabbar|tab|bar|标签|tab 栏',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '标签页 Tabs',
			
 
				-                title_zh: '标签页',
			
 
				-                title_en: 'Tabs',
			
 
				-                nav: 'tabs',
			
 
				-                tip: '偶尔隐藏，是为了在合适的时候更好地绽放。',
			
 
				-                tip_en: 'Occasionally hide, it is to bloom better at the right time.',
			
 
				-                alias: 'tabs|tab|标签页|标签|tab页',
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        class: '数据输入',
			
 
				-        class_en: 'Data entry',
			
 
				-        childs: [
			
 
				-            {
			
 
				-                title: '动作面板 ActionSheet',
			
 
				-                title_zh: '动作面板',
			
 
				-                title_en: 'ActionSheet',
			
 
				-                nav: 'actionSheet',
			
 
				-                tip: '我的世界只有一个选项，就是你。',
			
 
				-                tip_en: 'There is only one option in my world, and that is you.',
			
 
				-                alias: 'actionSheet|动作面板|动作|动|作|面板|actionSheet动作面板|actionSheet 动作面板|动作面板|actionSheet动作面板|actionSheet 动作面板|动作面板|actionSheet动作面板|actionSheet 动作面板',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '异步选择器 AsyncPicker',
			
 
				-                title_zh: '异步选择器',
			
 
				-                title_en: 'AsyncPicker',
			
 
				-                nav: 'asyncPicker',
			
 
				-                tip: '错过的话，就请错过一辈子吧！',
			
 
				-                tip_en: 'If you miss it, please miss it for a lifetime!',
			
 
				-                alias: 'asyncPicker|异步选择器|异步|asyncPicker异步选择器|asyncPicker 异步选择器|async picker|asyncpicker|异步picker|异步picker',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '日历 Calendar',
			
 
				-                title_zh: '日历',
			
 
				-                title_en: 'Calendar',
			
 
				-                nav: 'calendar',
			
 
				-                tip: '在无人问津日子里，正是登峰造极的好时机。',
			
 
				-                tip_en: 'In the days when no one cares, it is a good time to reach the peak.',
			
 
				-                alias: 'calendar|日历|日|历|calendar日历|calendar 日历|日期|calendar日期|calendar 日期|周选择|calendar周选择|calendar 周选择|周|calendar周|calendar 周|日期区间|月选择|日期范围选择',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '复选框 Checkbox',
			
 
				-                title_zh: '复选框',
			
 
				-                title_en: 'Checkbox',
			
 
				-                nav: 'checkbox',
			
 
				-                tip: '要么全不，要么全部。',
			
 
				-                tip_en: 'Either all or none.',
			
 
				-                alias: 'checkbox|复选框|复选|checkbox复选框|checkbox 复选框|复选按钮|checkbox复选按钮|checkbox 复选按钮|多选框|多选|checkbox多选框|checkbox 多选框|多选按钮|checkbox多选按钮|checkbox 多选按钮',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '输入框 Input',
			
 
				-                title_zh: '输入框',
			
 
				-                title_en: 'Input',
			
 
				-                nav: 'input',
			
 
				-                tip: '对方正在输入......',
			
 
				-                tip_en: 'The other party is typing...',
			
 
				-                alias: 'input|输入框|输入|input输入框|input 输入框|Textarea|textarea|文本域|文本框|文本|textarea文本域|textarea 文本域|多行输入框|多行输入|多行|textarea多行输入框|textarea 多行输入框',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '选择器 Picker',
			
 
				-                title_zh: '选择器',
			
 
				-                title_en: 'Picker',
			
 
				-                nav: 'picker',
			
 
				-                tip: '采摘花瓣时，你得不到花的美丽。',
			
 
				-                tip_en: 'When you pick petals, you don’t get the beauty of the flower.',
			
 
				-                alias: 'picker|选择器|选择|picker选择器|picker 选择器',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '单选框 Radio',
			
 
				-                title_zh: '单选框',
			
 
				-                title_en: 'Radio',
			
 
				-                nav: 'radio',
			
 
				-                tip: '如果要在正确和善良中选择一个，请选择善良。',
			
 
				-                tip_en: 'If you have to choose between right and good, choose good.',
			
 
				-                alias: 'radio|单选框|单选|radio单选框|radio 单选框|单选按钮|radio单选按钮|radio 单选按钮',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '评分 Rate',
			
 
				-                title_zh: '评分',
			
 
				-                title_en: 'Rate',
			
 
				-                nav: 'rate',
			
 
				-                tip: '散场时，对方剩余的手机电量，就是这场约会的评分。',
			
 
				-                tip_en: 'At the end of the game, the remaining battery power of the other party is the score of this date.',
			
 
				-                alias: 'rate|评分|评|分|rate评分|rate 评分',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '滑块 Slider',
			
 
				-                title_zh: '滑块',
			
 
				-                title_en: 'Slider',
			
 
				-                nav: 'slider',
			
 
				-                tip: '请滑动解锁您的烦恼。',
			
 
				-                tip_en: 'Please slide to unlock your troubles.',
			
 
				-                alias: 'slider|滑块|滑|块|slider滑块|slider 滑块',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '开关 Switch',
			
 
				-                title_zh: '开关',
			
 
				-                title_en: 'Switch',
			
 
				-                nav: 'switch',
			
 
				-                tip: '死亡是一个开关，活着却是一根绳索。',
			
 
				-                tip_en: 'Death is a switch, but life is a rope.',
			
 
				-                alias: 'switch|开关|开|关|switch开关|switch 开关',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '时间选择器 TimePicker',
			
 
				-                title_zh: '时间选择器',
			
 
				-                title_en: 'TimePicker',
			
 
				-                nav: 'timePicker',
			
 
				-                tip: '死亡不是失去生命，而是走出了时间的枷锁。',
			
 
				-                tip_en: 'Death is not the loss of life, but the release of the shackles of time.',
			
 
				-                alias: 'timePicker|时间选择器|时间|timePicker时间选择器|timePicker 时间选择器|time picker|timepicker|时间picker|时间picker|日期选择器|日期|datePicker日期选择器|datePicker 日期选择器|date picker|datepicker|日期picker|日期picker',
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        class: '信息展示',
			
 
				-        class_en: 'Info display',
			
 
				-        childs: [
			
 
				-            {
			
 
				-                title: '头像 Avatar',
			
 
				-                title_zh: '头像',
			
 
				-                title_en: 'Avatar',
			
 
				-                nav: 'avatar',
			
 
				-                tip: '其实我发给您的头像，是情侣头像...',
			
 
				-                tip_en: 'Actually, the avatar I sent to you is a couple avatar...',
			
 
				-                alias: 'avatar|头像|头|像|avatar头像|avatar 头像',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '徽标 Badge',
			
 
				-                title_zh: '徽标',
			
 
				-                title_en: 'Badge',
			
 
				-                nav: 'badge',
			
 
				-                tip: '在标记消失之前，回到我身边。',
			
 
				-                tip_en: 'Before the mark disappears, come back to me.',
			
 
				-                alias: 'badge|徽标|徽|标|badge徽标|badge 徽标|标记|badge标记|badge 标记',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '单元格 Cell',
			
 
				-                title_zh: '单元格',
			
 
				-                title_en: 'Cell',
			
 
				-                nav: 'cell',
			
 
				-                tip: '当全世界抛弃您的时候请记住，您身上有几亿细胞都在为你而活。',
			
 
				-                tip_en: 'When the whole world abandons you, remember that there are billions of cells on your body that are living for you.',
			
 
				-                alias: 'cell|单元格|单元|cell单元格|cell 单元格',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '通告栏 NoticeBar',
			
 
				-                title_zh: '通告栏',
			
 
				-                title_en: 'NoticeBar',
			
 
				-                nav: 'noticeBar',
			
 
				-                tip: '我方开放地下城，这是告知，不是商量。',
			
 
				-                tip_en: 'Our side opens the dungeon, this is to inform, not to discuss.',
			
 
				-                alias: 'noticeBar|通告栏|通告|通|栏|noticeBar通告栏|noticeBar 通告栏|通知栏|noticeBar通知栏|noticeBar 通知栏|公告栏|noticeBar公告栏|noticeBar 公告栏',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '进度条 Progress',
			
 
				-                title_zh: '进度条',
			
 
				-                title_en: 'Progress',
			
 
				-                nav: 'progress',
			
 
				-                tip: '好运进度：▓▓▓▓▓▓▓▓▓▓▓▓ 100%',
			
 
				-                tip_en: 'Good luck progr: ▓▓▓▓▓▓▓▓▓▓▓▓ 100%',
			
 
				-                alias: 'progress|进度条|进度|进|度|progress进度条|progress 进度条',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '进度环 ProgressLoop',
			
 
				-                title_zh: '进度环',
			
 
				-                title_en: 'ProgressLoop',
			
 
				-                nav: 'progressLoop',
			
 
				-                tip: '人生不是一个完美的圆环，一旦完美，你就再没有任何可能性。',
			
 
				-                tip_en: 'Life is not a perfect circle. Once perfect, you have no possibility.',
			
 
				-                alias: 'progressLoop|进度环|进度|进|度|progressLoop进度环|progressLoop 进度环|环形进度条|progressLoop环形进度条|progressLoop 环形进度条|progress loop|progress-loop',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '轮播 Swiper',
			
 
				-                title_zh: '轮播',
			
 
				-                title_en: 'Swiper',
			
 
				-                nav: 'swiper',
			
 
				-                tip: '人世间悲喜烂剧，昼夜轮播不停。',
			
 
				-                tip_en: 'The ups and downs of life, day and night, are not stopping.',
			
 
				-                alias: 'swiper|轮播|轮|播|swiper轮播|swiper 轮播|轮播图|swiper轮播图|swiper 轮播图|走马灯|swiper走马灯|swiper 走马灯|carousel',
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        class: '反馈',
			
 
				-        class_en: 'Feedback',
			
 
				-        childs: [
			
 
				-            {
			
 
				-                title: '对话框 Dialog',
			
 
				-                title_zh: '对话框',
			
 
				-                title_en: 'Dialog',
			
 
				-                nav: 'dialog',
			
 
				-                tip: '无法确定任何事情，尤其是按下“确定”键的那一刻，我最不确定。',
			
 
				-                tip_en: 'Nothing can be determined, especially at the moment when the "OK" button is pressed, I am the most uncertain.',
			
 
				-                alias: 'dialog|对话框|对话|对|话|框|dialog对话框|dialog 对话框|对话框|dialog对话框|dialog 对话框|对话框|dialog对话框|dialog 对话框|对话框|dialog对话框|dialog 对话框',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '加载 Loading',
			
 
				-                title_zh: '加载',
			
 
				-                title_en: 'Loading',
			
 
				-                nav: 'loading',
			
 
				-                tip: '不要再苦苦等待答案了，没有回复已是答案。',
			
 
				-                tip_en: "Don't wait for the answer, no reply is the answer.",
			
 
				-                alias: 'loading|加载|加载中|loading加载|loading 加载|loading加载中|loading 加载中|loading加载中...|loading 加载中...',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '弹框 Modal',
			
 
				-                title_zh: '弹框',
			
 
				-                title_en: 'Modal',
			
 
				-                nav: 'modal',
			
 
				-                tip: '弹框即人生，要么选择关闭，要么选择继续。',
			
 
				-                tip_en: 'The modal is life, either choose to close or choose to continue.',
			
 
				-                alias: 'modal|弹框|弹|框|modal弹框|modal 弹框|弹窗|modal弹窗|modal 弹窗|弹出框|modal弹出框|modal 弹出框|弹框|modal弹框|modal 弹框|模态框|modal模态框|modal 模态框',
			
 
				-            },
			
 
				-            {
			
 
				-                title: '轻提示 Toast',
			
 
				-                title_zh: '轻提示',
			
 
				-                title_en: 'Toast',
			
 
				-                nav: 'toast',
			
 
				-                tip: '总有一些东西，要用消失来证明它的珍贵。',
			
 
				-                tip_en: 'There are always some things that have to disappear to prove their value.',
			
 
				-                alias: 'toast|轻提示|轻|提示|toast轻提示|toast 轻提示|轻弹窗|toast轻弹窗|toast 轻弹窗|轻提示框|toast轻提示框|toast 轻提示框|吐司|toast吐司|toast 吐司',
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				+	{
			
 
				+		class: '通用',
			
 
				+		class_en: 'Universal',
			
 
				+		childs: [
			
 
				+			{
			
 
				+				title: '按钮 Button',
			
 
				+				title_zh: '按钮',
			
 
				+				title_en: 'Button',
			
 
				+				nav: 'button',
			
 
				+				tip: '按下它，让世界变得更美好吧。',
			
 
				+				tip_en: 'Press it and make the world a better place.',
			
 
				+				alias: 'button|按钮',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '底部浮窗 BottomSheet',
			
 
				+				title_zh: '底部浮窗',
			
 
				+				title_en: 'BottomSheet',
			
 
				+				nav: 'bottomSheet',
			
 
				+				tip: '浮窗犹如小偷，突然出现让你焦灼，却也能唤起你的警觉。',
			
 
				+				tip_en: 'The floating window is like a thief, suddenly appearing to make you anxious, but it can also arouse your alertness.',
			
 
				+				alias:
			
 
				+					'bottomSheet|底部浮窗|底部|底|部|浮窗|bottomSheet底部浮窗|bottomSheet 底部浮窗|底部弹窗|bottomSheet底部弹窗|bottomSheet 底部弹窗|底部弹出框|bottomSheet底部弹出框|bottomSheet 底部弹出框|底部弹出层|bottomSheet底部弹出层|bottomSheet 底部弹出层',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '图标 Icon',
			
 
				+				title_zh: '图标',
			
 
				+				title_en: 'Icon',
			
 
				+				nav: 'icon',
			
 
				+				tip: '使用 SVG Sprites，请参照指南引入与使用。',
			
 
				+				tip_en: 'Use SVG Sprites, please refer to the guide to import and use.',
			
 
				+				alias: 'icon|图标|svg',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '遮罩 Mask',
			
 
				+				title_zh: '遮罩',
			
 
				+				title_en: 'Mask',
			
 
				+				nav: 'mask',
			
 
				+				tip: '遮罩虽能掩盖身形，却无法掩藏内心。',
			
 
				+				tip_en: 'Although the mask can cover the figure, it cannot hide the heart.',
			
 
				+				alias: 'mask|遮罩|遮|罩|mask遮罩|mask 遮罩|遮罩层|mask遮罩层|mask 遮罩层|Overlay|maskOverlay|mask Overlay',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '弹出层 Popup',
			
 
				+				title_zh: '弹出层',
			
 
				+				title_en: 'Popup',
			
 
				+				nav: 'popup',
			
 
				+				tip: '机会就像弹珠，只有你努力地推它，它才会弹出来。',
			
 
				+				tip_en: 'Opportunity is like a marble, only if you push it hard, it will pop out.',
			
 
				+				alias:
			
 
				+					'popup|弹出层|弹出|弹|出|层|popup弹出层|popup 弹出层|弹窗|popup弹窗|popup 弹窗|弹出框|popup弹出框|popup 弹出框|弹出层|popup弹出层|popup 弹出层',
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		class: '布局',
			
 
				+		class_en: 'Layout',
			
 
				+		childs: [
			
 
				+			{
			
 
				+				title: '分割线 Divider',
			
 
				+				title_zh: '分割线',
			
 
				+				title_en: 'Divider',
			
 
				+				nav: 'divider',
			
 
				+				tip: '分开的日子越久，最初的喜悦越发淡薄。',
			
 
				+				tip_en: 'The longer the days are separated, the more the initial joy fades.',
			
 
				+				alias: 'divider|分割线|分割|line',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '网格 Grids',
			
 
				+				title_zh: '网格',
			
 
				+				title_en: 'Grids',
			
 
				+				nav: 'grids',
			
 
				+				tip: '可是怎么说，总觉得，我们之间留了太多空白格。',
			
 
				+				tip_en: 'How can I say, I always feel that there are too many blank grids between us.',
			
 
				+				alias: 'grids|网格|grid|row|col|column',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '占位符 Placeholder',
			
 
				+				title_zh: '占位符',
			
 
				+				title_en: 'Placeholder',
			
 
				+				nav: 'placeholder',
			
 
				+				tip: '人生重要的不是所站的位置，而是所朝的方向。',
			
 
				+				tip_en: 'What is important in life is not the position you stand, but the direction you face.',
			
 
				+				alias: 'placeholder|占位符|占位',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '骨架屏 Skeleton',
			
 
				+				title_zh: '骨架屏',
			
 
				+				title_en: 'Skeleton',
			
 
				+				nav: 'skeleton',
			
 
				+				tip: '骨架是支撑身体的关键，而人生信念则是支撑生命的骨架。',
			
 
				+				tip_en: 'The skeleton is the key to supporting the body, and the belief in life is the skeleton that supports life.',
			
 
				+				alias: 'skeleton|骨架屏|骨架',
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		class: '导航',
			
 
				+		class_en: 'Navigation',
			
 
				+		childs: [
			
 
				+			{
			
 
				+				title: '索引栏 IndexBar',
			
 
				+				title_zh: '索引栏',
			
 
				+				title_en: 'IndexBar',
			
 
				+				nav: 'indexBar',
			
 
				+				tip: '你不迷途知返，我怎么给你以索引？',
			
 
				+				tip_en: "If you don't know the way back, how can I give you an index?",
			
 
				+				alias: 'indexBar|索引栏|indexbar|index|bar|索引|index 栏|索引条|index条|index 条',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '导航栏 NavBar',
			
 
				+				title_zh: '导航栏',
			
 
				+				title_en: 'NavBar',
			
 
				+				nav: 'navBar',
			
 
				+				tip: '没有指引，在黑暗中只能乱撞。',
			
 
				+				tip_en: 'Without guidance, you can only bump in the dark.',
			
 
				+				alias: 'navBar|导航栏|navbar|nav|bar|导航|nav-bar|nav bar',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '分页 Pagination',
			
 
				+				title_zh: '分页',
			
 
				+				title_en: 'Pagination',
			
 
				+				nav: 'pagination',
			
 
				+				tip: '人生就像一部电影，不论多么精彩，也有谢幕的时候。',
			
 
				+				tip_en: 'Life is like a movie, no matter how wonderful it is, there is a curtain call.',
			
 
				+				alias: 'pagination|分页|page|分|页|pagination分页|pagination 分页|page分页|page 分页',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '步骤条 Steps',
			
 
				+				title_zh: '步骤条',
			
 
				+				title_en: 'Steps',
			
 
				+				nav: 'steps',
			
 
				+				tip: '人生没有白走的路，每一步都算数。',
			
 
				+				tip_en: 'Life has no wasted steps, every step counts.',
			
 
				+				alias: 'steps|step|步骤条|步骤|step条|step 条|步骤栏|step栏|step 栏',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '标签栏 TabBar',
			
 
				+				title_zh: '标签栏',
			
 
				+				title_en: 'TabBar',
			
 
				+				nav: 'tabBar',
			
 
				+				tip: '看脚下一片黑暗，望头顶星光璀璨。',
			
 
				+				tip_en: "Looking down, it's all darkness; looking up, the stars are shining brightly.",
			
 
				+				alias: 'tabBar|标签栏|tabbar|tab|bar|标签|tab 栏',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '标签页 Tabs',
			
 
				+				title_zh: '标签页',
			
 
				+				title_en: 'Tabs',
			
 
				+				nav: 'tabs',
			
 
				+				tip: '偶尔隐藏，是为了在合适的时候更好地绽放。',
			
 
				+				tip_en: 'Occasionally hide, it is to bloom better at the right time.',
			
 
				+				alias: 'tabs|tab|标签页|标签|tab页',
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		class: '数据输入',
			
 
				+		class_en: 'Data entry',
			
 
				+		childs: [
			
 
				+			{
			
 
				+				title: '动作面板 ActionSheet',
			
 
				+				title_zh: '动作面板',
			
 
				+				title_en: 'ActionSheet',
			
 
				+				nav: 'actionSheet',
			
 
				+				tip: '我的世界只有一个选项，就是你。',
			
 
				+				tip_en: 'There is only one option in my world, and that is you.',
			
 
				+				alias:
			
 
				+					'actionSheet|动作面板|动作|动|作|面板|actionSheet动作面板|actionSheet 动作面板|动作面板|actionSheet动作面板|actionSheet 动作面板|动作面板|actionSheet动作面板|actionSheet 动作面板',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '异步选择器 AsyncPicker',
			
 
				+				title_zh: '异步选择器',
			
 
				+				title_en: 'AsyncPicker',
			
 
				+				nav: 'asyncPicker',
			
 
				+				tip: '错过的话，就请错过一辈子吧！',
			
 
				+				tip_en: 'If you miss it, please miss it for a lifetime!',
			
 
				+				alias: 'asyncPicker|异步选择器|异步|asyncPicker异步选择器|asyncPicker 异步选择器|async picker|asyncpicker|异步picker|异步picker',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '日历 Calendar',
			
 
				+				title_zh: '日历',
			
 
				+				title_en: 'Calendar',
			
 
				+				nav: 'calendar',
			
 
				+				tip: '在无人问津日子里，正是登峰造极的好时机。',
			
 
				+				tip_en: 'In the days when no one cares, it is a good time to reach the peak.',
			
 
				+				alias:
			
 
				+					'calendar|日历|日|历|calendar日历|calendar 日历|日期|calendar日期|calendar 日期|周选择|calendar周选择|calendar 周选择|周|calendar周|calendar 周|日期区间|月选择|日期范围选择',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '复选框 Checkbox',
			
 
				+				title_zh: '复选框',
			
 
				+				title_en: 'Checkbox',
			
 
				+				nav: 'checkbox',
			
 
				+				tip: '要么全不，要么全部。',
			
 
				+				tip_en: 'Either all or none.',
			
 
				+				alias:
			
 
				+					'checkbox|复选框|复选|checkbox复选框|checkbox 复选框|复选按钮|checkbox复选按钮|checkbox 复选按钮|多选框|多选|checkbox多选框|checkbox 多选框|多选按钮|checkbox多选按钮|checkbox 多选按钮',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '输入框 Input',
			
 
				+				title_zh: '输入框',
			
 
				+				title_en: 'Input',
			
 
				+				nav: 'input',
			
 
				+				tip: '对方正在输入......',
			
 
				+				tip_en: 'The other party is typing...',
			
 
				+				alias:
			
 
				+					'input|输入框|输入|input输入框|input 输入框|Textarea|textarea|文本域|文本框|文本|textarea文本域|textarea 文本域|多行输入框|多行输入|多行|textarea多行输入框|textarea 多行输入框',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '选择器 Picker',
			
 
				+				title_zh: '选择器',
			
 
				+				title_en: 'Picker',
			
 
				+				nav: 'picker',
			
 
				+				tip: '采摘花瓣时，你得不到花的美丽。',
			
 
				+				tip_en: 'When you pick petals, you don’t get the beauty of the flower.',
			
 
				+				alias: 'picker|选择器|选择|picker选择器|picker 选择器',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '单选框 Radio',
			
 
				+				title_zh: '单选框',
			
 
				+				title_en: 'Radio',
			
 
				+				nav: 'radio',
			
 
				+				tip: '如果要在正确和善良中选择一个，请选择善良。',
			
 
				+				tip_en: 'If you have to choose between right and good, choose good.',
			
 
				+				alias: 'radio|单选框|单选|radio单选框|radio 单选框|单选按钮|radio单选按钮|radio 单选按钮',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '评分 Rate',
			
 
				+				title_zh: '评分',
			
 
				+				title_en: 'Rate',
			
 
				+				nav: 'rate',
			
 
				+				tip: '散场时，对方剩余的手机电量，就是这场约会的评分。',
			
 
				+				tip_en: 'At the end of the game, the remaining battery power of the other party is the score of this date.',
			
 
				+				alias: 'rate|评分|评|分|rate评分|rate 评分',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '滑块 Slider',
			
 
				+				title_zh: '滑块',
			
 
				+				title_en: 'Slider',
			
 
				+				nav: 'slider',
			
 
				+				tip: '请滑动解锁您的烦恼。',
			
 
				+				tip_en: 'Please slide to unlock your troubles.',
			
 
				+				alias: 'slider|滑块|滑|块|slider滑块|slider 滑块',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '开关 Switch',
			
 
				+				title_zh: '开关',
			
 
				+				title_en: 'Switch',
			
 
				+				nav: 'switch',
			
 
				+				tip: '死亡是一个开关，活着却是一根绳索。',
			
 
				+				tip_en: 'Death is a switch, but life is a rope.',
			
 
				+				alias: 'switch|开关|开|关|switch开关|switch 开关',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '时间选择器 TimePicker',
			
 
				+				title_zh: '时间选择器',
			
 
				+				title_en: 'TimePicker',
			
 
				+				nav: 'timePicker',
			
 
				+				tip: '死亡不是失去生命，而是走出了时间的枷锁。',
			
 
				+				tip_en: 'Death is not the loss of life, but the release of the shackles of time.',
			
 
				+				alias:
			
 
				+					'timePicker|时间选择器|时间|timePicker时间选择器|timePicker 时间选择器|time picker|timepicker|时间picker|时间picker|日期选择器|日期|datePicker日期选择器|datePicker 日期选择器|date picker|datepicker|日期picker|日期picker',
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		class: '信息展示',
			
 
				+		class_en: 'Info display',
			
 
				+		childs: [
			
 
				+			{
			
 
				+				title: '头像 Avatar',
			
 
				+				title_zh: '头像',
			
 
				+				title_en: 'Avatar',
			
 
				+				nav: 'avatar',
			
 
				+				tip: '其实我发给您的头像，是情侣头像...',
			
 
				+				tip_en: 'Actually, the avatar I sent to you is a couple avatar...',
			
 
				+				alias: 'avatar|头像|头|像|avatar头像|avatar 头像',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '徽标 Badge',
			
 
				+				title_zh: '徽标',
			
 
				+				title_en: 'Badge',
			
 
				+				nav: 'badge',
			
 
				+				tip: '在标记消失之前，回到我身边。',
			
 
				+				tip_en: 'Before the mark disappears, come back to me.',
			
 
				+				alias: 'badge|徽标|徽|标|badge徽标|badge 徽标|标记|badge标记|badge 标记',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '单元格 Cell',
			
 
				+				title_zh: '单元格',
			
 
				+				title_en: 'Cell',
			
 
				+				nav: 'cell',
			
 
				+				tip: '当全世界抛弃您的时候请记住，您身上有几亿细胞都在为你而活。',
			
 
				+				tip_en: 'When the whole world abandons you, remember that there are billions of cells on your body that are living for you.',
			
 
				+				alias: 'cell|单元格|单元|cell单元格|cell 单元格',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '通告栏 NoticeBar',
			
 
				+				title_zh: '通告栏',
			
 
				+				title_en: 'NoticeBar',
			
 
				+				nav: 'noticeBar',
			
 
				+				tip: '我方开放地下城，这是告知，不是商量。',
			
 
				+				tip_en: 'Our side opens the dungeon, this is to inform, not to discuss.',
			
 
				+				alias:
			
 
				+					'noticeBar|通告栏|通告|通|栏|noticeBar通告栏|noticeBar 通告栏|通知栏|noticeBar通知栏|noticeBar 通知栏|公告栏|noticeBar公告栏|noticeBar 公告栏',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '进度条 Progress',
			
 
				+				title_zh: '进度条',
			
 
				+				title_en: 'Progress',
			
 
				+				nav: 'progress',
			
 
				+				tip: '好运进度：▓▓▓▓▓▓▓▓▓▓▓▓ 100%',
			
 
				+				tip_en: 'Good luck progr: ▓▓▓▓▓▓▓▓▓▓▓▓ 100%',
			
 
				+				alias: 'progress|进度条|进度|进|度|progress进度条|progress 进度条',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '进度环 ProgressLoop',
			
 
				+				title_zh: '进度环',
			
 
				+				title_en: 'ProgressLoop',
			
 
				+				nav: 'progressLoop',
			
 
				+				tip: '人生不是一个完美的圆环，一旦完美，你就再没有任何可能性。',
			
 
				+				tip_en: 'Life is not a perfect circle. Once perfect, you have no possibility.',
			
 
				+				alias:
			
 
				+					'progressLoop|进度环|进度|进|度|progressLoop进度环|progressLoop 进度环|环形进度条|progressLoop环形进度条|progressLoop 环形进度条|progress loop|progress-loop',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '轮播 Swiper',
			
 
				+				title_zh: '轮播',
			
 
				+				title_en: 'Swiper',
			
 
				+				nav: 'swiper',
			
 
				+				tip: '人世间悲喜烂剧，昼夜轮播不停。',
			
 
				+				tip_en: 'The ups and downs of life, day and night, are not stopping.',
			
 
				+				alias: 'swiper|轮播|轮|播|swiper轮播|swiper 轮播|轮播图|swiper轮播图|swiper 轮播图|走马灯|swiper走马灯|swiper 走马灯|carousel',
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		class: '反馈',
			
 
				+		class_en: 'Feedback',
			
 
				+		childs: [
			
 
				+			{
			
 
				+				title: '对话框 Dialog',
			
 
				+				title_zh: '对话框',
			
 
				+				title_en: 'Dialog',
			
 
				+				nav: 'dialog',
			
 
				+				tip: '无法确定任何事情，尤其是按下“确定”键的那一刻，我最不确定。',
			
 
				+				tip_en: 'Nothing can be determined, especially at the moment when the "OK" button is pressed, I am the most uncertain.',
			
 
				+				alias:
			
 
				+					'dialog|对话框|对话|对|话|框|dialog对话框|dialog 对话框|对话框|dialog对话框|dialog 对话框|对话框|dialog对话框|dialog 对话框|对话框|dialog对话框|dialog 对话框',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '加载 Loading',
			
 
				+				title_zh: '加载',
			
 
				+				title_en: 'Loading',
			
 
				+				nav: 'loading',
			
 
				+				tip: '不要再苦苦等待答案了，没有回复已是答案。',
			
 
				+				tip_en: "Don't wait for the answer, no reply is the answer.",
			
 
				+				alias: 'loading|加载|加载中|loading加载|loading 加载|loading加载中|loading 加载中|loading加载中...|loading 加载中...',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '弹框 Modal',
			
 
				+				title_zh: '弹框',
			
 
				+				title_en: 'Modal',
			
 
				+				nav: 'modal',
			
 
				+				tip: '弹框即人生，要么选择关闭，要么选择继续。',
			
 
				+				tip_en: 'The modal is life, either choose to close or choose to continue.',
			
 
				+				alias:
			
 
				+					'modal|弹框|弹|框|modal弹框|modal 弹框|弹窗|modal弹窗|modal 弹窗|弹出框|modal弹出框|modal 弹出框|弹框|modal弹框|modal 弹框|模态框|modal模态框|modal 模态框',
			
 
				+			},
			
 
				+			{
			
 
				+				title: '轻提示 Toast',
			
 
				+				title_zh: '轻提示',
			
 
				+				title_en: 'Toast',
			
 
				+				nav: 'toast',
			
 
				+				tip: '总有一些东西，要用消失来证明它的珍贵。',
			
 
				+				tip_en: 'There are always some things that have to disappear to prove their value.',
			
 
				+				alias:
			
 
				+					'toast|轻提示|轻|提示|toast轻提示|toast 轻提示|轻弹窗|toast轻弹窗|toast 轻弹窗|轻提示框|toast轻提示框|toast 轻提示框|吐司|toast吐司|toast 吐司',
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				 ];
			
--- a/demo/src/main.js
+++ b/demo/src/main.js
@@ -15,55 +15,55 @@ const mode = import.meta.env.MODE;
 
				 const englishMode = mode.slice(-3) === '_en' || mode === 'english';
			
 
				 sessionStorage.setItem('lang', englishMode ? 'en_US' : lang);
			
 
				 setTimeout(() => {
			
 
				-    window.history.replaceState({}, 0, window.location.href.split('?')[0]);
			
 
				+	window.history.replaceState({}, 0, window.location.href.split('?')[0]);
			
 
				 }, 300);
			
 
				 
			
 
				 // 设置主题
			
 
				 // Set theme
			
 
				 if (localStorage.getItem('theme') === 'dark') {
			
 
				-    document.documentElement.classList.add('dark');
			
 
				+	document.documentElement.classList.add('dark');
			
 
				 } else if (localStorage.getItem('theme') === 'light') {
			
 
				-    document.documentElement.classList.remove('dark');
			
 
				+	document.documentElement.classList.remove('dark');
			
 
				 } else {
			
 
				-    // if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
			
 
				-    //     document.documentElement.classList.add('dark');
			
 
				-    // } else {
			
 
				-    document.documentElement.classList.remove('dark');
			
 
				-    // }
			
 
				+	// if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
			
 
				+	//     document.documentElement.classList.add('dark');
			
 
				+	// } else {
			
 
				+	document.documentElement.classList.remove('dark');
			
 
				+	// }
			
 
				 }
			
 
				 //解决ios不支持按钮:active伪类
			
 
				 // Solve the problem that ios does not support the button: active pseudo class
			
 
				 document.body.addEventListener('touchstart', function () {
			
 
				-    //...空函数即可
			
 
				+	//...空函数即可
			
 
				 });
			
 
				 
			
 
				 // 阻止双击放大
			
 
				 // Prevent double click zoom
			
 
				 document.addEventListener('touchstart', function (event) {
			
 
				-    if (event.touches.length > 1) {
			
 
				-        event.preventDefault();
			
 
				-    }
			
 
				+	if (event.touches.length > 1) {
			
 
				+		event.preventDefault();
			
 
				+	}
			
 
				 });
			
 
				 let lastTouchEnd = 0;
			
 
				 document.addEventListener(
			
 
				-    'touchend',
			
 
				-    function (event) {
			
 
				-        const now = new Date().getTime();
			
 
				-        if (now - lastTouchEnd <= 300) {
			
 
				-            event.preventDefault();
			
 
				-        }
			
 
				-        lastTouchEnd = now;
			
 
				-    },
			
 
				-    false
			
 
				+	'touchend',
			
 
				+	function (event) {
			
 
				+		const now = new Date().getTime();
			
 
				+		if (now - lastTouchEnd <= 300) {
			
 
				+			event.preventDefault();
			
 
				+		}
			
 
				+		lastTouchEnd = now;
			
 
				+	},
			
 
				+	false,
			
 
				 );
			
 
				 // 阻止双指放大
			
 
				 // Prevent two finger zoom
			
 
				 document.addEventListener('gesturestart', function (event) {
			
 
				-    event.preventDefault();
			
 
				+	event.preventDefault();
			
 
				 });
			
 
				 
			
 
				 const app = new App({
			
 
				-    target: document.getElementById('app'),
			
 
				+	target: document.getElementById('app'),
			
 
				 });
			
 
				 
			
 
				 export default app;
			
--- a/demo/src/pages/actionSheet/ActionSheetDemo.svelte
+++ b/demo/src/pages/actionSheet/ActionSheetDemo.svelte
@@ -1,94 +1,94 @@
 
				 <!-- ActionSheet Demo -->
			
 
				 <script>
			
 
				-    import { Cell, ActionSheet, Toast } from 'stdf';
			
 
				+	import { Cell, ActionSheet, Toast } from 'stdf';
			
 
				 
			
 
				-    let visible1 = false;
			
 
				-    let visible2 = false;
			
 
				-    let visible3 = false;
			
 
				-    let visible4 = false;
			
 
				-    let visible5 = false;
			
 
				-    let visible6 = false;
			
 
				-    let visible7 = false;
			
 
				-    let visible8 = false;
			
 
				-    let visible9 = false;
			
 
				-    let visible10 = false;
			
 
				-    let visible11 = false;
			
 
				-    let visible12 = false;
			
 
				+	let visible1 = false;
			
 
				+	let visible2 = false;
			
 
				+	let visible3 = false;
			
 
				+	let visible4 = false;
			
 
				+	let visible5 = false;
			
 
				+	let visible6 = false;
			
 
				+	let visible7 = false;
			
 
				+	let visible8 = false;
			
 
				+	let visible9 = false;
			
 
				+	let visible10 = false;
			
 
				+	let visible11 = false;
			
 
				+	let visible12 = false;
			
 
				 
			
 
				-    const actions = [{ content: '选项一' }, { content: '选项二' }, { content: '选项三' }];
			
 
				-    const actions1 = [
			
 
				-        { content: '常规选项' },
			
 
				-        { content: '主题选项', style: 'theme' },
			
 
				-        { content: '禁用选项', style: 'disabled' },
			
 
				-        { content: '警告选项', style: 'danger' },
			
 
				-    ];
			
 
				-    const actions2 = [
			
 
				-        { content: '选项一' },
			
 
				-        { content: '选项二', desc: '这里是描述信息' },
			
 
				-        { content: '选项三', style: 'danger', desc: '这里是描述信息' },
			
 
				-    ];
			
 
				-    const action3 = [
			
 
				-        { content: '火女', showImg: true, imgSrc: './assets/images/dota_火女.png', imgRadius: 'base' },
			
 
				-        { content: '小牛', showImg: true, imgSrc: './assets/images/dota_小牛.png', imgRadius: 'base' },
			
 
				-        { content: '水人', showImg: true, imgSrc: './assets/images/dota_水人.png', imgRadius: 'base' },
			
 
				-    ];
			
 
				-    const action4 = [
			
 
				-        { content: 'Apple', showImg: true, imgSrc: './assets/logos/apple.png', imgRadius: 'none' },
			
 
				-        { content: 'Google', showImg: true, imgSrc: './assets/logos/google.png', imgRadius: 'none' },
			
 
				-        { content: 'Microsoft', showImg: true, imgSrc: './assets/logos/microsoft.png', imgRadius: 'none' },
			
 
				-        { content: 'Adobe', showImg: true, imgSrc: './assets/logos/adobe.png', imgRadius: 'none' },
			
 
				-        { content: 'Figma', showImg: true, imgSrc: './assets/logos/figma.png', imgRadius: 'none' },
			
 
				-    ];
			
 
				+	const actions = [{ content: '选项一' }, { content: '选项二' }, { content: '选项三' }];
			
 
				+	const actions1 = [
			
 
				+		{ content: '常规选项' },
			
 
				+		{ content: '主题选项', style: 'theme' },
			
 
				+		{ content: '禁用选项', style: 'disabled' },
			
 
				+		{ content: '警告选项', style: 'danger' },
			
 
				+	];
			
 
				+	const actions2 = [
			
 
				+		{ content: '选项一' },
			
 
				+		{ content: '选项二', desc: '这里是描述信息' },
			
 
				+		{ content: '选项三', style: 'danger', desc: '这里是描述信息' },
			
 
				+	];
			
 
				+	const action3 = [
			
 
				+		{ content: '火女', showImg: true, imgSrc: './assets/images/dota_火女.png', imgRadius: 'base' },
			
 
				+		{ content: '小牛', showImg: true, imgSrc: './assets/images/dota_小牛.png', imgRadius: 'base' },
			
 
				+		{ content: '水人', showImg: true, imgSrc: './assets/images/dota_水人.png', imgRadius: 'base' },
			
 
				+	];
			
 
				+	const action4 = [
			
 
				+		{ content: 'Apple', showImg: true, imgSrc: './assets/logos/apple.png', imgRadius: 'none' },
			
 
				+		{ content: 'Google', showImg: true, imgSrc: './assets/logos/google.png', imgRadius: 'none' },
			
 
				+		{ content: 'Microsoft', showImg: true, imgSrc: './assets/logos/microsoft.png', imgRadius: 'none' },
			
 
				+		{ content: 'Adobe', showImg: true, imgSrc: './assets/logos/adobe.png', imgRadius: 'none' },
			
 
				+		{ content: 'Figma', showImg: true, imgSrc: './assets/logos/figma.png', imgRadius: 'none' },
			
 
				+	];
			
 
				 
			
 
				-    let toastVisible1 = false;
			
 
				-    let toastVisible2 = false;
			
 
				-    let toastVisible3 = false;
			
 
				-    let index = 0;
			
 
				-    let item = {};
			
 
				-    const clickActionFunc = e => {
			
 
				-        index = e.detail.index;
			
 
				-        item = e.detail.item;
			
 
				-        toastVisible3 = true;
			
 
				-    };
			
 
				+	let toastVisible1 = false;
			
 
				+	let toastVisible2 = false;
			
 
				+	let toastVisible3 = false;
			
 
				+	let index = 0;
			
 
				+	let item = {};
			
 
				+	const clickActionFunc = e => {
			
 
				+		index = e.detail.index;
			
 
				+		item = e.detail.item;
			
 
				+		toastVisible3 = true;
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-4">
			
 
				-    <Cell title="基础用法" on:click={() => (visible1 = true)} />
			
 
				-    <ActionSheet bind:visible={visible1} {actions} />
			
 
				+	<Cell title="基础用法" on:click={() => (visible1 = true)} />
			
 
				+	<ActionSheet bind:visible={visible1} {actions} />
			
 
				 
			
 
				-    <Cell title="有取消操作且点击遮罩不可关闭" on:click={() => (visible2 = true)} />
			
 
				-    <ActionSheet bind:visible={visible2} {actions} showCancel popup={{ maskClosable: false }} />
			
 
				+	<Cell title="有取消操作且点击遮罩不可关闭" on:click={() => (visible2 = true)} />
			
 
				+	<ActionSheet bind:visible={visible2} {actions} showCancel popup={{ maskClosable: false }} />
			
 
				 
			
 
				-    <Cell title="不同样式" on:click={() => (visible3 = true)} />
			
 
				-    <ActionSheet bind:visible={visible3} actions={actions1} />
			
 
				+	<Cell title="不同样式" on:click={() => (visible3 = true)} />
			
 
				+	<ActionSheet bind:visible={visible3} actions={actions1} />
			
 
				 
			
 
				-    <Cell title="带标题和描述信息" on:click={() => (visible4 = true)} />
			
 
				-    <ActionSheet bind:visible={visible4} actions={actions2} title="这里是标题，可以简要说明以下操作。" />
			
 
				+	<Cell title="带标题和描述信息" on:click={() => (visible4 = true)} />
			
 
				+	<ActionSheet bind:visible={visible4} actions={actions2} title="这里是标题，可以简要说明以下操作。" />
			
 
				 
			
 
				-    <Cell title="顶部来点圆角" on:click={() => (visible5 = true)} />
			
 
				-    <ActionSheet bind:visible={visible5} {actions} popup={{ radius: 'xl' }} />
			
 
				+	<Cell title="顶部来点圆角" on:click={() => (visible5 = true)} />
			
 
				+	<ActionSheet bind:visible={visible5} {actions} popup={{ radius: 'xl' }} />
			
 
				 
			
 
				-    <Cell title="两侧有间距" on:click={() => (visible6 = true)} />
			
 
				-    <ActionSheet bind:visible={visible6} {actions} popup={{ radius: 'xl', px: '2' }} />
			
 
				+	<Cell title="两侧有间距" on:click={() => (visible6 = true)} />
			
 
				+	<ActionSheet bind:visible={visible6} {actions} popup={{ radius: 'xl', px: '2' }} />
			
 
				 
			
 
				-    <Cell title="监听关闭事件" on:click={() => (visible7 = true)} />
			
 
				-    <ActionSheet bind:visible={visible7} {actions} on:close={() => (toastVisible1 = true)} />
			
 
				-    <Toast bind:visible={toastVisible1} message="关闭了 ActionSheet！" />
			
 
				+	<Cell title="监听关闭事件" on:click={() => (visible7 = true)} />
			
 
				+	<ActionSheet bind:visible={visible7} {actions} on:close={() => (toastVisible1 = true)} />
			
 
				+	<Toast bind:visible={toastVisible1} message="关闭了 ActionSheet！" />
			
 
				 
			
 
				-    <Cell title="监听取消事件" on:click={() => (visible8 = true)} />
			
 
				-    <ActionSheet bind:visible={visible8} {actions} showCancel on:cancel={() => (toastVisible2 = true)} />
			
 
				-    <Toast bind:visible={toastVisible2} message="点击了取消！" />
			
 
				+	<Cell title="监听取消事件" on:click={() => (visible8 = true)} />
			
 
				+	<ActionSheet bind:visible={visible8} {actions} showCancel on:cancel={() => (toastVisible2 = true)} />
			
 
				+	<Toast bind:visible={toastVisible2} message="点击了取消！" />
			
 
				 
			
 
				-    <Cell title="监听选项点击事件" on:click={() => (visible9 = true)} />
			
 
				-    <ActionSheet bind:visible={visible9} {actions} on:clickAction={clickActionFunc} />
			
 
				-    <Toast bind:visible={toastVisible3} message={`点击了第 ${index + 1} 项，${item.content}！`} />
			
 
				+	<Cell title="监听选项点击事件" on:click={() => (visible9 = true)} />
			
 
				+	<ActionSheet bind:visible={visible9} {actions} on:clickAction={clickActionFunc} />
			
 
				+	<Toast bind:visible={toastVisible3} message={`点击了第 ${index + 1} 项，${item.content}！`} />
			
 
				 
			
 
				-    <Cell title="点击选项不关闭" on:click={() => (visible10 = true)} />
			
 
				-    <ActionSheet bind:visible={visible10} {actions} actionClosable={false} />
			
 
				+	<Cell title="点击选项不关闭" on:click={() => (visible10 = true)} />
			
 
				+	<ActionSheet bind:visible={visible10} {actions} actionClosable={false} />
			
 
				 
			
 
				-    <Cell title="选项带图片" on:click={() => (visible11 = true)} />
			
 
				-    <ActionSheet bind:visible={visible11} actions={action3} />
			
 
				+	<Cell title="选项带图片" on:click={() => (visible11 = true)} />
			
 
				+	<ActionSheet bind:visible={visible11} actions={action3} />
			
 
				 
			
 
				-    <Cell title="选项左对齐" on:click={() => (visible12 = true)} />
			
 
				-    <ActionSheet bind:visible={visible12} actions={action4} align="left" />
			
 
				+	<Cell title="选项左对齐" on:click={() => (visible12 = true)} />
			
 
				+	<ActionSheet bind:visible={visible12} actions={action4} align="left" />
			
 
				 </div>
			
--- a/demo/src/pages/actionSheet/ActionSheetDemo_en.svelte
+++ b/demo/src/pages/actionSheet/ActionSheetDemo_en.svelte
@@ -1,94 +1,94 @@
 
				 <!-- ActionSheet Demo -->
			
 
				 <script>
			
 
				-    import { Cell, ActionSheet, Toast } from 'stdf';
			
 
				+	import { Cell, ActionSheet, Toast } from 'stdf';
			
 
				 
			
 
				-    let visible1 = false;
			
 
				-    let visible2 = false;
			
 
				-    let visible3 = false;
			
 
				-    let visible4 = false;
			
 
				-    let visible5 = false;
			
 
				-    let visible6 = false;
			
 
				-    let visible7 = false;
			
 
				-    let visible8 = false;
			
 
				-    let visible9 = false;
			
 
				-    let visible10 = false;
			
 
				-    let visible11 = false;
			
 
				-    let visible12 = false;
			
 
				+	let visible1 = false;
			
 
				+	let visible2 = false;
			
 
				+	let visible3 = false;
			
 
				+	let visible4 = false;
			
 
				+	let visible5 = false;
			
 
				+	let visible6 = false;
			
 
				+	let visible7 = false;
			
 
				+	let visible8 = false;
			
 
				+	let visible9 = false;
			
 
				+	let visible10 = false;
			
 
				+	let visible11 = false;
			
 
				+	let visible12 = false;
			
 
				 
			
 
				-    const actions = [{ content: 'Option one' }, { content: 'Option twoion two' }, { content: 'Option three' }];
			
 
				-    const actions1 = [
			
 
				-        { content: 'Conventional option' },
			
 
				-        { content: 'Theme option', style: 'theme' },
			
 
				-        { content: 'Disable option', style: 'disabled' },
			
 
				-        { content: 'Warning option', style: 'danger' },
			
 
				-    ];
			
 
				-    const actions2 = [
			
 
				-        { content: 'Option one' },
			
 
				-        { content: 'Option two', desc: 'Here is description information description information' },
			
 
				-        { content: 'Option three', style: 'Here is description information' },
			
 
				-    ];
			
 
				-    const action3 = [
			
 
				-        { content: 'Fire girl', showImg: true, imgSrc: './assets/images/dota_火女.png', imgRadius: 'base' },
			
 
				-        { content: 'calf', showImg: true, imgSrc: './assets/images/dota_小牛.png', imgRadius: 'base' },
			
 
				-        { content: 'water man', showImg: true, imgSrc: './assets/images/dota_水人.png', imgRadius: 'base' },
			
 
				-    ];
			
 
				-    const action4 = [
			
 
				-        { content: 'Apple', showImg: true, imgSrc: './assets/logos/apple.png', imgRadius: 'none' },
			
 
				-        { content: 'Google', showImg: true, imgSrc: './assets/logos/google.png', imgRadius: 'none' },
			
 
				-        { content: 'Microsoft', showImg: true, imgSrc: './assets/logos/microsoft.png', imgRadius: 'none' },
			
 
				-        { content: 'Adobe', showImg: true, imgSrc: './assets/logos/adobe.png', imgRadius: 'none' },
			
 
				-        { content: 'Figma', showImg: true, imgSrc: './assets/logos/figma.png', imgRadius: 'none' },
			
 
				-    ];
			
 
				+	const actions = [{ content: 'Option one' }, { content: 'Option twoion two' }, { content: 'Option three' }];
			
 
				+	const actions1 = [
			
 
				+		{ content: 'Conventional option' },
			
 
				+		{ content: 'Theme option', style: 'theme' },
			
 
				+		{ content: 'Disable option', style: 'disabled' },
			
 
				+		{ content: 'Warning option', style: 'danger' },
			
 
				+	];
			
 
				+	const actions2 = [
			
 
				+		{ content: 'Option one' },
			
 
				+		{ content: 'Option two', desc: 'Here is description information description information' },
			
 
				+		{ content: 'Option three', style: 'Here is description information' },
			
 
				+	];
			
 
				+	const action3 = [
			
 
				+		{ content: 'Fire girl', showImg: true, imgSrc: './assets/images/dota_火女.png', imgRadius: 'base' },
			
 
				+		{ content: 'calf', showImg: true, imgSrc: './assets/images/dota_小牛.png', imgRadius: 'base' },
			
 
				+		{ content: 'water man', showImg: true, imgSrc: './assets/images/dota_水人.png', imgRadius: 'base' },
			
 
				+	];
			
 
				+	const action4 = [
			
 
				+		{ content: 'Apple', showImg: true, imgSrc: './assets/logos/apple.png', imgRadius: 'none' },
			
 
				+		{ content: 'Google', showImg: true, imgSrc: './assets/logos/google.png', imgRadius: 'none' },
			
 
				+		{ content: 'Microsoft', showImg: true, imgSrc: './assets/logos/microsoft.png', imgRadius: 'none' },
			
 
				+		{ content: 'Adobe', showImg: true, imgSrc: './assets/logos/adobe.png', imgRadius: 'none' },
			
 
				+		{ content: 'Figma', showImg: true, imgSrc: './assets/logos/figma.png', imgRadius: 'none' },
			
 
				+	];
			
 
				 
			
 
				-    let toastVisible1 = false;
			
 
				-    let toastVisible2 = false;
			
 
				-    let toastVisible3 = false;
			
 
				-    let index = 0;
			
 
				-    let item = {};
			
 
				-    const clickActionFunc = e => {
			
 
				-        index = e.detail.index;
			
 
				-        item = e.detail.item;
			
 
				-        toastVisible3 = true;
			
 
				-    };
			
 
				+	let toastVisible1 = false;
			
 
				+	let toastVisible2 = false;
			
 
				+	let toastVisible3 = false;
			
 
				+	let index = 0;
			
 
				+	let item = {};
			
 
				+	const clickActionFunc = e => {
			
 
				+		index = e.detail.index;
			
 
				+		item = e.detail.item;
			
 
				+		toastVisible3 = true;
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-4">
			
 
				-    <Cell title="Basic usage" on:click={() => (visible1 = true)} />
			
 
				-    <ActionSheet bind:visible={visible1} {actions} />
			
 
				+	<Cell title="Basic usage" on:click={() => (visible1 = true)} />
			
 
				+	<ActionSheet bind:visible={visible1} {actions} />
			
 
				 
			
 
				-    <Cell title="If you have canceled operation and click on the mask, you cannot turn off" on:click={() => (visible2 = true)} />
			
 
				-    <ActionSheet bind:visible={visible2} {actions} showCancel popup={{ maskClosable: false }} />
			
 
				+	<Cell title="If you have canceled operation and click on the mask, you cannot turn off" on:click={() => (visible2 = true)} />
			
 
				+	<ActionSheet bind:visible={visible2} {actions} showCancel popup={{ maskClosable: false }} />
			
 
				 
			
 
				-    <Cell title="Different styles" on:click={() => (visible3 = true)} />
			
 
				-    <ActionSheet bind:visible={visible3} actions={actions1} />
			
 
				+	<Cell title="Different styles" on:click={() => (visible3 = true)} />
			
 
				+	<ActionSheet bind:visible={visible3} actions={actions1} />
			
 
				 
			
 
				-    <Cell title="Title and description information" on:click={() => (visible4 = true)} />
			
 
				-    <ActionSheet bind:visible={visible4} actions={actions2} title="This is the title, which can be briefly explained." />
			
 
				+	<Cell title="Title and description information" on:click={() => (visible4 = true)} />
			
 
				+	<ActionSheet bind:visible={visible4} actions={actions2} title="This is the title, which can be briefly explained." />
			
 
				 
			
 
				-    <Cell title="Come on the top" on:click={() => (visible5 = true)} />
			
 
				-    <ActionSheet bind:visible={visible5} {actions} popup={{ radius: 'xl' }} />
			
 
				+	<Cell title="Come on the top" on:click={() => (visible5 = true)} />
			
 
				+	<ActionSheet bind:visible={visible5} {actions} popup={{ radius: 'xl' }} />
			
 
				 
			
 
				-    <Cell title="There is a spacing on both sides" on:click={() => (visible6 = true)} />
			
 
				-    <ActionSheet bind:visible={visible6} {actions} popup={{ radius: 'xl', px: '2' }} />
			
 
				+	<Cell title="There is a spacing on both sides" on:click={() => (visible6 = true)} />
			
 
				+	<ActionSheet bind:visible={visible6} {actions} popup={{ radius: 'xl', px: '2' }} />
			
 
				 
			
 
				-    <Cell title="Supervision and closing incident" on:click={() => (visible7 = true)} />
			
 
				-    <ActionSheet bind:visible={visible7} {actions} on:close={() => (toastVisible1 = true)} />
			
 
				-    <Toast bind:visible={toastVisible1} message="closed ActionSheet!" />
			
 
				+	<Cell title="Supervision and closing incident" on:click={() => (visible7 = true)} />
			
 
				+	<ActionSheet bind:visible={visible7} {actions} on:close={() => (toastVisible1 = true)} />
			
 
				+	<Toast bind:visible={toastVisible1} message="closed ActionSheet!" />
			
 
				 
			
 
				-    <Cell title="Supervision and canceling incident" on:click={() => (visible8 = true)} />
			
 
				-    <ActionSheet bind:visible={visible8} {actions} showCancel on:cancel={() => (toastVisible2 = true)} />
			
 
				-    <Toast bind:visible={toastVisible2} message="Click to cancel!" />
			
 
				+	<Cell title="Supervision and canceling incident" on:click={() => (visible8 = true)} />
			
 
				+	<ActionSheet bind:visible={visible8} {actions} showCancel on:cancel={() => (toastVisible2 = true)} />
			
 
				+	<Toast bind:visible={toastVisible2} message="Click to cancel!" />
			
 
				 
			
 
				-    <Cell title="Survening options click event" on:click={() => (visible9 = true)} />
			
 
				-    <ActionSheet bind:visible={visible9} {actions} on:clickAction={clickActionFunc} />
			
 
				-    <Toast bind:visible={toastVisible3} message={`Click the ${index + 1} item,${item.content}!`} />
			
 
				+	<Cell title="Survening options click event" on:click={() => (visible9 = true)} />
			
 
				+	<ActionSheet bind:visible={visible9} {actions} on:clickAction={clickActionFunc} />
			
 
				+	<Toast bind:visible={toastVisible3} message={`Click the ${index + 1} item,${item.content}!`} />
			
 
				 
			
 
				-    <Cell title="Click the option not to be closed" on:click={() => (visible10 = true)} />
			
 
				-    <ActionSheet bind:visible={visible10} {actions} actionClosable={false} />
			
 
				+	<Cell title="Click the option not to be closed" on:click={() => (visible10 = true)} />
			
 
				+	<ActionSheet bind:visible={visible10} {actions} actionClosable={false} />
			
 
				 
			
 
				-    <Cell title="Options with pictures" on:click={() => (visible11 = true)} />
			
 
				-    <ActionSheet bind:visible={visible11} actions={action3} />
			
 
				+	<Cell title="Options with pictures" on:click={() => (visible11 = true)} />
			
 
				+	<ActionSheet bind:visible={visible11} actions={action3} />
			
 
				 
			
 
				-    <Cell title="Option left" on:click={() => (visible12 = true)} />
			
 
				-    <ActionSheet bind:visible={visible12} actions={action4} align="left" />
			
 
				+	<Cell title="Option left" on:click={() => (visible12 = true)} />
			
 
				+	<ActionSheet bind:visible={visible12} actions={action4} align="left" />
			
 
				 </div>
			
--- a/demo/src/pages/asyncPicker/AsyncPickerDemo.svelte
+++ b/demo/src/pages/asyncPicker/AsyncPickerDemo.svelte
@@ -1,321 +1,321 @@
 
				 <!-- AsyncPicker Demo -->
			
 
				 <script>
			
 
				-    import { AsyncPicker, Cell } from 'stdf';
			
 
				-    // 为避免 Demo 页面杂乱，具体参考数据放在 data.js 文件内，可查看此页面底部注释。
			
 
				-    import { linkageData, linkageDiffLabeData } from './data';
			
 
				+	import { AsyncPicker, Cell } from 'stdf';
			
 
				+	// 为避免 Demo 页面杂乱，具体参考数据放在 data.js 文件内，可查看此页面底部注释。
			
 
				+	import { linkageData, linkageDiffLabeData } from './data';
			
 
				 
			
 
				-    let visible1 = false;
			
 
				-    let visible2 = false;
			
 
				-    let visible3 = false;
			
 
				-    let visible4 = false;
			
 
				-    let visible5 = false;
			
 
				-    let visible6 = false;
			
 
				-    let visible7 = false;
			
 
				-    let visible8 = false;
			
 
				-    let visible9 = false;
			
 
				+	let visible1 = false;
			
 
				+	let visible2 = false;
			
 
				+	let visible3 = false;
			
 
				+	let visible4 = false;
			
 
				+	let visible5 = false;
			
 
				+	let visible6 = false;
			
 
				+	let visible7 = false;
			
 
				+	let visible8 = false;
			
 
				+	let visible9 = false;
			
 
				 
			
 
				-    let data = linkageData;
			
 
				-    let currentLevel = 0;
			
 
				-    let lastLevel = false;
			
 
				-    let firstLevel = true;
			
 
				-    let level1Data = linkageData[0].children;
			
 
				-    let titleBind = '请选择省级';
			
 
				+	let data = linkageData;
			
 
				+	let currentLevel = 0;
			
 
				+	let lastLevel = false;
			
 
				+	let firstLevel = true;
			
 
				+	let level1Data = linkageData[0].children;
			
 
				+	let titleBind = '请选择省级';
			
 
				 
			
 
				-    // 模拟 3 秒后获取到数据
			
 
				-    const nextFunc = e => {
			
 
				-        const { index } = e.detail;
			
 
				-        if (currentLevel === 0) {
			
 
				-            const nextData = linkageData[index].children;
			
 
				-            level1Data = nextData;
			
 
				-            setTimeout(() => {
			
 
				-                data = nextData;
			
 
				-                currentLevel = 1;
			
 
				-                titleBind = '请选择市级';
			
 
				-                firstLevel = false;
			
 
				-            }, 3000);
			
 
				-        } else if (currentLevel === 1) {
			
 
				-            const nextData = level1Data[index].children;
			
 
				-            setTimeout(() => {
			
 
				-                data = nextData;
			
 
				-                currentLevel = 2;
			
 
				-                titleBind = '请选择区级';
			
 
				-                lastLevel = true;
			
 
				-            }, 3000);
			
 
				-        } else {
			
 
				-            console.log('最后一级');
			
 
				-        }
			
 
				-    };
			
 
				-    const prevFunc = () => {
			
 
				-        if (currentLevel === 1) {
			
 
				-            const prevData = linkageData;
			
 
				-            setTimeout(() => {
			
 
				-                data = prevData;
			
 
				-                currentLevel = 0;
			
 
				-                titleBind = '请选择省级';
			
 
				-                firstLevel = true;
			
 
				-            }, 3000);
			
 
				-        } else if (currentLevel === 2) {
			
 
				-            const prevData = level1Data;
			
 
				-            setTimeout(() => {
			
 
				-                data = prevData;
			
 
				-                currentLevel = 1;
			
 
				-                titleBind = '请选择市级';
			
 
				-                lastLevel = false;
			
 
				-            }, 3000);
			
 
				-        } else {
			
 
				-            console.log('第一级');
			
 
				-        }
			
 
				-    };
			
 
				+	// 模拟 3 秒后获取到数据
			
 
				+	const nextFunc = e => {
			
 
				+		const { index } = e.detail;
			
 
				+		if (currentLevel === 0) {
			
 
				+			const nextData = linkageData[index].children;
			
 
				+			level1Data = nextData;
			
 
				+			setTimeout(() => {
			
 
				+				data = nextData;
			
 
				+				currentLevel = 1;
			
 
				+				titleBind = '请选择市级';
			
 
				+				firstLevel = false;
			
 
				+			}, 3000);
			
 
				+		} else if (currentLevel === 1) {
			
 
				+			const nextData = level1Data[index].children;
			
 
				+			setTimeout(() => {
			
 
				+				data = nextData;
			
 
				+				currentLevel = 2;
			
 
				+				titleBind = '请选择区级';
			
 
				+				lastLevel = true;
			
 
				+			}, 3000);
			
 
				+		} else {
			
 
				+			console.log('最后一级');
			
 
				+		}
			
 
				+	};
			
 
				+	const prevFunc = () => {
			
 
				+		if (currentLevel === 1) {
			
 
				+			const prevData = linkageData;
			
 
				+			setTimeout(() => {
			
 
				+				data = prevData;
			
 
				+				currentLevel = 0;
			
 
				+				titleBind = '请选择省级';
			
 
				+				firstLevel = true;
			
 
				+			}, 3000);
			
 
				+		} else if (currentLevel === 2) {
			
 
				+			const prevData = level1Data;
			
 
				+			setTimeout(() => {
			
 
				+				data = prevData;
			
 
				+				currentLevel = 1;
			
 
				+				titleBind = '请选择市级';
			
 
				+				lastLevel = false;
			
 
				+			}, 3000);
			
 
				+		} else {
			
 
				+			console.log('第一级');
			
 
				+		}
			
 
				+	};
			
 
				 
			
 
				-    let allIndexs = [];
			
 
				-    let allItems = [];
			
 
				-    const getAllDataFunc = e => {
			
 
				-        const { items, indexs } = e.detail;
			
 
				-        allItems = items;
			
 
				-        allIndexs = indexs;
			
 
				-    };
			
 
				+	let allIndexs = [];
			
 
				+	let allItems = [];
			
 
				+	const getAllDataFunc = e => {
			
 
				+		const { items, indexs } = e.detail;
			
 
				+		allItems = items;
			
 
				+		allIndexs = indexs;
			
 
				+	};
			
 
				 
			
 
				-    // 每一级对应的 labelKey 不同时的处理逻辑
			
 
				-    let diffLabelKeyData = linkageDiffLabeData;
			
 
				-    let labelKey = 'province';
			
 
				-    let diffLabelKeyCurrentLevel = 0;
			
 
				-    let diffLabelKeyLastLevel = false;
			
 
				-    let diffLabelKeyFirstLevel = true;
			
 
				-    let diffLabelKeyLevel1Data = linkageDiffLabeData[0].children;
			
 
				-    const diffLabelKeyNextFunc = e => {
			
 
				-        const { index } = e.detail;
			
 
				-        if (diffLabelKeyCurrentLevel === 0) {
			
 
				-            const nextData = linkageDiffLabeData[index].children;
			
 
				-            diffLabelKeyLevel1Data = nextData;
			
 
				-            setTimeout(() => {
			
 
				-                diffLabelKeyData = nextData;
			
 
				-                labelKey = 'city';
			
 
				-                diffLabelKeyCurrentLevel = 1;
			
 
				-                diffLabelKeyFirstLevel = false;
			
 
				-            }, 3000);
			
 
				-        } else if (diffLabelKeyCurrentLevel === 1) {
			
 
				-            const nextData = diffLabelKeyLevel1Data[index].children;
			
 
				-            setTimeout(() => {
			
 
				-                diffLabelKeyData = nextData;
			
 
				-                diffLabelKeyCurrentLevel = 2;
			
 
				-                labelKey = 'region';
			
 
				-                diffLabelKeyLastLevel = true;
			
 
				-            }, 3000);
			
 
				-        } else {
			
 
				-            console.log('最后一级');
			
 
				-        }
			
 
				-    };
			
 
				-    const diffLabelKeyPrevFunc = () => {
			
 
				-        if (diffLabelKeyCurrentLevel === 1) {
			
 
				-            const prevData = linkageDiffLabeData;
			
 
				-            setTimeout(() => {
			
 
				-                diffLabelKeyData = prevData;
			
 
				-                diffLabelKeyCurrentLevel = 0;
			
 
				-                diffLabelKeyFirstLevel = true;
			
 
				-                labelKey = 'province';
			
 
				-            }, 3000);
			
 
				-        } else if (diffLabelKeyCurrentLevel === 2) {
			
 
				-            const prevData = diffLabelKeyLevel1Data;
			
 
				-            setTimeout(() => {
			
 
				-                diffLabelKeyData = prevData;
			
 
				-                diffLabelKeyCurrentLevel = 1;
			
 
				-                labelKey = 'city';
			
 
				-                diffLabelKeyLastLevel = false;
			
 
				-            }, 3000);
			
 
				-        } else {
			
 
				-            console.log('第一级');
			
 
				-        }
			
 
				-    };
			
 
				+	// 每一级对应的 labelKey 不同时的处理逻辑
			
 
				+	let diffLabelKeyData = linkageDiffLabeData;
			
 
				+	let labelKey = 'province';
			
 
				+	let diffLabelKeyCurrentLevel = 0;
			
 
				+	let diffLabelKeyLastLevel = false;
			
 
				+	let diffLabelKeyFirstLevel = true;
			
 
				+	let diffLabelKeyLevel1Data = linkageDiffLabeData[0].children;
			
 
				+	const diffLabelKeyNextFunc = e => {
			
 
				+		const { index } = e.detail;
			
 
				+		if (diffLabelKeyCurrentLevel === 0) {
			
 
				+			const nextData = linkageDiffLabeData[index].children;
			
 
				+			diffLabelKeyLevel1Data = nextData;
			
 
				+			setTimeout(() => {
			
 
				+				diffLabelKeyData = nextData;
			
 
				+				labelKey = 'city';
			
 
				+				diffLabelKeyCurrentLevel = 1;
			
 
				+				diffLabelKeyFirstLevel = false;
			
 
				+			}, 3000);
			
 
				+		} else if (diffLabelKeyCurrentLevel === 1) {
			
 
				+			const nextData = diffLabelKeyLevel1Data[index].children;
			
 
				+			setTimeout(() => {
			
 
				+				diffLabelKeyData = nextData;
			
 
				+				diffLabelKeyCurrentLevel = 2;
			
 
				+				labelKey = 'region';
			
 
				+				diffLabelKeyLastLevel = true;
			
 
				+			}, 3000);
			
 
				+		} else {
			
 
				+			console.log('最后一级');
			
 
				+		}
			
 
				+	};
			
 
				+	const diffLabelKeyPrevFunc = () => {
			
 
				+		if (diffLabelKeyCurrentLevel === 1) {
			
 
				+			const prevData = linkageDiffLabeData;
			
 
				+			setTimeout(() => {
			
 
				+				diffLabelKeyData = prevData;
			
 
				+				diffLabelKeyCurrentLevel = 0;
			
 
				+				diffLabelKeyFirstLevel = true;
			
 
				+				labelKey = 'province';
			
 
				+			}, 3000);
			
 
				+		} else if (diffLabelKeyCurrentLevel === 2) {
			
 
				+			const prevData = diffLabelKeyLevel1Data;
			
 
				+			setTimeout(() => {
			
 
				+				diffLabelKeyData = prevData;
			
 
				+				diffLabelKeyCurrentLevel = 1;
			
 
				+				labelKey = 'city';
			
 
				+				diffLabelKeyLastLevel = false;
			
 
				+			}, 3000);
			
 
				+		} else {
			
 
				+			console.log('第一级');
			
 
				+		}
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-4">
			
 
				-    <div class="px-4">
			
 
				-        {#if allItems.length}
			
 
				-            当前选定了：
			
 
				-            {#each allItems as item}
			
 
				-                <span class="mr-2 text-primary dark:text-dark">{item.label}</span>
			
 
				-            {/each}
			
 
				-        {:else}
			
 
				-            <div>请选定数据</div>
			
 
				-        {/if}
			
 
				-    </div>
			
 
				-    <div class="px-4">
			
 
				-        {#if allIndexs.length}
			
 
				-            当前选定值位于所在列的索引值分别为：
			
 
				-            {#each allIndexs as index}
			
 
				-                <span class="mr-2 text-primary dark:text-dark">{index}</span>
			
 
				-            {/each}
			
 
				-        {:else}
			
 
				-            <div>请选定数据</div>
			
 
				-        {/if}
			
 
				-    </div>
			
 
				-    <Cell
			
 
				-        title="基础用法"
			
 
				-        on:click={() => {
			
 
				-            visible1 = true;
			
 
				-            data = linkageData;
			
 
				-            lastLevel = false;
			
 
				-            firstLevel = true;
			
 
				-            currentLevel = 0;
			
 
				-            level1Data = linkageData[0].children;
			
 
				-        }}
			
 
				-    />
			
 
				-    <AsyncPicker
			
 
				-        bind:visible={visible1}
			
 
				-        bind:data
			
 
				-        bind:lastLevel
			
 
				-        bind:firstLevel
			
 
				-        on:next={nextFunc}
			
 
				-        on:prev={prevFunc}
			
 
				-        on:confirm={getAllDataFunc}
			
 
				-    />
			
 
				+	<div class="px-4">
			
 
				+		{#if allItems.length}
			
 
				+			当前选定了：
			
 
				+			{#each allItems as item}
			
 
				+				<span class="mr-2 text-primary dark:text-dark">{item.label}</span>
			
 
				+			{/each}
			
 
				+		{:else}
			
 
				+			<div>请选定数据</div>
			
 
				+		{/if}
			
 
				+	</div>
			
 
				+	<div class="px-4">
			
 
				+		{#if allIndexs.length}
			
 
				+			当前选定值位于所在列的索引值分别为：
			
 
				+			{#each allIndexs as index}
			
 
				+				<span class="mr-2 text-primary dark:text-dark">{index}</span>
			
 
				+			{/each}
			
 
				+		{:else}
			
 
				+			<div>请选定数据</div>
			
 
				+		{/if}
			
 
				+	</div>
			
 
				+	<Cell
			
 
				+		title="基础用法"
			
 
				+		on:click={() => {
			
 
				+			visible1 = true;
			
 
				+			data = linkageData;
			
 
				+			lastLevel = false;
			
 
				+			firstLevel = true;
			
 
				+			currentLevel = 0;
			
 
				+			level1Data = linkageData[0].children;
			
 
				+		}}
			
 
				+	/>
			
 
				+	<AsyncPicker
			
 
				+		bind:visible={visible1}
			
 
				+		bind:data
			
 
				+		bind:lastLevel
			
 
				+		bind:firstLevel
			
 
				+		on:next={nextFunc}
			
 
				+		on:prev={prevFunc}
			
 
				+		on:confirm={getAllDataFunc}
			
 
				+	/>
			
 
				 
			
 
				-    <Cell
			
 
				-        title="可见 7 行数为"
			
 
				-        on:click={() => {
			
 
				-            visible2 = true;
			
 
				-            data = linkageData;
			
 
				-            lastLevel = false;
			
 
				-            firstLevel = true;
			
 
				-            currentLevel = 0;
			
 
				-            level1Data = linkageData[0].children;
			
 
				-        }}
			
 
				-    />
			
 
				-    <AsyncPicker bind:visible={visible2} bind:data bind:lastLevel bind:firstLevel on:next={nextFunc} on:prev={prevFunc} showRow={7} />
			
 
				+	<Cell
			
 
				+		title="可见 7 行数为"
			
 
				+		on:click={() => {
			
 
				+			visible2 = true;
			
 
				+			data = linkageData;
			
 
				+			lastLevel = false;
			
 
				+			firstLevel = true;
			
 
				+			currentLevel = 0;
			
 
				+			level1Data = linkageData[0].children;
			
 
				+		}}
			
 
				+	/>
			
 
				+	<AsyncPicker bind:visible={visible2} bind:data bind:lastLevel bind:firstLevel on:next={nextFunc} on:prev={prevFunc} showRow={7} />
			
 
				 
			
 
				-    <Cell
			
 
				-        title="左对齐"
			
 
				-        on:click={() => {
			
 
				-            visible3 = true;
			
 
				-            data = linkageData;
			
 
				-            lastLevel = false;
			
 
				-            firstLevel = true;
			
 
				-            currentLevel = 0;
			
 
				-            level1Data = linkageData[0].children;
			
 
				-        }}
			
 
				-    />
			
 
				-    <AsyncPicker bind:visible={visible3} bind:data bind:lastLevel bind:firstLevel align="left" on:next={nextFunc} on:prev={prevFunc} />
			
 
				+	<Cell
			
 
				+		title="左对齐"
			
 
				+		on:click={() => {
			
 
				+			visible3 = true;
			
 
				+			data = linkageData;
			
 
				+			lastLevel = false;
			
 
				+			firstLevel = true;
			
 
				+			currentLevel = 0;
			
 
				+			level1Data = linkageData[0].children;
			
 
				+		}}
			
 
				+	/>
			
 
				+	<AsyncPicker bind:visible={visible3} bind:data bind:lastLevel bind:firstLevel align="left" on:next={nextFunc} on:prev={prevFunc} />
			
 
				 
			
 
				-    <Cell
			
 
				-        title="自定义上下一步文字"
			
 
				-        on:click={() => {
			
 
				-            visible5 = true;
			
 
				-            data = linkageData;
			
 
				-            lastLevel = false;
			
 
				-            firstLevel = true;
			
 
				-            currentLevel = 0;
			
 
				-            level1Data = linkageData[0].children;
			
 
				-        }}
			
 
				-    />
			
 
				-    <AsyncPicker
			
 
				-        bind:visible={visible5}
			
 
				-        bind:data
			
 
				-        bind:lastLevel
			
 
				-        bind:firstLevel
			
 
				-        on:next={nextFunc}
			
 
				-        on:prev={prevFunc}
			
 
				-        nextText="继续"
			
 
				-        prevText="返回"
			
 
				-    />
			
 
				+	<Cell
			
 
				+		title="自定义上下一步文字"
			
 
				+		on:click={() => {
			
 
				+			visible5 = true;
			
 
				+			data = linkageData;
			
 
				+			lastLevel = false;
			
 
				+			firstLevel = true;
			
 
				+			currentLevel = 0;
			
 
				+			level1Data = linkageData[0].children;
			
 
				+		}}
			
 
				+	/>
			
 
				+	<AsyncPicker
			
 
				+		bind:visible={visible5}
			
 
				+		bind:data
			
 
				+		bind:lastLevel
			
 
				+		bind:firstLevel
			
 
				+		on:next={nextFunc}
			
 
				+		on:prev={prevFunc}
			
 
				+		nextText="继续"
			
 
				+		prevText="返回"
			
 
				+	/>
			
 
				 
			
 
				-    <Cell
			
 
				-        title="不同级别使用不同的 labelKey"
			
 
				-        on:click={() => {
			
 
				-            visible4 = true;
			
 
				-            diffLabelKeyData = linkageDiffLabeData;
			
 
				-            labelKey = 'province';
			
 
				-            diffLabelKeyCurrentLevel = 0;
			
 
				-            diffLabelKeyLastLevel = false;
			
 
				-            diffLabelKeyFirstLevel = true;
			
 
				-            diffLabelKeyLevel1Data = linkageDiffLabeData[0].children;
			
 
				-        }}
			
 
				-    />
			
 
				-    <AsyncPicker
			
 
				-        bind:visible={visible4}
			
 
				-        bind:data={diffLabelKeyData}
			
 
				-        bind:lastLevel={diffLabelKeyLastLevel}
			
 
				-        bind:firstLevel={diffLabelKeyFirstLevel}
			
 
				-        bind:labelKey
			
 
				-        on:next={diffLabelKeyNextFunc}
			
 
				-        on:prev={diffLabelKeyPrevFunc}
			
 
				-    />
			
 
				+	<Cell
			
 
				+		title="不同级别使用不同的 labelKey"
			
 
				+		on:click={() => {
			
 
				+			visible4 = true;
			
 
				+			diffLabelKeyData = linkageDiffLabeData;
			
 
				+			labelKey = 'province';
			
 
				+			diffLabelKeyCurrentLevel = 0;
			
 
				+			diffLabelKeyLastLevel = false;
			
 
				+			diffLabelKeyFirstLevel = true;
			
 
				+			diffLabelKeyLevel1Data = linkageDiffLabeData[0].children;
			
 
				+		}}
			
 
				+	/>
			
 
				+	<AsyncPicker
			
 
				+		bind:visible={visible4}
			
 
				+		bind:data={diffLabelKeyData}
			
 
				+		bind:lastLevel={diffLabelKeyLastLevel}
			
 
				+		bind:firstLevel={diffLabelKeyFirstLevel}
			
 
				+		bind:labelKey
			
 
				+		on:next={diffLabelKeyNextFunc}
			
 
				+		on:prev={diffLabelKeyPrevFunc}
			
 
				+	/>
			
 
				 
			
 
				-    <Cell
			
 
				-        title="换一个 Loading 效果"
			
 
				-        on:click={() => {
			
 
				-            visible6 = true;
			
 
				-            data = linkageData;
			
 
				-            lastLevel = false;
			
 
				-            firstLevel = true;
			
 
				-            currentLevel = 0;
			
 
				-            level1Data = linkageData[0].children;
			
 
				-        }}
			
 
				-    />
			
 
				-    <AsyncPicker
			
 
				-        bind:visible={visible6}
			
 
				-        bind:data
			
 
				-        bind:lastLevel
			
 
				-        bind:firstLevel
			
 
				-        on:next={nextFunc}
			
 
				-        on:prev={prevFunc}
			
 
				-        loading={{ type: '1_15', width: 12, height: 12 }}
			
 
				-    />
			
 
				+	<Cell
			
 
				+		title="换一个 Loading 效果"
			
 
				+		on:click={() => {
			
 
				+			visible6 = true;
			
 
				+			data = linkageData;
			
 
				+			lastLevel = false;
			
 
				+			firstLevel = true;
			
 
				+			currentLevel = 0;
			
 
				+			level1Data = linkageData[0].children;
			
 
				+		}}
			
 
				+	/>
			
 
				+	<AsyncPicker
			
 
				+		bind:visible={visible6}
			
 
				+		bind:data
			
 
				+		bind:lastLevel
			
 
				+		bind:firstLevel
			
 
				+		on:next={nextFunc}
			
 
				+		on:prev={prevFunc}
			
 
				+		loading={{ type: '1_15', width: 12, height: 12 }}
			
 
				+	/>
			
 
				 
			
 
				-    <Cell
			
 
				-        title="顶部来点圆角"
			
 
				-        on:click={() => {
			
 
				-            visible8 = true;
			
 
				-            data = linkageData;
			
 
				-            lastLevel = false;
			
 
				-            firstLevel = true;
			
 
				-            currentLevel = 0;
			
 
				-            level1Data = linkageData[0].children;
			
 
				-        }}
			
 
				-    />
			
 
				-    <AsyncPicker
			
 
				-        bind:visible={visible8}
			
 
				-        bind:data
			
 
				-        bind:lastLevel
			
 
				-        bind:firstLevel
			
 
				-        on:next={nextFunc}
			
 
				-        on:prev={prevFunc}
			
 
				-        popup={{ radius: 'xl' }}
			
 
				-    />
			
 
				+	<Cell
			
 
				+		title="顶部来点圆角"
			
 
				+		on:click={() => {
			
 
				+			visible8 = true;
			
 
				+			data = linkageData;
			
 
				+			lastLevel = false;
			
 
				+			firstLevel = true;
			
 
				+			currentLevel = 0;
			
 
				+			level1Data = linkageData[0].children;
			
 
				+		}}
			
 
				+	/>
			
 
				+	<AsyncPicker
			
 
				+		bind:visible={visible8}
			
 
				+		bind:data
			
 
				+		bind:lastLevel
			
 
				+		bind:firstLevel
			
 
				+		on:next={nextFunc}
			
 
				+		on:prev={prevFunc}
			
 
				+		popup={{ radius: 'xl' }}
			
 
				+	/>
			
 
				 
			
 
				-    <Cell
			
 
				-        title="显示已选选项"
			
 
				-        on:click={() => {
			
 
				-            visible7 = true;
			
 
				-            data = linkageData;
			
 
				-            lastLevel = false;
			
 
				-            firstLevel = true;
			
 
				-            currentLevel = 0;
			
 
				-            level1Data = linkageData[0].children;
			
 
				-        }}
			
 
				-    />
			
 
				-    <AsyncPicker bind:visible={visible7} bind:data bind:lastLevel bind:firstLevel on:next={nextFunc} on:prev={prevFunc} showSelected />
			
 
				+	<Cell
			
 
				+		title="显示已选选项"
			
 
				+		on:click={() => {
			
 
				+			visible7 = true;
			
 
				+			data = linkageData;
			
 
				+			lastLevel = false;
			
 
				+			firstLevel = true;
			
 
				+			currentLevel = 0;
			
 
				+			level1Data = linkageData[0].children;
			
 
				+		}}
			
 
				+	/>
			
 
				+	<AsyncPicker bind:visible={visible7} bind:data bind:lastLevel bind:firstLevel on:next={nextFunc} on:prev={prevFunc} showSelected />
			
 
				 
			
 
				-    <Cell
			
 
				-        title="动态改变标题"
			
 
				-        on:click={() => {
			
 
				-            visible9 = true;
			
 
				-            data = linkageData;
			
 
				-            lastLevel = false;
			
 
				-            firstLevel = true;
			
 
				-            currentLevel = 0;
			
 
				-            titleBind = '请选择省级';
			
 
				-            level1Data = linkageData[0].children;
			
 
				-        }}
			
 
				-    />
			
 
				-    <AsyncPicker
			
 
				-        bind:visible={visible9}
			
 
				-        bind:data
			
 
				-        bind:lastLevel
			
 
				-        bind:firstLevel
			
 
				-        bind:title={titleBind}
			
 
				-        on:next={nextFunc}
			
 
				-        on:prev={prevFunc}
			
 
				-    />
			
 
				+	<Cell
			
 
				+		title="动态改变标题"
			
 
				+		on:click={() => {
			
 
				+			visible9 = true;
			
 
				+			data = linkageData;
			
 
				+			lastLevel = false;
			
 
				+			firstLevel = true;
			
 
				+			currentLevel = 0;
			
 
				+			titleBind = '请选择省级';
			
 
				+			level1Data = linkageData[0].children;
			
 
				+		}}
			
 
				+	/>
			
 
				+	<AsyncPicker
			
 
				+		bind:visible={visible9}
			
 
				+		bind:data
			
 
				+		bind:lastLevel
			
 
				+		bind:firstLevel
			
 
				+		bind:title={titleBind}
			
 
				+		on:next={nextFunc}
			
 
				+		on:prev={prevFunc}
			
 
				+	/>
			
 
				 </div>
			
 
				 <!-- 
			
 
				 const linkageData = [
			
--- a/demo/src/pages/asyncPicker/AsyncPickerDemo_en.svelte
+++ b/demo/src/pages/asyncPicker/AsyncPickerDemo_en.svelte
@@ -1,321 +1,321 @@
 
				 <!-- AsyncPicker Demo -->
			
 
				 <script>
			
 
				-    import { AsyncPicker, Cell } from 'stdf';
			
 
				-    // In order to avoid the messy Demo page, the specific reference data is placed in the data.js file, and you can view the bottom of the page.
			
 
				-    import { linkageData, linkageDiffLabeData } from './data_en';
			
 
				+	import { AsyncPicker, Cell } from 'stdf';
			
 
				+	// In order to avoid the messy Demo page, the specific reference data is placed in the data.js file, and you can view the bottom of the page.
			
 
				+	import { linkageData, linkageDiffLabeData } from './data_en';
			
 
				 
			
 
				-    let visible1 = false;
			
 
				-    let visible2 = false;
			
 
				-    let visible3 = false;
			
 
				-    let visible4 = false;
			
 
				-    let visible5 = false;
			
 
				-    let visible6 = false;
			
 
				-    let visible7 = false;
			
 
				-    let visible8 = false;
			
 
				-    let visible9 = false;
			
 
				+	let visible1 = false;
			
 
				+	let visible2 = false;
			
 
				+	let visible3 = false;
			
 
				+	let visible4 = false;
			
 
				+	let visible5 = false;
			
 
				+	let visible6 = false;
			
 
				+	let visible7 = false;
			
 
				+	let visible8 = false;
			
 
				+	let visible9 = false;
			
 
				 
			
 
				-    let data = linkageData;
			
 
				-    let currentLevel = 0;
			
 
				-    let lastLevel = false;
			
 
				-    let firstLevel = true;
			
 
				-    let level1Data = linkageData[0].children;
			
 
				-    let titleBind = 'Please select the provincial level';
			
 
				+	let data = linkageData;
			
 
				+	let currentLevel = 0;
			
 
				+	let lastLevel = false;
			
 
				+	let firstLevel = true;
			
 
				+	let level1Data = linkageData[0].children;
			
 
				+	let titleBind = 'Please select the provincial level';
			
 
				 
			
 
				-    // Get the data after simulation for 3 seconds
			
 
				-    const nextFunc = e => {
			
 
				-        const { index } = e.detail;
			
 
				-        if (currentLevel === 0) {
			
 
				-            const nextData = linkageData[index].children;
			
 
				-            level1Data = nextData;
			
 
				-            setTimeout(() => {
			
 
				-                data = nextData;
			
 
				-                currentLevel = 1;
			
 
				-                titleBind = 'Please select the city level';
			
 
				-                firstLevel = false;
			
 
				-            }, 3000);
			
 
				-        } else if (currentLevel === 1) {
			
 
				-            const nextData = level1Data[index].children;
			
 
				-            setTimeout(() => {
			
 
				-                data = nextData;
			
 
				-                currentLevel = 2;
			
 
				-                titleBind = 'Please select the district level';
			
 
				-                lastLevel = true;
			
 
				-            }, 3000);
			
 
				-        } else {
			
 
				-            console.log('Last Level');
			
 
				-        }
			
 
				-    };
			
 
				-    const prevFunc = () => {
			
 
				-        if (currentLevel === 1) {
			
 
				-            const prevData = linkageData;
			
 
				-            setTimeout(() => {
			
 
				-                data = prevData;
			
 
				-                currentLevel = 0;
			
 
				-                titleBind = 'Please select the provincial level';
			
 
				-                firstLevel = true;
			
 
				-            }, 3000);
			
 
				-        } else if (currentLevel === 2) {
			
 
				-            const prevData = level1Data;
			
 
				-            setTimeout(() => {
			
 
				-                data = prevData;
			
 
				-                currentLevel = 1;
			
 
				-                titleBind = 'Please select the city level';
			
 
				-                lastLevel = false;
			
 
				-            }, 3000);
			
 
				-        } else {
			
 
				-            console.log('First level');
			
 
				-        }
			
 
				-    };
			
 
				+	// Get the data after simulation for 3 seconds
			
 
				+	const nextFunc = e => {
			
 
				+		const { index } = e.detail;
			
 
				+		if (currentLevel === 0) {
			
 
				+			const nextData = linkageData[index].children;
			
 
				+			level1Data = nextData;
			
 
				+			setTimeout(() => {
			
 
				+				data = nextData;
			
 
				+				currentLevel = 1;
			
 
				+				titleBind = 'Please select the city level';
			
 
				+				firstLevel = false;
			
 
				+			}, 3000);
			
 
				+		} else if (currentLevel === 1) {
			
 
				+			const nextData = level1Data[index].children;
			
 
				+			setTimeout(() => {
			
 
				+				data = nextData;
			
 
				+				currentLevel = 2;
			
 
				+				titleBind = 'Please select the district level';
			
 
				+				lastLevel = true;
			
 
				+			}, 3000);
			
 
				+		} else {
			
 
				+			console.log('Last Level');
			
 
				+		}
			
 
				+	};
			
 
				+	const prevFunc = () => {
			
 
				+		if (currentLevel === 1) {
			
 
				+			const prevData = linkageData;
			
 
				+			setTimeout(() => {
			
 
				+				data = prevData;
			
 
				+				currentLevel = 0;
			
 
				+				titleBind = 'Please select the provincial level';
			
 
				+				firstLevel = true;
			
 
				+			}, 3000);
			
 
				+		} else if (currentLevel === 2) {
			
 
				+			const prevData = level1Data;
			
 
				+			setTimeout(() => {
			
 
				+				data = prevData;
			
 
				+				currentLevel = 1;
			
 
				+				titleBind = 'Please select the city level';
			
 
				+				lastLevel = false;
			
 
				+			}, 3000);
			
 
				+		} else {
			
 
				+			console.log('First level');
			
 
				+		}
			
 
				+	};
			
 
				 
			
 
				-    let allIndexs = [];
			
 
				-    let allItems = [];
			
 
				-    const getAllDataFunc = e => {
			
 
				-        const { items, indexs } = e.detail;
			
 
				-        allItems = items;
			
 
				-        allIndexs = indexs;
			
 
				-    };
			
 
				+	let allIndexs = [];
			
 
				+	let allItems = [];
			
 
				+	const getAllDataFunc = e => {
			
 
				+		const { items, indexs } = e.detail;
			
 
				+		allItems = items;
			
 
				+		allIndexs = indexs;
			
 
				+	};
			
 
				 
			
 
				-    // The processing logic of Labelkey at each level at different times
			
 
				-    let diffLabelKeyData = linkageDiffLabeData;
			
 
				-    let labelKey = 'province';
			
 
				-    let diffLabelKeyCurrentLevel = 0;
			
 
				-    let diffLabelKeyLastLevel = false;
			
 
				-    let diffLabelKeyFirstLevel = true;
			
 
				-    let diffLabelKeyLevel1Data = linkageDiffLabeData[0].children;
			
 
				-    const diffLabelKeyNextFunc = e => {
			
 
				-        const { index } = e.detail;
			
 
				-        if (diffLabelKeyCurrentLevel === 0) {
			
 
				-            const nextData = linkageDiffLabeData[index].children;
			
 
				-            diffLabelKeyLevel1Data = nextData;
			
 
				-            setTimeout(() => {
			
 
				-                diffLabelKeyData = nextData;
			
 
				-                labelKey = 'city';
			
 
				-                diffLabelKeyCurrentLevel = 1;
			
 
				-                diffLabelKeyFirstLevel = false;
			
 
				-            }, 3000);
			
 
				-        } else if (diffLabelKeyCurrentLevel === 1) {
			
 
				-            const nextData = diffLabelKeyLevel1Data[index].children;
			
 
				-            setTimeout(() => {
			
 
				-                diffLabelKeyData = nextData;
			
 
				-                diffLabelKeyCurrentLevel = 2;
			
 
				-                labelKey = 'region';
			
 
				-                diffLabelKeyLastLevel = true;
			
 
				-            }, 3000);
			
 
				-        } else {
			
 
				-            console.log('Last level');
			
 
				-        }
			
 
				-    };
			
 
				-    const diffLabelKeyPrevFunc = () => {
			
 
				-        if (diffLabelKeyCurrentLevel === 1) {
			
 
				-            const prevData = linkageDiffLabeData;
			
 
				-            setTimeout(() => {
			
 
				-                diffLabelKeyData = prevData;
			
 
				-                diffLabelKeyCurrentLevel = 0;
			
 
				-                diffLabelKeyFirstLevel = true;
			
 
				-                labelKey = 'province';
			
 
				-            }, 3000);
			
 
				-        } else if (diffLabelKeyCurrentLevel === 2) {
			
 
				-            const prevData = diffLabelKeyLevel1Data;
			
 
				-            setTimeout(() => {
			
 
				-                diffLabelKeyData = prevData;
			
 
				-                diffLabelKeyCurrentLevel = 1;
			
 
				-                labelKey = 'city';
			
 
				-                diffLabelKeyLastLevel = false;
			
 
				-            }, 3000);
			
 
				-        } else {
			
 
				-            console.log('First level');
			
 
				-        }
			
 
				-    };
			
 
				+	// The processing logic of Labelkey at each level at different times
			
 
				+	let diffLabelKeyData = linkageDiffLabeData;
			
 
				+	let labelKey = 'province';
			
 
				+	let diffLabelKeyCurrentLevel = 0;
			
 
				+	let diffLabelKeyLastLevel = false;
			
 
				+	let diffLabelKeyFirstLevel = true;
			
 
				+	let diffLabelKeyLevel1Data = linkageDiffLabeData[0].children;
			
 
				+	const diffLabelKeyNextFunc = e => {
			
 
				+		const { index } = e.detail;
			
 
				+		if (diffLabelKeyCurrentLevel === 0) {
			
 
				+			const nextData = linkageDiffLabeData[index].children;
			
 
				+			diffLabelKeyLevel1Data = nextData;
			
 
				+			setTimeout(() => {
			
 
				+				diffLabelKeyData = nextData;
			
 
				+				labelKey = 'city';
			
 
				+				diffLabelKeyCurrentLevel = 1;
			
 
				+				diffLabelKeyFirstLevel = false;
			
 
				+			}, 3000);
			
 
				+		} else if (diffLabelKeyCurrentLevel === 1) {
			
 
				+			const nextData = diffLabelKeyLevel1Data[index].children;
			
 
				+			setTimeout(() => {
			
 
				+				diffLabelKeyData = nextData;
			
 
				+				diffLabelKeyCurrentLevel = 2;
			
 
				+				labelKey = 'region';
			
 
				+				diffLabelKeyLastLevel = true;
			
 
				+			}, 3000);
			
 
				+		} else {
			
 
				+			console.log('Last level');
			
 
				+		}
			
 
				+	};
			
 
				+	const diffLabelKeyPrevFunc = () => {
			
 
				+		if (diffLabelKeyCurrentLevel === 1) {
			
 
				+			const prevData = linkageDiffLabeData;
			
 
				+			setTimeout(() => {
			
 
				+				diffLabelKeyData = prevData;
			
 
				+				diffLabelKeyCurrentLevel = 0;
			
 
				+				diffLabelKeyFirstLevel = true;
			
 
				+				labelKey = 'province';
			
 
				+			}, 3000);
			
 
				+		} else if (diffLabelKeyCurrentLevel === 2) {
			
 
				+			const prevData = diffLabelKeyLevel1Data;
			
 
				+			setTimeout(() => {
			
 
				+				diffLabelKeyData = prevData;
			
 
				+				diffLabelKeyCurrentLevel = 1;
			
 
				+				labelKey = 'city';
			
 
				+				diffLabelKeyLastLevel = false;
			
 
				+			}, 3000);
			
 
				+		} else {
			
 
				+			console.log('First level');
			
 
				+		}
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-4 text-left">
			
 
				-    <div class="px-4">
			
 
				-        {#if allItems.length}
			
 
				-            Currently selected:
			
 
				-            {#each allItems as item}
			
 
				-                <span class="mr-2 text-primary dark:text-dark">{item.label}</span>
			
 
				-            {/each}
			
 
				-        {:else}
			
 
				-            <div>Please select the data</div>
			
 
				-        {/if}
			
 
				-    </div>
			
 
				-    <div class="px-4">
			
 
				-        {#if allIndexs.length}
			
 
				-            The index value of the current selection value is located::
			
 
				-            {#each allIndexs as index}
			
 
				-                <span class="mr-2 text-primary dark:text-dark">{index}</span>
			
 
				-            {/each}
			
 
				-        {:else}
			
 
				-            <div>Please select the data</div>
			
 
				-        {/if}
			
 
				-    </div>
			
 
				-    <Cell
			
 
				-        title="Basic usage"
			
 
				-        on:click={() => {
			
 
				-            visible1 = true;
			
 
				-            data = linkageData;
			
 
				-            lastLevel = false;
			
 
				-            firstLevel = true;
			
 
				-            currentLevel = 0;
			
 
				-            level1Data = linkageData[0].children;
			
 
				-        }}
			
 
				-    />
			
 
				-    <AsyncPicker
			
 
				-        bind:visible={visible1}
			
 
				-        bind:data
			
 
				-        bind:lastLevel
			
 
				-        bind:firstLevel
			
 
				-        on:next={nextFunc}
			
 
				-        on:prev={prevFunc}
			
 
				-        on:confirm={getAllDataFunc}
			
 
				-    />
			
 
				+	<div class="px-4">
			
 
				+		{#if allItems.length}
			
 
				+			Currently selected:
			
 
				+			{#each allItems as item}
			
 
				+				<span class="mr-2 text-primary dark:text-dark">{item.label}</span>
			
 
				+			{/each}
			
 
				+		{:else}
			
 
				+			<div>Please select the data</div>
			
 
				+		{/if}
			
 
				+	</div>
			
 
				+	<div class="px-4">
			
 
				+		{#if allIndexs.length}
			
 
				+			The index value of the current selection value is located::
			
 
				+			{#each allIndexs as index}
			
 
				+				<span class="mr-2 text-primary dark:text-dark">{index}</span>
			
 
				+			{/each}
			
 
				+		{:else}
			
 
				+			<div>Please select the data</div>
			
 
				+		{/if}
			
 
				+	</div>
			
 
				+	<Cell
			
 
				+		title="Basic usage"
			
 
				+		on:click={() => {
			
 
				+			visible1 = true;
			
 
				+			data = linkageData;
			
 
				+			lastLevel = false;
			
 
				+			firstLevel = true;
			
 
				+			currentLevel = 0;
			
 
				+			level1Data = linkageData[0].children;
			
 
				+		}}
			
 
				+	/>
			
 
				+	<AsyncPicker
			
 
				+		bind:visible={visible1}
			
 
				+		bind:data
			
 
				+		bind:lastLevel
			
 
				+		bind:firstLevel
			
 
				+		on:next={nextFunc}
			
 
				+		on:prev={prevFunc}
			
 
				+		on:confirm={getAllDataFunc}
			
 
				+	/>
			
 
				 
			
 
				-    <Cell
			
 
				-        title="It can be seen that the number of 7 lines is"
			
 
				-        on:click={() => {
			
 
				-            visible2 = true;
			
 
				-            data = linkageData;
			
 
				-            lastLevel = false;
			
 
				-            firstLevel = true;
			
 
				-            currentLevel = 0;
			
 
				-            level1Data = linkageData[0].children;
			
 
				-        }}
			
 
				-    />
			
 
				-    <AsyncPicker bind:visible={visible2} bind:data bind:lastLevel bind:firstLevel on:next={nextFunc} on:prev={prevFunc} showRow={7} />
			
 
				+	<Cell
			
 
				+		title="It can be seen that the number of 7 lines is"
			
 
				+		on:click={() => {
			
 
				+			visible2 = true;
			
 
				+			data = linkageData;
			
 
				+			lastLevel = false;
			
 
				+			firstLevel = true;
			
 
				+			currentLevel = 0;
			
 
				+			level1Data = linkageData[0].children;
			
 
				+		}}
			
 
				+	/>
			
 
				+	<AsyncPicker bind:visible={visible2} bind:data bind:lastLevel bind:firstLevel on:next={nextFunc} on:prev={prevFunc} showRow={7} />
			
 
				 
			
 
				-    <Cell
			
 
				-        title="Left -handed alignment"
			
 
				-        on:click={() => {
			
 
				-            visible3 = true;
			
 
				-            data = linkageData;
			
 
				-            lastLevel = false;
			
 
				-            firstLevel = true;
			
 
				-            currentLevel = 0;
			
 
				-            level1Data = linkageData[0].children;
			
 
				-        }}
			
 
				-    />
			
 
				-    <AsyncPicker bind:visible={visible3} bind:data bind:lastLevel bind:firstLevel align="left" on:next={nextFunc} on:prev={prevFunc} />
			
 
				+	<Cell
			
 
				+		title="Left -handed alignment"
			
 
				+		on:click={() => {
			
 
				+			visible3 = true;
			
 
				+			data = linkageData;
			
 
				+			lastLevel = false;
			
 
				+			firstLevel = true;
			
 
				+			currentLevel = 0;
			
 
				+			level1Data = linkageData[0].children;
			
 
				+		}}
			
 
				+	/>
			
 
				+	<AsyncPicker bind:visible={visible3} bind:data bind:lastLevel bind:firstLevel align="left" on:next={nextFunc} on:prev={prevFunc} />
			
 
				 
			
 
				-    <Cell
			
 
				-        title="Customize the next text"
			
 
				-        on:click={() => {
			
 
				-            visible5 = true;
			
 
				-            data = linkageData;
			
 
				-            lastLevel = false;
			
 
				-            firstLevel = true;
			
 
				-            currentLevel = 0;
			
 
				-            level1Data = linkageData[0].children;
			
 
				-        }}
			
 
				-    />
			
 
				-    <AsyncPicker
			
 
				-        bind:visible={visible5}
			
 
				-        bind:data
			
 
				-        bind:lastLevel
			
 
				-        bind:firstLevel
			
 
				-        on:next={nextFunc}
			
 
				-        on:prev={prevFunc}
			
 
				-        nextText="continue"
			
 
				-        prevText="return"
			
 
				-    />
			
 
				+	<Cell
			
 
				+		title="Customize the next text"
			
 
				+		on:click={() => {
			
 
				+			visible5 = true;
			
 
				+			data = linkageData;
			
 
				+			lastLevel = false;
			
 
				+			firstLevel = true;
			
 
				+			currentLevel = 0;
			
 
				+			level1Data = linkageData[0].children;
			
 
				+		}}
			
 
				+	/>
			
 
				+	<AsyncPicker
			
 
				+		bind:visible={visible5}
			
 
				+		bind:data
			
 
				+		bind:lastLevel
			
 
				+		bind:firstLevel
			
 
				+		on:next={nextFunc}
			
 
				+		on:prev={prevFunc}
			
 
				+		nextText="continue"
			
 
				+		prevText="return"
			
 
				+	/>
			
 
				 
			
 
				-    <Cell
			
 
				-        title="Use different Labelkey at different levels"
			
 
				-        on:click={() => {
			
 
				-            visible4 = true;
			
 
				-            diffLabelKeyData = linkageDiffLabeData;
			
 
				-            labelKey = 'province';
			
 
				-            diffLabelKeyCurrentLevel = 0;
			
 
				-            diffLabelKeyLastLevel = false;
			
 
				-            diffLabelKeyFirstLevel = true;
			
 
				-            diffLabelKeyLevel1Data = linkageDiffLabeData[0].children;
			
 
				-        }}
			
 
				-    />
			
 
				-    <AsyncPicker
			
 
				-        bind:visible={visible4}
			
 
				-        bind:data={diffLabelKeyData}
			
 
				-        bind:lastLevel={diffLabelKeyLastLevel}
			
 
				-        bind:firstLevel={diffLabelKeyFirstLevel}
			
 
				-        bind:labelKey
			
 
				-        on:next={diffLabelKeyNextFunc}
			
 
				-        on:prev={diffLabelKeyPrevFunc}
			
 
				-    />
			
 
				+	<Cell
			
 
				+		title="Use different Labelkey at different levels"
			
 
				+		on:click={() => {
			
 
				+			visible4 = true;
			
 
				+			diffLabelKeyData = linkageDiffLabeData;
			
 
				+			labelKey = 'province';
			
 
				+			diffLabelKeyCurrentLevel = 0;
			
 
				+			diffLabelKeyLastLevel = false;
			
 
				+			diffLabelKeyFirstLevel = true;
			
 
				+			diffLabelKeyLevel1Data = linkageDiffLabeData[0].children;
			
 
				+		}}
			
 
				+	/>
			
 
				+	<AsyncPicker
			
 
				+		bind:visible={visible4}
			
 
				+		bind:data={diffLabelKeyData}
			
 
				+		bind:lastLevel={diffLabelKeyLastLevel}
			
 
				+		bind:firstLevel={diffLabelKeyFirstLevel}
			
 
				+		bind:labelKey
			
 
				+		on:next={diffLabelKeyNextFunc}
			
 
				+		on:prev={diffLabelKeyPrevFunc}
			
 
				+	/>
			
 
				 
			
 
				-    <Cell
			
 
				-        title="Change a loading"
			
 
				-        on:click={() => {
			
 
				-            visible6 = true;
			
 
				-            data = linkageData;
			
 
				-            lastLevel = false;
			
 
				-            firstLevel = true;
			
 
				-            currentLevel = 0;
			
 
				-            level1Data = linkageData[0].children;
			
 
				-        }}
			
 
				-    />
			
 
				-    <AsyncPicker
			
 
				-        bind:visible={visible6}
			
 
				-        bind:data
			
 
				-        bind:lastLevel
			
 
				-        bind:firstLevel
			
 
				-        on:next={nextFunc}
			
 
				-        on:prev={prevFunc}
			
 
				-        loading={{ type: '1_15', width: 12, height: 12 }}
			
 
				-    />
			
 
				+	<Cell
			
 
				+		title="Change a loading"
			
 
				+		on:click={() => {
			
 
				+			visible6 = true;
			
 
				+			data = linkageData;
			
 
				+			lastLevel = false;
			
 
				+			firstLevel = true;
			
 
				+			currentLevel = 0;
			
 
				+			level1Data = linkageData[0].children;
			
 
				+		}}
			
 
				+	/>
			
 
				+	<AsyncPicker
			
 
				+		bind:visible={visible6}
			
 
				+		bind:data
			
 
				+		bind:lastLevel
			
 
				+		bind:firstLevel
			
 
				+		on:next={nextFunc}
			
 
				+		on:prev={prevFunc}
			
 
				+		loading={{ type: '1_15', width: 12, height: 12 }}
			
 
				+	/>
			
 
				 
			
 
				-    <Cell
			
 
				-        title="Radius on the top"
			
 
				-        on:click={() => {
			
 
				-            visible8 = true;
			
 
				-            data = linkageData;
			
 
				-            lastLevel = false;
			
 
				-            firstLevel = true;
			
 
				-            currentLevel = 0;
			
 
				-            level1Data = linkageData[0].children;
			
 
				-        }}
			
 
				-    />
			
 
				-    <AsyncPicker
			
 
				-        bind:visible={visible8}
			
 
				-        bind:data
			
 
				-        bind:lastLevel
			
 
				-        bind:firstLevel
			
 
				-        on:next={nextFunc}
			
 
				-        on:prev={prevFunc}
			
 
				-        popup={{ radius: 'xl' }}
			
 
				-    />
			
 
				+	<Cell
			
 
				+		title="Radius on the top"
			
 
				+		on:click={() => {
			
 
				+			visible8 = true;
			
 
				+			data = linkageData;
			
 
				+			lastLevel = false;
			
 
				+			firstLevel = true;
			
 
				+			currentLevel = 0;
			
 
				+			level1Data = linkageData[0].children;
			
 
				+		}}
			
 
				+	/>
			
 
				+	<AsyncPicker
			
 
				+		bind:visible={visible8}
			
 
				+		bind:data
			
 
				+		bind:lastLevel
			
 
				+		bind:firstLevel
			
 
				+		on:next={nextFunc}
			
 
				+		on:prev={prevFunc}
			
 
				+		popup={{ radius: 'xl' }}
			
 
				+	/>
			
 
				 
			
 
				-    <Cell
			
 
				-        title="Show selected options"
			
 
				-        on:click={() => {
			
 
				-            visible7 = true;
			
 
				-            data = linkageData;
			
 
				-            lastLevel = false;
			
 
				-            firstLevel = true;
			
 
				-            currentLevel = 0;
			
 
				-            level1Data = linkageData[0].children;
			
 
				-        }}
			
 
				-    />
			
 
				-    <AsyncPicker bind:visible={visible7} bind:data bind:lastLevel bind:firstLevel on:next={nextFunc} on:prev={prevFunc} showSelected />
			
 
				+	<Cell
			
 
				+		title="Show selected options"
			
 
				+		on:click={() => {
			
 
				+			visible7 = true;
			
 
				+			data = linkageData;
			
 
				+			lastLevel = false;
			
 
				+			firstLevel = true;
			
 
				+			currentLevel = 0;
			
 
				+			level1Data = linkageData[0].children;
			
 
				+		}}
			
 
				+	/>
			
 
				+	<AsyncPicker bind:visible={visible7} bind:data bind:lastLevel bind:firstLevel on:next={nextFunc} on:prev={prevFunc} showSelected />
			
 
				 
			
 
				-    <Cell
			
 
				-        title="Dynamic change title"
			
 
				-        on:click={() => {
			
 
				-            visible9 = true;
			
 
				-            data = linkageData;
			
 
				-            lastLevel = false;
			
 
				-            firstLevel = true;
			
 
				-            currentLevel = 0;
			
 
				-            titleBind = 'Please select the provincial level';
			
 
				-            level1Data = linkageData[0].children;
			
 
				-        }}
			
 
				-    />
			
 
				-    <AsyncPicker
			
 
				-        bind:visible={visible9}
			
 
				-        bind:data
			
 
				-        bind:lastLevel
			
 
				-        bind:firstLevel
			
 
				-        bind:title={titleBind}
			
 
				-        on:next={nextFunc}
			
 
				-        on:prev={prevFunc}
			
 
				-    />
			
 
				+	<Cell
			
 
				+		title="Dynamic change title"
			
 
				+		on:click={() => {
			
 
				+			visible9 = true;
			
 
				+			data = linkageData;
			
 
				+			lastLevel = false;
			
 
				+			firstLevel = true;
			
 
				+			currentLevel = 0;
			
 
				+			titleBind = 'Please select the provincial level';
			
 
				+			level1Data = linkageData[0].children;
			
 
				+		}}
			
 
				+	/>
			
 
				+	<AsyncPicker
			
 
				+		bind:visible={visible9}
			
 
				+		bind:data
			
 
				+		bind:lastLevel
			
 
				+		bind:firstLevel
			
 
				+		bind:title={titleBind}
			
 
				+		on:next={nextFunc}
			
 
				+		on:prev={prevFunc}
			
 
				+	/>
			
 
				 </div>
			
 
				 <!-- 
			
 
				 const linkageData = [
			
--- a/demo/src/pages/asyncPicker/data.js
+++ b/demo/src/pages/asyncPicker/data.js
@@ -1,426 +1,426 @@
 
				 const linkageData = [
			
 
				-    {
			
 
				-        label: '云南',
			
 
				-        children: [
			
 
				-            {
			
 
				-                label: '昆明',
			
 
				-                children: [
			
 
				-                    { label: '盘龙区' },
			
 
				-                    { label: '五华区' },
			
 
				-                    { label: '官渡区' },
			
 
				-                    { label: '西山区' },
			
 
				-                    { label: '东川区' },
			
 
				-                    { label: '呈贡区' },
			
 
				-                    { label: '晋宁区' },
			
 
				-                    { label: '富民县' },
			
 
				-                    { label: '宜良县' },
			
 
				-                    { label: '石林彝族自治县' },
			
 
				-                    { label: '嵩明县' },
			
 
				-                    { label: '禄劝彝族苗族自治县' },
			
 
				-                    { label: '寻甸回族彝族自治县' },
			
 
				-                    { label: '安宁市' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '曲靖',
			
 
				-                children: [
			
 
				-                    { label: '麒麟区' },
			
 
				-                    { label: '沾益区' },
			
 
				-                    { label: '马龙县' },
			
 
				-                    { label: '陆良县' },
			
 
				-                    { label: '师宗县' },
			
 
				-                    { label: '罗平县' },
			
 
				-                    { label: '富源县' },
			
 
				-                    { label: '会泽县' },
			
 
				-                    { label: '宣威市' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '玉溪',
			
 
				-                children: [
			
 
				-                    { label: '红塔区' },
			
 
				-                    { label: '江川区' },
			
 
				-                    { label: '澄江县' },
			
 
				-                    { label: '通海县' },
			
 
				-                    { label: '华宁县' },
			
 
				-                    { label: '易门县' },
			
 
				-                    { label: '峨山彝族自治县' },
			
 
				-                    { label: '新平彝族傣族自治县' },
			
 
				-                    { label: '元江哈尼族彝族傣族自治县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '保山',
			
 
				-                children: [
			
 
				-                    { label: '隆阳区' },
			
 
				-                    { label: '施甸县' },
			
 
				-                    { label: '龙陵县' },
			
 
				-                    { label: '昌宁县' },
			
 
				-                    { label: '腾冲市' },
			
 
				-                    { label: '龙陵县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '丽江',
			
 
				-                children: [
			
 
				-                    { label: '古城区' },
			
 
				-                    { label: '永胜县' },
			
 
				-                    { label: '华坪县' },
			
 
				-                    { label: '玉龙纳西族自治县' },
			
 
				-                    { label: '宁蒗彝族自治县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '普洱',
			
 
				-                children: [
			
 
				-                    { label: '思茅区' },
			
 
				-                    { label: '宁洱哈尼族彝族自治县' },
			
 
				-                    { label: '墨江哈尼族自治县' },
			
 
				-                    { label: '景东彝族自治县' },
			
 
				-                    { label: '景谷傣族彝族自治县' },
			
 
				-                    { label: '镇沅彝族哈尼族拉祜族自治县' },
			
 
				-                    { label: '江城哈尼族彝族自治县' },
			
 
				-                    { label: '孟连傣族拉祜族佤族自治县' },
			
 
				-                    { label: '澜沧拉祜族自治县' },
			
 
				-                    { label: '西盟佤族自治县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '临沧',
			
 
				-                children: [
			
 
				-                    { label: '临翔区' },
			
 
				-                    { label: '凤庆县' },
			
 
				-                    { label: '云县' },
			
 
				-                    { label: '永德县' },
			
 
				-                    { label: '镇康县' },
			
 
				-                    { label: '双江拉祜族佤族布朗族傣族自治县' },
			
 
				-                    { label: '耿马傣族佤族自治县' },
			
 
				-                    { label: '沧源佤族自治县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '楚雄',
			
 
				-                children: [
			
 
				-                    { label: '楚雄市' },
			
 
				-                    { label: '双柏县' },
			
 
				-                    { label: '牟定县' },
			
 
				-                    { label: '南华县' },
			
 
				-                    { label: '姚安县' },
			
 
				-                    { label: '大姚县' },
			
 
				-                    { label: '永仁县' },
			
 
				-                    { label: '元谋县' },
			
 
				-                    { label: '武定县' },
			
 
				-                    { label: '禄丰县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '红河',
			
 
				-                children: [
			
 
				-                    { label: '个旧市' },
			
 
				-                    { label: '开远市' },
			
 
				-                    { label: '蒙自市' },
			
 
				-                    { label: '弥勒市' },
			
 
				-                    { label: '屏边苗族自治县' },
			
 
				-                    { label: '建水县' },
			
 
				-                    { label: '石屏县' },
			
 
				-                    { label: '泸西县' },
			
 
				-                    { label: '元阳县' },
			
 
				-                    { label: '红河县' },
			
 
				-                    { label: '金平苗族瑶族傣族自治县' },
			
 
				-                    { label: '绿春县' },
			
 
				-                    { label: '河口瑶族自治县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '文山',
			
 
				-                children: [
			
 
				-                    { label: '文山市' },
			
 
				-                    { label: '砚山县' },
			
 
				-                    { label: '西畴县' },
			
 
				-                    { label: '麻栗坡县' },
			
 
				-                    { label: '马关县' },
			
 
				-                    { label: '丘北县' },
			
 
				-                    { label: '广南县' },
			
 
				-                    { label: '富宁县' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        label: '广东',
			
 
				-        children: [
			
 
				-            {
			
 
				-                label: '广州',
			
 
				-                children: [
			
 
				-                    { label: '天河区' },
			
 
				-                    { label: '海珠区' },
			
 
				-                    { label: '荔湾区' },
			
 
				-                    { label: '越秀区' },
			
 
				-                    { label: '白云区' },
			
 
				-                    { label: '黄埔区' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '深圳',
			
 
				-                children: [
			
 
				-                    { label: '罗湖区' },
			
 
				-                    { label: '福田区' },
			
 
				-                    { label: '南山区' },
			
 
				-                    { label: '宝安区' },
			
 
				-                    { label: '龙岗区' },
			
 
				-                    { label: '盐田区' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '珠海',
			
 
				-                children: [{ label: '香洲区' }, { label: '斗门区' }, { label: '金湾区' }],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '汕头',
			
 
				-                children: [
			
 
				-                    { label: '龙湖区' },
			
 
				-                    { label: '金平区' },
			
 
				-                    { label: '濠江区' },
			
 
				-                    { label: '潮阳区' },
			
 
				-                    { label: '潮南区' },
			
 
				-                    { label: '澄海区' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '佛山',
			
 
				-                children: [{ label: '禅城区' }, { label: '南海区' }, { label: '顺德区' }, { label: '三水区' }, { label: '高明区' }],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        label: '四川',
			
 
				-        children: [
			
 
				-            {
			
 
				-                label: '成都',
			
 
				-                children: [
			
 
				-                    { label: '锦江区' },
			
 
				-                    { label: '青羊区' },
			
 
				-                    { label: '金牛区' },
			
 
				-                    { label: '武侯区' },
			
 
				-                    { label: '成华区' },
			
 
				-                    { label: '龙泉驿区' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '绵阳',
			
 
				-                children: [
			
 
				-                    { label: '涪城区' },
			
 
				-                    { label: '游仙区' },
			
 
				-                    { label: '安州区' },
			
 
				-                    { label: '三台县' },
			
 
				-                    { label: '盐亭县' },
			
 
				-                    { label: '梓潼县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '自贡',
			
 
				-                children: [
			
 
				-                    { label: '自流井区' },
			
 
				-                    { label: '贡井区' },
			
 
				-                    { label: '大安区' },
			
 
				-                    { label: '沿滩区' },
			
 
				-                    { label: '荣县' },
			
 
				-                    { label: '富顺县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '攀枝花',
			
 
				-                children: [{ label: '东区' }, { label: '西区' }, { label: '仁和区' }, { label: '米易县' }, { label: '盐边县' }],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        label: '北京',
			
 
				-        children: [
			
 
				-            {
			
 
				-                label: '北京市',
			
 
				-                children: [
			
 
				-                    { label: '东城区' },
			
 
				-                    { label: '西城区' },
			
 
				-                    { label: '朝阳区' },
			
 
				-                    { label: '丰台区' },
			
 
				-                    { label: '石景山区' },
			
 
				-                    { label: '海淀区' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        label: '浙江',
			
 
				-        children: [
			
 
				-            {
			
 
				-                label: '杭州',
			
 
				-                children: [
			
 
				-                    { label: '上城区' },
			
 
				-                    { label: '下城区' },
			
 
				-                    { label: '江干区' },
			
 
				-                    { label: '拱墅区' },
			
 
				-                    { label: '西湖区' },
			
 
				-                    { label: '滨江区' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '宁波',
			
 
				-                children: [
			
 
				-                    { label: '海曙区' },
			
 
				-                    { label: '江东区' },
			
 
				-                    { label: '江北区' },
			
 
				-                    { label: '北仑区' },
			
 
				-                    { label: '镇海区' },
			
 
				-                    { label: '鄞州区' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '温州',
			
 
				-                children: [
			
 
				-                    { label: '鹿城区' },
			
 
				-                    { label: '龙湾区' },
			
 
				-                    { label: '瓯海区' },
			
 
				-                    { label: '洞头区' },
			
 
				-                    { label: '永嘉县' },
			
 
				-                    { label: '平阳县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '嘉兴',
			
 
				-                children: [
			
 
				-                    { label: '南湖区' },
			
 
				-                    { label: '秀洲区' },
			
 
				-                    { label: '嘉善县' },
			
 
				-                    { label: '海盐县' },
			
 
				-                    { label: '海宁市' },
			
 
				-                    { label: '平湖市' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '湖州',
			
 
				-                children: [{ label: '吴兴区' }, { label: '南浔区' }, { label: '德清县' }, { label: '长兴县' }, { label: '安吉县' }],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				+	{
			
 
				+		label: '云南',
			
 
				+		children: [
			
 
				+			{
			
 
				+				label: '昆明',
			
 
				+				children: [
			
 
				+					{ label: '盘龙区' },
			
 
				+					{ label: '五华区' },
			
 
				+					{ label: '官渡区' },
			
 
				+					{ label: '西山区' },
			
 
				+					{ label: '东川区' },
			
 
				+					{ label: '呈贡区' },
			
 
				+					{ label: '晋宁区' },
			
 
				+					{ label: '富民县' },
			
 
				+					{ label: '宜良县' },
			
 
				+					{ label: '石林彝族自治县' },
			
 
				+					{ label: '嵩明县' },
			
 
				+					{ label: '禄劝彝族苗族自治县' },
			
 
				+					{ label: '寻甸回族彝族自治县' },
			
 
				+					{ label: '安宁市' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '曲靖',
			
 
				+				children: [
			
 
				+					{ label: '麒麟区' },
			
 
				+					{ label: '沾益区' },
			
 
				+					{ label: '马龙县' },
			
 
				+					{ label: '陆良县' },
			
 
				+					{ label: '师宗县' },
			
 
				+					{ label: '罗平县' },
			
 
				+					{ label: '富源县' },
			
 
				+					{ label: '会泽县' },
			
 
				+					{ label: '宣威市' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '玉溪',
			
 
				+				children: [
			
 
				+					{ label: '红塔区' },
			
 
				+					{ label: '江川区' },
			
 
				+					{ label: '澄江县' },
			
 
				+					{ label: '通海县' },
			
 
				+					{ label: '华宁县' },
			
 
				+					{ label: '易门县' },
			
 
				+					{ label: '峨山彝族自治县' },
			
 
				+					{ label: '新平彝族傣族自治县' },
			
 
				+					{ label: '元江哈尼族彝族傣族自治县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '保山',
			
 
				+				children: [
			
 
				+					{ label: '隆阳区' },
			
 
				+					{ label: '施甸县' },
			
 
				+					{ label: '龙陵县' },
			
 
				+					{ label: '昌宁县' },
			
 
				+					{ label: '腾冲市' },
			
 
				+					{ label: '龙陵县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '丽江',
			
 
				+				children: [
			
 
				+					{ label: '古城区' },
			
 
				+					{ label: '永胜县' },
			
 
				+					{ label: '华坪县' },
			
 
				+					{ label: '玉龙纳西族自治县' },
			
 
				+					{ label: '宁蒗彝族自治县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '普洱',
			
 
				+				children: [
			
 
				+					{ label: '思茅区' },
			
 
				+					{ label: '宁洱哈尼族彝族自治县' },
			
 
				+					{ label: '墨江哈尼族自治县' },
			
 
				+					{ label: '景东彝族自治县' },
			
 
				+					{ label: '景谷傣族彝族自治县' },
			
 
				+					{ label: '镇沅彝族哈尼族拉祜族自治县' },
			
 
				+					{ label: '江城哈尼族彝族自治县' },
			
 
				+					{ label: '孟连傣族拉祜族佤族自治县' },
			
 
				+					{ label: '澜沧拉祜族自治县' },
			
 
				+					{ label: '西盟佤族自治县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '临沧',
			
 
				+				children: [
			
 
				+					{ label: '临翔区' },
			
 
				+					{ label: '凤庆县' },
			
 
				+					{ label: '云县' },
			
 
				+					{ label: '永德县' },
			
 
				+					{ label: '镇康县' },
			
 
				+					{ label: '双江拉祜族佤族布朗族傣族自治县' },
			
 
				+					{ label: '耿马傣族佤族自治县' },
			
 
				+					{ label: '沧源佤族自治县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '楚雄',
			
 
				+				children: [
			
 
				+					{ label: '楚雄市' },
			
 
				+					{ label: '双柏县' },
			
 
				+					{ label: '牟定县' },
			
 
				+					{ label: '南华县' },
			
 
				+					{ label: '姚安县' },
			
 
				+					{ label: '大姚县' },
			
 
				+					{ label: '永仁县' },
			
 
				+					{ label: '元谋县' },
			
 
				+					{ label: '武定县' },
			
 
				+					{ label: '禄丰县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '红河',
			
 
				+				children: [
			
 
				+					{ label: '个旧市' },
			
 
				+					{ label: '开远市' },
			
 
				+					{ label: '蒙自市' },
			
 
				+					{ label: '弥勒市' },
			
 
				+					{ label: '屏边苗族自治县' },
			
 
				+					{ label: '建水县' },
			
 
				+					{ label: '石屏县' },
			
 
				+					{ label: '泸西县' },
			
 
				+					{ label: '元阳县' },
			
 
				+					{ label: '红河县' },
			
 
				+					{ label: '金平苗族瑶族傣族自治县' },
			
 
				+					{ label: '绿春县' },
			
 
				+					{ label: '河口瑶族自治县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '文山',
			
 
				+				children: [
			
 
				+					{ label: '文山市' },
			
 
				+					{ label: '砚山县' },
			
 
				+					{ label: '西畴县' },
			
 
				+					{ label: '麻栗坡县' },
			
 
				+					{ label: '马关县' },
			
 
				+					{ label: '丘北县' },
			
 
				+					{ label: '广南县' },
			
 
				+					{ label: '富宁县' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		label: '广东',
			
 
				+		children: [
			
 
				+			{
			
 
				+				label: '广州',
			
 
				+				children: [
			
 
				+					{ label: '天河区' },
			
 
				+					{ label: '海珠区' },
			
 
				+					{ label: '荔湾区' },
			
 
				+					{ label: '越秀区' },
			
 
				+					{ label: '白云区' },
			
 
				+					{ label: '黄埔区' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '深圳',
			
 
				+				children: [
			
 
				+					{ label: '罗湖区' },
			
 
				+					{ label: '福田区' },
			
 
				+					{ label: '南山区' },
			
 
				+					{ label: '宝安区' },
			
 
				+					{ label: '龙岗区' },
			
 
				+					{ label: '盐田区' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '珠海',
			
 
				+				children: [{ label: '香洲区' }, { label: '斗门区' }, { label: '金湾区' }],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '汕头',
			
 
				+				children: [
			
 
				+					{ label: '龙湖区' },
			
 
				+					{ label: '金平区' },
			
 
				+					{ label: '濠江区' },
			
 
				+					{ label: '潮阳区' },
			
 
				+					{ label: '潮南区' },
			
 
				+					{ label: '澄海区' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '佛山',
			
 
				+				children: [{ label: '禅城区' }, { label: '南海区' }, { label: '顺德区' }, { label: '三水区' }, { label: '高明区' }],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		label: '四川',
			
 
				+		children: [
			
 
				+			{
			
 
				+				label: '成都',
			
 
				+				children: [
			
 
				+					{ label: '锦江区' },
			
 
				+					{ label: '青羊区' },
			
 
				+					{ label: '金牛区' },
			
 
				+					{ label: '武侯区' },
			
 
				+					{ label: '成华区' },
			
 
				+					{ label: '龙泉驿区' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '绵阳',
			
 
				+				children: [
			
 
				+					{ label: '涪城区' },
			
 
				+					{ label: '游仙区' },
			
 
				+					{ label: '安州区' },
			
 
				+					{ label: '三台县' },
			
 
				+					{ label: '盐亭县' },
			
 
				+					{ label: '梓潼县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '自贡',
			
 
				+				children: [
			
 
				+					{ label: '自流井区' },
			
 
				+					{ label: '贡井区' },
			
 
				+					{ label: '大安区' },
			
 
				+					{ label: '沿滩区' },
			
 
				+					{ label: '荣县' },
			
 
				+					{ label: '富顺县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '攀枝花',
			
 
				+				children: [{ label: '东区' }, { label: '西区' }, { label: '仁和区' }, { label: '米易县' }, { label: '盐边县' }],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		label: '北京',
			
 
				+		children: [
			
 
				+			{
			
 
				+				label: '北京市',
			
 
				+				children: [
			
 
				+					{ label: '东城区' },
			
 
				+					{ label: '西城区' },
			
 
				+					{ label: '朝阳区' },
			
 
				+					{ label: '丰台区' },
			
 
				+					{ label: '石景山区' },
			
 
				+					{ label: '海淀区' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		label: '浙江',
			
 
				+		children: [
			
 
				+			{
			
 
				+				label: '杭州',
			
 
				+				children: [
			
 
				+					{ label: '上城区' },
			
 
				+					{ label: '下城区' },
			
 
				+					{ label: '江干区' },
			
 
				+					{ label: '拱墅区' },
			
 
				+					{ label: '西湖区' },
			
 
				+					{ label: '滨江区' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '宁波',
			
 
				+				children: [
			
 
				+					{ label: '海曙区' },
			
 
				+					{ label: '江东区' },
			
 
				+					{ label: '江北区' },
			
 
				+					{ label: '北仑区' },
			
 
				+					{ label: '镇海区' },
			
 
				+					{ label: '鄞州区' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '温州',
			
 
				+				children: [
			
 
				+					{ label: '鹿城区' },
			
 
				+					{ label: '龙湾区' },
			
 
				+					{ label: '瓯海区' },
			
 
				+					{ label: '洞头区' },
			
 
				+					{ label: '永嘉县' },
			
 
				+					{ label: '平阳县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '嘉兴',
			
 
				+				children: [
			
 
				+					{ label: '南湖区' },
			
 
				+					{ label: '秀洲区' },
			
 
				+					{ label: '嘉善县' },
			
 
				+					{ label: '海盐县' },
			
 
				+					{ label: '海宁市' },
			
 
				+					{ label: '平湖市' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '湖州',
			
 
				+				children: [{ label: '吴兴区' }, { label: '南浔区' }, { label: '德清县' }, { label: '长兴县' }, { label: '安吉县' }],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				 ];
			
 
				 
			
 
				 const linkageDiffLabeData = [
			
 
				-    {
			
 
				-        province: '云南',
			
 
				-        children: [
			
 
				-            {
			
 
				-                city: '昆明',
			
 
				-                children: [
			
 
				-                    { region: '盘龙区' },
			
 
				-                    { region: '五华区' },
			
 
				-                    { region: '官渡区' },
			
 
				-                    { region: '西山区' },
			
 
				-                    { region: '东川区' },
			
 
				-                    { region: '呈贡区' },
			
 
				-                    { region: '晋宁区' },
			
 
				-                    { region: '富民县' },
			
 
				-                    { region: '宜良县' },
			
 
				-                    { region: '石林彝族自治县' },
			
 
				-                    { region: '嵩明县' },
			
 
				-                    { region: '禄劝彝族苗族自治县' },
			
 
				-                    { region: '寻甸回族彝族自治县' },
			
 
				-                    { region: '安宁市' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                city: '曲靖',
			
 
				-                children: [
			
 
				-                    { region: '麒麟区' },
			
 
				-                    { region: '沾益区' },
			
 
				-                    { region: '马龙县' },
			
 
				-                    { region: '陆良县' },
			
 
				-                    { region: '师宗县' },
			
 
				-                    { region: '罗平县' },
			
 
				-                    { region: '富源县' },
			
 
				-                    { region: '会泽县' },
			
 
				-                    { region: '宣威市' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                city: '玉溪',
			
 
				-                children: [
			
 
				-                    { region: '红塔区' },
			
 
				-                    { region: '江川区' },
			
 
				-                    { region: '澄江县' },
			
 
				-                    { region: '通海县' },
			
 
				-                    { region: '华宁县' },
			
 
				-                    { region: '易门县' },
			
 
				-                    { region: '峨山彝族自治县' },
			
 
				-                    { region: '新平彝族傣族自治县' },
			
 
				-                    { region: '元江哈尼族彝族傣族自治县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                city: '保山',
			
 
				-                children: [
			
 
				-                    { region: '隆阳区' },
			
 
				-                    { region: '施甸县' },
			
 
				-                    { region: '龙陵县' },
			
 
				-                    { region: '昌宁县' },
			
 
				-                    { region: '腾冲市' },
			
 
				-                    { region: '龙陵县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                city: '丽江',
			
 
				-                children: [
			
 
				-                    { region: '古城区' },
			
 
				-                    { region: '永胜县' },
			
 
				-                    { region: '华坪县' },
			
 
				-                    { region: '玉龙纳西族自治县' },
			
 
				-                    { region: '宁蒗彝族自治县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                city: '普洱',
			
 
				-                children: [
			
 
				-                    { region: '思茅区' },
			
 
				-                    { region: '宁洱哈尼族彝族自治县' },
			
 
				-                    { region: '墨江哈尼族自治县' },
			
 
				-                    { region: '景东彝族自治县' },
			
 
				-                    { region: '景谷傣族彝族自治县' },
			
 
				-                    { region: '镇沅彝族哈尼族拉祜族自治县' },
			
 
				-                    { region: '江城哈尼族彝族自治县' },
			
 
				-                    { region: '孟连傣族拉祜族佤族自治县' },
			
 
				-                    { region: '澜沧拉祜族自治县' },
			
 
				-                    { region: '西盟佤族自治县' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        province: '广东',
			
 
				-        children: [
			
 
				-            {
			
 
				-                city: '广州',
			
 
				-                children: [
			
 
				-                    { region: '天河区' },
			
 
				-                    { region: '海珠区' },
			
 
				-                    { region: '荔湾区' },
			
 
				-                    { region: '越秀区' },
			
 
				-                    { region: '白云区' },
			
 
				-                    { region: '黄埔区' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                city: '深圳',
			
 
				-                children: [
			
 
				-                    { region: '罗湖区' },
			
 
				-                    { region: '福田区' },
			
 
				-                    { region: '南山区' },
			
 
				-                    { region: '宝安区' },
			
 
				-                    { region: '龙岗区' },
			
 
				-                    { region: '盐田区' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				+	{
			
 
				+		province: '云南',
			
 
				+		children: [
			
 
				+			{
			
 
				+				city: '昆明',
			
 
				+				children: [
			
 
				+					{ region: '盘龙区' },
			
 
				+					{ region: '五华区' },
			
 
				+					{ region: '官渡区' },
			
 
				+					{ region: '西山区' },
			
 
				+					{ region: '东川区' },
			
 
				+					{ region: '呈贡区' },
			
 
				+					{ region: '晋宁区' },
			
 
				+					{ region: '富民县' },
			
 
				+					{ region: '宜良县' },
			
 
				+					{ region: '石林彝族自治县' },
			
 
				+					{ region: '嵩明县' },
			
 
				+					{ region: '禄劝彝族苗族自治县' },
			
 
				+					{ region: '寻甸回族彝族自治县' },
			
 
				+					{ region: '安宁市' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				city: '曲靖',
			
 
				+				children: [
			
 
				+					{ region: '麒麟区' },
			
 
				+					{ region: '沾益区' },
			
 
				+					{ region: '马龙县' },
			
 
				+					{ region: '陆良县' },
			
 
				+					{ region: '师宗县' },
			
 
				+					{ region: '罗平县' },
			
 
				+					{ region: '富源县' },
			
 
				+					{ region: '会泽县' },
			
 
				+					{ region: '宣威市' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				city: '玉溪',
			
 
				+				children: [
			
 
				+					{ region: '红塔区' },
			
 
				+					{ region: '江川区' },
			
 
				+					{ region: '澄江县' },
			
 
				+					{ region: '通海县' },
			
 
				+					{ region: '华宁县' },
			
 
				+					{ region: '易门县' },
			
 
				+					{ region: '峨山彝族自治县' },
			
 
				+					{ region: '新平彝族傣族自治县' },
			
 
				+					{ region: '元江哈尼族彝族傣族自治县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				city: '保山',
			
 
				+				children: [
			
 
				+					{ region: '隆阳区' },
			
 
				+					{ region: '施甸县' },
			
 
				+					{ region: '龙陵县' },
			
 
				+					{ region: '昌宁县' },
			
 
				+					{ region: '腾冲市' },
			
 
				+					{ region: '龙陵县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				city: '丽江',
			
 
				+				children: [
			
 
				+					{ region: '古城区' },
			
 
				+					{ region: '永胜县' },
			
 
				+					{ region: '华坪县' },
			
 
				+					{ region: '玉龙纳西族自治县' },
			
 
				+					{ region: '宁蒗彝族自治县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				city: '普洱',
			
 
				+				children: [
			
 
				+					{ region: '思茅区' },
			
 
				+					{ region: '宁洱哈尼族彝族自治县' },
			
 
				+					{ region: '墨江哈尼族自治县' },
			
 
				+					{ region: '景东彝族自治县' },
			
 
				+					{ region: '景谷傣族彝族自治县' },
			
 
				+					{ region: '镇沅彝族哈尼族拉祜族自治县' },
			
 
				+					{ region: '江城哈尼族彝族自治县' },
			
 
				+					{ region: '孟连傣族拉祜族佤族自治县' },
			
 
				+					{ region: '澜沧拉祜族自治县' },
			
 
				+					{ region: '西盟佤族自治县' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		province: '广东',
			
 
				+		children: [
			
 
				+			{
			
 
				+				city: '广州',
			
 
				+				children: [
			
 
				+					{ region: '天河区' },
			
 
				+					{ region: '海珠区' },
			
 
				+					{ region: '荔湾区' },
			
 
				+					{ region: '越秀区' },
			
 
				+					{ region: '白云区' },
			
 
				+					{ region: '黄埔区' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				city: '深圳',
			
 
				+				children: [
			
 
				+					{ region: '罗湖区' },
			
 
				+					{ region: '福田区' },
			
 
				+					{ region: '南山区' },
			
 
				+					{ region: '宝安区' },
			
 
				+					{ region: '龙岗区' },
			
 
				+					{ region: '盐田区' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				 ];
			
 
				 
			
 
				 export { linkageData, linkageDiffLabeData };
			
--- a/demo/src/pages/asyncPicker/data_en.js
+++ b/demo/src/pages/asyncPicker/data_en.js
@@ -1,407 +1,402 @@
 
				 const linkageData = [
			
 
				-    {
			
 
				-        label: 'Yunnan',
			
 
				-        children: [
			
 
				-            {
			
 
				-                label: 'Kunming',
			
 
				-                children: [
			
 
				-                    { label: 'Panlong District' },
			
 
				-                    { label: 'Wuhua District' },
			
 
				-                    { label: 'Guandu District' },
			
 
				-                    { label: 'Xishan District' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Qujing',
			
 
				-                children: [
			
 
				-                    { label: 'Qilin District' },
			
 
				-                    { label: 'Zhanyi District' },
			
 
				-                    { label: 'Malong County' },
			
 
				-                    { label: 'Luliang County' },
			
 
				-                    { label: 'Shizong County' },
			
 
				-                    { label: 'Luoping County' },
			
 
				-                    { label: 'Fuyuan County' },
			
 
				-                    { label: 'Huize County' },
			
 
				-                    { label: 'Xuanwei City' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Yuxi',
			
 
				-                children: [
			
 
				-                    { label: 'Hongta District' },
			
 
				-                    { label: 'Jiangchuan District' },
			
 
				-                    { label: 'Chengjiang County' },
			
 
				-                    { label: 'Tonghai County' },
			
 
				-                    { label: 'Huaning County' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Baoshan',
			
 
				-                children: [
			
 
				-                    { label: 'Longyang District' },
			
 
				-                    { label: 'Shidian County' },
			
 
				-                    { label: 'Longling County' },
			
 
				-                    { label: 'Changning County' },
			
 
				-                    { label: 'Tengchong City' },
			
 
				-                    { label: 'Longling County' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Lijiang',
			
 
				-                children: [
			
 
				-                    { label: 'Gucheng District' },
			
 
				-                    { label: 'Yongsheng County' },
			
 
				-                    { label: 'Huaping County' },
			
 
				-                    { label: 'Yulong Naxi Autonomous County' },
			
 
				-                    { label: 'Ninglang Yi Autonomous County' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: "Pu'er",
			
 
				-                children: [
			
 
				-                    { label: 'Simao District' },
			
 
				-                    { label: "Ning'er Hani and Yi Autonomous County" },
			
 
				-                    { label: 'Mojiang Hani Autonomous County' },
			
 
				-                    { label: 'Jingdong Yi Autonomous County' },
			
 
				-                    { label: 'Jinggu Dai and Yi Autonomous County' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Lincang',
			
 
				-                children: [
			
 
				-                    { label: 'Linxiang District' },
			
 
				-                    { label: 'Fengqing County' },
			
 
				-                    { label: 'Yun County' },
			
 
				-                    { label: 'Yongde County' },
			
 
				-                    { label: 'Zhenkang County' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Chuxiong',
			
 
				-                children: [
			
 
				-                    { label: 'Chuxiong City' },
			
 
				-                    { label: 'Shuangbai County' },
			
 
				-                    { label: 'Mouding County' },
			
 
				-                    { label: 'Nanhua County' },
			
 
				-                    { label: "Yao'an County" },
			
 
				-                    { label: 'Dayao County' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Honghe',
			
 
				-                children: [
			
 
				-                    { label: 'Gejiu City' },
			
 
				-                    { label: 'Kaiyuan City' },
			
 
				-                    { label: 'Mengzi City' },
			
 
				-                    { label: 'Mile City' },
			
 
				-                    { label: 'Pingbian Miao Autonomous County' },
			
 
				-                    { label: 'Jianshui County' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Wenshan',
			
 
				-                children: [
			
 
				-                    { label: 'Wenshan City' },
			
 
				-                    { label: 'Yanshan County' },
			
 
				-                    { label: 'Xichou County' },
			
 
				-                    { label: 'Malipo County' },
			
 
				-                    { label: 'Maguan County' },
			
 
				-                    { label: 'Qiubei County' },
			
 
				-                    { label: 'Guangnan County' },
			
 
				-                    { label: 'Funing County' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        label: 'Guangdong',
			
 
				-        children: [
			
 
				-            {
			
 
				-                label: 'Guangzhou',
			
 
				-                children: [
			
 
				-                    { label: 'Tianhe District' },
			
 
				-                    { label: 'Haizhu District' },
			
 
				-                    { label: 'Liwan District' },
			
 
				-                    { label: 'Yuexiu District' },
			
 
				-                    { label: 'Baiyun District' },
			
 
				-                    { label: 'Huangpu District' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Shenzhen',
			
 
				-                children: [
			
 
				-                    { label: 'Luohu District' },
			
 
				-                    { label: 'Futian District' },
			
 
				-                    { label: 'Nanshan District' },
			
 
				-                    { label: "Bao'an District" },
			
 
				-                    { label: 'Longgang District' },
			
 
				-                    { label: 'Yantian District' },
			
 
				-                ],
			
 
				-            },
			
 
				-            { label: 'Zhuhai', children: [{ label: 'Xiangzhou District' }, { label: 'Doumen District' }, { label: 'Jinwan District' }] },
			
 
				-            {
			
 
				-                label: 'Shantou',
			
 
				-                children: [
			
 
				-                    { label: 'Longhu District' },
			
 
				-                    { label: 'Jinping District' },
			
 
				-                    { label: 'Gongjing District' },
			
 
				-                    { label: 'Chaoyang District' },
			
 
				-                    { label: 'Chaonan District' },
			
 
				-                    { label: 'Chenghai District' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Foshan',
			
 
				-                children: [
			
 
				-                    { label: 'Chancheng District' },
			
 
				-                    { label: 'Nanhai District' },
			
 
				-                    { label: 'Shunde District' },
			
 
				-                    { label: 'Sanshui District' },
			
 
				-                    { label: 'Gaoming District' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        label: 'Sichuan',
			
 
				-        children: [
			
 
				-            {
			
 
				-                label: 'Chengdu',
			
 
				-                children: [
			
 
				-                    { label: 'Jinjiang District' },
			
 
				-                    { label: 'Qingyang District' },
			
 
				-                    { label: 'Jinniu District' },
			
 
				-                    { label: 'Wuhou District' },
			
 
				-                    { label: 'Chenghua District' },
			
 
				-                    { label: 'Longquanyi District' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Mianyang',
			
 
				-                children: [
			
 
				-                    { label: 'Fucheng District' },
			
 
				-                    { label: 'Youxian District' },
			
 
				-                    { label: 'Anzhou District' },
			
 
				-                    { label: 'Santai County' },
			
 
				-                    { label: 'Yanting County' },
			
 
				-                    { label: 'Zitong County' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Zigong',
			
 
				-                children: [
			
 
				-                    { label: 'Ziliujing District' },
			
 
				-                    { label: 'Gongjing District' },
			
 
				-                    { label: "Da'an District" },
			
 
				-                    { label: 'Yantan District' },
			
 
				-                    { label: 'Rong County' },
			
 
				-                    { label: 'Fushun County' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Panzhihua',
			
 
				-                children: [
			
 
				-                    { label: 'Dong District' },
			
 
				-                    { label: 'Xi District' },
			
 
				-                    { label: 'Renhe District' },
			
 
				-                    { label: 'Miyi County' },
			
 
				-                    { label: 'Yanbian County' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        label: 'Beijing',
			
 
				-        children: [
			
 
				-            {
			
 
				-                label: 'Beijing',
			
 
				-                children: [
			
 
				-                    { label: 'Dongcheng District' },
			
 
				-                    { label: 'Xicheng District' },
			
 
				-                    { label: 'Chaoyang District' },
			
 
				-                    { label: 'Fengtai District' },
			
 
				-                    { label: 'Shijingshan District' },
			
 
				-                    { label: 'Haidian District' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        label: 'Zhejiang',
			
 
				-        children: [
			
 
				-            {
			
 
				-                label: 'Hangzhou',
			
 
				-                children: [
			
 
				-                    { label: 'Shangcheng District' },
			
 
				-                    { label: 'Xiacheng District' },
			
 
				-                    { label: 'Jianggan District' },
			
 
				-                    { label: 'Gongshu District' },
			
 
				-                    { label: 'Xihu District' },
			
 
				-                    { label: 'Binjiang District' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Ningbo',
			
 
				-                children: [
			
 
				-                    { label: 'Haishu District' },
			
 
				-                    { label: 'Jiangdong District' },
			
 
				-                    { label: 'Jiangbei District' },
			
 
				-                    { label: 'Beilun District' },
			
 
				-                    { label: 'Zhenhai District' },
			
 
				-                    { label: 'Yinzhou District' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Wenzhou',
			
 
				-                children: [
			
 
				-                    { label: 'Lucheng District' },
			
 
				-                    { label: 'Longwan District' },
			
 
				-                    { label: 'Ouhai District' },
			
 
				-                    { label: 'Dongtou District' },
			
 
				-                    { label: 'Yongjia County' },
			
 
				-                    { label: 'Pingyang County' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Jiaxing',
			
 
				-                children: [
			
 
				-                    { label: 'Nanhu District' },
			
 
				-                    { label: 'Xiuzhou District' },
			
 
				-                    { label: 'Jiashan County' },
			
 
				-                    { label: 'Haiyan County' },
			
 
				-                    { label: 'Haining City' },
			
 
				-                    { label: 'Pinghu City' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Huzhou',
			
 
				-                children: [
			
 
				-                    { label: 'Wuxing District' },
			
 
				-                    { label: 'Nanxun District' },
			
 
				-                    { label: 'Deqing County' },
			
 
				-                    { label: 'Changxing County' },
			
 
				-                    { label: 'Anji County' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				+	{
			
 
				+		label: 'Yunnan',
			
 
				+		children: [
			
 
				+			{
			
 
				+				label: 'Kunming',
			
 
				+				children: [{ label: 'Panlong District' }, { label: 'Wuhua District' }, { label: 'Guandu District' }, { label: 'Xishan District' }],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Qujing',
			
 
				+				children: [
			
 
				+					{ label: 'Qilin District' },
			
 
				+					{ label: 'Zhanyi District' },
			
 
				+					{ label: 'Malong County' },
			
 
				+					{ label: 'Luliang County' },
			
 
				+					{ label: 'Shizong County' },
			
 
				+					{ label: 'Luoping County' },
			
 
				+					{ label: 'Fuyuan County' },
			
 
				+					{ label: 'Huize County' },
			
 
				+					{ label: 'Xuanwei City' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Yuxi',
			
 
				+				children: [
			
 
				+					{ label: 'Hongta District' },
			
 
				+					{ label: 'Jiangchuan District' },
			
 
				+					{ label: 'Chengjiang County' },
			
 
				+					{ label: 'Tonghai County' },
			
 
				+					{ label: 'Huaning County' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Baoshan',
			
 
				+				children: [
			
 
				+					{ label: 'Longyang District' },
			
 
				+					{ label: 'Shidian County' },
			
 
				+					{ label: 'Longling County' },
			
 
				+					{ label: 'Changning County' },
			
 
				+					{ label: 'Tengchong City' },
			
 
				+					{ label: 'Longling County' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Lijiang',
			
 
				+				children: [
			
 
				+					{ label: 'Gucheng District' },
			
 
				+					{ label: 'Yongsheng County' },
			
 
				+					{ label: 'Huaping County' },
			
 
				+					{ label: 'Yulong Naxi Autonomous County' },
			
 
				+					{ label: 'Ninglang Yi Autonomous County' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: "Pu'er",
			
 
				+				children: [
			
 
				+					{ label: 'Simao District' },
			
 
				+					{ label: "Ning'er Hani and Yi Autonomous County" },
			
 
				+					{ label: 'Mojiang Hani Autonomous County' },
			
 
				+					{ label: 'Jingdong Yi Autonomous County' },
			
 
				+					{ label: 'Jinggu Dai and Yi Autonomous County' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Lincang',
			
 
				+				children: [
			
 
				+					{ label: 'Linxiang District' },
			
 
				+					{ label: 'Fengqing County' },
			
 
				+					{ label: 'Yun County' },
			
 
				+					{ label: 'Yongde County' },
			
 
				+					{ label: 'Zhenkang County' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Chuxiong',
			
 
				+				children: [
			
 
				+					{ label: 'Chuxiong City' },
			
 
				+					{ label: 'Shuangbai County' },
			
 
				+					{ label: 'Mouding County' },
			
 
				+					{ label: 'Nanhua County' },
			
 
				+					{ label: "Yao'an County" },
			
 
				+					{ label: 'Dayao County' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Honghe',
			
 
				+				children: [
			
 
				+					{ label: 'Gejiu City' },
			
 
				+					{ label: 'Kaiyuan City' },
			
 
				+					{ label: 'Mengzi City' },
			
 
				+					{ label: 'Mile City' },
			
 
				+					{ label: 'Pingbian Miao Autonomous County' },
			
 
				+					{ label: 'Jianshui County' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Wenshan',
			
 
				+				children: [
			
 
				+					{ label: 'Wenshan City' },
			
 
				+					{ label: 'Yanshan County' },
			
 
				+					{ label: 'Xichou County' },
			
 
				+					{ label: 'Malipo County' },
			
 
				+					{ label: 'Maguan County' },
			
 
				+					{ label: 'Qiubei County' },
			
 
				+					{ label: 'Guangnan County' },
			
 
				+					{ label: 'Funing County' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		label: 'Guangdong',
			
 
				+		children: [
			
 
				+			{
			
 
				+				label: 'Guangzhou',
			
 
				+				children: [
			
 
				+					{ label: 'Tianhe District' },
			
 
				+					{ label: 'Haizhu District' },
			
 
				+					{ label: 'Liwan District' },
			
 
				+					{ label: 'Yuexiu District' },
			
 
				+					{ label: 'Baiyun District' },
			
 
				+					{ label: 'Huangpu District' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Shenzhen',
			
 
				+				children: [
			
 
				+					{ label: 'Luohu District' },
			
 
				+					{ label: 'Futian District' },
			
 
				+					{ label: 'Nanshan District' },
			
 
				+					{ label: "Bao'an District" },
			
 
				+					{ label: 'Longgang District' },
			
 
				+					{ label: 'Yantian District' },
			
 
				+				],
			
 
				+			},
			
 
				+			{ label: 'Zhuhai', children: [{ label: 'Xiangzhou District' }, { label: 'Doumen District' }, { label: 'Jinwan District' }] },
			
 
				+			{
			
 
				+				label: 'Shantou',
			
 
				+				children: [
			
 
				+					{ label: 'Longhu District' },
			
 
				+					{ label: 'Jinping District' },
			
 
				+					{ label: 'Gongjing District' },
			
 
				+					{ label: 'Chaoyang District' },
			
 
				+					{ label: 'Chaonan District' },
			
 
				+					{ label: 'Chenghai District' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Foshan',
			
 
				+				children: [
			
 
				+					{ label: 'Chancheng District' },
			
 
				+					{ label: 'Nanhai District' },
			
 
				+					{ label: 'Shunde District' },
			
 
				+					{ label: 'Sanshui District' },
			
 
				+					{ label: 'Gaoming District' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		label: 'Sichuan',
			
 
				+		children: [
			
 
				+			{
			
 
				+				label: 'Chengdu',
			
 
				+				children: [
			
 
				+					{ label: 'Jinjiang District' },
			
 
				+					{ label: 'Qingyang District' },
			
 
				+					{ label: 'Jinniu District' },
			
 
				+					{ label: 'Wuhou District' },
			
 
				+					{ label: 'Chenghua District' },
			
 
				+					{ label: 'Longquanyi District' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Mianyang',
			
 
				+				children: [
			
 
				+					{ label: 'Fucheng District' },
			
 
				+					{ label: 'Youxian District' },
			
 
				+					{ label: 'Anzhou District' },
			
 
				+					{ label: 'Santai County' },
			
 
				+					{ label: 'Yanting County' },
			
 
				+					{ label: 'Zitong County' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Zigong',
			
 
				+				children: [
			
 
				+					{ label: 'Ziliujing District' },
			
 
				+					{ label: 'Gongjing District' },
			
 
				+					{ label: "Da'an District" },
			
 
				+					{ label: 'Yantan District' },
			
 
				+					{ label: 'Rong County' },
			
 
				+					{ label: 'Fushun County' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Panzhihua',
			
 
				+				children: [
			
 
				+					{ label: 'Dong District' },
			
 
				+					{ label: 'Xi District' },
			
 
				+					{ label: 'Renhe District' },
			
 
				+					{ label: 'Miyi County' },
			
 
				+					{ label: 'Yanbian County' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		label: 'Beijing',
			
 
				+		children: [
			
 
				+			{
			
 
				+				label: 'Beijing',
			
 
				+				children: [
			
 
				+					{ label: 'Dongcheng District' },
			
 
				+					{ label: 'Xicheng District' },
			
 
				+					{ label: 'Chaoyang District' },
			
 
				+					{ label: 'Fengtai District' },
			
 
				+					{ label: 'Shijingshan District' },
			
 
				+					{ label: 'Haidian District' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		label: 'Zhejiang',
			
 
				+		children: [
			
 
				+			{
			
 
				+				label: 'Hangzhou',
			
 
				+				children: [
			
 
				+					{ label: 'Shangcheng District' },
			
 
				+					{ label: 'Xiacheng District' },
			
 
				+					{ label: 'Jianggan District' },
			
 
				+					{ label: 'Gongshu District' },
			
 
				+					{ label: 'Xihu District' },
			
 
				+					{ label: 'Binjiang District' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Ningbo',
			
 
				+				children: [
			
 
				+					{ label: 'Haishu District' },
			
 
				+					{ label: 'Jiangdong District' },
			
 
				+					{ label: 'Jiangbei District' },
			
 
				+					{ label: 'Beilun District' },
			
 
				+					{ label: 'Zhenhai District' },
			
 
				+					{ label: 'Yinzhou District' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Wenzhou',
			
 
				+				children: [
			
 
				+					{ label: 'Lucheng District' },
			
 
				+					{ label: 'Longwan District' },
			
 
				+					{ label: 'Ouhai District' },
			
 
				+					{ label: 'Dongtou District' },
			
 
				+					{ label: 'Yongjia County' },
			
 
				+					{ label: 'Pingyang County' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Jiaxing',
			
 
				+				children: [
			
 
				+					{ label: 'Nanhu District' },
			
 
				+					{ label: 'Xiuzhou District' },
			
 
				+					{ label: 'Jiashan County' },
			
 
				+					{ label: 'Haiyan County' },
			
 
				+					{ label: 'Haining City' },
			
 
				+					{ label: 'Pinghu City' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Huzhou',
			
 
				+				children: [
			
 
				+					{ label: 'Wuxing District' },
			
 
				+					{ label: 'Nanxun District' },
			
 
				+					{ label: 'Deqing County' },
			
 
				+					{ label: 'Changxing County' },
			
 
				+					{ label: 'Anji County' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				 ];
			
 
				 
			
 
				 const linkageDiffLabeData = [
			
 
				-    {
			
 
				-        province: 'Yunnan',
			
 
				-        children: [
			
 
				-            {
			
 
				-                city: 'Kunming',
			
 
				-                children: [
			
 
				-                    { region: 'Panlong District' },
			
 
				-                    { region: 'Wuhua District' },
			
 
				-                    { region: 'Guandu District' },
			
 
				-                    { region: 'Xishan District' },
			
 
				-                    { region: 'Dongchuan District' },
			
 
				-                    { region: 'Chenggong District' },
			
 
				-                    { region: 'Jinning District' },
			
 
				-                    { region: 'Fumin County' },
			
 
				-                    { region: 'Yiliang County' },
			
 
				-                    { region: 'Shilin Yi Autonomous County' },
			
 
				-                    { region: 'Songming County' },
			
 
				-                    { region: 'Luquan Yi and Miao Autonomous County' },
			
 
				-                    { region: 'Xundian Hui and Yi Autonomous County' },
			
 
				-                    { region: 'Anning City' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                city: 'Qujing',
			
 
				-                children: [
			
 
				-                    { region: 'Qilin District' },
			
 
				-                    { region: 'Zhanyi District' },
			
 
				-                    { region: 'Malong County' },
			
 
				-                    { region: 'Luliang County' },
			
 
				-                    { region: 'Shizong County' },
			
 
				-                    { region: 'Luoping County' },
			
 
				-                    { region: 'Fuyuan County' },
			
 
				-                    { region: 'Huize County' },
			
 
				-                    { region: 'Xuanwei City' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                city: 'Yuxi',
			
 
				-                children: [
			
 
				-                    { region: 'Hongta District' },
			
 
				-                    { region: 'Jiangchuan District' },
			
 
				-                    { region: 'Chengjiang County' },
			
 
				-                    { region: 'Tonghai County' },
			
 
				-                    { region: 'Huaning County' },
			
 
				-                    { region: 'Yimen County' },
			
 
				-                    { region: 'Eshan Yi Autonomous County' },
			
 
				-                    { region: 'Xinping Yi and Dai Autonomous County' },
			
 
				-                    { region: 'Yuanjiang Hani, Yi and Dai Autonomous County' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                city: 'Baoshan',
			
 
				-                children: [
			
 
				-                    { region: 'Longyang District' },
			
 
				-                    { region: 'Shidian County' },
			
 
				-                    { region: 'Longling County' },
			
 
				-                    { region: 'Changning County' },
			
 
				-                    { region: 'Tengchong City' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                city: 'Lijiang',
			
 
				-                children: [
			
 
				-                    { region: 'Gucheng District' },
			
 
				-                    { region: 'Yongsheng County' },
			
 
				-                    { region: 'Huaping County' },
			
 
				-                    { region: 'Yulong Naxi Autonomous County' },
			
 
				-                    { region: 'Ninglang Yi Autonomous County' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                city: "Pu'er",
			
 
				-                children: [
			
 
				-                    { region: 'Simao District' },
			
 
				-                    { region: "Ning'er Hani and Yi Autonomous County" },
			
 
				-                    { region: 'Mojiang Hani Autonomous County' },
			
 
				-                    { region: 'Jingdong Yi Autonomous County' },
			
 
				-                    { region: 'Jinggu Dai and Yi Autonomous County' },
			
 
				-                    { region: 'Zhenyuan Yi, Hani and Lahu Autonomous County' },
			
 
				-                    { region: 'Jiangcheng Hani and Yi Autonomous County' },
			
 
				-                    { region: 'Menglian Dai, Lahu and Va Autonomous County' },
			
 
				-                    { region: 'Lancang Lahu Autonomous County' },
			
 
				-                    { region: 'Ximeng Va Autonomous County' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        province: 'Guangdong',
			
 
				-        children: [
			
 
				-            {
			
 
				-                city: 'Guangzhou',
			
 
				-                children: [
			
 
				-                    { region: 'Tianhe District' },
			
 
				-                    { region: 'Haizhu District' },
			
 
				-                    { region: 'Liwan District' },
			
 
				-                    { region: 'Yuexiu District' },
			
 
				-                    { region: 'Baiyun District' },
			
 
				-                    { region: 'Huangpu District' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                city: 'Shenzhen',
			
 
				-                children: [
			
 
				-                    { region: 'Luohu District' },
			
 
				-                    { region: 'Futian District' },
			
 
				-                    { region: 'Nanshan District' },
			
 
				-                    { region: "Bao'an District" },
			
 
				-                    { region: 'Longgang District' },
			
 
				-                    { region: 'Yantian District' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				+	{
			
 
				+		province: 'Yunnan',
			
 
				+		children: [
			
 
				+			{
			
 
				+				city: 'Kunming',
			
 
				+				children: [
			
 
				+					{ region: 'Panlong District' },
			
 
				+					{ region: 'Wuhua District' },
			
 
				+					{ region: 'Guandu District' },
			
 
				+					{ region: 'Xishan District' },
			
 
				+					{ region: 'Dongchuan District' },
			
 
				+					{ region: 'Chenggong District' },
			
 
				+					{ region: 'Jinning District' },
			
 
				+					{ region: 'Fumin County' },
			
 
				+					{ region: 'Yiliang County' },
			
 
				+					{ region: 'Shilin Yi Autonomous County' },
			
 
				+					{ region: 'Songming County' },
			
 
				+					{ region: 'Luquan Yi and Miao Autonomous County' },
			
 
				+					{ region: 'Xundian Hui and Yi Autonomous County' },
			
 
				+					{ region: 'Anning City' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				city: 'Qujing',
			
 
				+				children: [
			
 
				+					{ region: 'Qilin District' },
			
 
				+					{ region: 'Zhanyi District' },
			
 
				+					{ region: 'Malong County' },
			
 
				+					{ region: 'Luliang County' },
			
 
				+					{ region: 'Shizong County' },
			
 
				+					{ region: 'Luoping County' },
			
 
				+					{ region: 'Fuyuan County' },
			
 
				+					{ region: 'Huize County' },
			
 
				+					{ region: 'Xuanwei City' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				city: 'Yuxi',
			
 
				+				children: [
			
 
				+					{ region: 'Hongta District' },
			
 
				+					{ region: 'Jiangchuan District' },
			
 
				+					{ region: 'Chengjiang County' },
			
 
				+					{ region: 'Tonghai County' },
			
 
				+					{ region: 'Huaning County' },
			
 
				+					{ region: 'Yimen County' },
			
 
				+					{ region: 'Eshan Yi Autonomous County' },
			
 
				+					{ region: 'Xinping Yi and Dai Autonomous County' },
			
 
				+					{ region: 'Yuanjiang Hani, Yi and Dai Autonomous County' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				city: 'Baoshan',
			
 
				+				children: [
			
 
				+					{ region: 'Longyang District' },
			
 
				+					{ region: 'Shidian County' },
			
 
				+					{ region: 'Longling County' },
			
 
				+					{ region: 'Changning County' },
			
 
				+					{ region: 'Tengchong City' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				city: 'Lijiang',
			
 
				+				children: [
			
 
				+					{ region: 'Gucheng District' },
			
 
				+					{ region: 'Yongsheng County' },
			
 
				+					{ region: 'Huaping County' },
			
 
				+					{ region: 'Yulong Naxi Autonomous County' },
			
 
				+					{ region: 'Ninglang Yi Autonomous County' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				city: "Pu'er",
			
 
				+				children: [
			
 
				+					{ region: 'Simao District' },
			
 
				+					{ region: "Ning'er Hani and Yi Autonomous County" },
			
 
				+					{ region: 'Mojiang Hani Autonomous County' },
			
 
				+					{ region: 'Jingdong Yi Autonomous County' },
			
 
				+					{ region: 'Jinggu Dai and Yi Autonomous County' },
			
 
				+					{ region: 'Zhenyuan Yi, Hani and Lahu Autonomous County' },
			
 
				+					{ region: 'Jiangcheng Hani and Yi Autonomous County' },
			
 
				+					{ region: 'Menglian Dai, Lahu and Va Autonomous County' },
			
 
				+					{ region: 'Lancang Lahu Autonomous County' },
			
 
				+					{ region: 'Ximeng Va Autonomous County' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		province: 'Guangdong',
			
 
				+		children: [
			
 
				+			{
			
 
				+				city: 'Guangzhou',
			
 
				+				children: [
			
 
				+					{ region: 'Tianhe District' },
			
 
				+					{ region: 'Haizhu District' },
			
 
				+					{ region: 'Liwan District' },
			
 
				+					{ region: 'Yuexiu District' },
			
 
				+					{ region: 'Baiyun District' },
			
 
				+					{ region: 'Huangpu District' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				city: 'Shenzhen',
			
 
				+				children: [
			
 
				+					{ region: 'Luohu District' },
			
 
				+					{ region: 'Futian District' },
			
 
				+					{ region: 'Nanshan District' },
			
 
				+					{ region: "Bao'an District" },
			
 
				+					{ region: 'Longgang District' },
			
 
				+					{ region: 'Yantian District' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				 ];
			
 
				 
			
 
				 export { linkageData, linkageDiffLabeData };
			
--- a/demo/src/pages/avatar/AvatarDemo.svelte
+++ b/demo/src/pages/avatar/AvatarDemo.svelte
@@ -1,82 +1,82 @@
 
				 <!-- Avatar Demo -->
			
 
				 <script>
			
 
				-    import { Avatar } from 'stdf';
			
 
				+	import { Avatar } from 'stdf';
			
 
				 
			
 
				-    const icons = [
			
 
				-        { icon: { name: 'ri-aliens-fill', theme: true, top: -1, size: 16 }, size: 'xs' },
			
 
				-        { icon: { name: 'ri-user-smile-line', top: -1 }, size: 'sm' },
			
 
				-        { icon: { name: 'ri-shield-user-line', theme: true, top: 0, size: 32 }, size: 'md' },
			
 
				-        { icon: { name: 'ri-emotion-line', theme: true, top: -1, size: 46 }, size: 'lg' },
			
 
				-    ];
			
 
				+	const icons = [
			
 
				+		{ icon: { name: 'ri-aliens-fill', theme: true, top: -1, size: 16 }, size: 'xs' },
			
 
				+		{ icon: { name: 'ri-user-smile-line', top: -1 }, size: 'sm' },
			
 
				+		{ icon: { name: 'ri-shield-user-line', theme: true, top: 0, size: 32 }, size: 'md' },
			
 
				+		{ icon: { name: 'ri-emotion-line', theme: true, top: -1, size: 46 }, size: 'lg' },
			
 
				+	];
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-8 px-4">
			
 
				-    <div class="font-bold">不同圆角</div>
			
 
				-    <div class="flex justify-between mt-4 mb-8">
			
 
				-        <Avatar />
			
 
				-        <Avatar radius="none" />
			
 
				-        <Avatar radius="full" />
			
 
				-    </div>
			
 
				-    <div class="flex justify-between mt-4 mb-8">
			
 
				-        <Avatar radius="xl" />
			
 
				-        <Avatar radius="2xl" />
			
 
				-        <Avatar radius="3xl" />
			
 
				-    </div>
			
 
				+	<div class="font-bold">不同圆角</div>
			
 
				+	<div class="flex justify-between mt-4 mb-8">
			
 
				+		<Avatar />
			
 
				+		<Avatar radius="none" />
			
 
				+		<Avatar radius="full" />
			
 
				+	</div>
			
 
				+	<div class="flex justify-between mt-4 mb-8">
			
 
				+		<Avatar radius="xl" />
			
 
				+		<Avatar radius="2xl" />
			
 
				+		<Avatar radius="3xl" />
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="font-bold">不同图片类型与大小</div>
			
 
				-    <div class="flex justify-between mt-4 mb-8">
			
 
				-        <Avatar image="./assets/images/avatar_2.png" imgSize="s" />
			
 
				-        <Avatar image="./assets/images/avatar_2.png" imgSize="m" />
			
 
				-        <Avatar image="./assets/images/avatar_2.png" />
			
 
				-        <Avatar image="./assets/images/avatar_1.jpg" />
			
 
				-    </div>
			
 
				+	<div class="font-bold">不同图片类型与大小</div>
			
 
				+	<div class="flex justify-between mt-4 mb-8">
			
 
				+		<Avatar image="./assets/images/avatar_2.png" imgSize="s" />
			
 
				+		<Avatar image="./assets/images/avatar_2.png" imgSize="m" />
			
 
				+		<Avatar image="./assets/images/avatar_2.png" />
			
 
				+		<Avatar image="./assets/images/avatar_1.jpg" />
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="font-bold">自定义背景色</div>
			
 
				-    <div class="flex justify-between mt-4 mb-8">
			
 
				-        <Avatar image="./assets/images/avatar_2.png" imgSize="m" injClass="!bg-success" />
			
 
				-        <Avatar image="./assets/images/avatar_2.png" imgSize="m" injClass="!bg-[#D65786]" />
			
 
				-        <Avatar image="./assets/images/avatar_2.png" imgSize="m" injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0] !text-white" />
			
 
				-        <Avatar image="./assets/images/avatar_2.png" imgSize="m" injClass="!bg-[rgba(0,0,0,0)]" />
			
 
				-    </div>
			
 
				+	<div class="font-bold">自定义背景色</div>
			
 
				+	<div class="flex justify-between mt-4 mb-8">
			
 
				+		<Avatar image="./assets/images/avatar_2.png" imgSize="m" injClass="!bg-success" />
			
 
				+		<Avatar image="./assets/images/avatar_2.png" imgSize="m" injClass="!bg-[#D65786]" />
			
 
				+		<Avatar image="./assets/images/avatar_2.png" imgSize="m" injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0] !text-white" />
			
 
				+		<Avatar image="./assets/images/avatar_2.png" imgSize="m" injClass="!bg-[rgba(0,0,0,0)]" />
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="font-bold">不同边框</div>
			
 
				-    <div class="flex justify-between mt-4 mb-8">
			
 
				-        <Avatar image="./assets/images/avatar_2.png" imgSize="m" line="solid" />
			
 
				-        <Avatar image="./assets/images/avatar_2.png" imgSize="m" line="dashed" />
			
 
				-        <Avatar image="./assets/images/avatar_2.png" imgSize="m" line="dotted" />
			
 
				-        <Avatar image="./assets/images/avatar_2.png" imgSize="m" line="solid" injClass="border-[red] dark:border-[green]" />
			
 
				-    </div>
			
 
				+	<div class="font-bold">不同边框</div>
			
 
				+	<div class="flex justify-between mt-4 mb-8">
			
 
				+		<Avatar image="./assets/images/avatar_2.png" imgSize="m" line="solid" />
			
 
				+		<Avatar image="./assets/images/avatar_2.png" imgSize="m" line="dashed" />
			
 
				+		<Avatar image="./assets/images/avatar_2.png" imgSize="m" line="dotted" />
			
 
				+		<Avatar image="./assets/images/avatar_2.png" imgSize="m" line="solid" injClass="border-[red] dark:border-[green]" />
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="font-bold">替换文本</div>
			
 
				-    <div class="flex justify-between mt-4 mb-8">
			
 
				-        <Avatar alt="张" altSize="xs" />
			
 
				-        <Avatar alt="张" altSize="sm" />
			
 
				-        <Avatar alt="张" />
			
 
				-        <Avatar alt="张" altSize="lg" />
			
 
				-    </div>
			
 
				+	<div class="font-bold">替换文本</div>
			
 
				+	<div class="flex justify-between mt-4 mb-8">
			
 
				+		<Avatar alt="张" altSize="xs" />
			
 
				+		<Avatar alt="张" altSize="sm" />
			
 
				+		<Avatar alt="张" />
			
 
				+		<Avatar alt="张" altSize="lg" />
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="font-bold">替换 Icon</div>
			
 
				-    <div class="flex justify-between mt-4 mb-8">
			
 
				-        {#each icons as icon}
			
 
				-            <Avatar icon={icon.icon} size={icon.size} />
			
 
				-        {/each}
			
 
				-    </div>
			
 
				+	<div class="font-bold">替换 Icon</div>
			
 
				+	<div class="flex justify-between mt-4 mb-8">
			
 
				+		{#each icons as icon}
			
 
				+			<Avatar icon={icon.icon} size={icon.size} />
			
 
				+		{/each}
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="font-bold">不同大小</div>
			
 
				-    <div class="flex justify-between">
			
 
				-        <div class="flex flex-col items-center space-y-4 mt-4 mb-8">
			
 
				-            <Avatar size="xs" icon={{ name: 'ri-bear-smile-line', size: 16, theme: true }} />
			
 
				-            <Avatar size="sm" image="./assets/images/avatar_1.jpg" />
			
 
				-            <Avatar line="solid" />
			
 
				-            <Avatar size="lg" image="./assets/images/avatar_2.png" imgSize="m" />
			
 
				-            <Avatar size="xl" alt="张" altSize="xl" />
			
 
				-        </div>
			
 
				-        <div class="flex flex-col items-center space-y-4 mt-4 mb-8">
			
 
				-            <Avatar radius="full" size="xs" icon={{ name: 'ri-bear-smile-line', size: 16, theme: true }} />
			
 
				-            <Avatar radius="full" size="sm" image="./assets/images/avatar_1.jpg" />
			
 
				-            <Avatar radius="full" line="solid" />
			
 
				-            <Avatar radius="full" size="lg" image="./assets/images/avatar_2.png" imgSize="m" />
			
 
				-            <Avatar radius="full" size="xl" alt="张" altSize="xl" />
			
 
				-        </div>
			
 
				-    </div>
			
 
				+	<div class="font-bold">不同大小</div>
			
 
				+	<div class="flex justify-between">
			
 
				+		<div class="flex flex-col items-center space-y-4 mt-4 mb-8">
			
 
				+			<Avatar size="xs" icon={{ name: 'ri-bear-smile-line', size: 16, theme: true }} />
			
 
				+			<Avatar size="sm" image="./assets/images/avatar_1.jpg" />
			
 
				+			<Avatar line="solid" />
			
 
				+			<Avatar size="lg" image="./assets/images/avatar_2.png" imgSize="m" />
			
 
				+			<Avatar size="xl" alt="张" altSize="xl" />
			
 
				+		</div>
			
 
				+		<div class="flex flex-col items-center space-y-4 mt-4 mb-8">
			
 
				+			<Avatar radius="full" size="xs" icon={{ name: 'ri-bear-smile-line', size: 16, theme: true }} />
			
 
				+			<Avatar radius="full" size="sm" image="./assets/images/avatar_1.jpg" />
			
 
				+			<Avatar radius="full" line="solid" />
			
 
				+			<Avatar radius="full" size="lg" image="./assets/images/avatar_2.png" imgSize="m" />
			
 
				+			<Avatar radius="full" size="xl" alt="张" altSize="xl" />
			
 
				+		</div>
			
 
				+	</div>
			
 
				 </div>
			
--- a/demo/src/pages/avatar/AvatarDemo_en.svelte
+++ b/demo/src/pages/avatar/AvatarDemo_en.svelte
@@ -1,82 +1,82 @@
 
				 <!-- Avatar Demo -->
			
 
				 <script>
			
 
				-    import { Avatar } from 'stdf';
			
 
				+	import { Avatar } from 'stdf';
			
 
				 
			
 
				-    const icons = [
			
 
				-        { icon: { name: 'ri-aliens-fill', theme: true, top: -1, size: 16 }, size: 'xs' },
			
 
				-        { icon: { name: 'ri-user-smile-line', top: -1 }, size: 'sm' },
			
 
				-        { icon: { name: 'ri-shield-user-line', theme: true, top: 0, size: 32 }, size: 'md' },
			
 
				-        { icon: { name: 'ri-emotion-line', theme: true, top: -1, size: 46 }, size: 'lg' },
			
 
				-    ];
			
 
				+	const icons = [
			
 
				+		{ icon: { name: 'ri-aliens-fill', theme: true, top: -1, size: 16 }, size: 'xs' },
			
 
				+		{ icon: { name: 'ri-user-smile-line', top: -1 }, size: 'sm' },
			
 
				+		{ icon: { name: 'ri-shield-user-line', theme: true, top: 0, size: 32 }, size: 'md' },
			
 
				+		{ icon: { name: 'ri-emotion-line', theme: true, top: -1, size: 46 }, size: 'lg' },
			
 
				+	];
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-8 px-4">
			
 
				-    <div class="font-bold">Different rounded corners</div>
			
 
				-    <div class="flex justify-between mt-4 mb-8">
			
 
				-        <Avatar />
			
 
				-        <Avatar radius="none" />
			
 
				-        <Avatar radius="full" />
			
 
				-    </div>
			
 
				-    <div class="flex justify-between mt-4 mb-8">
			
 
				-        <Avatar radius="xl" />
			
 
				-        <Avatar radius="2xl" />
			
 
				-        <Avatar radius="3xl" />
			
 
				-    </div>
			
 
				+	<div class="font-bold">Different rounded corners</div>
			
 
				+	<div class="flex justify-between mt-4 mb-8">
			
 
				+		<Avatar />
			
 
				+		<Avatar radius="none" />
			
 
				+		<Avatar radius="full" />
			
 
				+	</div>
			
 
				+	<div class="flex justify-between mt-4 mb-8">
			
 
				+		<Avatar radius="xl" />
			
 
				+		<Avatar radius="2xl" />
			
 
				+		<Avatar radius="3xl" />
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="font-bold">Different picture types and size</div>
			
 
				-    <div class="flex justify-between mt-4 mb-8">
			
 
				-        <Avatar image="./assets/images/avatar_2.png" imgSize="s" />
			
 
				-        <Avatar image="./assets/images/avatar_2.png" imgSize="m" />
			
 
				-        <Avatar image="./assets/images/avatar_2.png" />
			
 
				-        <Avatar image="./assets/images/avatar_1.jpg" />
			
 
				-    </div>
			
 
				+	<div class="font-bold">Different picture types and size</div>
			
 
				+	<div class="flex justify-between mt-4 mb-8">
			
 
				+		<Avatar image="./assets/images/avatar_2.png" imgSize="s" />
			
 
				+		<Avatar image="./assets/images/avatar_2.png" imgSize="m" />
			
 
				+		<Avatar image="./assets/images/avatar_2.png" />
			
 
				+		<Avatar image="./assets/images/avatar_1.jpg" />
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="font-bold">Custom background color</div>
			
 
				-    <div class="flex justify-between mt-4 mb-8">
			
 
				-        <Avatar image="./assets/images/avatar_2.png" imgSize="m" injClass="!bg-success" />
			
 
				-        <Avatar image="./assets/images/avatar_2.png" imgSize="m" injClass="!bg-[#D65786]" />
			
 
				-        <Avatar image="./assets/images/avatar_2.png" imgSize="m" injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0] !text-white" />
			
 
				-        <Avatar image="./assets/images/avatar_2.png" imgSize="m" injClass="!bg-[rgba(0,0,0,0)]" />
			
 
				-    </div>
			
 
				+	<div class="font-bold">Custom background color</div>
			
 
				+	<div class="flex justify-between mt-4 mb-8">
			
 
				+		<Avatar image="./assets/images/avatar_2.png" imgSize="m" injClass="!bg-success" />
			
 
				+		<Avatar image="./assets/images/avatar_2.png" imgSize="m" injClass="!bg-[#D65786]" />
			
 
				+		<Avatar image="./assets/images/avatar_2.png" imgSize="m" injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0] !text-white" />
			
 
				+		<Avatar image="./assets/images/avatar_2.png" imgSize="m" injClass="!bg-[rgba(0,0,0,0)]" />
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="font-bold">Different border</div>
			
 
				-    <div class="flex justify-between mt-4 mb-8">
			
 
				-        <Avatar image="./assets/images/avatar_2.png" imgSize="m" line="solid" />
			
 
				-        <Avatar image="./assets/images/avatar_2.png" imgSize="m" line="dashed" />
			
 
				-        <Avatar image="./assets/images/avatar_2.png" imgSize="m" line="dotted" />
			
 
				-        <Avatar image="./assets/images/avatar_2.png" imgSize="m" line="solid" injClass="border-[red] dark:border-[green]" />
			
 
				-    </div>
			
 
				+	<div class="font-bold">Different border</div>
			
 
				+	<div class="flex justify-between mt-4 mb-8">
			
 
				+		<Avatar image="./assets/images/avatar_2.png" imgSize="m" line="solid" />
			
 
				+		<Avatar image="./assets/images/avatar_2.png" imgSize="m" line="dashed" />
			
 
				+		<Avatar image="./assets/images/avatar_2.png" imgSize="m" line="dotted" />
			
 
				+		<Avatar image="./assets/images/avatar_2.png" imgSize="m" line="solid" injClass="border-[red] dark:border-[green]" />
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="font-bold">Replace text</div>
			
 
				-    <div class="flex justify-between mt-4 mb-8">
			
 
				-        <Avatar alt="A" altSize="xs" />
			
 
				-        <Avatar alt="A" altSize="sm" />
			
 
				-        <Avatar alt="A" />
			
 
				-        <Avatar alt="A" altSize="lg" />
			
 
				-    </div>
			
 
				+	<div class="font-bold">Replace text</div>
			
 
				+	<div class="flex justify-between mt-4 mb-8">
			
 
				+		<Avatar alt="A" altSize="xs" />
			
 
				+		<Avatar alt="A" altSize="sm" />
			
 
				+		<Avatar alt="A" />
			
 
				+		<Avatar alt="A" altSize="lg" />
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="font-bold">Replace Icon</div>
			
 
				-    <div class="flex justify-between mt-4 mb-8">
			
 
				-        {#each icons as icon}
			
 
				-            <Avatar icon={icon.icon} size={icon.size} />
			
 
				-        {/each}
			
 
				-    </div>
			
 
				+	<div class="font-bold">Replace Icon</div>
			
 
				+	<div class="flex justify-between mt-4 mb-8">
			
 
				+		{#each icons as icon}
			
 
				+			<Avatar icon={icon.icon} size={icon.size} />
			
 
				+		{/each}
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="font-bold">Different size</div>
			
 
				-    <div class="flex justify-between">
			
 
				-        <div class="flex flex-col items-center space-y-4 mt-4 mb-8">
			
 
				-            <Avatar size="xs" icon={{ name: 'ri-bear-smile-line', size: 16, theme: true }} />
			
 
				-            <Avatar size="sm" image="./assets/images/avatar_1.jpg" />
			
 
				-            <Avatar line="solid" />
			
 
				-            <Avatar size="lg" image="./assets/images/avatar_2.png" imgSize="m" />
			
 
				-            <Avatar size="xl" alt="A" altSize="xl" />
			
 
				-        </div>
			
 
				-        <div class="flex flex-col items-center space-y-4 mt-4 mb-8">
			
 
				-            <Avatar radius="full" size="xs" icon={{ name: 'ri-bear-smile-line', size: 16, theme: true }} />
			
 
				-            <Avatar radius="full" size="sm" image="./assets/images/avatar_1.jpg" />
			
 
				-            <Avatar radius="full" line="solid" />
			
 
				-            <Avatar radius="full" size="lg" image="./assets/images/avatar_2.png" imgSize="m" />
			
 
				-            <Avatar radius="full" size="xl" alt="A" altSize="xl" />
			
 
				-        </div>
			
 
				-    </div>
			
 
				+	<div class="font-bold">Different size</div>
			
 
				+	<div class="flex justify-between">
			
 
				+		<div class="flex flex-col items-center space-y-4 mt-4 mb-8">
			
 
				+			<Avatar size="xs" icon={{ name: 'ri-bear-smile-line', size: 16, theme: true }} />
			
 
				+			<Avatar size="sm" image="./assets/images/avatar_1.jpg" />
			
 
				+			<Avatar line="solid" />
			
 
				+			<Avatar size="lg" image="./assets/images/avatar_2.png" imgSize="m" />
			
 
				+			<Avatar size="xl" alt="A" altSize="xl" />
			
 
				+		</div>
			
 
				+		<div class="flex flex-col items-center space-y-4 mt-4 mb-8">
			
 
				+			<Avatar radius="full" size="xs" icon={{ name: 'ri-bear-smile-line', size: 16, theme: true }} />
			
 
				+			<Avatar radius="full" size="sm" image="./assets/images/avatar_1.jpg" />
			
 
				+			<Avatar radius="full" line="solid" />
			
 
				+			<Avatar radius="full" size="lg" image="./assets/images/avatar_2.png" imgSize="m" />
			
 
				+			<Avatar radius="full" size="xl" alt="A" altSize="xl" />
			
 
				+		</div>
			
 
				+	</div>
			
 
				 </div>
			
--- a/demo/src/pages/badge/BadgeDemo.svelte
+++ b/demo/src/pages/badge/BadgeDemo.svelte
@@ -1,126 +1,126 @@
 
				 <!-- Badge Demo -->
			
 
				 <script>
			
 
				-    import { Badge, Avatar, Button, Icon, Input, Cell } from 'stdf';
			
 
				+	import { Badge, Avatar, Button, Icon, Input, Cell } from 'stdf';
			
 
				 
			
 
				-    let isShow = true;
			
 
				-    const changeShowFun = () => {
			
 
				-        isShow = !isShow;
			
 
				-    };
			
 
				+	let isShow = true;
			
 
				+	const changeShowFun = () => {
			
 
				+		isShow = !isShow;
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="pt-1 pb-4">
			
 
				-    <div class="mx-4 mt-8 font-bold text-lg">基础用法</div>
			
 
				-    <div class="p-4 flex justify-around">
			
 
				-        <Badge>
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge text="24">
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge text="99+">
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge text="New">
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-    </div>
			
 
				+	<div class="mx-4 mt-8 font-bold text-lg">基础用法</div>
			
 
				+	<div class="p-4 flex justify-around">
			
 
				+		<Badge>
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge text="24">
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge text="99+">
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge text="New">
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="mx-4 mt-8 font-bold text-lg">不同圆角</div>
			
 
				-    <div class="p-4 flex justify-around">
			
 
				-        <Badge radius="base">
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge text="24" radius="none">
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge text="24" radius="base">
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge text="Hot" radius="leaf">
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-    </div>
			
 
				+	<div class="mx-4 mt-8 font-bold text-lg">不同圆角</div>
			
 
				+	<div class="p-4 flex justify-around">
			
 
				+		<Badge radius="base">
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge text="24" radius="none">
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge text="24" radius="base">
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge text="Hot" radius="leaf">
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="mx-4 mt-8 font-bold text-lg">位于左侧</div>
			
 
				-    <div class="p-4 flex justify-around">
			
 
				-        <Badge isLeft>
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge isLeft text="24">
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge isLeft text="24" radius="leaf">
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge isLeft text="厉害">
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-    </div>
			
 
				+	<div class="mx-4 mt-8 font-bold text-lg">位于左侧</div>
			
 
				+	<div class="p-4 flex justify-around">
			
 
				+		<Badge isLeft>
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge isLeft text="24">
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge isLeft text="24" radius="leaf">
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge isLeft text="厉害">
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="mx-4 mt-8 font-bold text-lg">搭配其他组件</div>
			
 
				-    <div class="p-4 flex justify-around">
			
 
				-        <Badge text="帅" radius="leaf">
			
 
				-            <Icon name="ri-spy-fill" />
			
 
				-        </Badge>
			
 
				-        <Badge text="棒" radius="leaf">
			
 
				-            <Icon name="ri-medal-fill" />
			
 
				-        </Badge>
			
 
				-        <Badge text="Happy" radius="leaf" offsetX={-12}>
			
 
				-            <Icon name="ri-cake-2-fill" />
			
 
				-        </Badge>
			
 
				-    </div>
			
 
				-    <Badge text="Hot" offsetX={18} offsetY={8}>
			
 
				-        <Button>搭配 Button</Button>
			
 
				-    </Badge>
			
 
				-    <Badge text="必填" offsetX={18} offsetY={26}>
			
 
				-        <Input title="搭配 Input" />
			
 
				-    </Badge>
			
 
				-    <Cell title="搭配 Cell" detail="slot">
			
 
				-        <span slot="detail"><Badge isInner /></span>
			
 
				-    </Cell>
			
 
				-    <Cell title="搭配 Cell" detail="slot" line={false}>
			
 
				-        <span slot="detail"><Badge text="99+" isInner /></span>
			
 
				-    </Cell>
			
 
				-    <Cell title="搭配无圆角 Cell" detail="slot" radius="none">
			
 
				-        <span slot="detail"><Badge text="新版本" radius="base" isInner /></span>
			
 
				-    </Cell>
			
 
				-    <Cell title="搭配全圆角 Cell" detail="slot" radius="full">
			
 
				-        <span slot="detail"><Badge isInner /></span>
			
 
				-    </Cell>
			
 
				+	<div class="mx-4 mt-8 font-bold text-lg">搭配其他组件</div>
			
 
				+	<div class="p-4 flex justify-around">
			
 
				+		<Badge text="帅" radius="leaf">
			
 
				+			<Icon name="ri-spy-fill" />
			
 
				+		</Badge>
			
 
				+		<Badge text="棒" radius="leaf">
			
 
				+			<Icon name="ri-medal-fill" />
			
 
				+		</Badge>
			
 
				+		<Badge text="Happy" radius="leaf" offsetX={-12}>
			
 
				+			<Icon name="ri-cake-2-fill" />
			
 
				+		</Badge>
			
 
				+	</div>
			
 
				+	<Badge text="Hot" offsetX={18} offsetY={8}>
			
 
				+		<Button>搭配 Button</Button>
			
 
				+	</Badge>
			
 
				+	<Badge text="必填" offsetX={18} offsetY={26}>
			
 
				+		<Input title="搭配 Input" />
			
 
				+	</Badge>
			
 
				+	<Cell title="搭配 Cell" detail="slot">
			
 
				+		<span slot="detail"><Badge isInner /></span>
			
 
				+	</Cell>
			
 
				+	<Cell title="搭配 Cell" detail="slot" line={false}>
			
 
				+		<span slot="detail"><Badge text="99+" isInner /></span>
			
 
				+	</Cell>
			
 
				+	<Cell title="搭配无圆角 Cell" detail="slot" radius="none">
			
 
				+		<span slot="detail"><Badge text="新版本" radius="base" isInner /></span>
			
 
				+	</Cell>
			
 
				+	<Cell title="搭配全圆角 Cell" detail="slot" radius="full">
			
 
				+		<span slot="detail"><Badge isInner /></span>
			
 
				+	</Cell>
			
 
				 
			
 
				-    <div class="mx-4 mt-8 font-bold text-lg">徽标动画</div>
			
 
				-    <div class="p-4 flex justify-around">
			
 
				-        <Badge {isShow}>
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge text="24" {isShow}>
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge text="24" radius="base" {isShow}>
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge text="Hot" radius="leaf" {isShow}>
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-    </div>
			
 
				-    <Cell title={!isShow ? '隐藏' : '显示'} detail="slot">
			
 
				-        <span slot="detail"><Badge isInner {isShow} /></span>
			
 
				-    </Cell>
			
 
				-    <Button on:click={changeShowFun}>点击{isShow ? '隐藏' : '显示'}徽标</Button>
			
 
				+	<div class="mx-4 mt-8 font-bold text-lg">徽标动画</div>
			
 
				+	<div class="p-4 flex justify-around">
			
 
				+		<Badge {isShow}>
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge text="24" {isShow}>
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge text="24" radius="base" {isShow}>
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge text="Hot" radius="leaf" {isShow}>
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+	</div>
			
 
				+	<Cell title={!isShow ? '隐藏' : '显示'} detail="slot">
			
 
				+		<span slot="detail"><Badge isInner {isShow} /></span>
			
 
				+	</Cell>
			
 
				+	<Button on:click={changeShowFun}>点击{isShow ? '隐藏' : '显示'}徽标</Button>
			
 
				 
			
 
				-    <div class="mx-4 mt-8 font-bold text-lg">自定义背景色与边框</div>
			
 
				-    <div class="p-4 flex justify-around">
			
 
				-        <Badge text="Theme" injClass="!bg-primary dark:!bg-dark text-white dark:text-black">
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge text="New" injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]">
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge radius="base" injClass="ring-2 ring-[#ebeef2] dark:ring-[#414248]">
			
 
				-            <Avatar image="./assets/images/avatar_1.jpg" />
			
 
				-        </Badge>
			
 
				-        <Badge offsetX={9} offsetY={9} injClass="ring-2 ring-[#ebeef2] dark:ring-[#414248]">
			
 
				-            <Avatar radius="full" image="./assets/images/avatar_1.jpg" />
			
 
				-        </Badge>
			
 
				-    </div>
			
 
				+	<div class="mx-4 mt-8 font-bold text-lg">自定义背景色与边框</div>
			
 
				+	<div class="p-4 flex justify-around">
			
 
				+		<Badge text="Theme" injClass="!bg-primary dark:!bg-dark text-white dark:text-black">
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge text="New" injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]">
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge radius="base" injClass="ring-2 ring-[#ebeef2] dark:ring-[#414248]">
			
 
				+			<Avatar image="./assets/images/avatar_1.jpg" />
			
 
				+		</Badge>
			
 
				+		<Badge offsetX={9} offsetY={9} injClass="ring-2 ring-[#ebeef2] dark:ring-[#414248]">
			
 
				+			<Avatar radius="full" image="./assets/images/avatar_1.jpg" />
			
 
				+		</Badge>
			
 
				+	</div>
			
 
				 </div>
			
--- a/demo/src/pages/badge/BadgeDemo_en.svelte
+++ b/demo/src/pages/badge/BadgeDemo_en.svelte
@@ -1,126 +1,126 @@
 
				 <!-- Badge Demo -->
			
 
				 <script>
			
 
				-    import { Badge, Avatar, Button, Icon, Input, Cell } from 'stdf';
			
 
				+	import { Badge, Avatar, Button, Icon, Input, Cell } from 'stdf';
			
 
				 
			
 
				-    let isShow = true;
			
 
				-    const changeShowFun = () => {
			
 
				-        isShow = !isShow;
			
 
				-    };
			
 
				+	let isShow = true;
			
 
				+	const changeShowFun = () => {
			
 
				+		isShow = !isShow;
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="pt-1 pb-4">
			
 
				-    <div class="mx-4 mt-8 font-bold text-lg">Basic usage</div>
			
 
				-    <div class="p-4 flex justify-around">
			
 
				-        <Badge>
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge text="24">
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge text="99+">
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge text="New">
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-    </div>
			
 
				+	<div class="mx-4 mt-8 font-bold text-lg">Basic usage</div>
			
 
				+	<div class="p-4 flex justify-around">
			
 
				+		<Badge>
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge text="24">
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge text="99+">
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge text="New">
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="mx-4 mt-8 font-bold text-lg">Different rounded corners</div>
			
 
				-    <div class="p-4 flex justify-around">
			
 
				-        <Badge radius="base">
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge text="24" radius="none">
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge text="24" radius="base">
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge text="Hot" radius="leaf">
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-    </div>
			
 
				+	<div class="mx-4 mt-8 font-bold text-lg">Different rounded corners</div>
			
 
				+	<div class="p-4 flex justify-around">
			
 
				+		<Badge radius="base">
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge text="24" radius="none">
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge text="24" radius="base">
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge text="Hot" radius="leaf">
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="mx-4 mt-8 font-bold text-lg">Located on the left</div>
			
 
				-    <div class="p-4 flex justify-around">
			
 
				-        <Badge isLeft>
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge isLeft text="24">
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge isLeft text="24" radius="leaf">
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge isLeft text="sharp">
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-    </div>
			
 
				+	<div class="mx-4 mt-8 font-bold text-lg">Located on the left</div>
			
 
				+	<div class="p-4 flex justify-around">
			
 
				+		<Badge isLeft>
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge isLeft text="24">
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge isLeft text="24" radius="leaf">
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge isLeft text="sharp">
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="mx-4 mt-8 font-bold text-lg">Match other components</div>
			
 
				-    <div class="p-4 flex justify-around">
			
 
				-        <Badge text="Cool" radius="leaf" offsetX={-6}>
			
 
				-            <Icon name="ri-spy-fill" />
			
 
				-        </Badge>
			
 
				-        <Badge text="Great" radius="leaf" offsetX={-10}>
			
 
				-            <Icon name="ri-medal-fill" />
			
 
				-        </Badge>
			
 
				-        <Badge text="Happy" radius="leaf" offsetX={-12}>
			
 
				-            <Icon name="ri-cake-2-fill" />
			
 
				-        </Badge>
			
 
				-    </div>
			
 
				-    <Badge text="Hot" offsetX={18} offsetY={8}>
			
 
				-        <Button>Match Button</Button>
			
 
				-    </Badge>
			
 
				-    <Badge text="Required" offsetX={30} offsetY={26}>
			
 
				-        <Input title="Match Input" />
			
 
				-    </Badge>
			
 
				-    <Cell title="Match Cell" detail="slot">
			
 
				-        <span slot="detail"><Badge isInner /></span>
			
 
				-    </Cell>
			
 
				-    <Cell title="Match Cell" detail="slot" line={false}>
			
 
				-        <span slot="detail"><Badge text="99+" isInner /></span>
			
 
				-    </Cell>
			
 
				-    <Cell title="Match no radius corner Cell" detail="slot" radius="none">
			
 
				-        <span slot="detail"><Badge text="new version" radius="base" isInner /></span>
			
 
				-    </Cell>
			
 
				-    <Cell title="Match full radius Cell" detail="slot" radius="full">
			
 
				-        <span slot="detail"><Badge isInner /></span>
			
 
				-    </Cell>
			
 
				+	<div class="mx-4 mt-8 font-bold text-lg">Match other components</div>
			
 
				+	<div class="p-4 flex justify-around">
			
 
				+		<Badge text="Cool" radius="leaf" offsetX={-6}>
			
 
				+			<Icon name="ri-spy-fill" />
			
 
				+		</Badge>
			
 
				+		<Badge text="Great" radius="leaf" offsetX={-10}>
			
 
				+			<Icon name="ri-medal-fill" />
			
 
				+		</Badge>
			
 
				+		<Badge text="Happy" radius="leaf" offsetX={-12}>
			
 
				+			<Icon name="ri-cake-2-fill" />
			
 
				+		</Badge>
			
 
				+	</div>
			
 
				+	<Badge text="Hot" offsetX={18} offsetY={8}>
			
 
				+		<Button>Match Button</Button>
			
 
				+	</Badge>
			
 
				+	<Badge text="Required" offsetX={30} offsetY={26}>
			
 
				+		<Input title="Match Input" />
			
 
				+	</Badge>
			
 
				+	<Cell title="Match Cell" detail="slot">
			
 
				+		<span slot="detail"><Badge isInner /></span>
			
 
				+	</Cell>
			
 
				+	<Cell title="Match Cell" detail="slot" line={false}>
			
 
				+		<span slot="detail"><Badge text="99+" isInner /></span>
			
 
				+	</Cell>
			
 
				+	<Cell title="Match no radius corner Cell" detail="slot" radius="none">
			
 
				+		<span slot="detail"><Badge text="new version" radius="base" isInner /></span>
			
 
				+	</Cell>
			
 
				+	<Cell title="Match full radius Cell" detail="slot" radius="full">
			
 
				+		<span slot="detail"><Badge isInner /></span>
			
 
				+	</Cell>
			
 
				 
			
 
				-    <div class="mx-4 mt-8 font-bold text-lg">Badge animation</div>
			
 
				-    <div class="p-4 flex justify-around">
			
 
				-        <Badge {isShow}>
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge text="24" {isShow}>
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge text="24" radius="base" {isShow}>
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge text="Hot" radius="leaf" {isShow}>
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-    </div>
			
 
				-    <Cell title={!isShow ? 'Hidden' : 'Show'} detail="slot">
			
 
				-        <span slot="detail"><Badge isInner {isShow} /></span>
			
 
				-    </Cell>
			
 
				-    <Button on:click={changeShowFun}>Click {isShow ? 'Hidden' : 'Show'} Badge</Button>
			
 
				+	<div class="mx-4 mt-8 font-bold text-lg">Badge animation</div>
			
 
				+	<div class="p-4 flex justify-around">
			
 
				+		<Badge {isShow}>
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge text="24" {isShow}>
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge text="24" radius="base" {isShow}>
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge text="Hot" radius="leaf" {isShow}>
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+	</div>
			
 
				+	<Cell title={!isShow ? 'Hidden' : 'Show'} detail="slot">
			
 
				+		<span slot="detail"><Badge isInner {isShow} /></span>
			
 
				+	</Cell>
			
 
				+	<Button on:click={changeShowFun}>Click {isShow ? 'Hidden' : 'Show'} Badge</Button>
			
 
				 
			
 
				-    <div class="mx-4 mt-8 font-bold text-lg">Custom background color and border</div>
			
 
				-    <div class="p-4 flex justify-around">
			
 
				-        <Badge text="Theme" injClass="!bg-primary dark:!bg-dark text-white dark:text-black">
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge text="New" injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]">
			
 
				-            <Avatar />
			
 
				-        </Badge>
			
 
				-        <Badge radius="base" injClass="ring-2 ring-[#ebeef2] dark:ring-[#414248]">
			
 
				-            <Avatar image="./assets/images/avatar_1.jpg" />
			
 
				-        </Badge>
			
 
				-        <Badge offsetX={9} offsetY={9} injClass="ring-2 ring-[#ebeef2] dark:ring-[#414248]">
			
 
				-            <Avatar radius="full" image="./assets/images/avatar_1.jpg" />
			
 
				-        </Badge>
			
 
				-    </div>
			
 
				+	<div class="mx-4 mt-8 font-bold text-lg">Custom background color and border</div>
			
 
				+	<div class="p-4 flex justify-around">
			
 
				+		<Badge text="Theme" injClass="!bg-primary dark:!bg-dark text-white dark:text-black">
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge text="New" injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]">
			
 
				+			<Avatar />
			
 
				+		</Badge>
			
 
				+		<Badge radius="base" injClass="ring-2 ring-[#ebeef2] dark:ring-[#414248]">
			
 
				+			<Avatar image="./assets/images/avatar_1.jpg" />
			
 
				+		</Badge>
			
 
				+		<Badge offsetX={9} offsetY={9} injClass="ring-2 ring-[#ebeef2] dark:ring-[#414248]">
			
 
				+			<Avatar radius="full" image="./assets/images/avatar_1.jpg" />
			
 
				+		</Badge>
			
 
				+	</div>
			
 
				 </div>
			
--- a/demo/src/pages/bottomSheet/BottomSheetDemo.svelte
+++ b/demo/src/pages/bottomSheet/BottomSheetDemo.svelte
@@ -1,121 +1,121 @@
 
				 <!-- BottomSheet Demo -->
			
 
				 <script>
			
 
				-    import { BottomSheet, Cell, Toast, Button } from 'stdf';
			
 
				-    import Aphorism from '../../components/Aphorism.svelte';
			
 
				-
			
 
				-    let visible1 = false;
			
 
				-    let visible2 = false;
			
 
				-    let visible3 = false;
			
 
				-    let visible4 = false;
			
 
				-    let visible5 = false;
			
 
				-    let visible6 = false;
			
 
				-    let visible7 = false;
			
 
				-    let visible8 = false;
			
 
				-    let visible9 = false;
			
 
				-    let visible10 = false;
			
 
				-    let visible11 = false;
			
 
				-    let visible12 = false;
			
 
				-    let visible13 = false;
			
 
				-    let visible14 = false;
			
 
				-
			
 
				-    let toastBackVisible = false;
			
 
				-    let toastCloseVisible = false;
			
 
				-
			
 
				-    const stayHeightList = [40, 60, 80];
			
 
				-    let currentHeight = 60;
			
 
				-    const heightChangeFunc = e => (currentHeight = e.detail);
			
 
				+	import { BottomSheet, Cell, Toast, Button } from 'stdf';
			
 
				+	import Aphorism from '../../components/Aphorism.svelte';
			
 
				+
			
 
				+	let visible1 = false;
			
 
				+	let visible2 = false;
			
 
				+	let visible3 = false;
			
 
				+	let visible4 = false;
			
 
				+	let visible5 = false;
			
 
				+	let visible6 = false;
			
 
				+	let visible7 = false;
			
 
				+	let visible8 = false;
			
 
				+	let visible9 = false;
			
 
				+	let visible10 = false;
			
 
				+	let visible11 = false;
			
 
				+	let visible12 = false;
			
 
				+	let visible13 = false;
			
 
				+	let visible14 = false;
			
 
				+
			
 
				+	let toastBackVisible = false;
			
 
				+	let toastCloseVisible = false;
			
 
				+
			
 
				+	const stayHeightList = [40, 60, 80];
			
 
				+	let currentHeight = 60;
			
 
				+	const heightChangeFunc = e => (currentHeight = e.detail);
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-4">
			
 
				-    <Cell title="基础用法" on:click={() => (visible1 = true)} />
			
 
				-    <BottomSheet bind:visible={visible1} title="此区域支持滑动">
			
 
				-        <div class="text-center h-full flex flex-col justify-center">
			
 
				-            <div>这里是内容区域</div>
			
 
				-        </div>
			
 
				-    </BottomSheet>
			
 
				-
			
 
				-    <Cell title="内容区域滚动" on:click={() => (visible8 = true)} />
			
 
				-    <BottomSheet bind:visible={visible8}>
			
 
				-        <Aphorism num={12} />
			
 
				-    </BottomSheet>
			
 
				-
			
 
				-    <Cell title="有返回按钮" on:click={() => (visible2 = true)} />
			
 
				-    <BottomSheet
			
 
				-        bind:visible={visible2}
			
 
				-        showBackIcon
			
 
				-        title="点击返回与关闭可触发事件"
			
 
				-        on:back={() => (toastBackVisible = true)}
			
 
				-        on:close={() => (toastCloseVisible = true)}
			
 
				-    >
			
 
				-        <Aphorism num={12} />
			
 
				-    </BottomSheet>
			
 
				-    <Toast bind:visible={toastBackVisible} message="触发了 BottomSheet 返回事件！" />
			
 
				-    <Toast bind:visible={toastCloseVisible} message="触发了 BottomSheet 关闭事件！" />
			
 
				-
			
 
				-    <Cell title="初始高度为 90" on:click={() => (visible3 = true)} />
			
 
				-    <BottomSheet bind:visible={visible3} stayHeightIndex={2}>
			
 
				-        <Aphorism num={12} />
			
 
				-    </BottomSheet>
			
 
				-
			
 
				-    <Cell title="固定高度为 40/60/80" on:click={() => (visible4 = true)} />
			
 
				-    <BottomSheet bind:visible={visible4} {stayHeightList} on:heightChange={heightChangeFunc} title={`当前固定高度为${currentHeight}`}>
			
 
				-        <Aphorism num={12} />
			
 
				-    </BottomSheet>
			
 
				-
			
 
				-    <Cell title="点击遮罩可关闭" on:click={() => (visible5 = true)} />
			
 
				-    <BottomSheet bind:visible={visible5} maskClosable>
			
 
				-        <Aphorism num={2} />
			
 
				-    </BottomSheet>
			
 
				-
			
 
				-    <Cell title="出现过渡时间为 1 秒" on:click={() => (visible6 = true)} />
			
 
				-    <BottomSheet bind:visible={visible6} duration={1000}>
			
 
				-        <Aphorism num={12} />
			
 
				-    </BottomSheet>
			
 
				-
			
 
				-    <Cell title="遮罩完全透明且模糊" on:click={() => (visible7 = true)} />
			
 
				-    <BottomSheet bind:visible={visible7} mask={{ opacity: 0, backdropBlur: 'base' }}>
			
 
				-        <Aphorism num={2} />
			
 
				-    </BottomSheet>
			
 
				-
			
 
				-    <Cell title="头部不显示任何内容" on:click={() => (visible9 = true)} />
			
 
				-    <BottomSheet bind:visible={visible9} showDivider={false} closeContent="" title="">
			
 
				-        <div class="px-4 py-8 h-full flex flex-col justify-around text-center">
			
 
				-            <div>头部区域</div>
			
 
				-            <div>标题</div>
			
 
				-            <div>返回与关闭图标</div>
			
 
				-            <div>分割线</div>
			
 
				-            <div>都不显示</div>
			
 
				-            <div>位置依旧保留作为滑动触控区域</div>
			
 
				-            <div class="mb-8">
			
 
				-                <Button on:click={() => (visible9 = false)}>关闭</Button>
			
 
				-            </div>
			
 
				-        </div>
			
 
				-    </BottomSheet>
			
 
				-
			
 
				-    <Cell title="隐藏关闭图标且标题居中" on:click={() => (visible10 = true)} />
			
 
				-    <BottomSheet bind:visible={visible10} closeContent="" titleAlign="center" maskClosable title="点击遮罩关闭">
			
 
				-        <Aphorism num={2} />
			
 
				-    </BottomSheet>
			
 
				-
			
 
				-    <Cell title="另一种关闭图标" on:click={() => (visible13 = true)} />
			
 
				-    <BottomSheet bind:visible={visible13} closeContent="closeIcon">
			
 
				-        <Aphorism num={2} />
			
 
				-    </BottomSheet>
			
 
				-
			
 
				-    <Cell title="关闭区域自定义文字" on:click={() => (visible14 = true)} />
			
 
				-    <BottomSheet bind:visible={visible14} closeContent="完成">
			
 
				-        <Aphorism num={2} />
			
 
				-    </BottomSheet>
			
 
				-
			
 
				-    <Cell title="图标不同圆角风格" on:click={() => (visible12 = true)} />
			
 
				-    <BottomSheet bind:visible={visible12} radius="base" showBackIcon>
			
 
				-        <Aphorism num={2} />
			
 
				-    </BottomSheet>
			
 
				-
			
 
				-    <Cell title="可下滑到底部关闭" on:click={() => (visible11 = true)} />
			
 
				-    <BottomSheet bind:visible={visible11} closeHeight={10} closeContent="">
			
 
				-        <div class="p-4">将 closeHeight 设置为 10，如果滑动结束时位置距离页面底部小于页面高度的 10% 则自动关闭。</div>
			
 
				-    </BottomSheet>
			
 
				+	<Cell title="基础用法" on:click={() => (visible1 = true)} />
			
 
				+	<BottomSheet bind:visible={visible1} title="此区域支持滑动">
			
 
				+		<div class="text-center h-full flex flex-col justify-center">
			
 
				+			<div>这里是内容区域</div>
			
 
				+		</div>
			
 
				+	</BottomSheet>
			
 
				+
			
 
				+	<Cell title="内容区域滚动" on:click={() => (visible8 = true)} />
			
 
				+	<BottomSheet bind:visible={visible8}>
			
 
				+		<Aphorism num={12} />
			
 
				+	</BottomSheet>
			
 
				+
			
 
				+	<Cell title="有返回按钮" on:click={() => (visible2 = true)} />
			
 
				+	<BottomSheet
			
 
				+		bind:visible={visible2}
			
 
				+		showBackIcon
			
 
				+		title="点击返回与关闭可触发事件"
			
 
				+		on:back={() => (toastBackVisible = true)}
			
 
				+		on:close={() => (toastCloseVisible = true)}
			
 
				+	>
			
 
				+		<Aphorism num={12} />
			
 
				+	</BottomSheet>
			
 
				+	<Toast bind:visible={toastBackVisible} message="触发了 BottomSheet 返回事件！" />
			
 
				+	<Toast bind:visible={toastCloseVisible} message="触发了 BottomSheet 关闭事件！" />
			
 
				+
			
 
				+	<Cell title="初始高度为 90" on:click={() => (visible3 = true)} />
			
 
				+	<BottomSheet bind:visible={visible3} stayHeightIndex={2}>
			
 
				+		<Aphorism num={12} />
			
 
				+	</BottomSheet>
			
 
				+
			
 
				+	<Cell title="固定高度为 40/60/80" on:click={() => (visible4 = true)} />
			
 
				+	<BottomSheet bind:visible={visible4} {stayHeightList} on:heightChange={heightChangeFunc} title={`当前固定高度为${currentHeight}`}>
			
 
				+		<Aphorism num={12} />
			
 
				+	</BottomSheet>
			
 
				+
			
 
				+	<Cell title="点击遮罩可关闭" on:click={() => (visible5 = true)} />
			
 
				+	<BottomSheet bind:visible={visible5} maskClosable>
			
 
				+		<Aphorism num={2} />
			
 
				+	</BottomSheet>
			
 
				+
			
 
				+	<Cell title="出现过渡时间为 1 秒" on:click={() => (visible6 = true)} />
			
 
				+	<BottomSheet bind:visible={visible6} duration={1000}>
			
 
				+		<Aphorism num={12} />
			
 
				+	</BottomSheet>
			
 
				+
			
 
				+	<Cell title="遮罩完全透明且模糊" on:click={() => (visible7 = true)} />
			
 
				+	<BottomSheet bind:visible={visible7} mask={{ opacity: 0, backdropBlur: 'base' }}>
			
 
				+		<Aphorism num={2} />
			
 
				+	</BottomSheet>
			
 
				+
			
 
				+	<Cell title="头部不显示任何内容" on:click={() => (visible9 = true)} />
			
 
				+	<BottomSheet bind:visible={visible9} showDivider={false} closeContent="" title="">
			
 
				+		<div class="px-4 py-8 h-full flex flex-col justify-around text-center">
			
 
				+			<div>头部区域</div>
			
 
				+			<div>标题</div>
			
 
				+			<div>返回与关闭图标</div>
			
 
				+			<div>分割线</div>
			
 
				+			<div>都不显示</div>
			
 
				+			<div>位置依旧保留作为滑动触控区域</div>
			
 
				+			<div class="mb-8">
			
 
				+				<Button on:click={() => (visible9 = false)}>关闭</Button>
			
 
				+			</div>
			
 
				+		</div>
			
 
				+	</BottomSheet>
			
 
				+
			
 
				+	<Cell title="隐藏关闭图标且标题居中" on:click={() => (visible10 = true)} />
			
 
				+	<BottomSheet bind:visible={visible10} closeContent="" titleAlign="center" maskClosable title="点击遮罩关闭">
			
 
				+		<Aphorism num={2} />
			
 
				+	</BottomSheet>
			
 
				+
			
 
				+	<Cell title="另一种关闭图标" on:click={() => (visible13 = true)} />
			
 
				+	<BottomSheet bind:visible={visible13} closeContent="closeIcon">
			
 
				+		<Aphorism num={2} />
			
 
				+	</BottomSheet>
			
 
				+
			
 
				+	<Cell title="关闭区域自定义文字" on:click={() => (visible14 = true)} />
			
 
				+	<BottomSheet bind:visible={visible14} closeContent="完成">
			
 
				+		<Aphorism num={2} />
			
 
				+	</BottomSheet>
			
 
				+
			
 
				+	<Cell title="图标不同圆角风格" on:click={() => (visible12 = true)} />
			
 
				+	<BottomSheet bind:visible={visible12} radius="base" showBackIcon>
			
 
				+		<Aphorism num={2} />
			
 
				+	</BottomSheet>
			
 
				+
			
 
				+	<Cell title="可下滑到底部关闭" on:click={() => (visible11 = true)} />
			
 
				+	<BottomSheet bind:visible={visible11} closeHeight={10} closeContent="">
			
 
				+		<div class="p-4">将 closeHeight 设置为 10，如果滑动结束时位置距离页面底部小于页面高度的 10% 则自动关闭。</div>
			
 
				+	</BottomSheet>
			
 
				 </div>
			
 
				 
			
 
				 <!-- Aphorism.svelte -->
			
--- a/demo/src/pages/bottomSheet/BottomSheetDemo_en.svelte
+++ b/demo/src/pages/bottomSheet/BottomSheetDemo_en.svelte
@@ -1,129 +1,129 @@
 
				 <!-- BottomSheet Demo -->
			
 
				 <script>
			
 
				-    import { BottomSheet, Cell, Toast, Button } from 'stdf';
			
 
				-    import Aphorism from '../../components/Aphorism.svelte';
			
 
				-
			
 
				-    let visible1 = false;
			
 
				-    let visible2 = false;
			
 
				-    let visible3 = false;
			
 
				-    let visible4 = false;
			
 
				-    let visible5 = false;
			
 
				-    let visible6 = false;
			
 
				-    let visible7 = false;
			
 
				-    let visible8 = false;
			
 
				-    let visible9 = false;
			
 
				-    let visible10 = false;
			
 
				-    let visible11 = false;
			
 
				-    let visible12 = false;
			
 
				-    let visible13 = false;
			
 
				-    let visible14 = false;
			
 
				-
			
 
				-    let toastBackVisible = false;
			
 
				-    let toastCloseVisible = false;
			
 
				-
			
 
				-    const stayHeightList = [40, 60, 80];
			
 
				-    let currentHeight = 60;
			
 
				-    const heightChangeFunc = e => (currentHeight = e.detail);
			
 
				+	import { BottomSheet, Cell, Toast, Button } from 'stdf';
			
 
				+	import Aphorism from '../../components/Aphorism.svelte';
			
 
				+
			
 
				+	let visible1 = false;
			
 
				+	let visible2 = false;
			
 
				+	let visible3 = false;
			
 
				+	let visible4 = false;
			
 
				+	let visible5 = false;
			
 
				+	let visible6 = false;
			
 
				+	let visible7 = false;
			
 
				+	let visible8 = false;
			
 
				+	let visible9 = false;
			
 
				+	let visible10 = false;
			
 
				+	let visible11 = false;
			
 
				+	let visible12 = false;
			
 
				+	let visible13 = false;
			
 
				+	let visible14 = false;
			
 
				+
			
 
				+	let toastBackVisible = false;
			
 
				+	let toastCloseVisible = false;
			
 
				+
			
 
				+	const stayHeightList = [40, 60, 80];
			
 
				+	let currentHeight = 60;
			
 
				+	const heightChangeFunc = e => (currentHeight = e.detail);
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-4">
			
 
				-    <Cell title="Basic usage" on:click={() => (visible1 = true)} />
			
 
				-    <BottomSheet bind:visible={visible1} title="This area supports sliding">
			
 
				-        <div class="text-center h-full flex flex-col justify-center">
			
 
				-            <div>This is the content area</div>
			
 
				-        </div>
			
 
				-    </BottomSheet>
			
 
				-
			
 
				-    <Cell title="Content area scrolling" on:click={() => (visible8 = true)} />
			
 
				-    <BottomSheet bind:visible={visible8}>
			
 
				-        <Aphorism num={12} />
			
 
				-    </BottomSheet>
			
 
				-
			
 
				-    <Cell title="There is a return button" on:click={() => (visible2 = true)} />
			
 
				-    <BottomSheet
			
 
				-        bind:visible={visible2}
			
 
				-        showBackIcon
			
 
				-        title="Click back and closed to trigger events"
			
 
				-        on:back={() => (toastBackVisible = true)}
			
 
				-        on:close={() => (toastCloseVisible = true)}
			
 
				-    >
			
 
				-        <Aphorism num={12} />
			
 
				-    </BottomSheet>
			
 
				-    <Toast bind:visible={toastBackVisible} message="Trigger BottomSheet Return to the incident!" />
			
 
				-    <Toast bind:visible={toastCloseVisible} message="Trigger BottomSheet Close the event!" />
			
 
				-
			
 
				-    <Cell title="The initial height is 90" on:click={() => (visible3 = true)} />
			
 
				-    <BottomSheet bind:visible={visible3} stayHeightIndex={2}>
			
 
				-        <Aphorism num={12} />
			
 
				-    </BottomSheet>
			
 
				-
			
 
				-    <Cell title="Fixed height 40/60/80" on:click={() => (visible4 = true)} />
			
 
				-    <BottomSheet
			
 
				-        bind:visible={visible4}
			
 
				-        {stayHeightList}
			
 
				-        on:heightChange={heightChangeFunc}
			
 
				-        title={`The current fixed height is ${currentHeight}`}
			
 
				-    >
			
 
				-        <Aphorism num={12} />
			
 
				-    </BottomSheet>
			
 
				-
			
 
				-    <Cell title="Click the mask to close" on:click={() => (visible5 = true)} />
			
 
				-    <BottomSheet bind:visible={visible5} maskClosable>
			
 
				-        <Aphorism num={2} />
			
 
				-    </BottomSheet>
			
 
				-
			
 
				-    <Cell title="The transition time is 1s" on:click={() => (visible6 = true)} />
			
 
				-    <BottomSheet bind:visible={visible6} duration={1000}>
			
 
				-        <Aphorism num={12} />
			
 
				-    </BottomSheet>
			
 
				-
			
 
				-    <Cell title="The mask is completely transparent and blurred" on:click={() => (visible7 = true)} />
			
 
				-    <BottomSheet bind:visible={visible7} mask={{ opacity: 0, backdropBlur: 'base' }}>
			
 
				-        <Aphorism num={2} />
			
 
				-    </BottomSheet>
			
 
				-
			
 
				-    <Cell title="No content on the head" on:click={() => (visible9 = true)} />
			
 
				-    <BottomSheet bind:visible={visible9} showDivider={false} closeContent="" title="">
			
 
				-        <div class="px-4 py-8 h-full flex flex-col justify-around text-center">
			
 
				-            <div>Head area</div>
			
 
				-            <div>title</div>
			
 
				-            <div>Return and close icons</div>
			
 
				-            <div>Dividing line</div>
			
 
				-            <div>No display</div>
			
 
				-            <div>The location still retains as a sliding touch area</div>
			
 
				-            <div class="mb-8">
			
 
				-                <Button on:click={() => (visible9 = false)}>closure</Button>
			
 
				-            </div>
			
 
				-        </div>
			
 
				-    </BottomSheet>
			
 
				-
			
 
				-    <Cell title="Hide off the icon and the title is centered" on:click={() => (visible10 = true)} />
			
 
				-    <BottomSheet bind:visible={visible10} closeContent="" titleAlign="center" maskClosable title="Click the mask to close">
			
 
				-        <Aphorism num={2} />
			
 
				-    </BottomSheet>
			
 
				-
			
 
				-    <Cell title="Another turning off icon" on:click={() => (visible13 = true)} />
			
 
				-    <BottomSheet bind:visible={visible13} closeContent="closeIcon">
			
 
				-        <Aphorism num={2} />
			
 
				-    </BottomSheet>
			
 
				-
			
 
				-    <Cell title="Close the area custom text" on:click={() => (visible14 = true)} />
			
 
				-    <BottomSheet bind:visible={visible14} closeContent="Finish">
			
 
				-        <Aphorism num={2} />
			
 
				-    </BottomSheet>
			
 
				-
			
 
				-    <Cell title="The icon is different from the corner style" on:click={() => (visible12 = true)} />
			
 
				-    <BottomSheet bind:visible={visible12} radius="base" showBackIcon>
			
 
				-        <Aphorism num={2} />
			
 
				-    </BottomSheet>
			
 
				-
			
 
				-    <Cell title="Can decline to the end to close" on:click={() => (visible11 = true)} />
			
 
				-    <BottomSheet bind:visible={visible11} closeHeight={10} closeContent="">
			
 
				-        <div class="p-4">
			
 
				-            Set the Closeheight to 10. If the position from the bottom of the page is less than 10% at the bottom of the page at the end of
			
 
				-            the sliding, it will automatically turn off.
			
 
				-        </div>
			
 
				-    </BottomSheet>
			
 
				+	<Cell title="Basic usage" on:click={() => (visible1 = true)} />
			
 
				+	<BottomSheet bind:visible={visible1} title="This area supports sliding">
			
 
				+		<div class="text-center h-full flex flex-col justify-center">
			
 
				+			<div>This is the content area</div>
			
 
				+		</div>
			
 
				+	</BottomSheet>
			
 
				+
			
 
				+	<Cell title="Content area scrolling" on:click={() => (visible8 = true)} />
			
 
				+	<BottomSheet bind:visible={visible8}>
			
 
				+		<Aphorism num={12} />
			
 
				+	</BottomSheet>
			
 
				+
			
 
				+	<Cell title="There is a return button" on:click={() => (visible2 = true)} />
			
 
				+	<BottomSheet
			
 
				+		bind:visible={visible2}
			
 
				+		showBackIcon
			
 
				+		title="Click back and closed to trigger events"
			
 
				+		on:back={() => (toastBackVisible = true)}
			
 
				+		on:close={() => (toastCloseVisible = true)}
			
 
				+	>
			
 
				+		<Aphorism num={12} />
			
 
				+	</BottomSheet>
			
 
				+	<Toast bind:visible={toastBackVisible} message="Trigger BottomSheet Return to the incident!" />
			
 
				+	<Toast bind:visible={toastCloseVisible} message="Trigger BottomSheet Close the event!" />
			
 
				+
			
 
				+	<Cell title="The initial height is 90" on:click={() => (visible3 = true)} />
			
 
				+	<BottomSheet bind:visible={visible3} stayHeightIndex={2}>
			
 
				+		<Aphorism num={12} />
			
 
				+	</BottomSheet>
			
 
				+
			
 
				+	<Cell title="Fixed height 40/60/80" on:click={() => (visible4 = true)} />
			
 
				+	<BottomSheet
			
 
				+		bind:visible={visible4}
			
 
				+		{stayHeightList}
			
 
				+		on:heightChange={heightChangeFunc}
			
 
				+		title={`The current fixed height is ${currentHeight}`}
			
 
				+	>
			
 
				+		<Aphorism num={12} />
			
 
				+	</BottomSheet>
			
 
				+
			
 
				+	<Cell title="Click the mask to close" on:click={() => (visible5 = true)} />
			
 
				+	<BottomSheet bind:visible={visible5} maskClosable>
			
 
				+		<Aphorism num={2} />
			
 
				+	</BottomSheet>
			
 
				+
			
 
				+	<Cell title="The transition time is 1s" on:click={() => (visible6 = true)} />
			
 
				+	<BottomSheet bind:visible={visible6} duration={1000}>
			
 
				+		<Aphorism num={12} />
			
 
				+	</BottomSheet>
			
 
				+
			
 
				+	<Cell title="The mask is completely transparent and blurred" on:click={() => (visible7 = true)} />
			
 
				+	<BottomSheet bind:visible={visible7} mask={{ opacity: 0, backdropBlur: 'base' }}>
			
 
				+		<Aphorism num={2} />
			
 
				+	</BottomSheet>
			
 
				+
			
 
				+	<Cell title="No content on the head" on:click={() => (visible9 = true)} />
			
 
				+	<BottomSheet bind:visible={visible9} showDivider={false} closeContent="" title="">
			
 
				+		<div class="px-4 py-8 h-full flex flex-col justify-around text-center">
			
 
				+			<div>Head area</div>
			
 
				+			<div>title</div>
			
 
				+			<div>Return and close icons</div>
			
 
				+			<div>Dividing line</div>
			
 
				+			<div>No display</div>
			
 
				+			<div>The location still retains as a sliding touch area</div>
			
 
				+			<div class="mb-8">
			
 
				+				<Button on:click={() => (visible9 = false)}>closure</Button>
			
 
				+			</div>
			
 
				+		</div>
			
 
				+	</BottomSheet>
			
 
				+
			
 
				+	<Cell title="Hide off the icon and the title is centered" on:click={() => (visible10 = true)} />
			
 
				+	<BottomSheet bind:visible={visible10} closeContent="" titleAlign="center" maskClosable title="Click the mask to close">
			
 
				+		<Aphorism num={2} />
			
 
				+	</BottomSheet>
			
 
				+
			
 
				+	<Cell title="Another turning off icon" on:click={() => (visible13 = true)} />
			
 
				+	<BottomSheet bind:visible={visible13} closeContent="closeIcon">
			
 
				+		<Aphorism num={2} />
			
 
				+	</BottomSheet>
			
 
				+
			
 
				+	<Cell title="Close the area custom text" on:click={() => (visible14 = true)} />
			
 
				+	<BottomSheet bind:visible={visible14} closeContent="Finish">
			
 
				+		<Aphorism num={2} />
			
 
				+	</BottomSheet>
			
 
				+
			
 
				+	<Cell title="The icon is different from the corner style" on:click={() => (visible12 = true)} />
			
 
				+	<BottomSheet bind:visible={visible12} radius="base" showBackIcon>
			
 
				+		<Aphorism num={2} />
			
 
				+	</BottomSheet>
			
 
				+
			
 
				+	<Cell title="Can decline to the end to close" on:click={() => (visible11 = true)} />
			
 
				+	<BottomSheet bind:visible={visible11} closeHeight={10} closeContent="">
			
 
				+		<div class="p-4">
			
 
				+			Set the Closeheight to 10. If the position from the bottom of the page is less than 10% at the bottom of the page at the end of the
			
 
				+			sliding, it will automatically turn off.
			
 
				+		</div>
			
 
				+	</BottomSheet>
			
 
				 </div>
			
 
				 
			
 
				 <!-- Aphorism.svelte -->
			
--- a/demo/src/pages/button/ButtonDemo.svelte
+++ b/demo/src/pages/button/ButtonDemo.svelte
@@ -1,159 +1,161 @@
 
				 <!-- Button Demo -->
			
 
				 <script>
			
 
				-    import { Button, Icon, Toast, Loading } from 'stdf';
			
 
				+	import { Button, Icon, Toast, Loading } from 'stdf';
			
 
				 
			
 
				-    let visible = false;
			
 
				+	let visible = false;
			
 
				 </script>
			
 
				 
			
 
				 <div class="flex flex-col space-y-8 py-8">
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">不同状态色</div>
			
 
				-        <Button>默认</Button>
			
 
				-        <Button state="success">成功</Button>
			
 
				-        <Button state="warning">警告</Button>
			
 
				-        <Button state="error">错误</Button>
			
 
				-        <Button state="info">信息</Button>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">不同圆角风格</div>
			
 
				-        <Button>默认</Button>
			
 
				-        <Button radius="none">无圆角</Button>
			
 
				-        <Button radius="xl">大圆角</Button>
			
 
				-        <Button radius="2xl">更大圆角</Button>
			
 
				-        <Button radius="full">全圆角</Button>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">不同填充模式</div>
			
 
				-        <Button>默认</Button>
			
 
				-        <Button fill="line">无色线性</Button>
			
 
				-        <Button fill="lineLight">浅色线性</Button>
			
 
				-        <Button fill="lineTheme">主题色线性</Button>
			
 
				-        <Button fill="text">无色纯文本</Button>
			
 
				-        <Button fill="textTheme">主题色纯文本</Button>
			
 
				-        <Button fill="colorLight">浅色填充</Button>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">不同边框风格</div>
			
 
				-        <Button fill="lineTheme">实线</Button>
			
 
				-        <Button fill="lineTheme" line="dashed">虚线</Button>
			
 
				-        <Button fill="lineTheme" line="dotted">点线</Button>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">不同大小</div>
			
 
				-        <Button size="full" radius="none">通栏且无圆角</Button>
			
 
				-        <Button>默认</Button>
			
 
				-        <Button size="md">中号</Button>
			
 
				-        <Button size="sm">小号</Button>
			
 
				-        <Button size="auto">AUTO</Button>
			
 
				-        <Button size="auto">
			
 
				-            <div class="px-1">
			
 
				-                <Icon name="ri-plane-fill" size={20} top={-2} />
			
 
				-            </div>
			
 
				-        </Button>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">不同高度</div>
			
 
				-        <Button heightOut="0">外部高度为0</Button>
			
 
				-        <Button heightIn="0">内部高度为0</Button>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">固定大小</div>
			
 
				-        <div class="flex justify-around items-center">
			
 
				-            <Button customSize customWidth={40} customHeight={40} radius="full">宽</Button>
			
 
				-            <Button customSize customWidth={40} customHeight={40} radius="xl">高</Button>
			
 
				-            <Button customSize customWidth={40} customHeight={40}>一</Button>
			
 
				-            <Button customSize customWidth={40} customHeight={40} radius="none">致</Button>
			
 
				-            <Button fill="lineTheme" customSize customWidth={40} customHeight={40}>
			
 
				-                <Icon name="ri-plane-fill" size={20} top={-2} />
			
 
				-            </Button>
			
 
				-            <Button radius="full" fill="lineTheme" customSize customWidth={40} customHeight={40}>
			
 
				-                <Icon name="ri-plane-fill" size={20} top={-2} />
			
 
				-            </Button>
			
 
				-            <Button radius="full" line="dashed" fill="lineTheme" customSize customWidth={40} customHeight={40}>
			
 
				-                <Icon name="ri-plane-fill" size={20} top={-2} />
			
 
				-            </Button>
			
 
				-            <Button radius="full" customSize customWidth={24} customHeight={24} heightIn="0">
			
 
				-                <Icon name="ri-plane-fill" size={12} top={-2} />
			
 
				-            </Button>
			
 
				-        </div>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">禁用</div>
			
 
				-        <Button disabled>禁用</Button>
			
 
				-        <Button fill="lineTheme" disabled>禁用</Button>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">加载</div>
			
 
				-        <Button>
			
 
				-            <Loading inverse height="6" width="6" />
			
 
				-        </Button>
			
 
				-        <Button>
			
 
				-            <Loading inverse width="16" height="6" type="1_17" />
			
 
				-        </Button>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">带图标</div>
			
 
				-        <Button>
			
 
				-            <Icon name="ri-share-forward-2-fill" size={18} top={-2} />
			
 
				-            投掷二向箔
			
 
				-        </Button>
			
 
				-        <Button fill="lineTheme">
			
 
				-            <Icon name="ri-mic-off-fill" size={16} top={-2} />
			
 
				-            启动面壁计划
			
 
				-        </Button>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">关爱版</div>
			
 
				-        <Button love>关爱版按钮</Button>
			
 
				-        <Button love fill="lineTheme">
			
 
				-            <Icon name="ri-hand-heart-line" size={22} top={-2} />
			
 
				-            关爱版按钮
			
 
				-        </Button>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">自定义</div>
			
 
				-        <Button injClass="bg-[#C84031] dark:bg-[#77B941]">纯色填充</Button>
			
 
				-        <Button injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0] !text-white">渐变填充</Button>
			
 
				-        <Button fill="line" injClass="border-[#C84031] dark:border-[#77B941] !text-[#C84031] dark:!text-[#77B941]">线性</Button>
			
 
				-        <Button injClass="shadow-md shadow-black/30 dark:shadow-white/30">阴影</Button>
			
 
				-        <Button radius="full" injClass="shadow-lg shadow-primary/40 dark:shadow-dark/40">颜色阴影</Button>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">按钮组</div>
			
 
				-        <Button fill="lineTheme" heightIn="0" group>
			
 
				-            <div class="flex">
			
 
				-                <div class="flex-1 border-r py-2 active:opacity-80">
			
 
				-                    <Icon name="ri-apps-2-line" size={18} top={-2} />
			
 
				-                    应用
			
 
				-                </div>
			
 
				-                <div class="flex-1 border-r py-2 active:opacity-80">
			
 
				-                    <Icon name="ri-star-line" size={18} top={-2} />
			
 
				-                    收藏
			
 
				-                </div>
			
 
				-                <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-                <div class="flex-1 py-2 active:opacity-80" on:click={() => (visible = true)}>
			
 
				-                    <Icon name="ri-share-forward-line" size={18} top={-2} />
			
 
				-                    分享
			
 
				-                </div>
			
 
				-            </div>
			
 
				-        </Button>
			
 
				-        <Button radius="full" heightIn="0" group>
			
 
				-            <div class="flex">
			
 
				-                <div class="flex-1 border-r py-2 active:opacity-80">
			
 
				-                    <Icon name="ri-apps-2-line" size={18} top={-2} />
			
 
				-                    应用
			
 
				-                </div>
			
 
				-                <div class="flex-1 border-r py-2 active:opacity-80">
			
 
				-                    <Icon name="ri-star-line" size={18} top={-2} />
			
 
				-                    收藏
			
 
				-                </div>
			
 
				-                <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-                <div class="flex-1 py-2 active:opacity-80" on:click={() => (visible = true)} role="button">
			
 
				-                    <Icon name="ri-share-forward-line" size={18} top={-2} />
			
 
				-                    分享
			
 
				-                </div>
			
 
				-            </div>
			
 
				-        </Button>
			
 
				-    </div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">不同状态色</div>
			
 
				+		<Button>默认</Button>
			
 
				+		<Button state="success">成功</Button>
			
 
				+		<Button state="warning">警告</Button>
			
 
				+		<Button state="error">错误</Button>
			
 
				+		<Button state="info">信息</Button>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">不同圆角风格</div>
			
 
				+		<Button>默认</Button>
			
 
				+		<Button radius="none">无圆角</Button>
			
 
				+		<Button radius="xl">大圆角</Button>
			
 
				+		<Button radius="2xl">更大圆角</Button>
			
 
				+		<Button radius="full">全圆角</Button>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">不同填充模式</div>
			
 
				+		<Button>默认</Button>
			
 
				+		<Button fill="line">无色线性</Button>
			
 
				+		<Button fill="lineLight">浅色线性</Button>
			
 
				+		<Button fill="lineTheme">主题色线性</Button>
			
 
				+		<Button fill="text">无色纯文本</Button>
			
 
				+		<Button fill="textTheme">主题色纯文本</Button>
			
 
				+		<Button fill="colorLight">浅色填充</Button>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">不同边框风格</div>
			
 
				+		<Button fill="lineTheme">实线</Button>
			
 
				+		<Button fill="lineTheme" line="dashed">虚线</Button>
			
 
				+		<Button fill="lineTheme" line="dotted">点线</Button>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">不同大小</div>
			
 
				+		<Button size="full" radius="none">通栏且无圆角</Button>
			
 
				+		<Button>默认</Button>
			
 
				+		<Button size="md">中号</Button>
			
 
				+		<Button size="sm">小号</Button>
			
 
				+		<Button size="auto">AUTO</Button>
			
 
				+		<Button size="auto">
			
 
				+			<div class="px-1">
			
 
				+				<Icon name="ri-plane-fill" size={20} top={-2} />
			
 
				+			</div>
			
 
				+		</Button>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">不同高度</div>
			
 
				+		<Button heightOut="0">外部高度为0</Button>
			
 
				+		<Button heightIn="0">内部高度为0</Button>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">固定大小</div>
			
 
				+		<div class="flex justify-around items-center">
			
 
				+			<Button customSize customWidth={40} customHeight={40} radius="full">宽</Button>
			
 
				+			<Button customSize customWidth={40} customHeight={40} radius="xl">高</Button>
			
 
				+			<Button customSize customWidth={40} customHeight={40}>一</Button>
			
 
				+			<Button customSize customWidth={40} customHeight={40} radius="none">致</Button>
			
 
				+			<Button fill="lineTheme" customSize customWidth={40} customHeight={40}>
			
 
				+				<Icon name="ri-plane-fill" size={20} top={-2} />
			
 
				+			</Button>
			
 
				+			<Button radius="full" fill="lineTheme" customSize customWidth={40} customHeight={40}>
			
 
				+				<Icon name="ri-plane-fill" size={20} top={-2} />
			
 
				+			</Button>
			
 
				+			<Button radius="full" line="dashed" fill="lineTheme" customSize customWidth={40} customHeight={40}>
			
 
				+				<Icon name="ri-plane-fill" size={20} top={-2} />
			
 
				+			</Button>
			
 
				+			<Button radius="full" customSize customWidth={24} customHeight={24} heightIn="0">
			
 
				+				<Icon name="ri-plane-fill" size={12} top={-2} />
			
 
				+			</Button>
			
 
				+		</div>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">禁用</div>
			
 
				+		<Button disabled>禁用</Button>
			
 
				+		<Button fill="lineTheme" disabled>禁用</Button>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">加载</div>
			
 
				+		<Button>
			
 
				+			<Loading inverse height="6" width="6" />
			
 
				+		</Button>
			
 
				+		<Button>
			
 
				+			<Loading inverse width="16" height="6" type="1_17" />
			
 
				+		</Button>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">带图标</div>
			
 
				+		<Button>
			
 
				+			<Icon name="ri-share-forward-2-fill" size={18} top={-2} />
			
 
				+			投掷二向箔
			
 
				+		</Button>
			
 
				+		<Button fill="lineTheme">
			
 
				+			<Icon name="ri-mic-off-fill" size={16} top={-2} />
			
 
				+			启动面壁计划
			
 
				+		</Button>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">关爱版</div>
			
 
				+		<Button love>关爱版按钮</Button>
			
 
				+		<Button love fill="lineTheme">
			
 
				+			<Icon name="ri-hand-heart-line" size={22} top={-2} />
			
 
				+			关爱版按钮
			
 
				+		</Button>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">自定义</div>
			
 
				+		<Button injClass="bg-[#C84031] dark:bg-[#77B941]">纯色填充</Button>
			
 
				+		<Button injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0] !text-white">渐变填充</Button>
			
 
				+		<Button fill="line" injClass="border-[#C84031] dark:border-[#77B941] !text-[#C84031] dark:!text-[#77B941]">线性</Button>
			
 
				+		<Button injClass="shadow-md shadow-black/30 dark:shadow-white/30">阴影</Button>
			
 
				+		<Button radius="full" injClass="shadow-lg shadow-primary/40 dark:shadow-dark/40">颜色阴影</Button>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">按钮组</div>
			
 
				+		<Button fill="lineTheme" heightIn="0" group>
			
 
				+			<div class="flex">
			
 
				+				<div class="flex-1 border-r py-2 active:opacity-80">
			
 
				+					<Icon name="ri-apps-2-line" size={18} top={-2} />
			
 
				+					应用
			
 
				+				</div>
			
 
				+				<div class="flex-1 border-r py-2 active:opacity-80">
			
 
				+					<Icon name="ri-star-line" size={18} top={-2} />
			
 
				+					收藏
			
 
				+				</div>
			
 
				+				<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+				<!-- svelte-ignore a11y-no-static-element-interactions -->
			
 
				+				<div class="flex-1 py-2 active:opacity-80" on:click={() => (visible = true)}>
			
 
				+					<Icon name="ri-share-forward-line" size={18} top={-2} />
			
 
				+					分享
			
 
				+				</div>
			
 
				+			</div>
			
 
				+		</Button>
			
 
				+		<Button radius="full" heightIn="0" group>
			
 
				+			<div class="flex">
			
 
				+				<div class="flex-1 border-r py-2 active:opacity-80">
			
 
				+					<Icon name="ri-apps-2-line" size={18} top={-2} />
			
 
				+					应用
			
 
				+				</div>
			
 
				+				<div class="flex-1 border-r py-2 active:opacity-80">
			
 
				+					<Icon name="ri-star-line" size={18} top={-2} />
			
 
				+					收藏
			
 
				+				</div>
			
 
				+				<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+				<!-- svelte-ignore a11y-interactive-supports-focus -->
			
 
				+				<div class="flex-1 py-2 active:opacity-80" on:click={() => (visible = true)} role="button">
			
 
				+					<Icon name="ri-share-forward-line" size={18} top={-2} />
			
 
				+					分享
			
 
				+				</div>
			
 
				+			</div>
			
 
				+		</Button>
			
 
				+	</div>
			
 
				 </div>
			
 
				 <Toast bind:visible message="点击了按钮组中的分享！" />
			
--- a/demo/src/pages/button/ButtonDemo_en.svelte
+++ b/demo/src/pages/button/ButtonDemo_en.svelte
@@ -1,159 +1,161 @@
 
				 <!-- Button Demo -->
			
 
				 <script>
			
 
				-    import { Button, Icon, Toast, Loading } from 'stdf';
			
 
				+	import { Button, Icon, Toast, Loading } from 'stdf';
			
 
				 
			
 
				-    let visible = false;
			
 
				+	let visible = false;
			
 
				 </script>
			
 
				 
			
 
				 <div class="flex flex-col space-y-8 py-8">
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">Different states</div>
			
 
				-        <Button>Default</Button>
			
 
				-        <Button state="success">Success</Button>
			
 
				-        <Button state="warning">Warning</Button>
			
 
				-        <Button state="error">Error</Button>
			
 
				-        <Button state="info">Information</Button>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">Different rounded style</div>
			
 
				-        <Button>Default</Button>
			
 
				-        <Button radius="none">No rounded</Button>
			
 
				-        <Button radius="xl">Large rounded corner</Button>
			
 
				-        <Button radius="2xl">Larger corner</Button>
			
 
				-        <Button radius="full">Full rounded corner</Button>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">Different fill mode</div>
			
 
				-        <Button>Default</Button>
			
 
				-        <Button fill="line">Colorless linear</Button>
			
 
				-        <Button fill="lineLight">Light color linearity</Button>
			
 
				-        <Button fill="lineTheme">Theme color linear</Button>
			
 
				-        <Button fill="text">Colorless pure text</Button>
			
 
				-        <Button fill="textTheme">Pure text of theme color</Button>
			
 
				-        <Button fill="colorLight">Light color filling</Button>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">Different border style</div>
			
 
				-        <Button fill="lineTheme">Solid line</Button>
			
 
				-        <Button fill="lineTheme" line="dashed">Dashed line</Button>
			
 
				-        <Button fill="lineTheme" line="dotted">Dotted line</Button>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">Different size</div>
			
 
				-        <Button size="full" radius="none">There is no rounded corner</Button>
			
 
				-        <Button>Default</Button>
			
 
				-        <Button size="md">Medium</Button>
			
 
				-        <Button size="sm">Small</Button>
			
 
				-        <Button size="auto">AUTO</Button>
			
 
				-        <Button size="auto">
			
 
				-            <div class="px-1">
			
 
				-                <Icon name="ri-plane-fill" size={20} top={-2} />
			
 
				-            </div>
			
 
				-        </Button>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">Different heights</div>
			
 
				-        <Button heightOut="0">The external height is 0</Button>
			
 
				-        <Button heightIn="0">Internal height is 0</Button>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">Fixed size</div>
			
 
				-        <div class="flex justify-around items-center">
			
 
				-            <Button customSize customWidth={40} customHeight={40} radius="full">W</Button>
			
 
				-            <Button customSize customWidth={40} customHeight={40} radius="xl">&</Button>
			
 
				-            <Button customSize customWidth={40} customHeight={40}>H</Button>
			
 
				-            <Button customSize customWidth={40} customHeight={40} radius="none">equal</Button>
			
 
				-            <Button fill="lineTheme" customSize customWidth={40} customHeight={40}>
			
 
				-                <Icon name="ri-plane-fill" size={20} top={-2} />
			
 
				-            </Button>
			
 
				-            <Button radius="full" fill="lineTheme" customSize customWidth={40} customHeight={40}>
			
 
				-                <Icon name="ri-plane-fill" size={20} top={-2} />
			
 
				-            </Button>
			
 
				-            <Button radius="full" line="dashed" fill="lineTheme" customSize customWidth={40} customHeight={40}>
			
 
				-                <Icon name="ri-plane-fill" size={20} top={-2} />
			
 
				-            </Button>
			
 
				-            <Button radius="full" customSize customWidth={24} customHeight={24} heightIn="0">
			
 
				-                <Icon name="ri-plane-fill" size={12} top={-2} />
			
 
				-            </Button>
			
 
				-        </div>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">Disable</div>
			
 
				-        <Button disabled>Disable</Button>
			
 
				-        <Button fill="lineTheme" disabled>Disable</Button>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">Load</div>
			
 
				-        <Button>
			
 
				-            <Loading inverse height="6" width="6" />
			
 
				-        </Button>
			
 
				-        <Button>
			
 
				-            <Loading inverse width="16" height="6" type="1_17" />
			
 
				-        </Button>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">Icon</div>
			
 
				-        <Button>
			
 
				-            <Icon name="ri-share-forward-2-fill" size={18} top={-2} />
			
 
				-            Throw the two way foil
			
 
				-        </Button>
			
 
				-        <Button fill="lineTheme">
			
 
				-            <Icon name="ri-mic-off-fill" size={16} top={-2} />
			
 
				-            Start the surface wall plan
			
 
				-        </Button>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">Love version</div>
			
 
				-        <Button love>Care version button</Button>
			
 
				-        <Button love fill="lineTheme">
			
 
				-            <Icon name="ri-hand-heart-line" size={22} top={-2} />
			
 
				-            Care version button
			
 
				-        </Button>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">Customize</div>
			
 
				-        <Button injClass="bg-[#C84031] dark:bg-[#77B941]">Solid color filling</Button>
			
 
				-        <Button injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0] !text-white">Gradient filling</Button>
			
 
				-        <Button fill="line" injClass="border-[#C84031] dark:border-[#77B941] !text-[#C84031] dark:!text-[#77B941]">Linear</Button>
			
 
				-        <Button injClass="shadow-md shadow-black/30 dark:shadow-white/30">Shadow</Button>
			
 
				-        <Button radius="full" injClass="shadow-lg shadow-primary/40 dark:shadow-dark/40">Shadow</Button>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">Button group</div>
			
 
				-        <Button fill="lineTheme" heightIn="0" group>
			
 
				-            <div class="flex">
			
 
				-                <div class="flex-1 border-r py-2 active:opacity-80">
			
 
				-                    <Icon name="ri-apps-2-line" size={18} top={-2} />
			
 
				-                    Application
			
 
				-                </div>
			
 
				-                <div class="flex-1 border-r py-2 active:opacity-80">
			
 
				-                    <Icon name="ri-star-line" size={18} top={-2} />
			
 
				-                    Collect
			
 
				-                </div>
			
 
				-                <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-                <div class="flex-1 py-2 active:opacity-80" on:click={() => (visible = true)}>
			
 
				-                    <Icon name="ri-share-forward-line" size={18} top={-2} />
			
 
				-                    Share
			
 
				-                </div>
			
 
				-            </div>
			
 
				-        </Button>
			
 
				-        <Button radius="full" heightIn="0" group>
			
 
				-            <div class="flex">
			
 
				-                <div class="flex-1 border-r py-2 active:opacity-80">
			
 
				-                    <Icon name="ri-apps-2-line" size={18} top={-2} />
			
 
				-                    Application
			
 
				-                </div>
			
 
				-                <div class="flex-1 border-r py-2 active:opacity-80">
			
 
				-                    <Icon name="ri-star-line" size={18} top={-2} />
			
 
				-                    Collect
			
 
				-                </div>
			
 
				-                <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-                <div class="flex-1 py-2 active:opacity-80" on:click={() => (visible = true)} role="button">
			
 
				-                    <Icon name="ri-share-forward-line" size={18} top={-2} />
			
 
				-                    Share
			
 
				-                </div>
			
 
				-            </div>
			
 
				-        </Button>
			
 
				-    </div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">Different states</div>
			
 
				+		<Button>Default</Button>
			
 
				+		<Button state="success">Success</Button>
			
 
				+		<Button state="warning">Warning</Button>
			
 
				+		<Button state="error">Error</Button>
			
 
				+		<Button state="info">Information</Button>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">Different rounded style</div>
			
 
				+		<Button>Default</Button>
			
 
				+		<Button radius="none">No rounded</Button>
			
 
				+		<Button radius="xl">Large rounded corner</Button>
			
 
				+		<Button radius="2xl">Larger corner</Button>
			
 
				+		<Button radius="full">Full rounded corner</Button>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">Different fill mode</div>
			
 
				+		<Button>Default</Button>
			
 
				+		<Button fill="line">Colorless linear</Button>
			
 
				+		<Button fill="lineLight">Light color linearity</Button>
			
 
				+		<Button fill="lineTheme">Theme color linear</Button>
			
 
				+		<Button fill="text">Colorless pure text</Button>
			
 
				+		<Button fill="textTheme">Pure text of theme color</Button>
			
 
				+		<Button fill="colorLight">Light color filling</Button>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">Different border style</div>
			
 
				+		<Button fill="lineTheme">Solid line</Button>
			
 
				+		<Button fill="lineTheme" line="dashed">Dashed line</Button>
			
 
				+		<Button fill="lineTheme" line="dotted">Dotted line</Button>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">Different size</div>
			
 
				+		<Button size="full" radius="none">There is no rounded corner</Button>
			
 
				+		<Button>Default</Button>
			
 
				+		<Button size="md">Medium</Button>
			
 
				+		<Button size="sm">Small</Button>
			
 
				+		<Button size="auto">AUTO</Button>
			
 
				+		<Button size="auto">
			
 
				+			<div class="px-1">
			
 
				+				<Icon name="ri-plane-fill" size={20} top={-2} />
			
 
				+			</div>
			
 
				+		</Button>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">Different heights</div>
			
 
				+		<Button heightOut="0">The external height is 0</Button>
			
 
				+		<Button heightIn="0">Internal height is 0</Button>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">Fixed size</div>
			
 
				+		<div class="flex justify-around items-center">
			
 
				+			<Button customSize customWidth={40} customHeight={40} radius="full">W</Button>
			
 
				+			<Button customSize customWidth={40} customHeight={40} radius="xl">&</Button>
			
 
				+			<Button customSize customWidth={40} customHeight={40}>H</Button>
			
 
				+			<Button customSize customWidth={40} customHeight={40} radius="none">equal</Button>
			
 
				+			<Button fill="lineTheme" customSize customWidth={40} customHeight={40}>
			
 
				+				<Icon name="ri-plane-fill" size={20} top={-2} />
			
 
				+			</Button>
			
 
				+			<Button radius="full" fill="lineTheme" customSize customWidth={40} customHeight={40}>
			
 
				+				<Icon name="ri-plane-fill" size={20} top={-2} />
			
 
				+			</Button>
			
 
				+			<Button radius="full" line="dashed" fill="lineTheme" customSize customWidth={40} customHeight={40}>
			
 
				+				<Icon name="ri-plane-fill" size={20} top={-2} />
			
 
				+			</Button>
			
 
				+			<Button radius="full" customSize customWidth={24} customHeight={24} heightIn="0">
			
 
				+				<Icon name="ri-plane-fill" size={12} top={-2} />
			
 
				+			</Button>
			
 
				+		</div>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">Disable</div>
			
 
				+		<Button disabled>Disable</Button>
			
 
				+		<Button fill="lineTheme" disabled>Disable</Button>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">Load</div>
			
 
				+		<Button>
			
 
				+			<Loading inverse height="6" width="6" />
			
 
				+		</Button>
			
 
				+		<Button>
			
 
				+			<Loading inverse width="16" height="6" type="1_17" />
			
 
				+		</Button>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">Icon</div>
			
 
				+		<Button>
			
 
				+			<Icon name="ri-share-forward-2-fill" size={18} top={-2} />
			
 
				+			Throw the two way foil
			
 
				+		</Button>
			
 
				+		<Button fill="lineTheme">
			
 
				+			<Icon name="ri-mic-off-fill" size={16} top={-2} />
			
 
				+			Start the surface wall plan
			
 
				+		</Button>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">Love version</div>
			
 
				+		<Button love>Care version button</Button>
			
 
				+		<Button love fill="lineTheme">
			
 
				+			<Icon name="ri-hand-heart-line" size={22} top={-2} />
			
 
				+			Care version button
			
 
				+		</Button>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">Customize</div>
			
 
				+		<Button injClass="bg-[#C84031] dark:bg-[#77B941]">Solid color filling</Button>
			
 
				+		<Button injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0] !text-white">Gradient filling</Button>
			
 
				+		<Button fill="line" injClass="border-[#C84031] dark:border-[#77B941] !text-[#C84031] dark:!text-[#77B941]">Linear</Button>
			
 
				+		<Button injClass="shadow-md shadow-black/30 dark:shadow-white/30">Shadow</Button>
			
 
				+		<Button radius="full" injClass="shadow-lg shadow-primary/40 dark:shadow-dark/40">Shadow</Button>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">Button group</div>
			
 
				+		<Button fill="lineTheme" heightIn="0" group>
			
 
				+			<div class="flex">
			
 
				+				<div class="flex-1 border-r py-2 active:opacity-80">
			
 
				+					<Icon name="ri-apps-2-line" size={18} top={-2} />
			
 
				+					Application
			
 
				+				</div>
			
 
				+				<div class="flex-1 border-r py-2 active:opacity-80">
			
 
				+					<Icon name="ri-star-line" size={18} top={-2} />
			
 
				+					Collect
			
 
				+				</div>
			
 
				+				<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+				<!-- svelte-ignore a11y-no-static-element-interactions -->
			
 
				+				<div class="flex-1 py-2 active:opacity-80" on:click={() => (visible = true)}>
			
 
				+					<Icon name="ri-share-forward-line" size={18} top={-2} />
			
 
				+					Share
			
 
				+				</div>
			
 
				+			</div>
			
 
				+		</Button>
			
 
				+		<Button radius="full" heightIn="0" group>
			
 
				+			<div class="flex">
			
 
				+				<div class="flex-1 border-r py-2 active:opacity-80">
			
 
				+					<Icon name="ri-apps-2-line" size={18} top={-2} />
			
 
				+					Application
			
 
				+				</div>
			
 
				+				<div class="flex-1 border-r py-2 active:opacity-80">
			
 
				+					<Icon name="ri-star-line" size={18} top={-2} />
			
 
				+					Collect
			
 
				+				</div>
			
 
				+				<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+				<!-- svelte-ignore a11y-interactive-supports-focus -->
			
 
				+				<div class="flex-1 py-2 active:opacity-80" on:click={() => (visible = true)} role="button">
			
 
				+					<Icon name="ri-share-forward-line" size={18} top={-2} />
			
 
				+					Share
			
 
				+				</div>
			
 
				+			</div>
			
 
				+		</Button>
			
 
				+	</div>
			
 
				 </div>
			
 
				 <Toast bind:visible message="Click share in the button group!" />
			
--- a/demo/src/pages/calendar/CalendarDemo.svelte
+++ b/demo/src/pages/calendar/CalendarDemo.svelte
@@ -1,176 +1,176 @@
 
				 <!-- Calendar Demo -->
			
 
				 <script>
			
 
				-    import { Cell, Calendar } from 'stdf';
			
 
				-
			
 
				-    let visible1 = false;
			
 
				-    let visible2 = false;
			
 
				-    let visible3 = false;
			
 
				-    let visible4 = false;
			
 
				-    let visible5 = false;
			
 
				-    let visible6 = false;
			
 
				-    let visible7 = false;
			
 
				-    let visible8 = false;
			
 
				-    let visible9 = false;
			
 
				-    let visible10 = false;
			
 
				-    let visible11 = false;
			
 
				-    let visible12 = false;
			
 
				-    let visible13 = false;
			
 
				-    let visible14 = false;
			
 
				-    let visible15 = false;
			
 
				-    let visible16 = false;
			
 
				-    let visible17 = false;
			
 
				-    let visible18 = false;
			
 
				-    let visible19 = false;
			
 
				-    let visible20 = false;
			
 
				-    let visible21 = false;
			
 
				-    let visible22 = false;
			
 
				-    let visible23 = false;
			
 
				-
			
 
				-    // 随机取出当前日期后的6天，组成 infoDates 数组，其中 date 格式为 YYYYMMDD，月和日补足2位
			
 
				-    const now = new Date();
			
 
				-    const infoDates = [];
			
 
				-    for (let i = 0; i < 6; i++) {
			
 
				-        const date = new Date(now.getTime() + i * 24 * 60 * 60 * 1000);
			
 
				-        infoDates.push(
			
 
				-            `${date.getFullYear()}${(date.getMonth() + 1).toString().padStart(2, '0')}${date.getDate().toString().padStart(2, '0')}`
			
 
				-        );
			
 
				-    }
			
 
				-    // 循环 infoDates ，按照顺序，将每一项转为对象，date 为日期，info分别为出发、入住、购物、 拍照、离店、回程
			
 
				-    infoDates.forEach((date, index) => {
			
 
				-        infoDates[index] = {
			
 
				-            date,
			
 
				-            info: ['出发', '入住', '购物', '拍照', '离店', '回程'][index],
			
 
				-        };
			
 
				-    });
			
 
				-
			
 
				-    // 获取当前日期的前7天和后7天共14天，组成数组 disabledDates，其中 date 格式为 YYYYMMDD，月和日补足2位
			
 
				-    const disabledDates = [];
			
 
				-    const before7 = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
			
 
				-    for (let i = 0; i < 14; i++) {
			
 
				-        const date = new Date(before7.getTime() + i * 24 * 60 * 60 * 1000);
			
 
				-        disabledDates.push(
			
 
				-            `${date.getFullYear()}${(date.getMonth() + 1).toString().padStart(2, '0')}${date.getDate().toString().padStart(2, '0')}`
			
 
				-        );
			
 
				-    }
			
 
				-    // 传入数字 n，返回当前月份往前推第 n 个月的月份，格式为 YYYYMM，月份补足2位
			
 
				-    const getInitMonth = n => {
			
 
				-        const now = new Date();
			
 
				-        const year = now.getFullYear();
			
 
				-        const month = now.getMonth() + 1;
			
 
				-        const newMonth = month - n;
			
 
				-        if (newMonth > 0) {
			
 
				-            return `${year}${newMonth.toString().padStart(2, '0')}`;
			
 
				-        } else {
			
 
				-            return `${year - 1}${(12 + newMonth).toString().padStart(2, '0')}`;
			
 
				-        }
			
 
				-    };
			
 
				-    const initMonth = getInitMonth(3);
			
 
				-
			
 
				-    const quickSelects = ['week', 'month', 'quarter', -3, -7, -30, 3, 7, 30];
			
 
				-    const quickSelectsDay = [-5, -2, 3, 7];
			
 
				-
			
 
				-    let selectedDates = [];
			
 
				-    const getSelectedDatesFunc = e => {
			
 
				-        selectedDates = e.detail.dates;
			
 
				-    };
			
 
				-
			
 
				-    let selectedFormatDates = [];
			
 
				-    const getSelectedFormatDatesFunc = e => {
			
 
				-        selectedFormatDates = e.detail.dates;
			
 
				-    };
			
 
				+	import { Cell, Calendar } from 'stdf';
			
 
				+
			
 
				+	let visible1 = false;
			
 
				+	let visible2 = false;
			
 
				+	let visible3 = false;
			
 
				+	let visible4 = false;
			
 
				+	let visible5 = false;
			
 
				+	let visible6 = false;
			
 
				+	let visible7 = false;
			
 
				+	let visible8 = false;
			
 
				+	let visible9 = false;
			
 
				+	let visible10 = false;
			
 
				+	let visible11 = false;
			
 
				+	let visible12 = false;
			
 
				+	let visible13 = false;
			
 
				+	let visible14 = false;
			
 
				+	let visible15 = false;
			
 
				+	let visible16 = false;
			
 
				+	let visible17 = false;
			
 
				+	let visible18 = false;
			
 
				+	let visible19 = false;
			
 
				+	let visible20 = false;
			
 
				+	let visible21 = false;
			
 
				+	let visible22 = false;
			
 
				+	let visible23 = false;
			
 
				+
			
 
				+	// 随机取出当前日期后的6天，组成 infoDates 数组，其中 date 格式为 YYYYMMDD，月和日补足2位
			
 
				+	const now = new Date();
			
 
				+	const infoDates = [];
			
 
				+	for (let i = 0; i < 6; i++) {
			
 
				+		const date = new Date(now.getTime() + i * 24 * 60 * 60 * 1000);
			
 
				+		infoDates.push(
			
 
				+			`${date.getFullYear()}${(date.getMonth() + 1).toString().padStart(2, '0')}${date.getDate().toString().padStart(2, '0')}`,
			
 
				+		);
			
 
				+	}
			
 
				+	// 循环 infoDates ，按照顺序，将每一项转为对象，date 为日期，info分别为出发、入住、购物、 拍照、离店、回程
			
 
				+	infoDates.forEach((date, index) => {
			
 
				+		infoDates[index] = {
			
 
				+			date,
			
 
				+			info: ['出发', '入住', '购物', '拍照', '离店', '回程'][index],
			
 
				+		};
			
 
				+	});
			
 
				+
			
 
				+	// 获取当前日期的前7天和后7天共14天，组成数组 disabledDates，其中 date 格式为 YYYYMMDD，月和日补足2位
			
 
				+	const disabledDates = [];
			
 
				+	const before7 = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
			
 
				+	for (let i = 0; i < 14; i++) {
			
 
				+		const date = new Date(before7.getTime() + i * 24 * 60 * 60 * 1000);
			
 
				+		disabledDates.push(
			
 
				+			`${date.getFullYear()}${(date.getMonth() + 1).toString().padStart(2, '0')}${date.getDate().toString().padStart(2, '0')}`,
			
 
				+		);
			
 
				+	}
			
 
				+	// 传入数字 n，返回当前月份往前推第 n 个月的月份，格式为 YYYYMM，月份补足2位
			
 
				+	const getInitMonth = n => {
			
 
				+		const now = new Date();
			
 
				+		const year = now.getFullYear();
			
 
				+		const month = now.getMonth() + 1;
			
 
				+		const newMonth = month - n;
			
 
				+		if (newMonth > 0) {
			
 
				+			return `${year}${newMonth.toString().padStart(2, '0')}`;
			
 
				+		} else {
			
 
				+			return `${year - 1}${(12 + newMonth).toString().padStart(2, '0')}`;
			
 
				+		}
			
 
				+	};
			
 
				+	const initMonth = getInitMonth(3);
			
 
				+
			
 
				+	const quickSelects = ['week', 'month', 'quarter', -3, -7, -30, 3, 7, 30];
			
 
				+	const quickSelectsDay = [-5, -2, 3, 7];
			
 
				+
			
 
				+	let selectedDates = [];
			
 
				+	const getSelectedDatesFunc = e => {
			
 
				+		selectedDates = e.detail.dates;
			
 
				+	};
			
 
				+
			
 
				+	let selectedFormatDates = [];
			
 
				+	const getSelectedFormatDatesFunc = e => {
			
 
				+		selectedFormatDates = e.detail.dates;
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-4">
			
 
				-    <Cell title="基础用法" on:click={() => (visible1 = true)} />
			
 
				-    <Calendar bind:visible={visible1} />
			
 
				-
			
 
				-    <Cell title="多选" on:click={() => (visible7 = true)} />
			
 
				-    <Calendar bind:visible={visible7} mode="multiple" />
			
 
				-
			
 
				-    <Cell title="范围选择" on:click={() => (visible8 = true)} />
			
 
				-    <Calendar bind:visible={visible8} mode="range" />
			
 
				-
			
 
				-    <Cell title="从周日开始" on:click={() => (visible2 = true)} />
			
 
				-    <Calendar bind:visible={visible2} startSunday />
			
 
				-
			
 
				-    <Cell title="周末文字标红" on:click={() => (visible3 = true)} />
			
 
				-    <Calendar bind:visible={visible3} weekendRed />
			
 
				-
			
 
				-    <Cell title="不使用卡片样式且加水印" on:click={() => (visible4 = true)} />
			
 
				-    <Calendar bind:visible={visible4} monthCard={false} monthMark />
			
 
				-
			
 
				-    <Cell title="高一点" on:click={() => (visible5 = true)} />
			
 
				-    <Calendar bind:visible={visible5} height={60} />
			
 
				-
			
 
				-    <Cell title="自定义显示信息的日期" on:click={() => (visible6 = true)} />
			
 
				-    <Calendar bind:visible={visible6} {infoDates} />
			
 
				-
			
 
				-    <Cell title="不要圆角" on:click={() => (visible9 = true)} />
			
 
				-    <Calendar bind:visible={visible9} mode="range" radius="none" />
			
 
				-
			
 
				-    <Cell title="加大圆角" on:click={() => (visible10 = true)} />
			
 
				-    <Calendar bind:visible={visible10} mode="range" radius="2xl" />
			
 
				-
			
 
				-    <Cell title="滚动时关闭动画" on:click={() => (visible18 = true)} />
			
 
				-    <Calendar bind:visible={visible18} useAnimation={false} />
			
 
				-
			
 
				-    <Cell title="配置确认按钮样式" on:click={() => (visible11 = true)} />
			
 
				-    <Calendar bind:visible={visible11} button={{ radius: 'full' }} />
			
 
				-
			
 
				-    <Cell title="顶部来点圆角" on:click={() => (visible19 = true)} />
			
 
				-    <Calendar bind:visible={visible19} popup={{ radius: 'xl' }} />
			
 
				-
			
 
				-    <Cell title="定义开始与结束月" on:click={() => (visible12 = true)} />
			
 
				-    <Calendar bind:visible={visible12} startMonth="202101" endMonth="202106" />
			
 
				-
			
 
				-    <Cell title="自定义不可选日期" on:click={() => (visible13 = true)} />
			
 
				-    <Calendar bind:visible={visible13} {disabledDates} mode="range" />
			
 
				-
			
 
				-    <Cell title="多选或范围选择时不显示已选天数" on:click={() => (visible14 = true)} />
			
 
				-    <Calendar bind:visible={visible14} mode="range" showSelectedDay={false} />
			
 
				-
			
 
				-    <Cell title="自定义初始显示月份" subTitle="开始月份为当前月份前第三个月" on:click={() => (visible15 = true)} />
			
 
				-    <Calendar bind:visible={visible15} {initMonth} />
			
 
				-
			
 
				-    <Cell title="展示一些快速选择项" on:click={() => (visible16 = true)} />
			
 
				-    <Calendar bind:visible={visible16} mode="range" {quickSelects} />
			
 
				-
			
 
				-    <Cell title="快速选择天数时包含当天" on:click={() => (visible23 = true)} />
			
 
				-    <Calendar bind:visible={visible23} mode="range" quickSelects={quickSelectsDay} includeToday />
			
 
				-
			
 
				-    <Cell title="从周日开始快速选择本周" on:click={() => (visible17 = true)} />
			
 
				-    <Calendar bind:visible={visible17} mode="range" startSunday quickSelects={['week']} />
			
 
				-
			
 
				-    <div class="px-4">
			
 
				-        {#if selectedDates.length}
			
 
				-            当前选定了以下共 {selectedDates.length} 天：
			
 
				-        {:else}
			
 
				-            <div>请选定日期</div>
			
 
				-        {/if}
			
 
				-    </div>
			
 
				-    <div class="grid grid-cols-4 gap-2 p-2 text-primary dark:text-dark">
			
 
				-        {#each selectedDates as item}
			
 
				-            <div class="text-center">{item}</div>
			
 
				-        {/each}
			
 
				-    </div>
			
 
				-    <Cell title="获取返回的选定日期" on:click={() => (visible20 = true)} />
			
 
				-    <Calendar bind:visible={visible20} mode="range" on:confirm={getSelectedDatesFunc} />
			
 
				-
			
 
				-    <div class="px-4">
			
 
				-        {#if selectedFormatDates.length}
			
 
				-            当前选定了以下共 {selectedFormatDates.length} 天：
			
 
				-        {:else}
			
 
				-            <div>请选定日期</div>
			
 
				-        {/if}
			
 
				-    </div>
			
 
				-    <div class="grid grid-cols-3 gap-2 p-2 text-primary dark:text-dark text-sm">
			
 
				-        {#each selectedFormatDates as item}
			
 
				-            <div class="text-center">{item}</div>
			
 
				-        {/each}
			
 
				-    </div>
			
 
				-    <Cell title="自定义返回的日期格式" on:click={() => (visible21 = true)} />
			
 
				-    <Calendar bind:visible={visible21} mode="range" outFormat="Y年M月D日" on:confirm={getSelectedFormatDatesFunc} />
			
 
				-
			
 
				-    <Cell title="今日日期关闭高亮显示" on:click={() => (visible22 = true)} />
			
 
				-    <Calendar bind:visible={visible22} highlightToday={false} />
			
 
				+	<Cell title="基础用法" on:click={() => (visible1 = true)} />
			
 
				+	<Calendar bind:visible={visible1} />
			
 
				+
			
 
				+	<Cell title="多选" on:click={() => (visible7 = true)} />
			
 
				+	<Calendar bind:visible={visible7} mode="multiple" />
			
 
				+
			
 
				+	<Cell title="范围选择" on:click={() => (visible8 = true)} />
			
 
				+	<Calendar bind:visible={visible8} mode="range" />
			
 
				+
			
 
				+	<Cell title="从周日开始" on:click={() => (visible2 = true)} />
			
 
				+	<Calendar bind:visible={visible2} startSunday />
			
 
				+
			
 
				+	<Cell title="周末文字标红" on:click={() => (visible3 = true)} />
			
 
				+	<Calendar bind:visible={visible3} weekendRed />
			
 
				+
			
 
				+	<Cell title="不使用卡片样式且加水印" on:click={() => (visible4 = true)} />
			
 
				+	<Calendar bind:visible={visible4} monthCard={false} monthMark />
			
 
				+
			
 
				+	<Cell title="高一点" on:click={() => (visible5 = true)} />
			
 
				+	<Calendar bind:visible={visible5} height={60} />
			
 
				+
			
 
				+	<Cell title="自定义显示信息的日期" on:click={() => (visible6 = true)} />
			
 
				+	<Calendar bind:visible={visible6} {infoDates} />
			
 
				+
			
 
				+	<Cell title="不要圆角" on:click={() => (visible9 = true)} />
			
 
				+	<Calendar bind:visible={visible9} mode="range" radius="none" />
			
 
				+
			
 
				+	<Cell title="加大圆角" on:click={() => (visible10 = true)} />
			
 
				+	<Calendar bind:visible={visible10} mode="range" radius="2xl" />
			
 
				+
			
 
				+	<Cell title="滚动时关闭动画" on:click={() => (visible18 = true)} />
			
 
				+	<Calendar bind:visible={visible18} useAnimation={false} />
			
 
				+
			
 
				+	<Cell title="配置确认按钮样式" on:click={() => (visible11 = true)} />
			
 
				+	<Calendar bind:visible={visible11} button={{ radius: 'full' }} />
			
 
				+
			
 
				+	<Cell title="顶部来点圆角" on:click={() => (visible19 = true)} />
			
 
				+	<Calendar bind:visible={visible19} popup={{ radius: 'xl' }} />
			
 
				+
			
 
				+	<Cell title="定义开始与结束月" on:click={() => (visible12 = true)} />
			
 
				+	<Calendar bind:visible={visible12} startMonth="202101" endMonth="202106" />
			
 
				+
			
 
				+	<Cell title="自定义不可选日期" on:click={() => (visible13 = true)} />
			
 
				+	<Calendar bind:visible={visible13} {disabledDates} mode="range" />
			
 
				+
			
 
				+	<Cell title="多选或范围选择时不显示已选天数" on:click={() => (visible14 = true)} />
			
 
				+	<Calendar bind:visible={visible14} mode="range" showSelectedDay={false} />
			
 
				+
			
 
				+	<Cell title="自定义初始显示月份" subTitle="开始月份为当前月份前第三个月" on:click={() => (visible15 = true)} />
			
 
				+	<Calendar bind:visible={visible15} {initMonth} />
			
 
				+
			
 
				+	<Cell title="展示一些快速选择项" on:click={() => (visible16 = true)} />
			
 
				+	<Calendar bind:visible={visible16} mode="range" {quickSelects} />
			
 
				+
			
 
				+	<Cell title="快速选择天数时包含当天" on:click={() => (visible23 = true)} />
			
 
				+	<Calendar bind:visible={visible23} mode="range" quickSelects={quickSelectsDay} includeToday />
			
 
				+
			
 
				+	<Cell title="从周日开始快速选择本周" on:click={() => (visible17 = true)} />
			
 
				+	<Calendar bind:visible={visible17} mode="range" startSunday quickSelects={['week']} />
			
 
				+
			
 
				+	<div class="px-4">
			
 
				+		{#if selectedDates.length}
			
 
				+			当前选定了以下共 {selectedDates.length} 天：
			
 
				+		{:else}
			
 
				+			<div>请选定日期</div>
			
 
				+		{/if}
			
 
				+	</div>
			
 
				+	<div class="grid grid-cols-4 gap-2 p-2 text-primary dark:text-dark">
			
 
				+		{#each selectedDates as item}
			
 
				+			<div class="text-center">{item}</div>
			
 
				+		{/each}
			
 
				+	</div>
			
 
				+	<Cell title="获取返回的选定日期" on:click={() => (visible20 = true)} />
			
 
				+	<Calendar bind:visible={visible20} mode="range" on:confirm={getSelectedDatesFunc} />
			
 
				+
			
 
				+	<div class="px-4">
			
 
				+		{#if selectedFormatDates.length}
			
 
				+			当前选定了以下共 {selectedFormatDates.length} 天：
			
 
				+		{:else}
			
 
				+			<div>请选定日期</div>
			
 
				+		{/if}
			
 
				+	</div>
			
 
				+	<div class="grid grid-cols-3 gap-2 p-2 text-primary dark:text-dark text-sm">
			
 
				+		{#each selectedFormatDates as item}
			
 
				+			<div class="text-center">{item}</div>
			
 
				+		{/each}
			
 
				+	</div>
			
 
				+	<Cell title="自定义返回的日期格式" on:click={() => (visible21 = true)} />
			
 
				+	<Calendar bind:visible={visible21} mode="range" outFormat="Y年M月D日" on:confirm={getSelectedFormatDatesFunc} />
			
 
				+
			
 
				+	<Cell title="今日日期关闭高亮显示" on:click={() => (visible22 = true)} />
			
 
				+	<Calendar bind:visible={visible22} highlightToday={false} />
			
 
				 </div>
			
--- a/demo/src/pages/calendar/CalendarDemo_en.svelte
+++ b/demo/src/pages/calendar/CalendarDemo_en.svelte
@@ -1,180 +1,176 @@
 
				 <!-- Calendar Demo -->
			
 
				 <script>
			
 
				-    import { Cell, Calendar } from 'stdf';
			
 
				-
			
 
				-    let visible1 = false;
			
 
				-    let visible2 = false;
			
 
				-    let visible3 = false;
			
 
				-    let visible4 = false;
			
 
				-    let visible5 = false;
			
 
				-    let visible6 = false;
			
 
				-    let visible7 = false;
			
 
				-    let visible8 = false;
			
 
				-    let visible9 = false;
			
 
				-    let visible10 = false;
			
 
				-    let visible11 = false;
			
 
				-    let visible12 = false;
			
 
				-    let visible13 = false;
			
 
				-    let visible14 = false;
			
 
				-    let visible15 = false;
			
 
				-    let visible16 = false;
			
 
				-    let visible17 = false;
			
 
				-    let visible18 = false;
			
 
				-    let visible19 = false;
			
 
				-    let visible20 = false;
			
 
				-    let visible21 = false;
			
 
				-    let visible22 = false;
			
 
				-    let visible23 = false;
			
 
				-
			
 
				-    // The 6 days after the current date randomly takes out the INFODATES array, the Date format is yyyymmdd, and the month and day make up for 2 digits
			
 
				-    const now = new Date();
			
 
				-    const infoDates = [];
			
 
				-    for (let i = 0; i < 6; i++) {
			
 
				-        const date = new Date(now.getTime() + i * 24 * 60 * 60 * 1000);
			
 
				-        infoDates.push(
			
 
				-            `${date.getFullYear()}${(date.getMonth() + 1).toString().padStart(2, '0')}${date.getDate().toString().padStart(2, '0')}`
			
 
				-        );
			
 
				-    }
			
 
				-    // Loop infoDates, in turn, each item is converted to an object, date is the date, and info is respectively departure, check-in, shopping, photography, check-out, and return
			
 
				-    infoDates.forEach((date, index) => {
			
 
				-        infoDates[index] = {
			
 
				-            date,
			
 
				-            info: ['Set off', 'Stay', 'Shopping', 'Photo', 'Leave', 'Return'][index],
			
 
				-        };
			
 
				-    });
			
 
				-
			
 
				-    // For a total of 14 days before the current date and 7 days after 7 days, the formation of the array DisableDates. The DATE format is yyyymmdd, and the month and day are added.
			
 
				-    const disabledDates = [];
			
 
				-    const before7 = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
			
 
				-    for (let i = 0; i < 14; i++) {
			
 
				-        const date = new Date(before7.getTime() + i * 24 * 60 * 60 * 1000);
			
 
				-        disabledDates.push(
			
 
				-            `${date.getFullYear()}${(date.getMonth() + 1).toString().padStart(2, '0')}${date.getDate().toString().padStart(2, '0')}`
			
 
				-        );
			
 
				-    }
			
 
				-    // Pass the number N and return to the month of the N -month month in the current month. The format is yyyymm, and the month is added 2 digits.
			
 
				-    const getInitMonth = n => {
			
 
				-        const now = new Date();
			
 
				-        const year = now.getFullYear();
			
 
				-        const month = now.getMonth() + 1;
			
 
				-        const newMonth = month - n;
			
 
				-        if (newMonth > 0) {
			
 
				-            return `${year}${newMonth.toString().padStart(2, '0')}`;
			
 
				-        } else {
			
 
				-            return `${year - 1}${(12 + newMonth).toString().padStart(2, '0')}`;
			
 
				-        }
			
 
				-    };
			
 
				-    const initMonth = getInitMonth(3);
			
 
				-
			
 
				-    const quickSelects = ['week', 'month', 'quarter', -3, -7, -30, 3, 7, 30];
			
 
				-    const quickSelectsDay = [-5, -2, 3, 7];
			
 
				-
			
 
				-    let selectedDates = [];
			
 
				-    const getSelectedDatesFunc = e => {
			
 
				-        selectedDates = e.detail.dates;
			
 
				-    };
			
 
				-
			
 
				-    let selectedFormatDates = [];
			
 
				-    const getSelectedFormatDatesFunc = e => {
			
 
				-        selectedFormatDates = e.detail.dates;
			
 
				-    };
			
 
				+	import { Cell, Calendar } from 'stdf';
			
 
				+
			
 
				+	let visible1 = false;
			
 
				+	let visible2 = false;
			
 
				+	let visible3 = false;
			
 
				+	let visible4 = false;
			
 
				+	let visible5 = false;
			
 
				+	let visible6 = false;
			
 
				+	let visible7 = false;
			
 
				+	let visible8 = false;
			
 
				+	let visible9 = false;
			
 
				+	let visible10 = false;
			
 
				+	let visible11 = false;
			
 
				+	let visible12 = false;
			
 
				+	let visible13 = false;
			
 
				+	let visible14 = false;
			
 
				+	let visible15 = false;
			
 
				+	let visible16 = false;
			
 
				+	let visible17 = false;
			
 
				+	let visible18 = false;
			
 
				+	let visible19 = false;
			
 
				+	let visible20 = false;
			
 
				+	let visible21 = false;
			
 
				+	let visible22 = false;
			
 
				+	let visible23 = false;
			
 
				+
			
 
				+	// The 6 days after the current date randomly takes out the INFODATES array, the Date format is yyyymmdd, and the month and day make up for 2 digits
			
 
				+	const now = new Date();
			
 
				+	const infoDates = [];
			
 
				+	for (let i = 0; i < 6; i++) {
			
 
				+		const date = new Date(now.getTime() + i * 24 * 60 * 60 * 1000);
			
 
				+		infoDates.push(
			
 
				+			`${date.getFullYear()}${(date.getMonth() + 1).toString().padStart(2, '0')}${date.getDate().toString().padStart(2, '0')}`,
			
 
				+		);
			
 
				+	}
			
 
				+	// Loop infoDates, in turn, each item is converted to an object, date is the date, and info is respectively departure, check-in, shopping, photography, check-out, and return
			
 
				+	infoDates.forEach((date, index) => {
			
 
				+		infoDates[index] = {
			
 
				+			date,
			
 
				+			info: ['Set off', 'Stay', 'Shopping', 'Photo', 'Leave', 'Return'][index],
			
 
				+		};
			
 
				+	});
			
 
				+
			
 
				+	// For a total of 14 days before the current date and 7 days after 7 days, the formation of the array DisableDates. The DATE format is yyyymmdd, and the month and day are added.
			
 
				+	const disabledDates = [];
			
 
				+	const before7 = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
			
 
				+	for (let i = 0; i < 14; i++) {
			
 
				+		const date = new Date(before7.getTime() + i * 24 * 60 * 60 * 1000);
			
 
				+		disabledDates.push(
			
 
				+			`${date.getFullYear()}${(date.getMonth() + 1).toString().padStart(2, '0')}${date.getDate().toString().padStart(2, '0')}`,
			
 
				+		);
			
 
				+	}
			
 
				+	// Pass the number N and return to the month of the N -month month in the current month. The format is yyyymm, and the month is added 2 digits.
			
 
				+	const getInitMonth = n => {
			
 
				+		const now = new Date();
			
 
				+		const year = now.getFullYear();
			
 
				+		const month = now.getMonth() + 1;
			
 
				+		const newMonth = month - n;
			
 
				+		if (newMonth > 0) {
			
 
				+			return `${year}${newMonth.toString().padStart(2, '0')}`;
			
 
				+		} else {
			
 
				+			return `${year - 1}${(12 + newMonth).toString().padStart(2, '0')}`;
			
 
				+		}
			
 
				+	};
			
 
				+	const initMonth = getInitMonth(3);
			
 
				+
			
 
				+	const quickSelects = ['week', 'month', 'quarter', -3, -7, -30, 3, 7, 30];
			
 
				+	const quickSelectsDay = [-5, -2, 3, 7];
			
 
				+
			
 
				+	let selectedDates = [];
			
 
				+	const getSelectedDatesFunc = e => {
			
 
				+		selectedDates = e.detail.dates;
			
 
				+	};
			
 
				+
			
 
				+	let selectedFormatDates = [];
			
 
				+	const getSelectedFormatDatesFunc = e => {
			
 
				+		selectedFormatDates = e.detail.dates;
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-4">
			
 
				-    <Cell title="Basic usage" on:click={() => (visible1 = true)} />
			
 
				-    <Calendar bind:visible={visible1} />
			
 
				-
			
 
				-    <Cell title="Choice" on:click={() => (visible7 = true)} />
			
 
				-    <Calendar bind:visible={visible7} mode="multiple" />
			
 
				-
			
 
				-    <Cell title="Range selection" on:click={() => (visible8 = true)} />
			
 
				-    <Calendar bind:visible={visible8} mode="range" />
			
 
				-
			
 
				-    <Cell title="Starting from Sunday" on:click={() => (visible2 = true)} />
			
 
				-    <Calendar bind:visible={visible2} startSunday />
			
 
				-
			
 
				-    <Cell title="Weekend text marking red" on:click={() => (visible3 = true)} />
			
 
				-    <Calendar bind:visible={visible3} weekendRed />
			
 
				-
			
 
				-    <Cell title="No card style but add watermark" on:click={() => (visible4 = true)} />
			
 
				-    <Calendar bind:visible={visible4} monthCard={false} monthMark />
			
 
				-
			
 
				-    <Cell title="Higher" on:click={() => (visible5 = true)} />
			
 
				-    <Calendar bind:visible={visible5} height={60} />
			
 
				-
			
 
				-    <Cell title="Customize the date of display information" on:click={() => (visible6 = true)} />
			
 
				-    <Calendar bind:visible={visible6} {infoDates} />
			
 
				-
			
 
				-    <Cell title="Do not round the corner" on:click={() => (visible9 = true)} />
			
 
				-    <Calendar bind:visible={visible9} mode="range" radius="none" />
			
 
				-
			
 
				-    <Cell title="Increase the corner" on:click={() => (visible10 = true)} />
			
 
				-    <Calendar bind:visible={visible10} mode="range" radius="2xl" />
			
 
				-
			
 
				-    <Cell title="Turn off the animation when rolling" on:click={() => (visible18 = true)} />
			
 
				-    <Calendar bind:visible={visible18} useAnimation={false} />
			
 
				-
			
 
				-    <Cell title="Configure confirmation button style" on:click={() => (visible11 = true)} />
			
 
				-    <Calendar bind:visible={visible11} button={{ radius: 'full' }} />
			
 
				-
			
 
				-    <Cell title="Top rounded corner" on:click={() => (visible19 = true)} />
			
 
				-    <Calendar bind:visible={visible19} popup={{ radius: 'xl' }} />
			
 
				-
			
 
				-    <Cell title="Definition start and end month" on:click={() => (visible12 = true)} />
			
 
				-    <Calendar bind:visible={visible12} startMonth="202101" endMonth="202106" />
			
 
				-
			
 
				-    <Cell title="Customize the unsalented date" on:click={() => (visible13 = true)} />
			
 
				-    <Calendar bind:visible={visible13} {disabledDates} mode="range" />
			
 
				-
			
 
				-    <Cell title="No showed days have been displayed" on:click={() => (visible14 = true)} />
			
 
				-    <Calendar bind:visible={visible14} mode="range" showSelectedDay={false} />
			
 
				-
			
 
				-    <Cell
			
 
				-        title="Customized initial display month"
			
 
				-        subTitle="Third month before the current month"
			
 
				-        on:click={() => (visible15 = true)}
			
 
				-    />
			
 
				-    <Calendar bind:visible={visible15} {initMonth} />
			
 
				-
			
 
				-    <Cell title="Show some fast selection items" on:click={() => (visible16 = true)} />
			
 
				-    <Calendar bind:visible={visible16} mode="range" {quickSelects} />
			
 
				-
			
 
				-    <Cell title="Quickly choose to include that day" on:click={() => (visible23 = true)} />
			
 
				-    <Calendar bind:visible={visible23} mode="range" quickSelects={quickSelectsDay} includeToday />
			
 
				-
			
 
				-    <Cell title="Select this week from Sunday" on:click={() => (visible17 = true)} />
			
 
				-    <Calendar bind:visible={visible17} mode="range" startSunday quickSelects={['week']} />
			
 
				-
			
 
				-    <div class="px-4">
			
 
				-        {#if selectedDates.length}
			
 
				-            The following is the following total {selectedDates.length} day:
			
 
				-        {:else}
			
 
				-            <div>Please select the date</div>
			
 
				-        {/if}
			
 
				-    </div>
			
 
				-    <div class="grid grid-cols-4 gap-2 p-2 text-primary dark:text-dark">
			
 
				-        {#each selectedDates as item}
			
 
				-            <div class="text-center">{item}</div>
			
 
				-        {/each}
			
 
				-    </div>
			
 
				-    <Cell title="Get the selection date of returning" on:click={() => (visible20 = true)} />
			
 
				-    <Calendar bind:visible={visible20} mode="range" on:confirm={getSelectedDatesFunc} />
			
 
				-
			
 
				-    <div class="px-4">
			
 
				-        {#if selectedFormatDates.length}
			
 
				-            The following is the following total {selectedFormatDates.length} day:
			
 
				-        {:else}
			
 
				-            <div>Please select the date</div>
			
 
				-        {/if}
			
 
				-    </div>
			
 
				-    <div class="grid grid-cols-3 gap-2 p-2 text-primary dark:text-dark text-sm">
			
 
				-        {#each selectedFormatDates as item}
			
 
				-            <div class="text-center">{item}</div>
			
 
				-        {/each}
			
 
				-    </div>
			
 
				-    <Cell title="Customized date format" on:click={() => (visible21 = true)} />
			
 
				-    <Calendar bind:visible={visible21} mode="range" outFormat="M/D/Y" on:confirm={getSelectedFormatDatesFunc} />
			
 
				-
			
 
				-    <Cell title="Turn off today's highlight display" on:click={() => (visible22 = true)} />
			
 
				-    <Calendar bind:visible={visible22} highlightToday={false} />
			
 
				+	<Cell title="Basic usage" on:click={() => (visible1 = true)} />
			
 
				+	<Calendar bind:visible={visible1} />
			
 
				+
			
 
				+	<Cell title="Choice" on:click={() => (visible7 = true)} />
			
 
				+	<Calendar bind:visible={visible7} mode="multiple" />
			
 
				+
			
 
				+	<Cell title="Range selection" on:click={() => (visible8 = true)} />
			
 
				+	<Calendar bind:visible={visible8} mode="range" />
			
 
				+
			
 
				+	<Cell title="Starting from Sunday" on:click={() => (visible2 = true)} />
			
 
				+	<Calendar bind:visible={visible2} startSunday />
			
 
				+
			
 
				+	<Cell title="Weekend text marking red" on:click={() => (visible3 = true)} />
			
 
				+	<Calendar bind:visible={visible3} weekendRed />
			
 
				+
			
 
				+	<Cell title="No card style but add watermark" on:click={() => (visible4 = true)} />
			
 
				+	<Calendar bind:visible={visible4} monthCard={false} monthMark />
			
 
				+
			
 
				+	<Cell title="Higher" on:click={() => (visible5 = true)} />
			
 
				+	<Calendar bind:visible={visible5} height={60} />
			
 
				+
			
 
				+	<Cell title="Customize the date of display information" on:click={() => (visible6 = true)} />
			
 
				+	<Calendar bind:visible={visible6} {infoDates} />
			
 
				+
			
 
				+	<Cell title="Do not round the corner" on:click={() => (visible9 = true)} />
			
 
				+	<Calendar bind:visible={visible9} mode="range" radius="none" />
			
 
				+
			
 
				+	<Cell title="Increase the corner" on:click={() => (visible10 = true)} />
			
 
				+	<Calendar bind:visible={visible10} mode="range" radius="2xl" />
			
 
				+
			
 
				+	<Cell title="Turn off the animation when rolling" on:click={() => (visible18 = true)} />
			
 
				+	<Calendar bind:visible={visible18} useAnimation={false} />
			
 
				+
			
 
				+	<Cell title="Configure confirmation button style" on:click={() => (visible11 = true)} />
			
 
				+	<Calendar bind:visible={visible11} button={{ radius: 'full' }} />
			
 
				+
			
 
				+	<Cell title="Top rounded corner" on:click={() => (visible19 = true)} />
			
 
				+	<Calendar bind:visible={visible19} popup={{ radius: 'xl' }} />
			
 
				+
			
 
				+	<Cell title="Definition start and end month" on:click={() => (visible12 = true)} />
			
 
				+	<Calendar bind:visible={visible12} startMonth="202101" endMonth="202106" />
			
 
				+
			
 
				+	<Cell title="Customize the unsalented date" on:click={() => (visible13 = true)} />
			
 
				+	<Calendar bind:visible={visible13} {disabledDates} mode="range" />
			
 
				+
			
 
				+	<Cell title="No showed days have been displayed" on:click={() => (visible14 = true)} />
			
 
				+	<Calendar bind:visible={visible14} mode="range" showSelectedDay={false} />
			
 
				+
			
 
				+	<Cell title="Customized initial display month" subTitle="Third month before the current month" on:click={() => (visible15 = true)} />
			
 
				+	<Calendar bind:visible={visible15} {initMonth} />
			
 
				+
			
 
				+	<Cell title="Show some fast selection items" on:click={() => (visible16 = true)} />
			
 
				+	<Calendar bind:visible={visible16} mode="range" {quickSelects} />
			
 
				+
			
 
				+	<Cell title="Quickly choose to include that day" on:click={() => (visible23 = true)} />
			
 
				+	<Calendar bind:visible={visible23} mode="range" quickSelects={quickSelectsDay} includeToday />
			
 
				+
			
 
				+	<Cell title="Select this week from Sunday" on:click={() => (visible17 = true)} />
			
 
				+	<Calendar bind:visible={visible17} mode="range" startSunday quickSelects={['week']} />
			
 
				+
			
 
				+	<div class="px-4">
			
 
				+		{#if selectedDates.length}
			
 
				+			The following is the following total {selectedDates.length} day:
			
 
				+		{:else}
			
 
				+			<div>Please select the date</div>
			
 
				+		{/if}
			
 
				+	</div>
			
 
				+	<div class="grid grid-cols-4 gap-2 p-2 text-primary dark:text-dark">
			
 
				+		{#each selectedDates as item}
			
 
				+			<div class="text-center">{item}</div>
			
 
				+		{/each}
			
 
				+	</div>
			
 
				+	<Cell title="Get the selection date of returning" on:click={() => (visible20 = true)} />
			
 
				+	<Calendar bind:visible={visible20} mode="range" on:confirm={getSelectedDatesFunc} />
			
 
				+
			
 
				+	<div class="px-4">
			
 
				+		{#if selectedFormatDates.length}
			
 
				+			The following is the following total {selectedFormatDates.length} day:
			
 
				+		{:else}
			
 
				+			<div>Please select the date</div>
			
 
				+		{/if}
			
 
				+	</div>
			
 
				+	<div class="grid grid-cols-3 gap-2 p-2 text-primary dark:text-dark text-sm">
			
 
				+		{#each selectedFormatDates as item}
			
 
				+			<div class="text-center">{item}</div>
			
 
				+		{/each}
			
 
				+	</div>
			
 
				+	<Cell title="Customized date format" on:click={() => (visible21 = true)} />
			
 
				+	<Calendar bind:visible={visible21} mode="range" outFormat="M/D/Y" on:confirm={getSelectedFormatDatesFunc} />
			
 
				+
			
 
				+	<Cell title="Turn off today's highlight display" on:click={() => (visible22 = true)} />
			
 
				+	<Calendar bind:visible={visible22} highlightToday={false} />
			
 
				 </div>
			
--- a/demo/src/pages/cell/CellDemo.svelte
+++ b/demo/src/pages/cell/CellDemo.svelte
@@ -1,109 +1,109 @@
 
				 <!-- Cell Demo -->
			
 
				 <script>
			
 
				-    import { Cell, CellGroup, Toast } from 'stdf';
			
 
				+	import { Cell, CellGroup, Toast } from 'stdf';
			
 
				 
			
 
				-    let visible = false;
			
 
				+	let visible = false;
			
 
				 </script>
			
 
				 
			
 
				 <div class="flex flex-col space-y-8 py-8">
			
 
				-    <div>
			
 
				-        <Cell title="基础用法" />
			
 
				-        <Cell title="右侧有详情" detail="归零者" />
			
 
				-        <Cell title="详情使用 Slot" detail="slot">
			
 
				-            <span slot="detail" class="text-primary dark:text-dark text-xs">我是插槽内容</span>
			
 
				-        </Cell>
			
 
				-        <Cell title="右侧无箭头" right="none" />
			
 
				-        <Cell title="点击事件" detail="请点击我" on:click={() => (visible = true)} />
			
 
				-        <Toast bind:visible message="你戳到我了！" />
			
 
				-        <Cell title="右侧有详情无箭头" detail="归零者" right="none" />
			
 
				-        <Cell title="右侧开关（点击整行皆可触发开关）" right={{ type: 'switch' }} />
			
 
				-        <Cell title="开关带详情" detail="解释一下" right={{ type: 'switch' }} />
			
 
				-        <Cell title="开关带文字" right={{ type: 'switch', switch: { inside: ['😭', '😄'] } }} />
			
 
				-        <Cell title="开关全圆角" right={{ type: 'switch', switch: { radius: 'full' } }} />
			
 
				-        <Cell title="左侧使用 Icon 组件" left={{ name: 'ri-bank-line', size: 20, theme: true, top: -2 }} />
			
 
				-        <Cell title="右侧使用 Icon 组件" right={{ type: 'icon', name: 'ri-battery-charge-line', size: 20, theme: true }} />
			
 
				-        <Cell title="左侧自定义图片" left="slot">
			
 
				-            <div slot="left" class="w-6 h-6 mr-1">
			
 
				-                <img class="w-auto" src="/assets/images/icon_颁奖.png" alt="" />
			
 
				-            </div>
			
 
				-        </Cell>
			
 
				-        <Cell title="左右都自定义图片" left="slot" right="slot">
			
 
				-            <div slot="left" class="w-6 h-6 mr-1">
			
 
				-                <img class="w-auto" src="/assets/images/icon_评价.png" alt="" />
			
 
				-            </div>
			
 
				-            <div slot="right" class="w-6 h-6 mr-1">
			
 
				-                <img class="w-auto" src="/assets/images/icon_美食.png" alt="" />
			
 
				-            </div>
			
 
				-        </Cell>
			
 
				-        <Cell title="来张大点的图" left="slot">
			
 
				-            <div slot="left" class="w-10 h-10 mr-1">
			
 
				-                <img class="w-auto" src="/assets/images/icon_会员.png" alt="" />
			
 
				-            </div>
			
 
				-        </Cell>
			
 
				-        <Cell title="左侧有次级标题" subTitle="我是次，但我不次" />
			
 
				-        <Cell title="有次级标题和右侧详情" subTitle="我是次，但我不次" detail="归零者" />
			
 
				-        <Cell title="右侧有次级信息" detail="归零者" info="重启者" />
			
 
				-        <Cell title="左右侧都有次级内容" subTitle="我是次，但我不次" detail="归零者" info="重启者" />
			
 
				-        <Cell title="左右侧都有次级内容" subTitle="我是次，但我不次" detail="再来个箭头" info="重启者" />
			
 
				-        <Cell
			
 
				-            title="右右侧都有次级内容"
			
 
				-            subTitle="左侧再来个 Icon"
			
 
				-            detail="再来个箭头"
			
 
				-            info="重启者"
			
 
				-            left={{ name: 'ri-shopping-basket-line', theme: true }}
			
 
				-        />
			
 
				-        <Cell title="图片什么也来吧" left="slot" subTitle="左侧自定义图片" detail="右侧箭头" info="底部无分割线">
			
 
				-            <div slot="left" class="w-10 h-10 mr-1">
			
 
				-                <img class="w-auto" src="/assets/images/icon_火车票.png" alt="" />
			
 
				-            </div>
			
 
				-        </Cell>
			
 
				-        <Cell
			
 
				-            title="标题超长长长长长长长长长长长长长长长长长长长，自动换行。"
			
 
				-            subTitle="我这个次级标题也很长长长长长长长长长长长长长长长长长长长长长长长长长长。"
			
 
				-        />
			
 
				-        <Cell
			
 
				-            title="左侧自定义大图片，标题超长，自动换行。其余的搭配自己去尝试吧。"
			
 
				-            subTitle="我这个次级标题也很...哦不长了。"
			
 
				-            left="slot"
			
 
				-            line={false}
			
 
				-        >
			
 
				-            <div slot="left" class="w-28 h-6 mr-1">
			
 
				-                <img class="w-auto" src="/assets/images/icon_外卖.png" alt="" />
			
 
				-            </div>
			
 
				-        </Cell>
			
 
				-    </div>
			
 
				+	<div>
			
 
				+		<Cell title="基础用法" />
			
 
				+		<Cell title="右侧有详情" detail="归零者" />
			
 
				+		<Cell title="详情使用 Slot" detail="slot">
			
 
				+			<span slot="detail" class="text-primary dark:text-dark text-xs">我是插槽内容</span>
			
 
				+		</Cell>
			
 
				+		<Cell title="右侧无箭头" right="none" />
			
 
				+		<Cell title="点击事件" detail="请点击我" on:click={() => (visible = true)} />
			
 
				+		<Toast bind:visible message="你戳到我了！" />
			
 
				+		<Cell title="右侧有详情无箭头" detail="归零者" right="none" />
			
 
				+		<Cell title="右侧开关（点击整行皆可触发开关）" right={{ type: 'switch' }} />
			
 
				+		<Cell title="开关带详情" detail="解释一下" right={{ type: 'switch' }} />
			
 
				+		<Cell title="开关带文字" right={{ type: 'switch', switch: { inside: ['😭', '😄'] } }} />
			
 
				+		<Cell title="开关全圆角" right={{ type: 'switch', switch: { radius: 'full' } }} />
			
 
				+		<Cell title="左侧使用 Icon 组件" left={{ name: 'ri-bank-line', size: 20, theme: true, top: -2 }} />
			
 
				+		<Cell title="右侧使用 Icon 组件" right={{ type: 'icon', name: 'ri-battery-charge-line', size: 20, theme: true }} />
			
 
				+		<Cell title="左侧自定义图片" left="slot">
			
 
				+			<div slot="left" class="w-6 h-6 mr-1">
			
 
				+				<img class="w-auto" src="/assets/images/icon_颁奖.png" alt="" />
			
 
				+			</div>
			
 
				+		</Cell>
			
 
				+		<Cell title="左右都自定义图片" left="slot" right="slot">
			
 
				+			<div slot="left" class="w-6 h-6 mr-1">
			
 
				+				<img class="w-auto" src="/assets/images/icon_评价.png" alt="" />
			
 
				+			</div>
			
 
				+			<div slot="right" class="w-6 h-6 mr-1">
			
 
				+				<img class="w-auto" src="/assets/images/icon_美食.png" alt="" />
			
 
				+			</div>
			
 
				+		</Cell>
			
 
				+		<Cell title="来张大点的图" left="slot">
			
 
				+			<div slot="left" class="w-10 h-10 mr-1">
			
 
				+				<img class="w-auto" src="/assets/images/icon_会员.png" alt="" />
			
 
				+			</div>
			
 
				+		</Cell>
			
 
				+		<Cell title="左侧有次级标题" subTitle="我是次，但我不次" />
			
 
				+		<Cell title="有次级标题和右侧详情" subTitle="我是次，但我不次" detail="归零者" />
			
 
				+		<Cell title="右侧有次级信息" detail="归零者" info="重启者" />
			
 
				+		<Cell title="左右侧都有次级内容" subTitle="我是次，但我不次" detail="归零者" info="重启者" />
			
 
				+		<Cell title="左右侧都有次级内容" subTitle="我是次，但我不次" detail="再来个箭头" info="重启者" />
			
 
				+		<Cell
			
 
				+			title="右右侧都有次级内容"
			
 
				+			subTitle="左侧再来个 Icon"
			
 
				+			detail="再来个箭头"
			
 
				+			info="重启者"
			
 
				+			left={{ name: 'ri-shopping-basket-line', theme: true }}
			
 
				+		/>
			
 
				+		<Cell title="图片什么也来吧" left="slot" subTitle="左侧自定义图片" detail="右侧箭头" info="底部无分割线">
			
 
				+			<div slot="left" class="w-10 h-10 mr-1">
			
 
				+				<img class="w-auto" src="/assets/images/icon_火车票.png" alt="" />
			
 
				+			</div>
			
 
				+		</Cell>
			
 
				+		<Cell
			
 
				+			title="标题超长长长长长长长长长长长长长长长长长长长，自动换行。"
			
 
				+			subTitle="我这个次级标题也很长长长长长长长长长长长长长长长长长长长长长长长长长长。"
			
 
				+		/>
			
 
				+		<Cell
			
 
				+			title="左侧自定义大图片，标题超长，自动换行。其余的搭配自己去尝试吧。"
			
 
				+			subTitle="我这个次级标题也很...哦不长了。"
			
 
				+			left="slot"
			
 
				+			line={false}
			
 
				+		>
			
 
				+			<div slot="left" class="w-28 h-6 mr-1">
			
 
				+				<img class="w-auto" src="/assets/images/icon_外卖.png" alt="" />
			
 
				+			</div>
			
 
				+		</Cell>
			
 
				+	</div>
			
 
				 
			
 
				-    <CellGroup>
			
 
				-        <Cell title="组合使用" mx="0" my="0" shadow="none" line radius="none" />
			
 
				-        <Cell title="组合使用" mx="0" my="0" shadow="none" radius="none" />
			
 
				-    </CellGroup>
			
 
				-    <CellGroup mx="0" radius="none">
			
 
				-        <Cell title="组合使用" detail="无横向间距" mx="0" my="0" shadow="none" line radius="none" />
			
 
				-        <Cell title="组合使用" detail="无圆角" mx="0" my="0" shadow="none" radius="none" />
			
 
				-    </CellGroup>
			
 
				-    <CellGroup shadow="xl" radius="2xl">
			
 
				-        <Cell title="组合使用" detail="加大投影" mx="0" my="0" shadow="none" line radius="none" />
			
 
				-        <Cell title="组合使用" detail="加大圆角" mx="0" my="0" shadow="none" radius="none" />
			
 
				-    </CellGroup>
			
 
				+	<CellGroup>
			
 
				+		<Cell title="组合使用" mx="0" my="0" shadow="none" line radius="none" />
			
 
				+		<Cell title="组合使用" mx="0" my="0" shadow="none" radius="none" />
			
 
				+	</CellGroup>
			
 
				+	<CellGroup mx="0" radius="none">
			
 
				+		<Cell title="组合使用" detail="无横向间距" mx="0" my="0" shadow="none" line radius="none" />
			
 
				+		<Cell title="组合使用" detail="无圆角" mx="0" my="0" shadow="none" radius="none" />
			
 
				+	</CellGroup>
			
 
				+	<CellGroup shadow="xl" radius="2xl">
			
 
				+		<Cell title="组合使用" detail="加大投影" mx="0" my="0" shadow="none" line radius="none" />
			
 
				+		<Cell title="组合使用" detail="加大圆角" mx="0" my="0" shadow="none" radius="none" />
			
 
				+	</CellGroup>
			
 
				 
			
 
				-    <div>
			
 
				-        <Cell title="左右无间距" mx="0" radius="none" />
			
 
				-        <Cell title="无圆角" radius="none" />
			
 
				-        <Cell title="基础圆角" radius="base" />
			
 
				-        <Cell title="中等圆角" radius="md" />
			
 
				-        <Cell title="大圆角" radius="lg" />
			
 
				-        <Cell title="加大圆角" radius="xl" />
			
 
				-        <Cell title="更大圆角" radius="2xl" />
			
 
				-        <Cell title="全圆角" radius="full" />
			
 
				-        <Cell title="加大投影" shadow="lg" />
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <Cell title="自定义文字颜色" injClass="text-primary dark:text-dark" />
			
 
				-        <Cell title="自定义背景颜色" injClass="!bg-purple/20 active:!bg-purple/10" line={false} />
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <Cell love title="关爱版" />
			
 
				-        <Cell love title="关爱版" detail="关爱版" />
			
 
				-        <Cell love title="关爱版" left={{ name: 'ri-hand-heart-line', theme: true }} />
			
 
				-    </div>
			
 
				+	<div>
			
 
				+		<Cell title="左右无间距" mx="0" radius="none" />
			
 
				+		<Cell title="无圆角" radius="none" />
			
 
				+		<Cell title="基础圆角" radius="base" />
			
 
				+		<Cell title="中等圆角" radius="md" />
			
 
				+		<Cell title="大圆角" radius="lg" />
			
 
				+		<Cell title="加大圆角" radius="xl" />
			
 
				+		<Cell title="更大圆角" radius="2xl" />
			
 
				+		<Cell title="全圆角" radius="full" />
			
 
				+		<Cell title="加大投影" shadow="lg" />
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<Cell title="自定义文字颜色" injClass="text-primary dark:text-dark" />
			
 
				+		<Cell title="自定义背景颜色" injClass="!bg-purple/20 active:!bg-purple/10" line={false} />
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<Cell love title="关爱版" />
			
 
				+		<Cell love title="关爱版" detail="关爱版" />
			
 
				+		<Cell love title="关爱版" left={{ name: 'ri-hand-heart-line', theme: true }} />
			
 
				+	</div>
			
 
				 </div>
			
--- a/demo/src/pages/cell/CellDemo_en.svelte
+++ b/demo/src/pages/cell/CellDemo_en.svelte
@@ -1,109 +1,125 @@
 
				 <!-- Cell Demo -->
			
 
				 <script>
			
 
				-    import { Cell, CellGroup, Toast } from 'stdf';
			
 
				+	import { Cell, CellGroup, Toast } from 'stdf';
			
 
				 
			
 
				-    let visible = false;
			
 
				+	let visible = false;
			
 
				 </script>
			
 
				 
			
 
				 <div class="flex flex-col space-y-8 py-8">
			
 
				-    <div>
			
 
				-        <Cell title="Basic usage" />
			
 
				-        <Cell title="There are details on the right are details on the right" detail="Zero" />
			
 
				-        <Cell title="Use for details Slot" detail="slot">
			
 
				-            <span slot="detail" class="text-primary dark:text-dark text-xs">I am a slot content</span>
			
 
				-        </Cell>
			
 
				-        <Cell title="There is no arrow on the right" right="none" />
			
 
				-        <Cell title="Click event" detail="Please click me" on:click={() => (visible = true)} />
			
 
				-        <Toast bind:visible message="You poke to me!" />
			
 
				-        <Cell title="There are details on the right without arrows" detail="Zero" right="none" />
			
 
				-        <Cell title="The right switch (click the whole line to trigger the switch)" right={{ type: 'switch' }} />
			
 
				-        <Cell title="Switch with details" detail="explain" right={{ type: 'switch' }} />
			
 
				-        <Cell title="Switch with text" right={{ type: 'switch', switch: { inside: ['😭', '😄'] } }} />
			
 
				-        <Cell title="Switch full round corner" right={{ type: 'switch', switch: { radius: 'full' } }} />
			
 
				-        <Cell title="Use on the left Icon" left={{ name: 'ri-bank-line', size: 20, theme: true, top: -2 }} />
			
 
				-        <Cell title="Use on the right side Icon" right={{ type: 'icon', name: 'ri-battery-charge-line', size: 20, theme: true }} />
			
 
				-        <Cell title="Left custom picture" left="slot">
			
 
				-            <div slot="left" class="w-6 h-6 mr-1">
			
 
				-                <img class="w-auto" src="/assets/images/icon_颁奖.png" alt="" />
			
 
				-            </div>
			
 
				-        </Cell>
			
 
				-        <Cell title="Custom pictures are all left and right" left="slot" right="slot">
			
 
				-            <div slot="left" class="w-6 h-6 mr-1">
			
 
				-                <img class="w-auto" src="/assets/images/icon_评价.png" alt="" />
			
 
				-            </div>
			
 
				-            <div slot="right" class="w-6 h-6 mr-1">
			
 
				-                <img class="w-auto" src="/assets/images/icon_美食.png" alt="" />
			
 
				-            </div>
			
 
				-        </Cell>
			
 
				-        <Cell title="Come to a big picture" left="slot">
			
 
				-            <div slot="left" class="w-10 h-10 mr-1">
			
 
				-                <img class="w-auto" src="/assets/images/icon_会员.png" alt="" />
			
 
				-            </div>
			
 
				-        </Cell>
			
 
				-        <Cell title="There is a secondary title on the left" subTitle="I am, but I am not second" />
			
 
				-        <Cell title="There are secondary title and right details" subTitle="I am, but I am not second" detail="Zero" />
			
 
				-        <Cell title="There is secondary information on the right" detail="Zero" info="Restart" />
			
 
				-        <Cell title="There are secondary content on the left and right sides" subTitle="I am, but I am not second" detail="Zero" info="Restart" />
			
 
				-        <Cell title="There are secondary content on the left and right sides" subTitle="I am, but I am not second" detail="Come again" info="Restart" />
			
 
				-        <Cell
			
 
				-            title="There are secondary content on the right and right"
			
 
				-            subTitle="Come again on the left Icon"
			
 
				-            detail="Come again"
			
 
				-            info="Restart"
			
 
				-            left={{ name: 'ri-shopping-basket-line', theme: true }}
			
 
				-        />
			
 
				-        <Cell title="Come on the picture too" left="slot" subTitle="Left custom picture" detail="Right arrow" info="There is no segmentation line at the bottom">
			
 
				-            <div slot="left" class="w-10 h-10 mr-1">
			
 
				-                <img class="w-auto" src="/assets/images/icon_火车票.png" alt="" />
			
 
				-            </div>
			
 
				-        </Cell>
			
 
				-        <Cell
			
 
				-            title="The title is long, long, long, long, long, long, long, long, long, long, long, long, long, long, and long, and automatically changed."
			
 
				-            subTitle="My secondary title is also very long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long."
			
 
				-        />
			
 
				-        <Cell
			
 
				-            title="The big picture on the left is a big picture, the title is super long, and it is automatically changed. Try the rest of the match."
			
 
				-            subTitle="My secondary title is also very good...Oh not long."
			
 
				-            left="slot"
			
 
				-            line={false}
			
 
				-        >
			
 
				-            <div slot="left" class="w-28 h-6 mr-1">
			
 
				-                <img class="w-auto" src="/assets/images/icon_外卖.png" alt="" />
			
 
				-            </div>
			
 
				-        </Cell>
			
 
				-    </div>
			
 
				+	<div>
			
 
				+		<Cell title="Basic usage" />
			
 
				+		<Cell title="There are details on the right are details on the right" detail="Zero" />
			
 
				+		<Cell title="Use for details Slot" detail="slot">
			
 
				+			<span slot="detail" class="text-primary dark:text-dark text-xs">I am a slot content</span>
			
 
				+		</Cell>
			
 
				+		<Cell title="There is no arrow on the right" right="none" />
			
 
				+		<Cell title="Click event" detail="Please click me" on:click={() => (visible = true)} />
			
 
				+		<Toast bind:visible message="You poke to me!" />
			
 
				+		<Cell title="There are details on the right without arrows" detail="Zero" right="none" />
			
 
				+		<Cell title="The right switch (click the whole line to trigger the switch)" right={{ type: 'switch' }} />
			
 
				+		<Cell title="Switch with details" detail="explain" right={{ type: 'switch' }} />
			
 
				+		<Cell title="Switch with text" right={{ type: 'switch', switch: { inside: ['😭', '😄'] } }} />
			
 
				+		<Cell title="Switch full round corner" right={{ type: 'switch', switch: { radius: 'full' } }} />
			
 
				+		<Cell title="Use on the left Icon" left={{ name: 'ri-bank-line', size: 20, theme: true, top: -2 }} />
			
 
				+		<Cell title="Use on the right side Icon" right={{ type: 'icon', name: 'ri-battery-charge-line', size: 20, theme: true }} />
			
 
				+		<Cell title="Left custom picture" left="slot">
			
 
				+			<div slot="left" class="w-6 h-6 mr-1">
			
 
				+				<img class="w-auto" src="/assets/images/icon_颁奖.png" alt="" />
			
 
				+			</div>
			
 
				+		</Cell>
			
 
				+		<Cell title="Custom pictures are all left and right" left="slot" right="slot">
			
 
				+			<div slot="left" class="w-6 h-6 mr-1">
			
 
				+				<img class="w-auto" src="/assets/images/icon_评价.png" alt="" />
			
 
				+			</div>
			
 
				+			<div slot="right" class="w-6 h-6 mr-1">
			
 
				+				<img class="w-auto" src="/assets/images/icon_美食.png" alt="" />
			
 
				+			</div>
			
 
				+		</Cell>
			
 
				+		<Cell title="Come to a big picture" left="slot">
			
 
				+			<div slot="left" class="w-10 h-10 mr-1">
			
 
				+				<img class="w-auto" src="/assets/images/icon_会员.png" alt="" />
			
 
				+			</div>
			
 
				+		</Cell>
			
 
				+		<Cell title="There is a secondary title on the left" subTitle="I am, but I am not second" />
			
 
				+		<Cell title="There are secondary title and right details" subTitle="I am, but I am not second" detail="Zero" />
			
 
				+		<Cell title="There is secondary information on the right" detail="Zero" info="Restart" />
			
 
				+		<Cell
			
 
				+			title="There are secondary content on the left and right sides"
			
 
				+			subTitle="I am, but I am not second"
			
 
				+			detail="Zero"
			
 
				+			info="Restart"
			
 
				+		/>
			
 
				+		<Cell
			
 
				+			title="There are secondary content on the left and right sides"
			
 
				+			subTitle="I am, but I am not second"
			
 
				+			detail="Come again"
			
 
				+			info="Restart"
			
 
				+		/>
			
 
				+		<Cell
			
 
				+			title="There are secondary content on the right and right"
			
 
				+			subTitle="Come again on the left Icon"
			
 
				+			detail="Come again"
			
 
				+			info="Restart"
			
 
				+			left={{ name: 'ri-shopping-basket-line', theme: true }}
			
 
				+		/>
			
 
				+		<Cell
			
 
				+			title="Come on the picture too"
			
 
				+			left="slot"
			
 
				+			subTitle="Left custom picture"
			
 
				+			detail="Right arrow"
			
 
				+			info="There is no segmentation line at the bottom"
			
 
				+		>
			
 
				+			<div slot="left" class="w-10 h-10 mr-1">
			
 
				+				<img class="w-auto" src="/assets/images/icon_火车票.png" alt="" />
			
 
				+			</div>
			
 
				+		</Cell>
			
 
				+		<Cell
			
 
				+			title="The title is long, long, long, long, long, long, long, long, long, long, long, long, long, long, and long, and automatically changed."
			
 
				+			subTitle="My secondary title is also very long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long."
			
 
				+		/>
			
 
				+		<Cell
			
 
				+			title="The big picture on the left is a big picture, the title is super long, and it is automatically changed. Try the rest of the match."
			
 
				+			subTitle="My secondary title is also very good...Oh not long."
			
 
				+			left="slot"
			
 
				+			line={false}
			
 
				+		>
			
 
				+			<div slot="left" class="w-28 h-6 mr-1">
			
 
				+				<img class="w-auto" src="/assets/images/icon_外卖.png" alt="" />
			
 
				+			</div>
			
 
				+		</Cell>
			
 
				+	</div>
			
 
				 
			
 
				-    <CellGroup>
			
 
				-        <Cell title="Group" mx="0" my="0" shadow="none" line radius="none" />
			
 
				-        <Cell title="Group" mx="0" my="0" shadow="none" radius="none" />
			
 
				-    </CellGroup>
			
 
				-    <CellGroup mx="0" radius="none">
			
 
				-        <Cell title="Group" detail="No horizontal spacing" mx="0" my="0" shadow="none" line radius="none" />
			
 
				-        <Cell title="Group" detail="Non rounded" mx="0" my="0" shadow="none" radius="none" />
			
 
				-    </CellGroup>
			
 
				-    <CellGroup shadow="xl" radius="2xl">
			
 
				-        <Cell title="Group" detail="Increase projection" mx="0" my="0" shadow="none" line radius="none" />
			
 
				-        <Cell title="Group" detail="Increase the corner" mx="0" my="0" shadow="none" radius="none" />
			
 
				-    </CellGroup>
			
 
				+	<CellGroup>
			
 
				+		<Cell title="Group" mx="0" my="0" shadow="none" line radius="none" />
			
 
				+		<Cell title="Group" mx="0" my="0" shadow="none" radius="none" />
			
 
				+	</CellGroup>
			
 
				+	<CellGroup mx="0" radius="none">
			
 
				+		<Cell title="Group" detail="No horizontal spacing" mx="0" my="0" shadow="none" line radius="none" />
			
 
				+		<Cell title="Group" detail="Non rounded" mx="0" my="0" shadow="none" radius="none" />
			
 
				+	</CellGroup>
			
 
				+	<CellGroup shadow="xl" radius="2xl">
			
 
				+		<Cell title="Group" detail="Increase projection" mx="0" my="0" shadow="none" line radius="none" />
			
 
				+		<Cell title="Group" detail="Increase the corner" mx="0" my="0" shadow="none" radius="none" />
			
 
				+	</CellGroup>
			
 
				 
			
 
				-    <div>
			
 
				-        <Cell title="Left -right distance" mx="0" radius="none" />
			
 
				-        <Cell title="Non -rounded" radius="none" />
			
 
				-        <Cell title="Basic rounded corner" radius="base" />
			
 
				-        <Cell title="Medium corner" radius="md" />
			
 
				-        <Cell title="Large rounded corner" radius="lg" />
			
 
				-        <Cell title="Increase the corner" radius="xl" />
			
 
				-        <Cell title="Larger corner" radius="2xl" />
			
 
				-        <Cell title="All -rounded corner" radius="full" />
			
 
				-        <Cell title="Increase projection" shadow="lg" />
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <Cell title="Custom text color" injClass="text-primary dark:text-dark" />
			
 
				-        <Cell title="Custom background color" injClass="!bg-purple/20 active:!bg-purple/10" line={false} />
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <Cell love title="Love version" />
			
 
				-        <Cell love title="Love version" detail="Love version" />
			
 
				-        <Cell love title="Love version" left={{ name: 'ri-hand-heart-line', theme: true }} />
			
 
				-    </div>
			
 
				+	<div>
			
 
				+		<Cell title="Left -right distance" mx="0" radius="none" />
			
 
				+		<Cell title="Non -rounded" radius="none" />
			
 
				+		<Cell title="Basic rounded corner" radius="base" />
			
 
				+		<Cell title="Medium corner" radius="md" />
			
 
				+		<Cell title="Large rounded corner" radius="lg" />
			
 
				+		<Cell title="Increase the corner" radius="xl" />
			
 
				+		<Cell title="Larger corner" radius="2xl" />
			
 
				+		<Cell title="All -rounded corner" radius="full" />
			
 
				+		<Cell title="Increase projection" shadow="lg" />
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<Cell title="Custom text color" injClass="text-primary dark:text-dark" />
			
 
				+		<Cell title="Custom background color" injClass="!bg-purple/20 active:!bg-purple/10" line={false} />
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<Cell love title="Love version" />
			
 
				+		<Cell love title="Love version" detail="Love version" />
			
 
				+		<Cell love title="Love version" left={{ name: 'ri-hand-heart-line', theme: true }} />
			
 
				+	</div>
			
 
				 </div>
			
--- a/demo/src/pages/checkbox/CheckboxDemo.svelte
+++ b/demo/src/pages/checkbox/CheckboxDemo.svelte
@@ -1,304 +1,310 @@
 
				 <!-- Checkbox Demo -->
			
 
				 <script>
			
 
				-    import { CheckboxGroup, Checkbox, Divider, Button } from 'stdf';
			
 
				-    import { onMount } from 'svelte';
			
 
				-    import { quintOut } from 'svelte/easing';
			
 
				-    import { crossfade } from 'svelte/transition';
			
 
				-    import { flip } from 'svelte/animate';
			
 
				+	import { CheckboxGroup, Checkbox, Divider, Button } from 'stdf';
			
 
				+	import { onMount } from 'svelte';
			
 
				+	import { quintOut } from 'svelte/easing';
			
 
				+	import { crossfade } from 'svelte/transition';
			
 
				+	import { flip } from 'svelte/animate';
			
 
				 
			
 
				-    const dota = [
			
 
				-        { label: '主宰', name: '奶棒人', desc: '主宰是一个近战敏捷英雄，他能够迅速切入战斗。' },
			
 
				-        { label: '白牛', name: '令狐冲', desc: '巴拉森，裂魂人是一个强大的 Gank 型的力量型近战英雄。' },
			
 
				-        { label: '光法', name: '光之守卫', desc: '伊扎洛，光之守卫，他是一个著名的辅助性智力英雄。' },
			
 
				-        { label: '猛犸', name: '马格纳斯', desc: '猛犸？为什么不 BAN 猛犸？为什么不 BAN 猛犸？' },
			
 
				-    ];
			
 
				-    let checkeds = [];
			
 
				-    const dotaFun = e => {
			
 
				-        checkeds = e.detail;
			
 
				-    };
			
 
				+	const dota = [
			
 
				+		{ label: '主宰', name: '奶棒人', desc: '主宰是一个近战敏捷英雄，他能够迅速切入战斗。' },
			
 
				+		{ label: '白牛', name: '令狐冲', desc: '巴拉森，裂魂人是一个强大的 Gank 型的力量型近战英雄。' },
			
 
				+		{ label: '光法', name: '光之守卫', desc: '伊扎洛，光之守卫，他是一个著名的辅助性智力英雄。' },
			
 
				+		{ label: '猛犸', name: '马格纳斯', desc: '猛犸？为什么不 BAN 猛犸？为什么不 BAN 猛犸？' },
			
 
				+	];
			
 
				+	let checkeds = [];
			
 
				+	const dotaFun = e => {
			
 
				+		checkeds = e.detail;
			
 
				+	};
			
 
				 
			
 
				-    const dotaImgs = ['火女', '小牛', '水人', '火枪', '斯温'];
			
 
				-    let imgCheckeds = ['火女'];
			
 
				-    const dotaImgsFun = e => {
			
 
				-        imgCheckeds = e.detail;
			
 
				-    };
			
 
				+	const dotaImgs = ['火女', '小牛', '水人', '火枪', '斯温'];
			
 
				+	let imgCheckeds = ['火女'];
			
 
				+	const dotaImgsFun = e => {
			
 
				+		imgCheckeds = e.detail;
			
 
				+	};
			
 
				 
			
 
				-    const dotaVoices = [
			
 
				-        { label: '祈求者', name: '祈求者', voices: ['“来自于伟大的奥秘。”'] },
			
 
				-        { label: '风暴之灵', name: '风暴之灵', voices: ['“喂~快醒醒，快喝点咖啡，我方上塔正遭受攻击。”'] },
			
 
				-        {
			
 
				-            label: '蝙蝠骑士',
			
 
				-            name: '蝙蝠骑士',
			
 
				-            voices: ['“哦，莉娜，当我的压寨夫人怎么样？”', '“哦，风行者，见着我你不用跑。”', '“水晶室女，你就像一个装满冰水的高脚杯。”'],
			
 
				-        },
			
 
				-        { label: '潮汐猎人', name: '潮汐猎人', voices: ['“我还能吃下一根海藻。”'] },
			
 
				-    ];
			
 
				-    let voiceCheckeds = [];
			
 
				-    const dotaVoicesFun = e => {
			
 
				-        voiceCheckeds = e.detail;
			
 
				-    };
			
 
				+	const dotaVoices = [
			
 
				+		{ label: '祈求者', name: '祈求者', voices: ['“来自于伟大的奥秘。”'] },
			
 
				+		{ label: '风暴之灵', name: '风暴之灵', voices: ['“喂~快醒醒，快喝点咖啡，我方上塔正遭受攻击。”'] },
			
 
				+		{
			
 
				+			label: '蝙蝠骑士',
			
 
				+			name: '蝙蝠骑士',
			
 
				+			voices: ['“哦，莉娜，当我的压寨夫人怎么样？”', '“哦，风行者，见着我你不用跑。”', '“水晶室女，你就像一个装满冰水的高脚杯。”'],
			
 
				+		},
			
 
				+		{ label: '潮汐猎人', name: '潮汐猎人', voices: ['“我还能吃下一根海藻。”'] },
			
 
				+	];
			
 
				+	let voiceCheckeds = [];
			
 
				+	const dotaVoicesFun = e => {
			
 
				+		voiceCheckeds = e.detail;
			
 
				+	};
			
 
				 
			
 
				-    const dotaInlines = ['火女', '小牛', '水人', '火枪', '斯温', '祈求者', '潮汐', '蝙蝠', '猛犸'];
			
 
				-    let checkInlines = ['小牛', '水人'];
			
 
				-    const dotaInlineFun = e => {
			
 
				-        checkInlines = e.detail;
			
 
				-    };
			
 
				+	const dotaInlines = ['火女', '小牛', '水人', '火枪', '斯温', '祈求者', '潮汐', '蝙蝠', '猛犸'];
			
 
				+	let checkInlines = ['小牛', '水人'];
			
 
				+	const dotaInlineFun = e => {
			
 
				+		checkInlines = e.detail;
			
 
				+	};
			
 
				 
			
 
				-    const dotaAll = ['火女', '小牛', '水人', '火枪', '斯温', '祈求者', '潮汐', '蝙蝠', '猛犸'];
			
 
				-    let checkDotas = ['火枪', '斯温'];
			
 
				-    $: noCheckDotas = dotaAll.filter(a => !checkDotas.some(b => b === a));
			
 
				-    let outControl = true;
			
 
				-    // 点击单项
			
 
				-    const dotaAllFun = e => {
			
 
				-        outControl = false;
			
 
				-        checkDotas = e.detail;
			
 
				-    };
			
 
				-    // 全选
			
 
				-    const checkAllFun = () => {
			
 
				-        outControl = true;
			
 
				-        checkDotas = dotaAll;
			
 
				-    };
			
 
				-    // 全不选
			
 
				-    const checkNoneFun = () => {
			
 
				-        outControl = true;
			
 
				-        checkDotas = [];
			
 
				-    };
			
 
				-    // 反选
			
 
				-    const checkReverseFun = () => {
			
 
				-        outControl = true;
			
 
				-        checkDotas = dotaAll.filter(a => !checkDotas.some(b => b === a));
			
 
				-    };
			
 
				+	const dotaAll = ['火女', '小牛', '水人', '火枪', '斯温', '祈求者', '潮汐', '蝙蝠', '猛犸'];
			
 
				+	let checkDotas = ['火枪', '斯温'];
			
 
				+	$: noCheckDotas = dotaAll.filter(a => !checkDotas.some(b => b === a));
			
 
				+	let outControl = true;
			
 
				+	// 点击单项
			
 
				+	const dotaAllFun = e => {
			
 
				+		outControl = false;
			
 
				+		checkDotas = e.detail;
			
 
				+	};
			
 
				+	// 全选
			
 
				+	const checkAllFun = () => {
			
 
				+		outControl = true;
			
 
				+		checkDotas = dotaAll;
			
 
				+	};
			
 
				+	// 全不选
			
 
				+	const checkNoneFun = () => {
			
 
				+		outControl = true;
			
 
				+		checkDotas = [];
			
 
				+	};
			
 
				+	// 反选
			
 
				+	const checkReverseFun = () => {
			
 
				+		outControl = true;
			
 
				+		checkDotas = dotaAll.filter(a => !checkDotas.some(b => b === a));
			
 
				+	};
			
 
				 
			
 
				-    const animates = ['火女', '小牛', '水人', '火枪', '斯温', '祈求者', '潮汐', '蝙蝠', '猛犸'];
			
 
				-    let animateNos = ['火女', '小牛', '水人', '火枪', '斯温', '祈求者'];
			
 
				-    $: animateYess = animates.filter(a => !animateNos.some(b => b === a));
			
 
				-    const checkAnimateNoFun = e => {
			
 
				-        animateNos = animateNos.filter(a => !e.detail.some(b => b === a));
			
 
				-    };
			
 
				-    const checkAnimaYesFun = e => {
			
 
				-        animateNos = animates.filter(a => !e.detail.some(b => b === a));
			
 
				-    };
			
 
				-    const [send, receive] = crossfade({
			
 
				-        duration: d => Math.sqrt(d * 150),
			
 
				-        fallback(node, params) {
			
 
				-            const style = getComputedStyle(node);
			
 
				-            const transform = style.transform === 'none' ? '' : style.transform;
			
 
				-            return {
			
 
				-                duration: 600,
			
 
				-                easing: quintOut,
			
 
				-                css: t => `
			
 
				+	const animates = ['火女', '小牛', '水人', '火枪', '斯温', '祈求者', '潮汐', '蝙蝠', '猛犸'];
			
 
				+	let animateNos = ['火女', '小牛', '水人', '火枪', '斯温', '祈求者'];
			
 
				+	$: animateYess = animates.filter(a => !animateNos.some(b => b === a));
			
 
				+	const checkAnimateNoFun = e => {
			
 
				+		animateNos = animateNos.filter(a => !e.detail.some(b => b === a));
			
 
				+	};
			
 
				+	const checkAnimaYesFun = e => {
			
 
				+		animateNos = animates.filter(a => !e.detail.some(b => b === a));
			
 
				+	};
			
 
				+	const [send, receive] = crossfade({
			
 
				+		duration: d => Math.sqrt(d * 150),
			
 
				+		fallback(node) {
			
 
				+			const style = getComputedStyle(node);
			
 
				+			const transform = style.transform === 'none' ? '' : style.transform;
			
 
				+			return {
			
 
				+				duration: 600,
			
 
				+				easing: quintOut,
			
 
				+				css: t => `
			
 
				 					transform: ${transform} scale(${t});
			
 
				 					opacity: ${t}
			
 
				 				`,
			
 
				-            };
			
 
				-        },
			
 
				-    });
			
 
				-    // 设定高度，避免页面高度变化影响点击体验。
			
 
				-    let heights = 0;
			
 
				-    let animateHeight = 0;
			
 
				-    onMount(() => {
			
 
				-        animateHeight = (heights / 6) * 9 + 32;
			
 
				-    });
			
 
				+			};
			
 
				+		},
			
 
				+	});
			
 
				+	// 设定高度，避免页面高度变化影响点击体验。
			
 
				+	let heights = 0;
			
 
				+	let animateHeight = 0;
			
 
				+	onMount(() => {
			
 
				+		animateHeight = (heights / 6) * 9 + 32;
			
 
				+	});
			
 
				 </script>
			
 
				 
			
 
				 <div class="px-4">
			
 
				-    <div class="mt-8 mb-4 font-bold text-2xl">横向排列</div>
			
 
				-    <div class="mt-6 mb-4 font-bold text-lg">简单用法</div>
			
 
				-    <CheckboxGroup layout="h">
			
 
				-        {#each dota as item}
			
 
				-            <Checkbox {checkeds} name={item.name}>{item.label}</Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-2xl">横向排列</div>
			
 
				+	<div class="mt-6 mb-4 font-bold text-lg">简单用法</div>
			
 
				+	<CheckboxGroup layout="h">
			
 
				+		{#each dota as item}
			
 
				+			<Checkbox {checkeds} name={item.name}>{item.label}</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">文字在不同位置</div>
			
 
				-    <CheckboxGroup layout="h">
			
 
				-        {#each dota as item}
			
 
				-            <Checkbox {checkeds} name={item.name} textPosition="l">{item.label}</Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				-    <Divider />
			
 
				-    <CheckboxGroup layout="h">
			
 
				-        {#each dota as item}
			
 
				-            <Checkbox {checkeds} name={item.name} textPosition="b">{item.label}</Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				-    <Divider />
			
 
				-    <CheckboxGroup layout="h">
			
 
				-        {#each dota as item}
			
 
				-            <Checkbox {checkeds} name={item.name} textPosition="t">{item.label}</Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">文字在不同位置</div>
			
 
				+	<CheckboxGroup layout="h">
			
 
				+		{#each dota as item}
			
 
				+			<Checkbox {checkeds} name={item.name} textPosition="l">{item.label}</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				+	<Divider />
			
 
				+	<CheckboxGroup layout="h">
			
 
				+		{#each dota as item}
			
 
				+			<Checkbox {checkeds} name={item.name} textPosition="b">{item.label}</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				+	<Divider />
			
 
				+	<CheckboxGroup layout="h">
			
 
				+		{#each dota as item}
			
 
				+			<Checkbox {checkeds} name={item.name} textPosition="t">{item.label}</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">自定义图标</div>
			
 
				-    <CheckboxGroup layout="h">
			
 
				-        <Checkbox checkeds={[]} icon={{ name: 'ri-checkbox-blank-circle-line' }} iconChecked={{ name: 'ri-radio-button-fill' }} name="奶棒人">主宰</Checkbox>
			
 
				-        <Checkbox checkeds={[]} icon={{ name: 'ri-checkbox-circle-line' }} iconChecked={{ name: 'ri-checkbox-circle-fill' }} name="令狐冲">白牛</Checkbox>
			
 
				-        <Checkbox checkeds={[]} icon={{ name: 'ri-checkbox-multiple-line' }} iconChecked={{ name: 'ri-checkbox-multiple-fill' }} name="光之守卫">光法</Checkbox>
			
 
				-        <Checkbox checkeds={[]} icon={{ name: 'ri-check-line' }} iconChecked={{ name: 'ri-check-fill' }} name="马格纳斯">猛犸</Checkbox>
			
 
				-    </CheckboxGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">自定义图标</div>
			
 
				+	<CheckboxGroup layout="h">
			
 
				+		<Checkbox checkeds={[]} icon={{ name: 'ri-checkbox-blank-circle-line' }} iconChecked={{ name: 'ri-radio-button-fill' }} name="奶棒人"
			
 
				+			>主宰</Checkbox
			
 
				+		>
			
 
				+		<Checkbox checkeds={[]} icon={{ name: 'ri-checkbox-circle-line' }} iconChecked={{ name: 'ri-checkbox-circle-fill' }} name="令狐冲"
			
 
				+			>白牛</Checkbox
			
 
				+		>
			
 
				+		<Checkbox checkeds={[]} icon={{ name: 'ri-checkbox-multiple-line' }} iconChecked={{ name: 'ri-checkbox-multiple-fill' }} name="光之守卫"
			
 
				+			>光法</Checkbox
			
 
				+		>
			
 
				+		<Checkbox checkeds={[]} icon={{ name: 'ri-check-line' }} iconChecked={{ name: 'ri-check-fill' }} name="马格纳斯">猛犸</Checkbox>
			
 
				+	</CheckboxGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">图片选项</div>
			
 
				-    <CheckboxGroup layout="h" on:change={dotaImgsFun}>
			
 
				-        {#each dotaImgs as dota}
			
 
				-            <Checkbox
			
 
				-                name={dota}
			
 
				-                textPosition="t"
			
 
				-                icon={{ name: 'ri-arrow-up-s-line' }}
			
 
				-                iconChecked={{ name: 'ri-arrow-up-s-fill' }}
			
 
				-                outControl
			
 
				-                checkeds={imgCheckeds}
			
 
				-            >
			
 
				-                <div class={`w-12 h-12 mb-1 rounded overflow-hidden ${imgCheckeds.includes(dota) ? 'ring-2 ring-primary dark:ring-dark' : ''}`}>
			
 
				-                    <img class="w-full h-full object-cover" src={`./assets/images/dota_${dota}.png`} alt="" />
			
 
				-                </div>
			
 
				-            </Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				-    <div class="text-sm">
			
 
				-        {imgCheckeds.length > 0 ? '已选' : '未选择任何英雄。'}
			
 
				-        <span class="text-[red]">{imgCheckeds.join(' + ')}</span>{imgCheckeds.length > 0 ? '。' : ''}
			
 
				-    </div>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">图片选项</div>
			
 
				+	<CheckboxGroup layout="h" on:change={dotaImgsFun}>
			
 
				+		{#each dotaImgs as dota}
			
 
				+			<Checkbox
			
 
				+				name={dota}
			
 
				+				textPosition="t"
			
 
				+				icon={{ name: 'ri-arrow-up-s-line' }}
			
 
				+				iconChecked={{ name: 'ri-arrow-up-s-fill' }}
			
 
				+				outControl
			
 
				+				checkeds={imgCheckeds}
			
 
				+			>
			
 
				+				<div class={`w-12 h-12 mb-1 rounded overflow-hidden ${imgCheckeds.includes(dota) ? 'ring-2 ring-primary dark:ring-dark' : ''}`}>
			
 
				+					<img class="w-full h-full object-cover" src={`./assets/images/dota_${dota}.png`} alt="" />
			
 
				+				</div>
			
 
				+			</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				+	<div class="text-sm">
			
 
				+		{imgCheckeds.length > 0 ? '已选' : '未选择任何英雄。'}
			
 
				+		<span class="text-[red]">{imgCheckeds.join(' + ')}</span>{imgCheckeds.length > 0 ? '。' : ''}
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">不用图标 && 使用 Button</div>
			
 
				-    <CheckboxGroup layout="h" on:change={dotaFun}>
			
 
				-        {#each dota as item}
			
 
				-            <Checkbox {checkeds} name={item.name} icon="none" iconChecked="none">
			
 
				-                <Button fill={checkeds.includes(item.name) ? 'base' : 'lineLight'} size="auto" injClass="px-4">{item.label}</Button>
			
 
				-            </Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">不用图标 && 使用 Button</div>
			
 
				+	<CheckboxGroup layout="h" on:change={dotaFun}>
			
 
				+		{#each dota as item}
			
 
				+			<Checkbox {checkeds} name={item.name} icon="none" iconChecked="none">
			
 
				+				<Button fill={checkeds.includes(item.name) ? 'base' : 'lineLight'} size="auto" injClass="px-4">{item.label}</Button>
			
 
				+			</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">不用图标 && 自定义选中效果</div>
			
 
				-    <CheckboxGroup layout="h" on:change={dotaFun}>
			
 
				-        {#each dota as item}
			
 
				-            <Checkbox {checkeds} name={item.name} icon="none" iconChecked="none">
			
 
				-                <div
			
 
				-                    class={`border py-0.5 px-5 text-sm rounded ${
			
 
				-                        checkeds.includes(item.name)
			
 
				-                            ? 'text-primary dark:text-dark bg-primary/10 dark:bg-dark/10'
			
 
				-                            : 'bg-gray9 dark:bg-gray4 border-gray8 dark:border-gray5 text-gray6'
			
 
				-                    }`}
			
 
				-                >
			
 
				-                    {item.label}
			
 
				-                </div>
			
 
				-            </Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">不用图标 && 自定义选中效果</div>
			
 
				+	<CheckboxGroup layout="h" on:change={dotaFun}>
			
 
				+		{#each dota as item}
			
 
				+			<Checkbox {checkeds} name={item.name} icon="none" iconChecked="none">
			
 
				+				<div
			
 
				+					class={`border py-0.5 px-5 text-sm rounded ${
			
 
				+						checkeds.includes(item.name)
			
 
				+							? 'text-primary dark:text-dark bg-primary/10 dark:bg-dark/10'
			
 
				+							: 'bg-gray9 dark:bg-gray4 border-gray8 dark:border-gray5 text-gray6'
			
 
				+					}`}
			
 
				+				>
			
 
				+					{item.label}
			
 
				+				</div>
			
 
				+			</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				 </div>
			
 
				 <Divider />
			
 
				 
			
 
				 <div class="px-4">
			
 
				-    <div class="mb-4 font-bold text-2xl">行内元素排列</div>
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">不用图标 && 行内元素排列</div>
			
 
				-    <CheckboxGroup layout="inline" wrap on:change={dotaInlineFun}>
			
 
				-        {#each dotaInlines as item}
			
 
				-            <Checkbox name={item} checkeds={checkInlines} icon="none" iconChecked="none">
			
 
				-                <div
			
 
				-                    class={`border py-0.5 px-1 m-1 text-sm rounded ${
			
 
				-                        checkInlines.includes(item)
			
 
				-                            ? 'text-primary dark:text-dark bg-primary/10 dark:bg-dark/10'
			
 
				-                            : 'bg-gray9 dark:bg-gray4 border-gray8 dark:border-gray5 text-gray6'
			
 
				-                    }`}
			
 
				-                >
			
 
				-                    {item}
			
 
				-                </div>
			
 
				-            </Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				-    <div class="text-xs mt-2">已选：{checkInlines.join('-')}</div>
			
 
				+	<div class="mb-4 font-bold text-2xl">行内元素排列</div>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">不用图标 && 行内元素排列</div>
			
 
				+	<CheckboxGroup layout="inline" wrap on:change={dotaInlineFun}>
			
 
				+		{#each dotaInlines as item}
			
 
				+			<Checkbox name={item} checkeds={checkInlines} icon="none" iconChecked="none">
			
 
				+				<div
			
 
				+					class={`border py-0.5 px-1 m-1 text-sm rounded ${
			
 
				+						checkInlines.includes(item)
			
 
				+							? 'text-primary dark:text-dark bg-primary/10 dark:bg-dark/10'
			
 
				+							: 'bg-gray9 dark:bg-gray4 border-gray8 dark:border-gray5 text-gray6'
			
 
				+					}`}
			
 
				+				>
			
 
				+					{item}
			
 
				+				</div>
			
 
				+			</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				+	<div class="text-xs mt-2">已选：{checkInlines.join('-')}</div>
			
 
				 </div>
			
 
				 <Divider />
			
 
				 
			
 
				 <div class="px-4 pb-8">
			
 
				-    <div class="mb-4 font-bold text-2xl">纵向排列</div>
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">基础用法</div>
			
 
				-    <CheckboxGroup>
			
 
				-        {#each dota as item}
			
 
				-            <Checkbox {checkeds} name={item.name}>{item.label}</Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				+	<div class="mb-4 font-bold text-2xl">纵向排列</div>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">基础用法</div>
			
 
				+	<CheckboxGroup>
			
 
				+		{#each dota as item}
			
 
				+			<Checkbox {checkeds} name={item.name}>{item.label}</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">长文字选项</div>
			
 
				-    <CheckboxGroup>
			
 
				-        {#each dota as item}
			
 
				-            <Checkbox {checkeds} name={item.name}>{item.desc}</Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">长文字选项</div>
			
 
				+	<CheckboxGroup>
			
 
				+		{#each dota as item}
			
 
				+			<Checkbox {checkeds} name={item.name}>{item.desc}</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">文字靠左</div>
			
 
				-    <CheckboxGroup>
			
 
				-        {#each dota as item, i}
			
 
				-            <Checkbox {checkeds} name={item.name} textPosition="l">
			
 
				-                {item.label}
			
 
				-                {#if i !== dota.length - 1}
			
 
				-                    <div class="h-px mt-1 bg-gray9 dark:bg-gray5"></div>
			
 
				-                {/if}
			
 
				-            </Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">文字靠左</div>
			
 
				+	<CheckboxGroup>
			
 
				+		{#each dota as item, i}
			
 
				+			<Checkbox {checkeds} name={item.name} textPosition="l">
			
 
				+				{item.label}
			
 
				+				{#if i !== dota.length - 1}
			
 
				+					<div class="h-px mt-1 bg-gray9 dark:bg-gray5"></div>
			
 
				+				{/if}
			
 
				+			</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">复杂选项 && 自定义选中效果</div>
			
 
				-    <CheckboxGroup on:change={dotaVoicesFun}>
			
 
				-        {#each dotaVoices as item, i}
			
 
				-            <Checkbox checkeds={voiceCheckeds} name={item.name}>
			
 
				-                <div class={`ml-2 ${voiceCheckeds.includes(item.name) ? 'text-primary dark:text-dark' : ''}`}>
			
 
				-                    {item.label}
			
 
				-                    {#each item.voices as voice}
			
 
				-                        <div class="text-xs">{voice}</div>
			
 
				-                    {/each}
			
 
				-                    {#if i !== dotaVoices.length - 1}
			
 
				-                        <div class="h-px mt-1 bg-gray9 dark:bg-gray5"></div>
			
 
				-                    {/if}
			
 
				-                </div>
			
 
				-            </Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">复杂选项 && 自定义选中效果</div>
			
 
				+	<CheckboxGroup on:change={dotaVoicesFun}>
			
 
				+		{#each dotaVoices as item, i}
			
 
				+			<Checkbox checkeds={voiceCheckeds} name={item.name}>
			
 
				+				<div class={`ml-2 ${voiceCheckeds.includes(item.name) ? 'text-primary dark:text-dark' : ''}`}>
			
 
				+					{item.label}
			
 
				+					{#each item.voices as voice}
			
 
				+						<div class="text-xs">{voice}</div>
			
 
				+					{/each}
			
 
				+					{#if i !== dotaVoices.length - 1}
			
 
				+						<div class="h-px mt-1 bg-gray9 dark:bg-gray5"></div>
			
 
				+					{/if}
			
 
				+				</div>
			
 
				+			</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">批量操作</div>
			
 
				-    <CheckboxGroup on:change={dotaAllFun}>
			
 
				-        {#each dotaAll as item}
			
 
				-            <Checkbox checkeds={checkDotas} name={item} {outControl}>{item}</Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				-    <div class="text-xs mt-2">已选：{checkDotas.join('-')}</div>
			
 
				-    <div class="text-xs mt-2">未选：{noCheckDotas.join('-')}</div>
			
 
				-    <div class="flex mt-2">
			
 
				-        <div class="flex-1">
			
 
				-            <Button fill="lineTheme" heightIn="1" on:click={checkAllFun}>全选</Button>
			
 
				-        </div>
			
 
				-        <div class="flex-1">
			
 
				-            <Button fill="lineTheme" heightIn="1" on:click={checkNoneFun}>全不选</Button>
			
 
				-        </div>
			
 
				-        <div class="flex-1">
			
 
				-            <Button fill="lineTheme" heightIn="1" on:click={checkReverseFun}>反选</Button>
			
 
				-        </div>
			
 
				-    </div>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">批量操作</div>
			
 
				+	<CheckboxGroup on:change={dotaAllFun}>
			
 
				+		{#each dotaAll as item}
			
 
				+			<Checkbox checkeds={checkDotas} name={item} {outControl}>{item}</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				+	<div class="text-xs mt-2">已选：{checkDotas.join('-')}</div>
			
 
				+	<div class="text-xs mt-2">未选：{noCheckDotas.join('-')}</div>
			
 
				+	<div class="flex mt-2">
			
 
				+		<div class="flex-1">
			
 
				+			<Button fill="lineTheme" heightIn="1" on:click={checkAllFun}>全选</Button>
			
 
				+		</div>
			
 
				+		<div class="flex-1">
			
 
				+			<Button fill="lineTheme" heightIn="1" on:click={checkNoneFun}>全不选</Button>
			
 
				+		</div>
			
 
				+		<div class="flex-1">
			
 
				+			<Button fill="lineTheme" heightIn="1" on:click={checkReverseFun}>反选</Button>
			
 
				+		</div>
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">带动画</div>
			
 
				-    <div class="flex" style="height: {animateHeight}px;">
			
 
				-        <div class="flex-1">
			
 
				-            <div class="pb-2">未选</div>
			
 
				-            <div bind:clientHeight={heights}>
			
 
				-                <CheckboxGroup on:change={checkAnimateNoFun}>
			
 
				-                    {#each animateNos as item, index (item)}
			
 
				-                        <div in:receive={{ key: item }} out:send={{ key: item }} animate:flip={{ duration: 600 }}>
			
 
				-                            <Checkbox name={item} outControl checkeds={[]}>{item}</Checkbox>
			
 
				-                        </div>
			
 
				-                    {/each}
			
 
				-                </CheckboxGroup>
			
 
				-            </div>
			
 
				-        </div>
			
 
				-        <div class="flex-1">
			
 
				-            <div class="pb-2">已选</div>
			
 
				-            <CheckboxGroup on:change={checkAnimaYesFun}>
			
 
				-                {#each animateYess as item, index (item)}
			
 
				-                    <div in:receive={{ key: item }} out:send={{ key: item }} animate:flip={{ duration: 600 }}>
			
 
				-                        <Checkbox outControl checkeds={animateYess} name={item}>
			
 
				-                            {item}
			
 
				-                        </Checkbox>
			
 
				-                    </div>
			
 
				-                {/each}
			
 
				-            </CheckboxGroup>
			
 
				-        </div>
			
 
				-    </div>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">带动画</div>
			
 
				+	<div class="flex" style="height: {animateHeight}px;">
			
 
				+		<div class="flex-1">
			
 
				+			<div class="pb-2">未选</div>
			
 
				+			<div bind:clientHeight={heights}>
			
 
				+				<CheckboxGroup on:change={checkAnimateNoFun}>
			
 
				+					{#each animateNos as item (item)}
			
 
				+						<div in:receive={{ key: item }} out:send={{ key: item }} animate:flip={{ duration: 600 }}>
			
 
				+							<Checkbox name={item} outControl checkeds={[]}>{item}</Checkbox>
			
 
				+						</div>
			
 
				+					{/each}
			
 
				+				</CheckboxGroup>
			
 
				+			</div>
			
 
				+		</div>
			
 
				+		<div class="flex-1">
			
 
				+			<div class="pb-2">已选</div>
			
 
				+			<CheckboxGroup on:change={checkAnimaYesFun}>
			
 
				+				{#each animateYess as item (item)}
			
 
				+					<div in:receive={{ key: item }} out:send={{ key: item }} animate:flip={{ duration: 600 }}>
			
 
				+						<Checkbox outControl checkeds={animateYess} name={item}>
			
 
				+							{item}
			
 
				+						</Checkbox>
			
 
				+					</div>
			
 
				+				{/each}
			
 
				+			</CheckboxGroup>
			
 
				+		</div>
			
 
				+	</div>
			
 
				 </div>
			
--- a/demo/src/pages/checkbox/CheckboxDemo_en.svelte
+++ b/demo/src/pages/checkbox/CheckboxDemo_en.svelte
@@ -1,328 +1,318 @@
 
				 <!-- Checkbox Demo -->
			
 
				 <script>
			
 
				-    import { CheckboxGroup, Checkbox, Divider, Button } from 'stdf';
			
 
				-    import { onMount } from 'svelte';
			
 
				-    import { quintOut } from 'svelte/easing';
			
 
				-    import { crossfade } from 'svelte/transition';
			
 
				-    import { flip } from 'svelte/animate';
			
 
				+	import { CheckboxGroup, Checkbox, Divider, Button } from 'stdf';
			
 
				+	import { onMount } from 'svelte';
			
 
				+	import { quintOut } from 'svelte/easing';
			
 
				+	import { crossfade } from 'svelte/transition';
			
 
				+	import { flip } from 'svelte/animate';
			
 
				 
			
 
				-    const dota = [
			
 
				-        { label: 'Jugg', name: 'Juggernaut', desc: 'The master is a melee agile hero, and he can quickly cut into the battle.' },
			
 
				-        { label: 'SB', name: 'Spirit Breaker', desc: 'Barlason, the soul -cracked man is a powerful Gank -type melee hero.' },
			
 
				-        { label: 'Kotl', name: 'Keeper of the Light', desc: 'Izalo, Guardian of Light, he is a famous auxiliary intellectual hero.' },
			
 
				-        { label: 'Mag', name: 'Magnus', desc: 'Mighty? Why not BAN mighty? Why not BAN mighty?' },
			
 
				-    ];
			
 
				-    let checkeds = [];
			
 
				-    const dotaFun = e => {
			
 
				-        checkeds = e.detail;
			
 
				-    };
			
 
				+	const dota = [
			
 
				+		{ label: 'Jugg', name: 'Juggernaut', desc: 'The master is a melee agile hero, and he can quickly cut into the battle.' },
			
 
				+		{ label: 'SB', name: 'Spirit Breaker', desc: 'Barlason, the soul -cracked man is a powerful Gank -type melee hero.' },
			
 
				+		{ label: 'Kotl', name: 'Keeper of the Light', desc: 'Izalo, Guardian of Light, he is a famous auxiliary intellectual hero.' },
			
 
				+		{ label: 'Mag', name: 'Magnus', desc: 'Mighty? Why not BAN mighty? Why not BAN mighty?' },
			
 
				+	];
			
 
				+	let checkeds = [];
			
 
				+	const dotaFun = e => {
			
 
				+		checkeds = e.detail;
			
 
				+	};
			
 
				 
			
 
				-    const dotaImgs = ['Lina', 'ES', 'Mor', 'Sni', 'SV'];
			
 
				-    const dotaForImgs = ['火女', '小牛', '水人', '火枪', '斯温'];
			
 
				-    let imgCheckeds = ['Lina'];
			
 
				-    const dotaImgsFun = e => {
			
 
				-        imgCheckeds = e.detail;
			
 
				-    };
			
 
				+	const dotaImgs = ['Lina', 'ES', 'Mor', 'Sni', 'SV'];
			
 
				+	const dotaForImgs = ['火女', '小牛', '水人', '火枪', '斯温'];
			
 
				+	let imgCheckeds = ['Lina'];
			
 
				+	const dotaImgsFun = e => {
			
 
				+		imgCheckeds = e.detail;
			
 
				+	};
			
 
				 
			
 
				-    const dotaVoices = [
			
 
				-        { label: 'karl', name: 'karl', voices: ['"From the great mystery."'] },
			
 
				-        { label: 'Storm', name: 'Storm', voices: ['"Hey ~ Quickly wake up, drink coffee, we are attacked on the tower."'] },
			
 
				-        {
			
 
				-            label: 'Bat',
			
 
				-            name: 'Bat',
			
 
				-            voices: [
			
 
				-                '"Oh, Lina, what about Mrs. My Village?"',
			
 
				-                "'Oh, popular, you don't have to run when you see me.'",
			
 
				-                '"Crystal room woman, you are like a tall cup full of ice water."',
			
 
				-            ],
			
 
				-        },
			
 
				-        { label: 'Tide', name: 'Tide', voices: ['"I can still eat a seaweed."'] },
			
 
				-    ];
			
 
				-    let voiceCheckeds = [];
			
 
				-    const dotaVoicesFun = e => {
			
 
				-        voiceCheckeds = e.detail;
			
 
				-    };
			
 
				+	const dotaVoices = [
			
 
				+		{ label: 'karl', name: 'karl', voices: ['"From the great mystery."'] },
			
 
				+		{ label: 'Storm', name: 'Storm', voices: ['"Hey ~ Quickly wake up, drink coffee, we are attacked on the tower."'] },
			
 
				+		{
			
 
				+			label: 'Bat',
			
 
				+			name: 'Bat',
			
 
				+			voices: [
			
 
				+				'"Oh, Lina, what about Mrs. My Village?"',
			
 
				+				"'Oh, popular, you don't have to run when you see me.'",
			
 
				+				'"Crystal room woman, you are like a tall cup full of ice water."',
			
 
				+			],
			
 
				+		},
			
 
				+		{ label: 'Tide', name: 'Tide', voices: ['"I can still eat a seaweed."'] },
			
 
				+	];
			
 
				+	let voiceCheckeds = [];
			
 
				+	const dotaVoicesFun = e => {
			
 
				+		voiceCheckeds = e.detail;
			
 
				+	};
			
 
				 
			
 
				-    const dotaInlines = ['Lina', 'ES', 'Mor', 'Sni', 'SV', 'karl', 'Tide', 'Bat', 'Mag'];
			
 
				-    let checkInlines = ['ES', 'Mor'];
			
 
				-    const dotaInlineFun = e => {
			
 
				-        checkInlines = e.detail;
			
 
				-    };
			
 
				+	const dotaInlines = ['Lina', 'ES', 'Mor', 'Sni', 'SV', 'karl', 'Tide', 'Bat', 'Mag'];
			
 
				+	let checkInlines = ['ES', 'Mor'];
			
 
				+	const dotaInlineFun = e => {
			
 
				+		checkInlines = e.detail;
			
 
				+	};
			
 
				 
			
 
				-    const dotaAll = ['Lina', 'ES', 'Mor', 'Sni', 'SV', 'karl', 'Tide', 'Bat', 'Mag'];
			
 
				-    let checkDotas = ['Sni', 'SV'];
			
 
				-    $: noCheckDotas = dotaAll.filter(a => !checkDotas.some(b => b === a));
			
 
				-    let outControl = true;
			
 
				-    // Click the single item
			
 
				-    const dotaAllFun = e => {
			
 
				-        outControl = false;
			
 
				-        checkDotas = e.detail;
			
 
				-    };
			
 
				-    // select all
			
 
				-    const checkAllFun = () => {
			
 
				-        outControl = true;
			
 
				-        checkDotas = dotaAll;
			
 
				-    };
			
 
				-    // unselect all
			
 
				-    const checkNoneFun = () => {
			
 
				-        outControl = true;
			
 
				-        checkDotas = [];
			
 
				-    };
			
 
				-    // Counter -selection
			
 
				-    const checkReverseFun = () => {
			
 
				-        outControl = true;
			
 
				-        checkDotas = dotaAll.filter(a => !checkDotas.some(b => b === a));
			
 
				-    };
			
 
				+	const dotaAll = ['Lina', 'ES', 'Mor', 'Sni', 'SV', 'karl', 'Tide', 'Bat', 'Mag'];
			
 
				+	let checkDotas = ['Sni', 'SV'];
			
 
				+	$: noCheckDotas = dotaAll.filter(a => !checkDotas.some(b => b === a));
			
 
				+	let outControl = true;
			
 
				+	// Click the single item
			
 
				+	const dotaAllFun = e => {
			
 
				+		outControl = false;
			
 
				+		checkDotas = e.detail;
			
 
				+	};
			
 
				+	// select all
			
 
				+	const checkAllFun = () => {
			
 
				+		outControl = true;
			
 
				+		checkDotas = dotaAll;
			
 
				+	};
			
 
				+	// unselect all
			
 
				+	const checkNoneFun = () => {
			
 
				+		outControl = true;
			
 
				+		checkDotas = [];
			
 
				+	};
			
 
				+	// Counter -selection
			
 
				+	const checkReverseFun = () => {
			
 
				+		outControl = true;
			
 
				+		checkDotas = dotaAll.filter(a => !checkDotas.some(b => b === a));
			
 
				+	};
			
 
				 
			
 
				-    const animates = ['Lina', 'ES', 'Mor', 'Sni', 'SV', 'karl', 'Tide', 'Bat', 'Mag'];
			
 
				-    let animateNos = ['Lina', 'ES', 'Mor', 'Sni', 'SV', 'karl'];
			
 
				-    $: animateYess = animates.filter(a => !animateNos.some(b => b === a));
			
 
				-    const checkAnimateNoFun = e => {
			
 
				-        animateNos = animateNos.filter(a => !e.detail.some(b => b === a));
			
 
				-    };
			
 
				-    const checkAnimaYesFun = e => {
			
 
				-        animateNos = animates.filter(a => !e.detail.some(b => b === a));
			
 
				-    };
			
 
				-    const [send, receive] = crossfade({
			
 
				-        duration: d => Math.sqrt(d * 150),
			
 
				-        fallback(node, params) {
			
 
				-            const style = getComputedStyle(node);
			
 
				-            const transform = style.transform === 'none' ? '' : style.transform;
			
 
				-            return {
			
 
				-                duration: 600,
			
 
				-                easing: quintOut,
			
 
				-                css: t => `
			
 
				+	const animates = ['Lina', 'ES', 'Mor', 'Sni', 'SV', 'karl', 'Tide', 'Bat', 'Mag'];
			
 
				+	let animateNos = ['Lina', 'ES', 'Mor', 'Sni', 'SV', 'karl'];
			
 
				+	$: animateYess = animates.filter(a => !animateNos.some(b => b === a));
			
 
				+	const checkAnimateNoFun = e => {
			
 
				+		animateNos = animateNos.filter(a => !e.detail.some(b => b === a));
			
 
				+	};
			
 
				+	const checkAnimaYesFun = e => {
			
 
				+		animateNos = animates.filter(a => !e.detail.some(b => b === a));
			
 
				+	};
			
 
				+	const [send, receive] = crossfade({
			
 
				+		duration: d => Math.sqrt(d * 150),
			
 
				+		fallback(node) {
			
 
				+			const style = getComputedStyle(node);
			
 
				+			const transform = style.transform === 'none' ? '' : style.transform;
			
 
				+			return {
			
 
				+				duration: 600,
			
 
				+				easing: quintOut,
			
 
				+				css: t => `
			
 
				 					transform: ${transform} scale(${t});
			
 
				 					opacity: ${t}
			
 
				 				`,
			
 
				-            };
			
 
				-        },
			
 
				-    });
			
 
				-    // Set the height to avoid changes in page height and affect the click experience.
			
 
				-    let heights = 0;
			
 
				-    let animateHeight = 0;
			
 
				-    onMount(() => {
			
 
				-        animateHeight = (heights / 6) * 9 + 32;
			
 
				-    });
			
 
				+			};
			
 
				+		},
			
 
				+	});
			
 
				+	// Set the height to avoid changes in page height and affect the click experience.
			
 
				+	let heights = 0;
			
 
				+	let animateHeight = 0;
			
 
				+	onMount(() => {
			
 
				+		animateHeight = (heights / 6) * 9 + 32;
			
 
				+	});
			
 
				 </script>
			
 
				 
			
 
				-<div class="px-4  text-left">
			
 
				-    <div class="mt-8 mb-4 font-bold text-2xl">Horizontal arrangement</div>
			
 
				-    <div class="mt-6 mb-4 font-bold text-lg">Simple usage</div>
			
 
				-    <CheckboxGroup layout="h">
			
 
				-        {#each dota as item}
			
 
				-            <Checkbox {checkeds} name={item.name}>{item.label}</Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				+<div class="px-4 text-left">
			
 
				+	<div class="mt-8 mb-4 font-bold text-2xl">Horizontal arrangement</div>
			
 
				+	<div class="mt-6 mb-4 font-bold text-lg">Simple usage</div>
			
 
				+	<CheckboxGroup layout="h">
			
 
				+		{#each dota as item}
			
 
				+			<Checkbox {checkeds} name={item.name}>{item.label}</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">Text is in different positions</div>
			
 
				-    <CheckboxGroup layout="h">
			
 
				-        {#each dota as item}
			
 
				-            <Checkbox {checkeds} name={item.name} textPosition="l">{item.label}</Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				-    <Divider />
			
 
				-    <CheckboxGroup layout="h">
			
 
				-        {#each dota as item}
			
 
				-            <Checkbox {checkeds} name={item.name} textPosition="b">{item.label}</Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				-    <Divider />
			
 
				-    <CheckboxGroup layout="h">
			
 
				-        {#each dota as item}
			
 
				-            <Checkbox {checkeds} name={item.name} textPosition="t">{item.label}</Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">Text is in different positions</div>
			
 
				+	<CheckboxGroup layout="h">
			
 
				+		{#each dota as item}
			
 
				+			<Checkbox {checkeds} name={item.name} textPosition="l">{item.label}</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				+	<Divider />
			
 
				+	<CheckboxGroup layout="h">
			
 
				+		{#each dota as item}
			
 
				+			<Checkbox {checkeds} name={item.name} textPosition="b">{item.label}</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				+	<Divider />
			
 
				+	<CheckboxGroup layout="h">
			
 
				+		{#each dota as item}
			
 
				+			<Checkbox {checkeds} name={item.name} textPosition="t">{item.label}</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">Custom icon</div>
			
 
				-    <CheckboxGroup layout="h">
			
 
				-        <Checkbox
			
 
				-            checkeds={[]}
			
 
				-            icon={{ name: 'ri-checkbox-blank-circle-line' }}
			
 
				-            iconChecked={{ name: 'ri-radio-button-fill' }}
			
 
				-            name="Daemon">Jugg</Checkbox
			
 
				-        >
			
 
				-        <Checkbox
			
 
				-            checkeds={[]}
			
 
				-            icon={{ name: 'ri-checkbox-circle-line' }}
			
 
				-            iconChecked={{ name: 'ri-checkbox-circle-fill' }}
			
 
				-            name="Linghuchong">Mor</Checkbox
			
 
				-        >
			
 
				-        <Checkbox
			
 
				-            checkeds={[]}
			
 
				-            icon={{ name: 'ri-checkbox-multiple-line' }}
			
 
				-            iconChecked={{ name: 'ri-checkbox-multiple-fill' }}
			
 
				-            name="Light Light methodard">Kotl</Checkbox
			
 
				-        >
			
 
				-        <Checkbox checkeds={[]} icon={{ name: 'ri-check-line' }} iconChecked={{ name: 'ri-check-fill' }} name="Magnas">Mag</Checkbox>
			
 
				-    </CheckboxGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">Custom icon</div>
			
 
				+	<CheckboxGroup layout="h">
			
 
				+		<Checkbox checkeds={[]} icon={{ name: 'ri-checkbox-blank-circle-line' }} iconChecked={{ name: 'ri-radio-button-fill' }} name="Daemon"
			
 
				+			>Jugg</Checkbox
			
 
				+		>
			
 
				+		<Checkbox checkeds={[]} icon={{ name: 'ri-checkbox-circle-line' }} iconChecked={{ name: 'ri-checkbox-circle-fill' }} name="Linghuchong"
			
 
				+			>Mor</Checkbox
			
 
				+		>
			
 
				+		<Checkbox
			
 
				+			checkeds={[]}
			
 
				+			icon={{ name: 'ri-checkbox-multiple-line' }}
			
 
				+			iconChecked={{ name: 'ri-checkbox-multiple-fill' }}
			
 
				+			name="Light Light methodard">Kotl</Checkbox
			
 
				+		>
			
 
				+		<Checkbox checkeds={[]} icon={{ name: 'ri-check-line' }} iconChecked={{ name: 'ri-check-fill' }} name="Magnas">Mag</Checkbox>
			
 
				+	</CheckboxGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">Picture option</div>
			
 
				-    <CheckboxGroup layout="h" on:change={dotaImgsFun}>
			
 
				-        {#each dotaImgs as dota, i}
			
 
				-            <Checkbox
			
 
				-                name={dota}
			
 
				-                textPosition="t"
			
 
				-                icon={{ name: 'ri-arrow-up-s-line' }}
			
 
				-                iconChecked={{ name: 'ri-arrow-up-s-fill' }}
			
 
				-                outControl
			
 
				-                checkeds={imgCheckeds}
			
 
				-            >
			
 
				-                <div
			
 
				-                    class={`w-12 h-12 mb-1 rounded overflow-hidden ${
			
 
				-                        imgCheckeds.includes(dota) ? 'ring-2 ring-primary dark:ring-dark' : ''
			
 
				-                    }`}
			
 
				-                >
			
 
				-                    <img class="w-full h-full object-cover" src={`./assets/images/dota_${dotaForImgs[i]}.png`} alt="" />
			
 
				-                </div>
			
 
				-            </Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				-    <div class="text-sm">
			
 
				-        {imgCheckeds.length > 0 ? 'selected' : 'No hero is selected.'}
			
 
				-        <span class="text-[red]">{imgCheckeds.join(' + ')}</span>{imgCheckeds.length > 0 ? '。' : ''}
			
 
				-    </div>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">Picture option</div>
			
 
				+	<CheckboxGroup layout="h" on:change={dotaImgsFun}>
			
 
				+		{#each dotaImgs as dota, i}
			
 
				+			<Checkbox
			
 
				+				name={dota}
			
 
				+				textPosition="t"
			
 
				+				icon={{ name: 'ri-arrow-up-s-line' }}
			
 
				+				iconChecked={{ name: 'ri-arrow-up-s-fill' }}
			
 
				+				outControl
			
 
				+				checkeds={imgCheckeds}
			
 
				+			>
			
 
				+				<div class={`w-12 h-12 mb-1 rounded overflow-hidden ${imgCheckeds.includes(dota) ? 'ring-2 ring-primary dark:ring-dark' : ''}`}>
			
 
				+					<img class="w-full h-full object-cover" src={`./assets/images/dota_${dotaForImgs[i]}.png`} alt="" />
			
 
				+				</div>
			
 
				+			</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				+	<div class="text-sm">
			
 
				+		{imgCheckeds.length > 0 ? 'selected' : 'No hero is selected.'}
			
 
				+		<span class="text-[red]">{imgCheckeds.join(' + ')}</span>{imgCheckeds.length > 0 ? '。' : ''}
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">No icon && use Button</div>
			
 
				-    <CheckboxGroup layout="h" on:change={dotaFun}>
			
 
				-        {#each dota as item}
			
 
				-            <Checkbox {checkeds} name={item.name} icon="none" iconChecked="none">
			
 
				-                <Button fill={checkeds.includes(item.name) ? 'base' : 'lineLight'} size="auto" injClass="px-4">{item.label}</Button>
			
 
				-            </Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">No icon && use Button</div>
			
 
				+	<CheckboxGroup layout="h" on:change={dotaFun}>
			
 
				+		{#each dota as item}
			
 
				+			<Checkbox {checkeds} name={item.name} icon="none" iconChecked="none">
			
 
				+				<Button fill={checkeds.includes(item.name) ? 'base' : 'lineLight'} size="auto" injClass="px-4">{item.label}</Button>
			
 
				+			</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">No icon && Customized selection effect</div>
			
 
				-    <CheckboxGroup layout="h" on:change={dotaFun}>
			
 
				-        {#each dota as item}
			
 
				-            <Checkbox {checkeds} name={item.name} icon="none" iconChecked="none">
			
 
				-                <div
			
 
				-                    class={`border py-0.5 px-5 text-sm rounded ${
			
 
				-                        checkeds.includes(item.name)
			
 
				-                            ? 'text-primary dark:text-dark bg-primary/10 dark:bg-dark/10'
			
 
				-                            : 'bg-gray9 dark:bg-gray4 border-gray8 dark:border-gray5 text-gray6'
			
 
				-                    }`}
			
 
				-                >
			
 
				-                    {item.label}
			
 
				-                </div>
			
 
				-            </Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">No icon && Customized selection effect</div>
			
 
				+	<CheckboxGroup layout="h" on:change={dotaFun}>
			
 
				+		{#each dota as item}
			
 
				+			<Checkbox {checkeds} name={item.name} icon="none" iconChecked="none">
			
 
				+				<div
			
 
				+					class={`border py-0.5 px-5 text-sm rounded ${
			
 
				+						checkeds.includes(item.name)
			
 
				+							? 'text-primary dark:text-dark bg-primary/10 dark:bg-dark/10'
			
 
				+							: 'bg-gray9 dark:bg-gray4 border-gray8 dark:border-gray5 text-gray6'
			
 
				+					}`}
			
 
				+				>
			
 
				+					{item.label}
			
 
				+				</div>
			
 
				+			</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				 </div>
			
 
				 <Divider />
			
 
				 
			
 
				 <div class="px-4">
			
 
				-    <div class="mb-4 font-bold">Elemental element arrangementtal element arrangement</div>
			
 
				-    <div class="mt-8 mb-4 font-bold">No icon && Elemental element arrangement</div>
			
 
				-    <CheckboxGroup layout="inline" wrap on:change={dotaInlineFun}>
			
 
				-        {#each dotaInlines as item}
			
 
				-            <Checkbox name={item} checkeds={checkInlines} icon="none" iconChecked="none">
			
 
				-                <div
			
 
				-                    class={`border py-0.5 px-1 m-1 text-sm rounded ${
			
 
				-                        checkInlines.includes(item)
			
 
				-                            ? 'text-primary dark:text-dark bg-primary/10 dark:bg-dark/10'
			
 
				-                            : 'bg-gray9 dark:bg-gray4 border-gray8 dark:border-gray5 text-gray6'
			
 
				-                    }`}
			
 
				-                >
			
 
				-                    {item}
			
 
				-                </div>
			
 
				-            </Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				-    <div class="text-xs mt-2">selected:{checkInlines.join('-')}</div>
			
 
				+	<div class="mb-4 font-bold">Elemental element arrangementtal element arrangement</div>
			
 
				+	<div class="mt-8 mb-4 font-bold">No icon && Elemental element arrangement</div>
			
 
				+	<CheckboxGroup layout="inline" wrap on:change={dotaInlineFun}>
			
 
				+		{#each dotaInlines as item}
			
 
				+			<Checkbox name={item} checkeds={checkInlines} icon="none" iconChecked="none">
			
 
				+				<div
			
 
				+					class={`border py-0.5 px-1 m-1 text-sm rounded ${
			
 
				+						checkInlines.includes(item)
			
 
				+							? 'text-primary dark:text-dark bg-primary/10 dark:bg-dark/10'
			
 
				+							: 'bg-gray9 dark:bg-gray4 border-gray8 dark:border-gray5 text-gray6'
			
 
				+					}`}
			
 
				+				>
			
 
				+					{item}
			
 
				+				</div>
			
 
				+			</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				+	<div class="text-xs mt-2">selected:{checkInlines.join('-')}</div>
			
 
				 </div>
			
 
				 <Divider />
			
 
				 
			
 
				 <div class="px-4 pb-8">
			
 
				-    <div class="mb-4 font-bold text-2xl">Vertical arrangement</div>
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">Basic usage</div>
			
 
				-    <CheckboxGroup>
			
 
				-        {#each dota as item}
			
 
				-            <Checkbox {checkeds} name={item.name}>{item.label}</Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				+	<div class="mb-4 font-bold text-2xl">Vertical arrangement</div>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">Basic usage</div>
			
 
				+	<CheckboxGroup>
			
 
				+		{#each dota as item}
			
 
				+			<Checkbox {checkeds} name={item.name}>{item.label}</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">Long text option</div>
			
 
				-    <CheckboxGroup>
			
 
				-        {#each dota as item}
			
 
				-            <Checkbox {checkeds} name={item.name}>{item.desc}</Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">Long text option</div>
			
 
				+	<CheckboxGroup>
			
 
				+		{#each dota as item}
			
 
				+			<Checkbox {checkeds} name={item.name}>{item.desc}</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">Text to left</div>
			
 
				-    <CheckboxGroup>
			
 
				-        {#each dota as item, i}
			
 
				-            <Checkbox {checkeds} name={item.name} textPosition="l">
			
 
				-                {item.label}
			
 
				-                {#if i !== dota.length - 1}
			
 
				-                    <div class="h-px mt-1 bg-gray9 dark:bg-gray5" />
			
 
				-                {/if}
			
 
				-            </Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">Text to left</div>
			
 
				+	<CheckboxGroup>
			
 
				+		{#each dota as item, i}
			
 
				+			<Checkbox {checkeds} name={item.name} textPosition="l">
			
 
				+				{item.label}
			
 
				+				{#if i !== dota.length - 1}
			
 
				+					<div class="h-px mt-1 bg-gray9 dark:bg-gray5" />
			
 
				+				{/if}
			
 
				+			</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">Complicated option && Customized selection effect</div>
			
 
				-    <CheckboxGroup on:change={dotaVoicesFun}>
			
 
				-        {#each dotaVoices as item, i}
			
 
				-            <Checkbox checkeds={voiceCheckeds} name={item.name}>
			
 
				-                <div class={`ml-2 ${voiceCheckeds.includes(item.name) ? 'text-primary dark:text-dark' : ''}`}>
			
 
				-                    {item.label}
			
 
				-                    {#each item.voices as voice}
			
 
				-                        <div class="text-xs">{voice}</div>
			
 
				-                    {/each}
			
 
				-                    {#if i !== dotaVoices.length - 1}
			
 
				-                        <div class="h-px mt-1 bg-gray9 dark:bg-gray5" />
			
 
				-                    {/if}
			
 
				-                </div>
			
 
				-            </Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">Complicated option && Customized selection effect</div>
			
 
				+	<CheckboxGroup on:change={dotaVoicesFun}>
			
 
				+		{#each dotaVoices as item, i}
			
 
				+			<Checkbox checkeds={voiceCheckeds} name={item.name}>
			
 
				+				<div class={`ml-2 ${voiceCheckeds.includes(item.name) ? 'text-primary dark:text-dark' : ''}`}>
			
 
				+					{item.label}
			
 
				+					{#each item.voices as voice}
			
 
				+						<div class="text-xs">{voice}</div>
			
 
				+					{/each}
			
 
				+					{#if i !== dotaVoices.length - 1}
			
 
				+						<div class="h-px mt-1 bg-gray9 dark:bg-gray5" />
			
 
				+					{/if}
			
 
				+				</div>
			
 
				+			</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">Batch operation</div>
			
 
				-    <CheckboxGroup on:change={dotaAllFun}>
			
 
				-        {#each dotaAll as item}
			
 
				-            <Checkbox checkeds={checkDotas} name={item} {outControl}>{item}</Checkbox>
			
 
				-        {/each}
			
 
				-    </CheckboxGroup>
			
 
				-    <div class="text-xs mt-2">selected:{checkDotas.join('-')}</div>
			
 
				-    <div class="text-xs mt-2">Une selected:{noCheckDotas.join('-')}</div>
			
 
				-    <div class="flex mt-2">
			
 
				-        <div class="flex-1">
			
 
				-            <Button fill="lineTheme" heightIn="1" on:click={checkAllFun}>select all</Button>
			
 
				-        </div>
			
 
				-        <div class="flex-1">
			
 
				-            <Button fill="lineTheme" heightIn="1" on:click={checkNoneFun}>unselect all</Button>
			
 
				-        </div>
			
 
				-        <div class="flex-1">
			
 
				-            <Button fill="lineTheme" heightIn="1" on:click={checkReverseFun}>Counter -selection</Button>
			
 
				-        </div>
			
 
				-    </div>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">Batch operation</div>
			
 
				+	<CheckboxGroup on:change={dotaAllFun}>
			
 
				+		{#each dotaAll as item}
			
 
				+			<Checkbox checkeds={checkDotas} name={item} {outControl}>{item}</Checkbox>
			
 
				+		{/each}
			
 
				+	</CheckboxGroup>
			
 
				+	<div class="text-xs mt-2">selected:{checkDotas.join('-')}</div>
			
 
				+	<div class="text-xs mt-2">Une selected:{noCheckDotas.join('-')}</div>
			
 
				+	<div class="flex mt-2">
			
 
				+		<div class="flex-1">
			
 
				+			<Button fill="lineTheme" heightIn="1" on:click={checkAllFun}>select all</Button>
			
 
				+		</div>
			
 
				+		<div class="flex-1">
			
 
				+			<Button fill="lineTheme" heightIn="1" on:click={checkNoneFun}>unselect all</Button>
			
 
				+		</div>
			
 
				+		<div class="flex-1">
			
 
				+			<Button fill="lineTheme" heightIn="1" on:click={checkReverseFun}>Counter -selection</Button>
			
 
				+		</div>
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">Animation</div>
			
 
				-    <div class="flex" style="height: {animateHeight}px;">
			
 
				-        <div class="flex-1">
			
 
				-            <div class="pb-2">Unsteady</div>
			
 
				-            <div bind:clientHeight={heights}>
			
 
				-                <CheckboxGroup on:change={checkAnimateNoFun}>
			
 
				-                    {#each animateNos as item, index (item)}
			
 
				-                        <div in:receive={{ key: item }} out:send={{ key: item }} animate:flip={{ duration: 600 }}>
			
 
				-                            <Checkbox name={item} outControl checkeds={[]}>{item}</Checkbox>
			
 
				-                        </div>
			
 
				-                    {/each}
			
 
				-                </CheckboxGroup>
			
 
				-            </div>
			
 
				-        </div>
			
 
				-        <div class="flex-1">
			
 
				-            <div class="pb-2">selected</div>
			
 
				-            <CheckboxGroup on:change={checkAnimaYesFun}>
			
 
				-                {#each animateYess as item, index (item)}
			
 
				-                    <div in:receive={{ key: item }} out:send={{ key: item }} animate:flip={{ duration: 600 }}>
			
 
				-                        <Checkbox outControl checkeds={animateYess} name={item}>
			
 
				-                            {item}
			
 
				-                        </Checkbox>
			
 
				-                    </div>
			
 
				-                {/each}
			
 
				-            </CheckboxGroup>
			
 
				-        </div>
			
 
				-    </div>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">Animation</div>
			
 
				+	<div class="flex" style="height: {animateHeight}px;">
			
 
				+		<div class="flex-1">
			
 
				+			<div class="pb-2">Unsteady</div>
			
 
				+			<div bind:clientHeight={heights}>
			
 
				+				<CheckboxGroup on:change={checkAnimateNoFun}>
			
 
				+					{#each animateNos as item (item)}
			
 
				+						<div in:receive={{ key: item }} out:send={{ key: item }} animate:flip={{ duration: 600 }}>
			
 
				+							<Checkbox name={item} outControl checkeds={[]}>{item}</Checkbox>
			
 
				+						</div>
			
 
				+					{/each}
			
 
				+				</CheckboxGroup>
			
 
				+			</div>
			
 
				+		</div>
			
 
				+		<div class="flex-1">
			
 
				+			<div class="pb-2">selected</div>
			
 
				+			<CheckboxGroup on:change={checkAnimaYesFun}>
			
 
				+				{#each animateYess as item (item)}
			
 
				+					<div in:receive={{ key: item }} out:send={{ key: item }} animate:flip={{ duration: 600 }}>
			
 
				+						<Checkbox outControl checkeds={animateYess} name={item}>
			
 
				+							{item}
			
 
				+						</Checkbox>
			
 
				+					</div>
			
 
				+				{/each}
			
 
				+			</CheckboxGroup>
			
 
				+		</div>
			
 
				+	</div>
			
 
				 </div>
			
--- a/demo/src/pages/dialog/DialogDemo.svelte
+++ b/demo/src/pages/dialog/DialogDemo.svelte
@@ -1,132 +1,132 @@
 
				 <!-- Dialog Demo -->
			
 
				 <script>
			
 
				-    import { Dialog, Cell, Toast, Loading } from 'stdf';
			
 
				-    import Aphorism from '../../components/Aphorism.svelte';
			
 
				-
			
 
				-    let visible1 = false;
			
 
				-    let visible2 = false;
			
 
				-    let visible3 = false;
			
 
				-    let visible4 = false;
			
 
				-    let visible5 = false;
			
 
				-    let visible6 = false;
			
 
				-    let visible7 = false;
			
 
				-    let visible8 = false;
			
 
				-    let visible9 = false;
			
 
				-    let visible10 = false;
			
 
				-    let visible11 = false;
			
 
				-    let visible12 = false;
			
 
				-    let visible13 = false;
			
 
				-    let visible14 = false;
			
 
				-    let visible15 = false;
			
 
				-    let visible16 = false;
			
 
				-    let visible17 = false;
			
 
				-    let visible18 = false;
			
 
				-    let visible19 = false;
			
 
				-
			
 
				-    let toastVisible = false;
			
 
				-    let toastVisible2 = false;
			
 
				-    let toastVisible3 = false;
			
 
				-    let toastVisible4 = false;
			
 
				-
			
 
				-    $: if (visible8) {
			
 
				-        setTimeout(() => {
			
 
				-            visible8 = false;
			
 
				-        }, 3000);
			
 
				-    }
			
 
				-
			
 
				-    let loading = false;
			
 
				-    const somethingFnc = () => {
			
 
				-        loading = true;
			
 
				-        setTimeout(() => {
			
 
				-            loading = false;
			
 
				-            visible18 = false;
			
 
				-            toastVisible4 = true;
			
 
				-        }, 3000);
			
 
				-    };
			
 
				+	import { Dialog, Cell, Toast, Loading } from 'stdf';
			
 
				+	import Aphorism from '../../components/Aphorism.svelte';
			
 
				+
			
 
				+	let visible1 = false;
			
 
				+	let visible2 = false;
			
 
				+	let visible3 = false;
			
 
				+	let visible4 = false;
			
 
				+	let visible5 = false;
			
 
				+	let visible6 = false;
			
 
				+	let visible7 = false;
			
 
				+	let visible8 = false;
			
 
				+	let visible9 = false;
			
 
				+	let visible10 = false;
			
 
				+	let visible11 = false;
			
 
				+	let visible12 = false;
			
 
				+	let visible13 = false;
			
 
				+	let visible14 = false;
			
 
				+	let visible15 = false;
			
 
				+	let visible16 = false;
			
 
				+	let visible17 = false;
			
 
				+	let visible18 = false;
			
 
				+	let visible19 = false;
			
 
				+
			
 
				+	let toastVisible = false;
			
 
				+	let toastVisible2 = false;
			
 
				+	let toastVisible3 = false;
			
 
				+	let toastVisible4 = false;
			
 
				+
			
 
				+	$: if (visible8) {
			
 
				+		setTimeout(() => {
			
 
				+			visible8 = false;
			
 
				+		}, 3000);
			
 
				+	}
			
 
				+
			
 
				+	let loading = false;
			
 
				+	const somethingFnc = () => {
			
 
				+		loading = true;
			
 
				+		setTimeout(() => {
			
 
				+			loading = false;
			
 
				+			visible18 = false;
			
 
				+			toastVisible4 = true;
			
 
				+		}, 3000);
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-4">
			
 
				-    <Cell title="基础用法" on:click={() => (visible1 = true)} />
			
 
				-    <Dialog bind:visible={visible1} title="李逍遥" content="你确认前往仙灵岛吗？" />
			
 
				-
			
 
				-    <Cell title="内容使用插槽" on:click={() => (visible2 = true)} />
			
 
				-    <Dialog bind:visible={visible2} contentSlot>
			
 
				-        <Aphorism slot="content" num={1} compact />
			
 
				-    </Dialog>
			
 
				-
			
 
				-    <Cell title="不显示标题" on:click={() => (visible3 = true)} />
			
 
				-    <Dialog bind:visible={visible3} title="" />
			
 
				-
			
 
				-    <Cell title="点击遮罩关闭" on:click={() => (visible5 = true)} />
			
 
				-    <Dialog bind:visible={visible5} popup={{ maskClosable: true }} />
			
 
				-
			
 
				-    <Cell title="自定义图标" on:click={() => (visible6 = true)} />
			
 
				-    <Dialog
			
 
				-        bind:visible={visible6}
			
 
				-        content="请佩戴口罩！"
			
 
				-        showIcon
			
 
				-        icon={{ name: 'ri-surgical-mask-fill', size: 40, injClass: 'text-[#48a1b4]' }}
			
 
				-        secondaryText="没携带"
			
 
				-        primaryText="好的"
			
 
				-    />
			
 
				-
			
 
				-    <Cell title="内容使用插槽且滚动" on:click={() => (visible4 = true)} />
			
 
				-    <Dialog bind:visible={visible4} contentSlot>
			
 
				-        <div slot="content" class="max-h-56 overflow-auto">
			
 
				-            <Aphorism num={6} compact />
			
 
				-        </div>
			
 
				-    </Dialog>
			
 
				-
			
 
				-    <Cell title="另一种动画效果" on:click={() => (visible11 = true)} />
			
 
				-    <Dialog bind:visible={visible11} content="回弹过渡" popup={{ easeType: 'backOut' }} />
			
 
				-
			
 
				-    <Cell title="标题居左" on:click={() => (visible7 = true)} />
			
 
				-    <Dialog bind:visible={visible7} title="标题居左" titleAlign="left" />
			
 
				-
			
 
				-    <Cell title="自动关闭" on:click={() => (visible8 = true)} />
			
 
				-    <Dialog bind:visible={visible8} content="别动！3 秒后我立即消失！" />
			
 
				-
			
 
				-    <Cell title="主按钮占比多一点" on:click={() => (visible9 = true)} />
			
 
				-    <Dialog bind:visible={visible9} btnRatio={[3, 2]} />
			
 
				-
			
 
				-    <Cell title="主次按钮位置反转" on:click={() => (visible10 = true)} />
			
 
				-    <Dialog bind:visible={visible10} btnReverse />
			
 
				-
			
 
				-    <Cell title="按钮间距大一点" on:click={() => (visible19 = true)} />
			
 
				-    <Dialog bind:visible={visible19} btnGap="16" />
			
 
				-
			
 
				-    <Cell title="按钮为纯文字" on:click={() => (visible12 = true)} />
			
 
				-    <Dialog bind:visible={visible12} btnStyle="text" />
			
 
				-
			
 
				-    <Cell title="按钮为纯文字有分割线" on:click={() => (visible13 = true)} />
			
 
				-    <Dialog bind:visible={visible13} btnStyle="textLine" />
			
 
				-
			
 
				-    <Cell title="全圆角按钮" on:click={() => (visible15 = true)} />
			
 
				-    <Dialog bind:visible={visible15} primaryButton={{ radius: 'full' }} secondaryButton={{ radius: 'full' }} />
			
 
				-
			
 
				-    <Cell title="监听次要事件" on:click={() => (visible14 = true)} />
			
 
				-    <Dialog bind:visible={visible14} on:secondary={() => (toastVisible = true)} />
			
 
				-    <Toast bind:visible={toastVisible} message="点击了取消！" />
			
 
				-
			
 
				-    <Cell title="监听关闭事件" on:click={() => (visible16 = true)} />
			
 
				-    <Dialog bind:visible={visible16} on:close={() => (toastVisible2 = true)} />
			
 
				-    <Toast bind:visible={toastVisible2} message="关闭了 Dialog！" />
			
 
				-
			
 
				-    <Cell title="监听主要事件" on:click={() => (visible17 = true)} />
			
 
				-    <Dialog bind:visible={visible17} on:primary={() => (toastVisible3 = true)} />
			
 
				-    <Toast bind:visible={toastVisible3} message="点击了确认！" />
			
 
				-
			
 
				-    <Cell title="异步执行主要事件" on:click={() => (visible18 = true)} />
			
 
				-    <Dialog bind:visible={visible18} on:primary={somethingFnc} primarySlot title="小鬼" content="你一定要进入锁妖塔吗？">
			
 
				-        <span slot="primary">
			
 
				-            {#if loading}
			
 
				-                <Loading slot="primary" inverse width="12" height="6" type="1_17" />
			
 
				-            {:else}
			
 
				-                进入
			
 
				-            {/if}
			
 
				-        </span>
			
 
				-    </Dialog>
			
 
				-    <Toast bind:visible={toastVisible4} message="已进入锁妖塔！" />
			
 
				+	<Cell title="基础用法" on:click={() => (visible1 = true)} />
			
 
				+	<Dialog bind:visible={visible1} title="李逍遥" content="你确认前往仙灵岛吗？" />
			
 
				+
			
 
				+	<Cell title="内容使用插槽" on:click={() => (visible2 = true)} />
			
 
				+	<Dialog bind:visible={visible2} contentSlot>
			
 
				+		<Aphorism slot="content" num={1} compact />
			
 
				+	</Dialog>
			
 
				+
			
 
				+	<Cell title="不显示标题" on:click={() => (visible3 = true)} />
			
 
				+	<Dialog bind:visible={visible3} title="" />
			
 
				+
			
 
				+	<Cell title="点击遮罩关闭" on:click={() => (visible5 = true)} />
			
 
				+	<Dialog bind:visible={visible5} popup={{ maskClosable: true }} />
			
 
				+
			
 
				+	<Cell title="自定义图标" on:click={() => (visible6 = true)} />
			
 
				+	<Dialog
			
 
				+		bind:visible={visible6}
			
 
				+		content="请佩戴口罩！"
			
 
				+		showIcon
			
 
				+		icon={{ name: 'ri-surgical-mask-fill', size: 40, injClass: 'text-[#48a1b4]' }}
			
 
				+		secondaryText="没携带"
			
 
				+		primaryText="好的"
			
 
				+	/>
			
 
				+
			
 
				+	<Cell title="内容使用插槽且滚动" on:click={() => (visible4 = true)} />
			
 
				+	<Dialog bind:visible={visible4} contentSlot>
			
 
				+		<div slot="content" class="max-h-56 overflow-auto">
			
 
				+			<Aphorism num={6} compact />
			
 
				+		</div>
			
 
				+	</Dialog>
			
 
				+
			
 
				+	<Cell title="另一种动画效果" on:click={() => (visible11 = true)} />
			
 
				+	<Dialog bind:visible={visible11} content="回弹过渡" popup={{ easeType: 'backOut' }} />
			
 
				+
			
 
				+	<Cell title="标题居左" on:click={() => (visible7 = true)} />
			
 
				+	<Dialog bind:visible={visible7} title="标题居左" titleAlign="left" />
			
 
				+
			
 
				+	<Cell title="自动关闭" on:click={() => (visible8 = true)} />
			
 
				+	<Dialog bind:visible={visible8} content="别动！3 秒后我立即消失！" />
			
 
				+
			
 
				+	<Cell title="主按钮占比多一点" on:click={() => (visible9 = true)} />
			
 
				+	<Dialog bind:visible={visible9} btnRatio={[3, 2]} />
			
 
				+
			
 
				+	<Cell title="主次按钮位置反转" on:click={() => (visible10 = true)} />
			
 
				+	<Dialog bind:visible={visible10} btnReverse />
			
 
				+
			
 
				+	<Cell title="按钮间距大一点" on:click={() => (visible19 = true)} />
			
 
				+	<Dialog bind:visible={visible19} btnGap="16" />
			
 
				+
			
 
				+	<Cell title="按钮为纯文字" on:click={() => (visible12 = true)} />
			
 
				+	<Dialog bind:visible={visible12} btnStyle="text" />
			
 
				+
			
 
				+	<Cell title="按钮为纯文字有分割线" on:click={() => (visible13 = true)} />
			
 
				+	<Dialog bind:visible={visible13} btnStyle="textLine" />
			
 
				+
			
 
				+	<Cell title="全圆角按钮" on:click={() => (visible15 = true)} />
			
 
				+	<Dialog bind:visible={visible15} primaryButton={{ radius: 'full' }} secondaryButton={{ radius: 'full' }} />
			
 
				+
			
 
				+	<Cell title="监听次要事件" on:click={() => (visible14 = true)} />
			
 
				+	<Dialog bind:visible={visible14} on:secondary={() => (toastVisible = true)} />
			
 
				+	<Toast bind:visible={toastVisible} message="点击了取消！" />
			
 
				+
			
 
				+	<Cell title="监听关闭事件" on:click={() => (visible16 = true)} />
			
 
				+	<Dialog bind:visible={visible16} on:close={() => (toastVisible2 = true)} />
			
 
				+	<Toast bind:visible={toastVisible2} message="关闭了 Dialog！" />
			
 
				+
			
 
				+	<Cell title="监听主要事件" on:click={() => (visible17 = true)} />
			
 
				+	<Dialog bind:visible={visible17} on:primary={() => (toastVisible3 = true)} />
			
 
				+	<Toast bind:visible={toastVisible3} message="点击了确认！" />
			
 
				+
			
 
				+	<Cell title="异步执行主要事件" on:click={() => (visible18 = true)} />
			
 
				+	<Dialog bind:visible={visible18} on:primary={somethingFnc} primarySlot title="小鬼" content="你一定要进入锁妖塔吗？">
			
 
				+		<span slot="primary">
			
 
				+			{#if loading}
			
 
				+				<Loading slot="primary" inverse width="12" height="6" type="1_17" />
			
 
				+			{:else}
			
 
				+				进入
			
 
				+			{/if}
			
 
				+		</span>
			
 
				+	</Dialog>
			
 
				+	<Toast bind:visible={toastVisible4} message="已进入锁妖塔！" />
			
 
				 </div>
			
 
				 
			
 
				 <!-- Aphorism.svelte -->
			
--- a/demo/src/pages/dialog/DialogDemo_en.svelte
+++ b/demo/src/pages/dialog/DialogDemo_en.svelte
@@ -1,132 +1,132 @@
 
				 <!-- Dialog Demo -->
			
 
				 <script>
			
 
				-    import { Dialog, Cell, Toast, Loading } from 'stdf';
			
 
				-    import Aphorism from '../../components/Aphorism.svelte';
			
 
				-
			
 
				-    let visible1 = false;
			
 
				-    let visible2 = false;
			
 
				-    let visible3 = false;
			
 
				-    let visible4 = false;
			
 
				-    let visible5 = false;
			
 
				-    let visible6 = false;
			
 
				-    let visible7 = false;
			
 
				-    let visible8 = false;
			
 
				-    let visible9 = false;
			
 
				-    let visible10 = false;
			
 
				-    let visible11 = false;
			
 
				-    let visible12 = false;
			
 
				-    let visible13 = false;
			
 
				-    let visible14 = false;
			
 
				-    let visible15 = false;
			
 
				-    let visible16 = false;
			
 
				-    let visible17 = false;
			
 
				-    let visible18 = false;
			
 
				-    let visible19 = false;
			
 
				-
			
 
				-    let toastVisible = false;
			
 
				-    let toastVisible2 = false;
			
 
				-    let toastVisible3 = false;
			
 
				-    let toastVisible4 = false;
			
 
				-
			
 
				-    $: if (visible8) {
			
 
				-        setTimeout(() => {
			
 
				-            visible8 = false;
			
 
				-        }, 3000);
			
 
				-    }
			
 
				-
			
 
				-    let loading = false;
			
 
				-    const somethingFnc = () => {
			
 
				-        loading = true;
			
 
				-        setTimeout(() => {
			
 
				-            loading = false;
			
 
				-            visible18 = false;
			
 
				-            toastVisible4 = true;
			
 
				-        }, 3000);
			
 
				-    };
			
 
				+	import { Dialog, Cell, Toast, Loading } from 'stdf';
			
 
				+	import Aphorism from '../../components/Aphorism.svelte';
			
 
				+
			
 
				+	let visible1 = false;
			
 
				+	let visible2 = false;
			
 
				+	let visible3 = false;
			
 
				+	let visible4 = false;
			
 
				+	let visible5 = false;
			
 
				+	let visible6 = false;
			
 
				+	let visible7 = false;
			
 
				+	let visible8 = false;
			
 
				+	let visible9 = false;
			
 
				+	let visible10 = false;
			
 
				+	let visible11 = false;
			
 
				+	let visible12 = false;
			
 
				+	let visible13 = false;
			
 
				+	let visible14 = false;
			
 
				+	let visible15 = false;
			
 
				+	let visible16 = false;
			
 
				+	let visible17 = false;
			
 
				+	let visible18 = false;
			
 
				+	let visible19 = false;
			
 
				+
			
 
				+	let toastVisible = false;
			
 
				+	let toastVisible2 = false;
			
 
				+	let toastVisible3 = false;
			
 
				+	let toastVisible4 = false;
			
 
				+
			
 
				+	$: if (visible8) {
			
 
				+		setTimeout(() => {
			
 
				+			visible8 = false;
			
 
				+		}, 3000);
			
 
				+	}
			
 
				+
			
 
				+	let loading = false;
			
 
				+	const somethingFnc = () => {
			
 
				+		loading = true;
			
 
				+		setTimeout(() => {
			
 
				+			loading = false;
			
 
				+			visible18 = false;
			
 
				+			toastVisible4 = true;
			
 
				+		}, 3000);
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-4">
			
 
				-    <Cell title="Basic usage" on:click={() => (visible1 = true)} />
			
 
				-    <Dialog bind:visible={visible1} title="Li Xiaoyao" content="Do you confirm that going to Xianling Island?" />
			
 
				-
			
 
				-    <Cell title="Content use slot" on:click={() => (visible2 = true)} />
			
 
				-    <Dialog bind:visible={visible2} contentSlot>
			
 
				-        <Aphorism slot="content" num={1} compact />
			
 
				-    </Dialog>
			
 
				-
			
 
				-    <Cell title="Display the title" on:click={() => (visible3 = true)} />
			
 
				-    <Dialog bind:visible={visible3} title="" />
			
 
				-
			
 
				-    <Cell title="Click the mask to close" on:click={() => (visible5 = true)} />
			
 
				-    <Dialog bind:visible={visible5} popup={{ maskClosable: true }} />
			
 
				-
			
 
				-    <Cell title="Custom icon" on:click={() => (visible6 = true)} />
			
 
				-    <Dialog
			
 
				-        bind:visible={visible6}
			
 
				-        content="Please wear a mask!"
			
 
				-        showIcon
			
 
				-        icon={{ name: 'ri-surgical-mask-fill', size: 40, injClass: 'text-[#48a1b4]' }}
			
 
				-        secondaryText="Not carried"
			
 
				-        primaryText="OK"
			
 
				-    />
			
 
				-
			
 
				-    <Cell title="The content uses slot and rolls" on:click={() => (visible4 = true)} />
			
 
				-    <Dialog bind:visible={visible4} contentSlot>
			
 
				-        <div slot="content" class="max-h-56 overflow-auto">
			
 
				-            <Aphorism num={6} compact />
			
 
				-        </div>
			
 
				-    </Dialog>
			
 
				-
			
 
				-    <Cell title="Another animation effect" on:click={() => (visible11 = true)} />
			
 
				-    <Dialog bind:visible={visible11} content="Rebound transition" popup={{ easeType: 'backOut' }} />
			
 
				-
			
 
				-    <Cell title="Title left" on:click={() => (visible7 = true)} />
			
 
				-    <Dialog bind:visible={visible7} title="Title left" titleAlign="left" />
			
 
				-
			
 
				-    <Cell title="Automatically close" on:click={() => (visible8 = true)} />
			
 
				-    <Dialog bind:visible={visible8} content="do not move!I disappeared immediately after 3 seconds!" />
			
 
				-
			
 
				-    <Cell title="The main button accounts for a little more" on:click={() => (visible9 = true)} />
			
 
				-    <Dialog bind:visible={visible9} btnRatio={[3, 2]} />
			
 
				-
			
 
				-    <Cell title="Primary button position reverse" on:click={() => (visible10 = true)} />
			
 
				-    <Dialog bind:visible={visible10} btnReverse />
			
 
				-
			
 
				-    <Cell title="The button spacing is larger" on:click={() => (visible19 = true)} />
			
 
				-    <Dialog bind:visible={visible19} btnGap="16" />
			
 
				-
			
 
				-    <Cell title="The button is pure text" on:click={() => (visible12 = true)} />
			
 
				-    <Dialog bind:visible={visible12} btnStyle="text" />
			
 
				-
			
 
				-    <Cell title="There is a division of the button for the button" on:click={() => (visible13 = true)} />
			
 
				-    <Dialog bind:visible={visible13} btnStyle="textLine" />
			
 
				-
			
 
				-    <Cell title="Full rounded button" on:click={() => (visible15 = true)} />
			
 
				-    <Dialog bind:visible={visible15} primaryButton={{ radius: 'full' }} secondaryButton={{ radius: 'full' }} />
			
 
				-
			
 
				-    <Cell title="Monitoring secondary event" on:click={() => (visible14 = true)} />
			
 
				-    <Dialog bind:visible={visible14} on:secondary={() => (toastVisible = true)} />
			
 
				-    <Toast bind:visible={toastVisible} message="Click to cancel!" />
			
 
				-
			
 
				-    <Cell title="Supervision and closing incident" on:click={() => (visible16 = true)} />
			
 
				-    <Dialog bind:visible={visible16} on:close={() => (toastVisible2 = true)} />
			
 
				-    <Toast bind:visible={toastVisible2} message="Close Dialog!" />
			
 
				-
			
 
				-    <Cell title="Main incident" on:click={() => (visible17 = true)} />
			
 
				-    <Dialog bind:visible={visible17} on:primary={() => (toastVisible3 = true)} />
			
 
				-    <Toast bind:visible={toastVisible3} message="Click to confirm!" />
			
 
				-
			
 
				-    <Cell title="Main events asynchronous execution" on:click={() => (visible18 = true)} />
			
 
				-    <Dialog bind:visible={visible18} on:primary={somethingFnc} primarySlot title="Ghost" content="Do you have to enter the lock demon tower?">
			
 
				-        <span slot="primary">
			
 
				-            {#if loading}
			
 
				-                <Loading slot="primary" inverse width="12" height="6" type="1_17" />
			
 
				-            {:else}
			
 
				-                Enter
			
 
				-            {/if}
			
 
				-        </span>
			
 
				-    </Dialog>
			
 
				-    <Toast bind:visible={toastVisible4} message="Enter the lock demon tower!he lock demon tower!" />
			
 
				+	<Cell title="Basic usage" on:click={() => (visible1 = true)} />
			
 
				+	<Dialog bind:visible={visible1} title="Li Xiaoyao" content="Do you confirm that going to Xianling Island?" />
			
 
				+
			
 
				+	<Cell title="Content use slot" on:click={() => (visible2 = true)} />
			
 
				+	<Dialog bind:visible={visible2} contentSlot>
			
 
				+		<Aphorism slot="content" num={1} compact />
			
 
				+	</Dialog>
			
 
				+
			
 
				+	<Cell title="Display the title" on:click={() => (visible3 = true)} />
			
 
				+	<Dialog bind:visible={visible3} title="" />
			
 
				+
			
 
				+	<Cell title="Click the mask to close" on:click={() => (visible5 = true)} />
			
 
				+	<Dialog bind:visible={visible5} popup={{ maskClosable: true }} />
			
 
				+
			
 
				+	<Cell title="Custom icon" on:click={() => (visible6 = true)} />
			
 
				+	<Dialog
			
 
				+		bind:visible={visible6}
			
 
				+		content="Please wear a mask!"
			
 
				+		showIcon
			
 
				+		icon={{ name: 'ri-surgical-mask-fill', size: 40, injClass: 'text-[#48a1b4]' }}
			
 
				+		secondaryText="Not carried"
			
 
				+		primaryText="OK"
			
 
				+	/>
			
 
				+
			
 
				+	<Cell title="The content uses slot and rolls" on:click={() => (visible4 = true)} />
			
 
				+	<Dialog bind:visible={visible4} contentSlot>
			
 
				+		<div slot="content" class="max-h-56 overflow-auto">
			
 
				+			<Aphorism num={6} compact />
			
 
				+		</div>
			
 
				+	</Dialog>
			
 
				+
			
 
				+	<Cell title="Another animation effect" on:click={() => (visible11 = true)} />
			
 
				+	<Dialog bind:visible={visible11} content="Rebound transition" popup={{ easeType: 'backOut' }} />
			
 
				+
			
 
				+	<Cell title="Title left" on:click={() => (visible7 = true)} />
			
 
				+	<Dialog bind:visible={visible7} title="Title left" titleAlign="left" />
			
 
				+
			
 
				+	<Cell title="Automatically close" on:click={() => (visible8 = true)} />
			
 
				+	<Dialog bind:visible={visible8} content="do not move!I disappeared immediately after 3 seconds!" />
			
 
				+
			
 
				+	<Cell title="The main button accounts for a little more" on:click={() => (visible9 = true)} />
			
 
				+	<Dialog bind:visible={visible9} btnRatio={[3, 2]} />
			
 
				+
			
 
				+	<Cell title="Primary button position reverse" on:click={() => (visible10 = true)} />
			
 
				+	<Dialog bind:visible={visible10} btnReverse />
			
 
				+
			
 
				+	<Cell title="The button spacing is larger" on:click={() => (visible19 = true)} />
			
 
				+	<Dialog bind:visible={visible19} btnGap="16" />
			
 
				+
			
 
				+	<Cell title="The button is pure text" on:click={() => (visible12 = true)} />
			
 
				+	<Dialog bind:visible={visible12} btnStyle="text" />
			
 
				+
			
 
				+	<Cell title="There is a division of the button for the button" on:click={() => (visible13 = true)} />
			
 
				+	<Dialog bind:visible={visible13} btnStyle="textLine" />
			
 
				+
			
 
				+	<Cell title="Full rounded button" on:click={() => (visible15 = true)} />
			
 
				+	<Dialog bind:visible={visible15} primaryButton={{ radius: 'full' }} secondaryButton={{ radius: 'full' }} />
			
 
				+
			
 
				+	<Cell title="Monitoring secondary event" on:click={() => (visible14 = true)} />
			
 
				+	<Dialog bind:visible={visible14} on:secondary={() => (toastVisible = true)} />
			
 
				+	<Toast bind:visible={toastVisible} message="Click to cancel!" />
			
 
				+
			
 
				+	<Cell title="Supervision and closing incident" on:click={() => (visible16 = true)} />
			
 
				+	<Dialog bind:visible={visible16} on:close={() => (toastVisible2 = true)} />
			
 
				+	<Toast bind:visible={toastVisible2} message="Close Dialog!" />
			
 
				+
			
 
				+	<Cell title="Main incident" on:click={() => (visible17 = true)} />
			
 
				+	<Dialog bind:visible={visible17} on:primary={() => (toastVisible3 = true)} />
			
 
				+	<Toast bind:visible={toastVisible3} message="Click to confirm!" />
			
 
				+
			
 
				+	<Cell title="Main events asynchronous execution" on:click={() => (visible18 = true)} />
			
 
				+	<Dialog bind:visible={visible18} on:primary={somethingFnc} primarySlot title="Ghost" content="Do you have to enter the lock demon tower?">
			
 
				+		<span slot="primary">
			
 
				+			{#if loading}
			
 
				+				<Loading slot="primary" inverse width="12" height="6" type="1_17" />
			
 
				+			{:else}
			
 
				+				Enter
			
 
				+			{/if}
			
 
				+		</span>
			
 
				+	</Dialog>
			
 
				+	<Toast bind:visible={toastVisible4} message="Enter the lock demon tower!he lock demon tower!" />
			
 
				 </div>
			
 
				 
			
 
				 <!-- Aphorism.svelte -->
			
--- a/demo/src/pages/divider/DividerDemo.svelte
+++ b/demo/src/pages/divider/DividerDemo.svelte
@@ -1,78 +1,78 @@
 
				 <!-- Divider Demo -->
			
 
				 <script>
			
 
				-    import { Divider } from 'stdf';
			
 
				+	import { Divider } from 'stdf';
			
 
				 </script>
			
 
				 
			
 
				 <div class="flex flex-col space-y-8 py-8">
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">不同长度</div>
			
 
				-        <Divider />
			
 
				-        <Divider px="4" />
			
 
				-        <Divider px="8" />
			
 
				-        <Divider px="16" />
			
 
				-        <Divider px="36" />
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">包含文字</div>
			
 
				-        <Divider text="古筝计划" />
			
 
				-        <Divider px="4" text="红岸基地" />
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">不同高度</div>
			
 
				-        <div class="px-4 text-sm">开始</div>
			
 
				-        <Divider py="0" />
			
 
				-        <div class="px-4 text-sm">高度为0</div>
			
 
				-        <Divider />
			
 
				-        <div class="px-4 text-sm">高度为4</div>
			
 
				-        <Divider py="8" />
			
 
				-        <div class="px-4 text-sm">高度为8</div>
			
 
				-    </div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">不同长度</div>
			
 
				+		<Divider />
			
 
				+		<Divider px="4" />
			
 
				+		<Divider px="8" />
			
 
				+		<Divider px="16" />
			
 
				+		<Divider px="36" />
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">包含文字</div>
			
 
				+		<Divider text="古筝计划" />
			
 
				+		<Divider px="4" text="红岸基地" />
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">不同高度</div>
			
 
				+		<div class="px-4 text-sm">开始</div>
			
 
				+		<Divider py="0" />
			
 
				+		<div class="px-4 text-sm">高度为0</div>
			
 
				+		<Divider />
			
 
				+		<div class="px-4 text-sm">高度为4</div>
			
 
				+		<Divider py="8" />
			
 
				+		<div class="px-4 text-sm">高度为8</div>
			
 
				+	</div>
			
 
				 
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">文字位置</div>
			
 
				-        <Divider text="左侧" align="left" />
			
 
				-        <Divider text="居中" />
			
 
				-        <Divider text="右侧" align="right" />
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">线条风格</div>
			
 
				-        <Divider text="实线" />
			
 
				-        <Divider line="dashed" text="虚线" />
			
 
				-        <Divider line="dotted" text="点线" />
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">自定义颜色</div>
			
 
				-        <Divider injClass="border-blue dark:border-yellow" />
			
 
				-        <Divider text="自定义线条" injClass="border-[red] dark:border-[green]" />
			
 
				-        <Divider text="自定义文字" injClass="text-[red]" />
			
 
				-        <Divider text="自定义线条与文字" injClass="border-[red] text-[blue] dark:text-[yellow]" />
			
 
				-        <Divider line="dashed" text="自定义虚线" injClass="border-[#FF5722]" />
			
 
				-    </div>
			
 
				-    <div class="px-4">
			
 
				-        <div class="py-4 font-bold">垂直分割线</div>
			
 
				-        <div class="text-sm">
			
 
				-            三日凌空<Divider layout="v" />三日连珠<Divider layout="v" />人列计算机
			
 
				-        </div>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">不同粗细</div>
			
 
				-        <Divider />
			
 
				-        <Divider weight="2" />
			
 
				-        <Divider weight="4" />
			
 
				-        <div class="px-4 text-sm">
			
 
				-            执剑人<Divider layout="v" />三日凌空<Divider layout="v" weight="2" />三日连珠<Divider layout="v" weight="4" />人列计算机
			
 
				-        </div>
			
 
				-    </div>
			
 
				-    <div class="px-4">
			
 
				-        <div class="py-4 font-bold">自定义垂直分割线</div>
			
 
				-        <div class="text-sm">
			
 
				-            加大间距
			
 
				-            <Divider layout="v" mx="4" />
			
 
				-            自定义
			
 
				-            <Divider layout="v" mx="4" injClass="border-[red] dark:border-[green]" />
			
 
				-            颜色
			
 
				-            <Divider line="dashed" layout="v" mx="4" injClass="border-[red] dark:border-[green]" />
			
 
				-            与线条风格
			
 
				-        </div>
			
 
				-    </div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">文字位置</div>
			
 
				+		<Divider text="左侧" align="left" />
			
 
				+		<Divider text="居中" />
			
 
				+		<Divider text="右侧" align="right" />
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">线条风格</div>
			
 
				+		<Divider text="实线" />
			
 
				+		<Divider line="dashed" text="虚线" />
			
 
				+		<Divider line="dotted" text="点线" />
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">自定义颜色</div>
			
 
				+		<Divider injClass="border-blue dark:border-yellow" />
			
 
				+		<Divider text="自定义线条" injClass="border-[red] dark:border-[green]" />
			
 
				+		<Divider text="自定义文字" injClass="text-[red]" />
			
 
				+		<Divider text="自定义线条与文字" injClass="border-[red] text-[blue] dark:text-[yellow]" />
			
 
				+		<Divider line="dashed" text="自定义虚线" injClass="border-[#FF5722]" />
			
 
				+	</div>
			
 
				+	<div class="px-4">
			
 
				+		<div class="py-4 font-bold">垂直分割线</div>
			
 
				+		<div class="text-sm">
			
 
				+			三日凌空<Divider layout="v" />三日连珠<Divider layout="v" />人列计算机
			
 
				+		</div>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">不同粗细</div>
			
 
				+		<Divider />
			
 
				+		<Divider weight="2" />
			
 
				+		<Divider weight="4" />
			
 
				+		<div class="px-4 text-sm">
			
 
				+			执剑人<Divider layout="v" />三日凌空<Divider layout="v" weight="2" />三日连珠<Divider layout="v" weight="4" />人列计算机
			
 
				+		</div>
			
 
				+	</div>
			
 
				+	<div class="px-4">
			
 
				+		<div class="py-4 font-bold">自定义垂直分割线</div>
			
 
				+		<div class="text-sm">
			
 
				+			加大间距
			
 
				+			<Divider layout="v" mx="4" />
			
 
				+			自定义
			
 
				+			<Divider layout="v" mx="4" injClass="border-[red] dark:border-[green]" />
			
 
				+			颜色
			
 
				+			<Divider line="dashed" layout="v" mx="4" injClass="border-[red] dark:border-[green]" />
			
 
				+			与线条风格
			
 
				+		</div>
			
 
				+	</div>
			
 
				 </div>
			
--- a/demo/src/pages/divider/DividerDemo_en.svelte
+++ b/demo/src/pages/divider/DividerDemo_en.svelte
@@ -1,78 +1,79 @@
 
				 <!-- Divider Demo -->
			
 
				 <script>
			
 
				-    import { Divider } from 'stdf';
			
 
				+	import { Divider } from 'stdf';
			
 
				 </script>
			
 
				 
			
 
				 <div class="flex flex-col space-y-8 py-8 text-left">
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">Different length</div>
			
 
				-        <Divider />
			
 
				-        <Divider px="4" />
			
 
				-        <Divider px="8" />
			
 
				-        <Divider px="16" />
			
 
				-        <Divider px="36" />
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">Include text</div>
			
 
				-        <Divider text="Zheng Plan" />
			
 
				-        <Divider px="4" text="Red bank base" />
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">Different heights</div>
			
 
				-        <div class="px-4 text-sm">start</div>
			
 
				-        <Divider py="0" />
			
 
				-        <div class="px-4 text-sm">Height is 0</div>
			
 
				-        <Divider />
			
 
				-        <div class="px-4 text-sm">Height is 4</div>
			
 
				-        <Divider py="8" />
			
 
				-        <div class="px-4 text-sm">Height is 8</div>
			
 
				-    </div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">Different length</div>
			
 
				+		<Divider />
			
 
				+		<Divider px="4" />
			
 
				+		<Divider px="8" />
			
 
				+		<Divider px="16" />
			
 
				+		<Divider px="36" />
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">Include text</div>
			
 
				+		<Divider text="Zheng Plan" />
			
 
				+		<Divider px="4" text="Red bank base" />
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">Different heights</div>
			
 
				+		<div class="px-4 text-sm">start</div>
			
 
				+		<Divider py="0" />
			
 
				+		<div class="px-4 text-sm">Height is 0</div>
			
 
				+		<Divider />
			
 
				+		<div class="px-4 text-sm">Height is 4</div>
			
 
				+		<Divider py="8" />
			
 
				+		<div class="px-4 text-sm">Height is 8</div>
			
 
				+	</div>
			
 
				 
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">Text location</div>
			
 
				-        <Divider text="Left" align="left" />
			
 
				-        <Divider text="Center" />
			
 
				-        <Divider text="Right" align="right" />
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">Line style</div>
			
 
				-        <Divider text="solid line" />
			
 
				-        <Divider line="dashed" text="Dashed line" />
			
 
				-        <Divider line="dotted" text="Dotted line" />
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">Custom color</div>
			
 
				-        <Divider injClass="border-blue dark:border-yellow" />
			
 
				-        <Divider text="Custom line" injClass="border-[red] dark:border-[green]" />
			
 
				-        <Divider text="Custom text" injClass="text-[red]" />
			
 
				-        <Divider text="Custom lines and text" injClass="border-[red] text-[blue] dark:text-[yellow]" />
			
 
				-        <Divider line="dashed" text="Custom dotted line" injClass="border-[#FF5722]" />
			
 
				-    </div>
			
 
				-    <div class="px-4">
			
 
				-        <div class="py-4 font-bold">Vertical segmentation line</div>
			
 
				-        <div class="text-sm">
			
 
				-            Three -day volley<Divider layout="v" />Three -day Lianzhu<Divider layout="v" />Person computer
			
 
				-        </div>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="p-4 font-bold">Different thickness</div>
			
 
				-        <Divider />
			
 
				-        <Divider weight="2" />
			
 
				-        <Divider weight="4" />
			
 
				-        <div class="px-4 text-sm">
			
 
				-            Sword<Divider layout="v" />Three -day volley<Divider layout="v" weight="2" />Three -day Lianzhu<Divider layout="v" weight="4" />Person computer
			
 
				-        </div>
			
 
				-    </div>
			
 
				-    <div class="px-4">
			
 
				-        <div class="py-4 font-bold">Custom vertical division line</div>
			
 
				-        <div class="text-sm">
			
 
				-            Increase
			
 
				-            <Divider layout="v" mx="4" />
			
 
				-            customize
			
 
				-            <Divider layout="v" mx="4" injClass="border-[red] dark:border-[green]" />
			
 
				-            color
			
 
				-            <Divider line="dashed" layout="v" mx="4" injClass="border-[red] dark:border-[green]" />
			
 
				-            Line style
			
 
				-        </div>
			
 
				-    </div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">Text location</div>
			
 
				+		<Divider text="Left" align="left" />
			
 
				+		<Divider text="Center" />
			
 
				+		<Divider text="Right" align="right" />
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">Line style</div>
			
 
				+		<Divider text="solid line" />
			
 
				+		<Divider line="dashed" text="Dashed line" />
			
 
				+		<Divider line="dotted" text="Dotted line" />
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">Custom color</div>
			
 
				+		<Divider injClass="border-blue dark:border-yellow" />
			
 
				+		<Divider text="Custom line" injClass="border-[red] dark:border-[green]" />
			
 
				+		<Divider text="Custom text" injClass="text-[red]" />
			
 
				+		<Divider text="Custom lines and text" injClass="border-[red] text-[blue] dark:text-[yellow]" />
			
 
				+		<Divider line="dashed" text="Custom dotted line" injClass="border-[#FF5722]" />
			
 
				+	</div>
			
 
				+	<div class="px-4">
			
 
				+		<div class="py-4 font-bold">Vertical segmentation line</div>
			
 
				+		<div class="text-sm">
			
 
				+			Three -day volley<Divider layout="v" />Three -day Lianzhu<Divider layout="v" />Person computer
			
 
				+		</div>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="p-4 font-bold">Different thickness</div>
			
 
				+		<Divider />
			
 
				+		<Divider weight="2" />
			
 
				+		<Divider weight="4" />
			
 
				+		<div class="px-4 text-sm">
			
 
				+			Sword<Divider layout="v" />Three -day volley<Divider layout="v" weight="2" />Three -day Lianzhu<Divider layout="v" weight="4" />Person
			
 
				+			computer
			
 
				+		</div>
			
 
				+	</div>
			
 
				+	<div class="px-4">
			
 
				+		<div class="py-4 font-bold">Custom vertical division line</div>
			
 
				+		<div class="text-sm">
			
 
				+			Increase
			
 
				+			<Divider layout="v" mx="4" />
			
 
				+			customize
			
 
				+			<Divider layout="v" mx="4" injClass="border-[red] dark:border-[green]" />
			
 
				+			color
			
 
				+			<Divider line="dashed" layout="v" mx="4" injClass="border-[red] dark:border-[green]" />
			
 
				+			Line style
			
 
				+		</div>
			
 
				+	</div>
			
 
				 </div>
			
--- a/demo/src/pages/grids/GridsDemo.svelte
+++ b/demo/src/pages/grids/GridsDemo.svelte
@@ -1,288 +1,288 @@
 
				 <!-- Grids Demo -->
			
 
				 <script>
			
 
				-    import { Grids, Grid, Placeholder, Switch, Icon, Button } from 'stdf';
			
 
				+	import { Grids, Grid, Placeholder, Switch, Icon, Button } from 'stdf';
			
 
				 
			
 
				-    let devices = ['iOS', 'Android', 'Windows', 'macOS', 'Ubuntu'];
			
 
				-    let curentIndex = 0;
			
 
				-    $: currentDevice = devices[curentIndex];
			
 
				-    const changeDeviceFun = () => {
			
 
				-        curentIndex === devices.length - 1 ? (curentIndex = 0) : curentIndex++;
			
 
				-    };
			
 
				-    let color = false;
			
 
				-    $: colorCss = `${color ? ' bg-gradient-to-tr from-purple/70 to-orange/70' : ' bg-gray8 dark:bg-gray4'}`;
			
 
				-    const changeColorFun = e => {
			
 
				-        color = e.detail;
			
 
				-    };
			
 
				-    //获取当前时间
			
 
				-    const date = new Date();
			
 
				-    //获取当前月份转为汉字
			
 
				-    const monthArr = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
			
 
				-    const monthIndex = date.getMonth();
			
 
				-    $: month = monthArr[monthIndex];
			
 
				-    const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
			
 
				-    const hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
			
 
				-    const minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
			
 
				-    $: time = `${hour}:${minute}`;
			
 
				-    //获取中文周几
			
 
				-    const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
			
 
				-    $: weekDay = week[date.getDay()];
			
 
				+	let devices = ['iOS', 'Android', 'Windows', 'macOS', 'Ubuntu'];
			
 
				+	let curentIndex = 0;
			
 
				+	$: currentDevice = devices[curentIndex];
			
 
				+	const changeDeviceFun = () => {
			
 
				+		curentIndex === devices.length - 1 ? (curentIndex = 0) : curentIndex++;
			
 
				+	};
			
 
				+	let color = false;
			
 
				+	$: colorCss = `${color ? ' bg-gradient-to-tr from-purple/70 to-orange/70' : ' bg-gray8 dark:bg-gray4'}`;
			
 
				+	const changeColorFun = e => {
			
 
				+		color = e.detail;
			
 
				+	};
			
 
				+	//获取当前时间
			
 
				+	const date = new Date();
			
 
				+	//获取当前月份转为汉字
			
 
				+	const monthArr = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
			
 
				+	const monthIndex = date.getMonth();
			
 
				+	$: month = monthArr[monthIndex];
			
 
				+	const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
			
 
				+	const hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
			
 
				+	const minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
			
 
				+	$: time = `${hour}:${minute}`;
			
 
				+	//获取中文周几
			
 
				+	const week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
			
 
				+	$: weekDay = week[date.getDay()];
			
 
				 </script>
			
 
				 
			
 
				 <div class="font-bold px-4 mt-8">使用占位符示例 3﹡4</div>
			
 
				 <Grids cols={4}>
			
 
				-    <Grid row="3">
			
 
				-        <Placeholder>3﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid col="3">
			
 
				-        <Placeholder>1﹡3</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid row="2">
			
 
				-        <Placeholder>2﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid col="2">
			
 
				-        <Placeholder>1﹡2</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid>
			
 
				-        <Placeholder>1﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid>
			
 
				-        <Placeholder>1﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				+	<Grid row="3">
			
 
				+		<Placeholder>3﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid col="3">
			
 
				+		<Placeholder>1﹡3</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid row="2">
			
 
				+		<Placeholder>2﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid col="2">
			
 
				+		<Placeholder>1﹡2</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid>
			
 
				+		<Placeholder>1﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid>
			
 
				+		<Placeholder>1﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				 </Grids>
			
 
				 
			
 
				 <div class="font-bold px-4 mt-8">使用占位符示例 4﹡6</div>
			
 
				 <Grids>
			
 
				-    <Grid row={3} col={2}>
			
 
				-        <Placeholder>3﹡2</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid col={3}>
			
 
				-        <Placeholder>1﹡3</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid row={4}>
			
 
				-        <Placeholder>4﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid row={2}>
			
 
				-        <Placeholder>2﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid>
			
 
				-        <Placeholder>1﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid>
			
 
				-        <Placeholder>1﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid>
			
 
				-        <Placeholder>1﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid>
			
 
				-        <Placeholder>1﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid>
			
 
				-        <Placeholder>1﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid col={4}>
			
 
				-        <Placeholder>1﹡4</Placeholder>
			
 
				-    </Grid>
			
 
				+	<Grid row={3} col={2}>
			
 
				+		<Placeholder>3﹡2</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid col={3}>
			
 
				+		<Placeholder>1﹡3</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid row={4}>
			
 
				+		<Placeholder>4﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid row={2}>
			
 
				+		<Placeholder>2﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid>
			
 
				+		<Placeholder>1﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid>
			
 
				+		<Placeholder>1﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid>
			
 
				+		<Placeholder>1﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid>
			
 
				+		<Placeholder>1﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid>
			
 
				+		<Placeholder>1﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid col={4}>
			
 
				+		<Placeholder>1﹡4</Placeholder>
			
 
				+	</Grid>
			
 
				 </Grids>
			
 
				 
			
 
				 <div class="font-bold px-4 mt-8">增加外边距与单元格间距</div>
			
 
				 <Grids cols={4} gap="4" mx="8" my="8">
			
 
				-    <Grid row={3}>
			
 
				-        <Placeholder>3﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid col={3}>
			
 
				-        <Placeholder>1﹡3</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid row={2}>
			
 
				-        <Placeholder>2﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid col={2}>
			
 
				-        <Placeholder>1﹡2</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid>
			
 
				-        <Placeholder>1﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid>
			
 
				-        <Placeholder>1﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				+	<Grid row={3}>
			
 
				+		<Placeholder>3﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid col={3}>
			
 
				+		<Placeholder>1﹡3</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid row={2}>
			
 
				+		<Placeholder>2﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid col={2}>
			
 
				+		<Placeholder>1﹡2</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid>
			
 
				+		<Placeholder>1﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid>
			
 
				+		<Placeholder>1﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				 </Grids>
			
 
				 
			
 
				 <div class="font-bold px-4 mt-8">场景示例 6﹡5</div>
			
 
				 <div class="pb-8 pt-2">
			
 
				-    <div class={`mx-2 rounded-xl p-2 shadow transition duration-300${colorCss}`}>
			
 
				-        <Grids cols={5} mx="0" my="0">
			
 
				-            <Grid row={3}>
			
 
				-                <div
			
 
				-                    class="flex flex-col justify-between bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center shadow dark:shadow-white/10"
			
 
				-                >
			
 
				-                    <div>{weekDay}</div>
			
 
				-                    <div class="text-4xl">{day}</div>
			
 
				-                    <div class="text-gray6">{month}</div>
			
 
				-                </div>
			
 
				-            </Grid>
			
 
				-            <Grid row={2}>
			
 
				-                <div
			
 
				-                    class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xl font-bold text-center flex flex-col justify-center shadow dark:shadow-white/10"
			
 
				-                >
			
 
				-                    {time}
			
 
				-                </div>
			
 
				-            </Grid>
			
 
				-            <Grid row={2}>
			
 
				-                <div
			
 
				-                    class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
			
 
				-                >
			
 
				-                    <div class="flex justify-center">
			
 
				-                        <Switch inside="slot" radius="full" on:change={changeColorFun}>
			
 
				-                            <div slot="false">
			
 
				-                                <Icon name="ri-paint-brush-line" size={12} />
			
 
				-                            </div>
			
 
				-                            <div slot="true">
			
 
				-                                <Icon name="ri-paint-brush-fill" size={12} theme />
			
 
				-                            </div>
			
 
				-                        </Switch>
			
 
				-                    </div>
			
 
				-                    <div>彩 色</div>
			
 
				-                </div>
			
 
				-            </Grid>
			
 
				+	<div class={`mx-2 rounded-xl p-2 shadow transition duration-300${colorCss}`}>
			
 
				+		<Grids cols={5} mx="0" my="0">
			
 
				+			<Grid row={3}>
			
 
				+				<div
			
 
				+					class="flex flex-col justify-between bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center shadow dark:shadow-white/10"
			
 
				+				>
			
 
				+					<div>{weekDay}</div>
			
 
				+					<div class="text-4xl">{day}</div>
			
 
				+					<div class="text-gray6">{month}</div>
			
 
				+				</div>
			
 
				+			</Grid>
			
 
				+			<Grid row={2}>
			
 
				+				<div
			
 
				+					class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xl font-bold text-center flex flex-col justify-center shadow dark:shadow-white/10"
			
 
				+				>
			
 
				+					{time}
			
 
				+				</div>
			
 
				+			</Grid>
			
 
				+			<Grid row={2}>
			
 
				+				<div
			
 
				+					class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
			
 
				+				>
			
 
				+					<div class="flex justify-center">
			
 
				+						<Switch inside="slot" radius="full" on:change={changeColorFun}>
			
 
				+							<div slot="false">
			
 
				+								<Icon name="ri-paint-brush-line" size={12} />
			
 
				+							</div>
			
 
				+							<div slot="true">
			
 
				+								<Icon name="ri-paint-brush-fill" size={12} theme />
			
 
				+							</div>
			
 
				+						</Switch>
			
 
				+					</div>
			
 
				+					<div>彩 色</div>
			
 
				+				</div>
			
 
				+			</Grid>
			
 
				 
			
 
				-            <Grid row={2} col={2}>
			
 
				-                <div
			
 
				-                    class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-center shadow dark:shadow-white/10"
			
 
				-                >
			
 
				-                    <Button fill="lineTheme" radius="full" on:click={changeDeviceFun}>切换设备</Button>
			
 
				-                </div>
			
 
				-            </Grid>
			
 
				-            <Grid row={2} col={2}>
			
 
				-                <div
			
 
				-                    class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center flex justify-around shadow dark:shadow-white/10 py-1"
			
 
				-                >
			
 
				-                    <div class="flex flex-col justify-center">
			
 
				-                        {#if currentDevice === 'iOS'}
			
 
				-                            <Icon name="ri-apple-fill" size={30} />
			
 
				-                        {:else if currentDevice === 'Android'}
			
 
				-                            <Icon name="ri-android-fill" size={30} />
			
 
				-                        {:else if currentDevice === 'Windows'}
			
 
				-                            <Icon name="ri-windows-fill" size={30} />
			
 
				-                        {:else if currentDevice === 'macOS'}
			
 
				-                            <Icon name="ri-command-fill" size={30} />
			
 
				-                        {:else}
			
 
				-                            <Icon name="ri-ubuntu-fill" size={30} />
			
 
				-                        {/if}
			
 
				-                    </div>
			
 
				-                    <div class="flex flex-col justify-around">
			
 
				-                        <div class="text-sm">
			
 
				-                            {#if currentDevice === 'iOS'}
			
 
				-                                A15 Bionic
			
 
				-                            {:else if currentDevice === 'Android'}
			
 
				-                                骁龙8 Gen1
			
 
				-                            {:else if currentDevice === 'Windows'}
			
 
				-                                AMD YES
			
 
				-                            {:else if currentDevice === 'macOS'}
			
 
				-                                M1 Ultra
			
 
				-                            {:else}
			
 
				-                                Intel
			
 
				-                            {/if}
			
 
				-                        </div>
			
 
				-                        <div>
			
 
				-                            {#if currentDevice === 'iOS'}
			
 
				-                                iPhone
			
 
				-                            {:else if currentDevice === 'Android'}
			
 
				-                                Android
			
 
				-                            {:else if currentDevice === 'Windows'}
			
 
				-                                Windows
			
 
				-                            {:else if currentDevice === 'macOS'}
			
 
				-                                MacBook Pro
			
 
				-                            {:else}
			
 
				-                                Ubuntu
			
 
				-                            {/if}
			
 
				-                        </div>
			
 
				-                    </div>
			
 
				-                </div>
			
 
				-            </Grid>
			
 
				-            <Grid row={2}>
			
 
				-                <div
			
 
				-                    class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
			
 
				-                >
			
 
				-                    <div class="flex justify-center">
			
 
				-                        <Switch inside="slot" radius="full">
			
 
				-                            <div slot="false">
			
 
				-                                <Icon name="ri-bluetooth-line" size={12} top={-1} />
			
 
				-                            </div>
			
 
				-                            <div slot="true">
			
 
				-                                <Icon name="ri-bluetooth-connect-line" size={12} theme top={-1} />
			
 
				-                            </div>
			
 
				-                        </Switch>
			
 
				-                    </div>
			
 
				-                    <div>蓝 牙</div>
			
 
				-                </div>
			
 
				-            </Grid>
			
 
				-            <Grid row={4}>
			
 
				-                <div
			
 
				-                    class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-around items-center shadow dark:shadow-white/10"
			
 
				-                >
			
 
				-                    <div class="w-1/2 overflow-hidden">
			
 
				-                        <img class="block dark:hidden" src="./assets/stdf_512px.png" alt="" />
			
 
				-                        <img class="hidden dark:block" src="./assets/stdf_dark_512px.png" alt="" />
			
 
				-                    </div>
			
 
				-                    <div>STDF</div>
			
 
				-                </div>
			
 
				-            </Grid>
			
 
				-            <Grid row={3}>
			
 
				-                <div
			
 
				-                    class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
			
 
				-                >
			
 
				-                    <div>92%</div>
			
 
				-                    <div class="animate-pulse">
			
 
				-                        <Icon name="ri-battery-2-charge-line" size={30} injClass="text-[green]" />
			
 
				-                    </div>
			
 
				-                    <div>充电中</div>
			
 
				-                </div>
			
 
				-            </Grid>
			
 
				-            <Grid row={2}>
			
 
				-                <div
			
 
				-                    class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-center shadow dark:shadow-white/10"
			
 
				-                >
			
 
				-                    {#if currentDevice === 'iOS'}
			
 
				-                        <Icon name="ri-smartphone-line" size={30} />
			
 
				-                    {:else if currentDevice === 'Android'}
			
 
				-                        <Icon name="ri-tablet-line" size={30} />
			
 
				-                    {:else if currentDevice === 'Windows'}
			
 
				-                        <Icon name="ri-computer-line" size={30} />
			
 
				-                    {:else if currentDevice === 'macOS'}
			
 
				-                        <Icon name="ri-macbook-fill" size={30} />
			
 
				-                    {:else}
			
 
				-                        <Icon name="ri-ubuntu-line" size={30} />
			
 
				-                    {/if}
			
 
				-                </div>
			
 
				-            </Grid>
			
 
				-            <Grid row={2}>
			
 
				-                <div
			
 
				-                    class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-around items-center shadow dark:shadow-white/10 py-1"
			
 
				-                >
			
 
				-                    <div>
			
 
				-                        <Icon name="ri-sun-line" size={20} />
			
 
				-                    </div>
			
 
				-                    <div>
			
 
				-                        <div>68%</div>
			
 
				-                    </div>
			
 
				-                </div>
			
 
				-            </Grid>
			
 
				-            <Grid row={2}>
			
 
				-                <div
			
 
				-                    class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
			
 
				-                >
			
 
				-                    <div class="flex justify-center">
			
 
				-                        <Switch inside="slot" radius="full">
			
 
				-                            <div slot="false">
			
 
				-                                <Icon name="ri-wifi-off-line" size={12} />
			
 
				-                            </div>
			
 
				-                            <div slot="true">
			
 
				-                                <Icon name="ri-wifi-line" size={12} theme />
			
 
				-                            </div>
			
 
				-                        </Switch>
			
 
				-                    </div>
			
 
				-                    <div>Wi-Fi</div>
			
 
				-                </div>
			
 
				-            </Grid>
			
 
				-        </Grids>
			
 
				-    </div>
			
 
				+			<Grid row={2} col={2}>
			
 
				+				<div
			
 
				+					class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-center shadow dark:shadow-white/10"
			
 
				+				>
			
 
				+					<Button fill="lineTheme" radius="full" on:click={changeDeviceFun}>切换设备</Button>
			
 
				+				</div>
			
 
				+			</Grid>
			
 
				+			<Grid row={2} col={2}>
			
 
				+				<div
			
 
				+					class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center flex justify-around shadow dark:shadow-white/10 py-1"
			
 
				+				>
			
 
				+					<div class="flex flex-col justify-center">
			
 
				+						{#if currentDevice === 'iOS'}
			
 
				+							<Icon name="ri-apple-fill" size={30} />
			
 
				+						{:else if currentDevice === 'Android'}
			
 
				+							<Icon name="ri-android-fill" size={30} />
			
 
				+						{:else if currentDevice === 'Windows'}
			
 
				+							<Icon name="ri-windows-fill" size={30} />
			
 
				+						{:else if currentDevice === 'macOS'}
			
 
				+							<Icon name="ri-command-fill" size={30} />
			
 
				+						{:else}
			
 
				+							<Icon name="ri-ubuntu-fill" size={30} />
			
 
				+						{/if}
			
 
				+					</div>
			
 
				+					<div class="flex flex-col justify-around">
			
 
				+						<div class="text-sm">
			
 
				+							{#if currentDevice === 'iOS'}
			
 
				+								A15 Bionic
			
 
				+							{:else if currentDevice === 'Android'}
			
 
				+								骁龙8 Gen1
			
 
				+							{:else if currentDevice === 'Windows'}
			
 
				+								AMD YES
			
 
				+							{:else if currentDevice === 'macOS'}
			
 
				+								M1 Ultra
			
 
				+							{:else}
			
 
				+								Intel
			
 
				+							{/if}
			
 
				+						</div>
			
 
				+						<div>
			
 
				+							{#if currentDevice === 'iOS'}
			
 
				+								iPhone
			
 
				+							{:else if currentDevice === 'Android'}
			
 
				+								Android
			
 
				+							{:else if currentDevice === 'Windows'}
			
 
				+								Windows
			
 
				+							{:else if currentDevice === 'macOS'}
			
 
				+								MacBook Pro
			
 
				+							{:else}
			
 
				+								Ubuntu
			
 
				+							{/if}
			
 
				+						</div>
			
 
				+					</div>
			
 
				+				</div>
			
 
				+			</Grid>
			
 
				+			<Grid row={2}>
			
 
				+				<div
			
 
				+					class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
			
 
				+				>
			
 
				+					<div class="flex justify-center">
			
 
				+						<Switch inside="slot" radius="full">
			
 
				+							<div slot="false">
			
 
				+								<Icon name="ri-bluetooth-line" size={12} top={-1} />
			
 
				+							</div>
			
 
				+							<div slot="true">
			
 
				+								<Icon name="ri-bluetooth-connect-line" size={12} theme top={-1} />
			
 
				+							</div>
			
 
				+						</Switch>
			
 
				+					</div>
			
 
				+					<div>蓝 牙</div>
			
 
				+				</div>
			
 
				+			</Grid>
			
 
				+			<Grid row={4}>
			
 
				+				<div
			
 
				+					class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-around items-center shadow dark:shadow-white/10"
			
 
				+				>
			
 
				+					<div class="w-1/2 overflow-hidden">
			
 
				+						<img class="block dark:hidden" src="./assets/stdf_512px.png" alt="" />
			
 
				+						<img class="hidden dark:block" src="./assets/stdf_dark_512px.png" alt="" />
			
 
				+					</div>
			
 
				+					<div>STDF</div>
			
 
				+				</div>
			
 
				+			</Grid>
			
 
				+			<Grid row={3}>
			
 
				+				<div
			
 
				+					class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
			
 
				+				>
			
 
				+					<div>92%</div>
			
 
				+					<div class="animate-pulse">
			
 
				+						<Icon name="ri-battery-2-charge-line" size={30} injClass="text-[green]" />
			
 
				+					</div>
			
 
				+					<div>充电中</div>
			
 
				+				</div>
			
 
				+			</Grid>
			
 
				+			<Grid row={2}>
			
 
				+				<div
			
 
				+					class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-center shadow dark:shadow-white/10"
			
 
				+				>
			
 
				+					{#if currentDevice === 'iOS'}
			
 
				+						<Icon name="ri-smartphone-line" size={30} />
			
 
				+					{:else if currentDevice === 'Android'}
			
 
				+						<Icon name="ri-tablet-line" size={30} />
			
 
				+					{:else if currentDevice === 'Windows'}
			
 
				+						<Icon name="ri-computer-line" size={30} />
			
 
				+					{:else if currentDevice === 'macOS'}
			
 
				+						<Icon name="ri-macbook-fill" size={30} />
			
 
				+					{:else}
			
 
				+						<Icon name="ri-ubuntu-line" size={30} />
			
 
				+					{/if}
			
 
				+				</div>
			
 
				+			</Grid>
			
 
				+			<Grid row={2}>
			
 
				+				<div
			
 
				+					class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-around items-center shadow dark:shadow-white/10 py-1"
			
 
				+				>
			
 
				+					<div>
			
 
				+						<Icon name="ri-sun-line" size={20} />
			
 
				+					</div>
			
 
				+					<div>
			
 
				+						<div>68%</div>
			
 
				+					</div>
			
 
				+				</div>
			
 
				+			</Grid>
			
 
				+			<Grid row={2}>
			
 
				+				<div
			
 
				+					class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
			
 
				+				>
			
 
				+					<div class="flex justify-center">
			
 
				+						<Switch inside="slot" radius="full">
			
 
				+							<div slot="false">
			
 
				+								<Icon name="ri-wifi-off-line" size={12} />
			
 
				+							</div>
			
 
				+							<div slot="true">
			
 
				+								<Icon name="ri-wifi-line" size={12} theme />
			
 
				+							</div>
			
 
				+						</Switch>
			
 
				+					</div>
			
 
				+					<div>Wi-Fi</div>
			
 
				+				</div>
			
 
				+			</Grid>
			
 
				+		</Grids>
			
 
				+	</div>
			
 
				 </div>
			
--- a/demo/src/pages/grids/GridsDemo_en.svelte
+++ b/demo/src/pages/grids/GridsDemo_en.svelte
@@ -1,288 +1,288 @@
 
				 <!-- Grids Demo -->
			
 
				 <script>
			
 
				-    import { Grids, Grid, Placeholder, Switch, Icon, Button } from 'stdf';
			
 
				+	import { Grids, Grid, Placeholder, Switch, Icon, Button } from 'stdf';
			
 
				 
			
 
				-    let devices = ['iOS', 'Android', 'Windows', 'macOS', 'Ubuntu'];
			
 
				-    let curentIndex = 0;
			
 
				-    $: currentDevice = devices[curentIndex];
			
 
				-    const changeDeviceFun = () => {
			
 
				-        curentIndex === devices.length - 1 ? (curentIndex = 0) : curentIndex++;
			
 
				-    };
			
 
				-    let color = false;
			
 
				-    $: colorCss = `${color ? ' bg-gradient-to-tr from-purple/70 to-orange/70' : ' bg-gray8 dark:bg-gray4'}`;
			
 
				-    const changeColorFun = e => {
			
 
				-        color = e.detail;
			
 
				-    };
			
 
				-    //Get the current time
			
 
				-    const date = new Date();
			
 
				-    //Get the current month and turn into Chinese characters
			
 
				-    const monthArr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
			
 
				-    const monthIndex = date.getMonth();
			
 
				-    $: month = monthArr[monthIndex];
			
 
				-    const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
			
 
				-    const hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
			
 
				-    const minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
			
 
				-    $: time = `${hour}:${minute}`;
			
 
				-    //Get Chinese week
			
 
				-    const week = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
			
 
				-    $: weekDay = week[date.getDay()];
			
 
				+	let devices = ['iOS', 'Android', 'Windows', 'macOS', 'Ubuntu'];
			
 
				+	let curentIndex = 0;
			
 
				+	$: currentDevice = devices[curentIndex];
			
 
				+	const changeDeviceFun = () => {
			
 
				+		curentIndex === devices.length - 1 ? (curentIndex = 0) : curentIndex++;
			
 
				+	};
			
 
				+	let color = false;
			
 
				+	$: colorCss = `${color ? ' bg-gradient-to-tr from-purple/70 to-orange/70' : ' bg-gray8 dark:bg-gray4'}`;
			
 
				+	const changeColorFun = e => {
			
 
				+		color = e.detail;
			
 
				+	};
			
 
				+	//Get the current time
			
 
				+	const date = new Date();
			
 
				+	//Get the current month and turn into Chinese characters
			
 
				+	const monthArr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
			
 
				+	const monthIndex = date.getMonth();
			
 
				+	$: month = monthArr[monthIndex];
			
 
				+	const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
			
 
				+	const hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
			
 
				+	const minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
			
 
				+	$: time = `${hour}:${minute}`;
			
 
				+	//Get Chinese week
			
 
				+	const week = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
			
 
				+	$: weekDay = week[date.getDay()];
			
 
				 </script>
			
 
				 
			
 
				 <div class="font-bold px-4 mt-8 text-left">Example of using a placeholder 3﹡4</div>
			
 
				 <Grids cols={4}>
			
 
				-    <Grid row="3">
			
 
				-        <Placeholder>3﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid col="3">
			
 
				-        <Placeholder>1﹡3</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid row="2">
			
 
				-        <Placeholder>2﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid col="2">
			
 
				-        <Placeholder>1﹡2</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid>
			
 
				-        <Placeholder>1﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid>
			
 
				-        <Placeholder>1﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				+	<Grid row="3">
			
 
				+		<Placeholder>3﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid col="3">
			
 
				+		<Placeholder>1﹡3</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid row="2">
			
 
				+		<Placeholder>2﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid col="2">
			
 
				+		<Placeholder>1﹡2</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid>
			
 
				+		<Placeholder>1﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid>
			
 
				+		<Placeholder>1﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				 </Grids>
			
 
				 
			
 
				 <div class="font-bold px-4 mt-8">Example of using a placeholder 4﹡6</div>
			
 
				 <Grids>
			
 
				-    <Grid row={3} col={2}>
			
 
				-        <Placeholder>3﹡2</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid col={3}>
			
 
				-        <Placeholder>1﹡3</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid row={4}>
			
 
				-        <Placeholder>4﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid row={2}>
			
 
				-        <Placeholder>2﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid>
			
 
				-        <Placeholder>1﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid>
			
 
				-        <Placeholder>1﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid>
			
 
				-        <Placeholder>1﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid>
			
 
				-        <Placeholder>1﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid>
			
 
				-        <Placeholder>1﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid col={4}>
			
 
				-        <Placeholder>1﹡4</Placeholder>
			
 
				-    </Grid>
			
 
				+	<Grid row={3} col={2}>
			
 
				+		<Placeholder>3﹡2</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid col={3}>
			
 
				+		<Placeholder>1﹡3</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid row={4}>
			
 
				+		<Placeholder>4﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid row={2}>
			
 
				+		<Placeholder>2﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid>
			
 
				+		<Placeholder>1﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid>
			
 
				+		<Placeholder>1﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid>
			
 
				+		<Placeholder>1﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid>
			
 
				+		<Placeholder>1﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid>
			
 
				+		<Placeholder>1﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid col={4}>
			
 
				+		<Placeholder>1﹡4</Placeholder>
			
 
				+	</Grid>
			
 
				 </Grids>
			
 
				 
			
 
				 <div class="font-bold px-4 mt-8">Increase the outer marginal and unit grid spacing</div>
			
 
				 <Grids cols={4} gap="4" mx="8" my="8">
			
 
				-    <Grid row={3}>
			
 
				-        <Placeholder>3﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid col={3}>
			
 
				-        <Placeholder>1﹡3</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid row={2}>
			
 
				-        <Placeholder>2﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid col={2}>
			
 
				-        <Placeholder>1﹡2</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid>
			
 
				-        <Placeholder>1﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				-    <Grid>
			
 
				-        <Placeholder>1﹡1</Placeholder>
			
 
				-    </Grid>
			
 
				+	<Grid row={3}>
			
 
				+		<Placeholder>3﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid col={3}>
			
 
				+		<Placeholder>1﹡3</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid row={2}>
			
 
				+		<Placeholder>2﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid col={2}>
			
 
				+		<Placeholder>1﹡2</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid>
			
 
				+		<Placeholder>1﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				+	<Grid>
			
 
				+		<Placeholder>1﹡1</Placeholder>
			
 
				+	</Grid>
			
 
				 </Grids>
			
 
				 
			
 
				 <div class="font-bold px-4 mt-8">Scene example 6﹡5</div>
			
 
				 <div class="pb-8 pt-2">
			
 
				-    <div class={`mx-2 rounded-xl p-2 shadow transition duration-300${colorCss}`}>
			
 
				-        <Grids cols={5} mx="0" my="0">
			
 
				-            <Grid row={3}>
			
 
				-                <div
			
 
				-                    class="flex flex-col justify-between bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center shadow dark:shadow-white/10"
			
 
				-                >
			
 
				-                    <div>{weekDay}</div>
			
 
				-                    <div class="text-4xl">{day}</div>
			
 
				-                    <div class="text-gray6">{month}</div>
			
 
				-                </div>
			
 
				-            </Grid>
			
 
				-            <Grid row={2}>
			
 
				-                <div
			
 
				-                    class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xl font-bold text-center flex flex-col justify-center shadow dark:shadow-white/10"
			
 
				-                >
			
 
				-                    {time}
			
 
				-                </div>
			
 
				-            </Grid>
			
 
				-            <Grid row={2}>
			
 
				-                <div
			
 
				-                    class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
			
 
				-                >
			
 
				-                    <div class="flex justify-center">
			
 
				-                        <Switch inside="slot" radius="full" on:change={changeColorFun}>
			
 
				-                            <div slot="false">
			
 
				-                                <Icon name="ri-paint-brush-line" size={12} />
			
 
				-                            </div>
			
 
				-                            <div slot="true">
			
 
				-                                <Icon name="ri-paint-brush-fill" size={12} theme />
			
 
				-                            </div>
			
 
				-                        </Switch>
			
 
				-                    </div>
			
 
				-                    <div>Colorful</div>
			
 
				-                </div>
			
 
				-            </Grid>
			
 
				+	<div class={`mx-2 rounded-xl p-2 shadow transition duration-300${colorCss}`}>
			
 
				+		<Grids cols={5} mx="0" my="0">
			
 
				+			<Grid row={3}>
			
 
				+				<div
			
 
				+					class="flex flex-col justify-between bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center shadow dark:shadow-white/10"
			
 
				+				>
			
 
				+					<div>{weekDay}</div>
			
 
				+					<div class="text-4xl">{day}</div>
			
 
				+					<div class="text-gray6">{month}</div>
			
 
				+				</div>
			
 
				+			</Grid>
			
 
				+			<Grid row={2}>
			
 
				+				<div
			
 
				+					class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xl font-bold text-center flex flex-col justify-center shadow dark:shadow-white/10"
			
 
				+				>
			
 
				+					{time}
			
 
				+				</div>
			
 
				+			</Grid>
			
 
				+			<Grid row={2}>
			
 
				+				<div
			
 
				+					class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
			
 
				+				>
			
 
				+					<div class="flex justify-center">
			
 
				+						<Switch inside="slot" radius="full" on:change={changeColorFun}>
			
 
				+							<div slot="false">
			
 
				+								<Icon name="ri-paint-brush-line" size={12} />
			
 
				+							</div>
			
 
				+							<div slot="true">
			
 
				+								<Icon name="ri-paint-brush-fill" size={12} theme />
			
 
				+							</div>
			
 
				+						</Switch>
			
 
				+					</div>
			
 
				+					<div>Colorful</div>
			
 
				+				</div>
			
 
				+			</Grid>
			
 
				 
			
 
				-            <Grid row={2} col={2}>
			
 
				-                <div
			
 
				-                    class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-center shadow dark:shadow-white/10"
			
 
				-                >
			
 
				-                    <Button fill="lineTheme" radius="full" on:click={changeDeviceFun}>Switching</Button>
			
 
				-                </div>
			
 
				-            </Grid>
			
 
				-            <Grid row={2} col={2}>
			
 
				-                <div
			
 
				-                    class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center flex justify-around shadow dark:shadow-white/10 py-1"
			
 
				-                >
			
 
				-                    <div class="flex flex-col justify-center">
			
 
				-                        {#if currentDevice === 'iOS'}
			
 
				-                            <Icon name="ri-apple-fill" size={30} />
			
 
				-                        {:else if currentDevice === 'Android'}
			
 
				-                            <Icon name="ri-android-fill" size={30} />
			
 
				-                        {:else if currentDevice === 'Windows'}
			
 
				-                            <Icon name="ri-windows-fill" size={30} />
			
 
				-                        {:else if currentDevice === 'macOS'}
			
 
				-                            <Icon name="ri-command-fill" size={30} />
			
 
				-                        {:else}
			
 
				-                            <Icon name="ri-ubuntu-fill" size={30} />
			
 
				-                        {/if}
			
 
				-                    </div>
			
 
				-                    <div class="flex flex-col justify-around">
			
 
				-                        <div class="text-sm">
			
 
				-                            {#if currentDevice === 'iOS'}
			
 
				-                                A15 Bionic
			
 
				-                            {:else if currentDevice === 'Android'}
			
 
				-                                Snapdragon 8 Gen1
			
 
				-                            {:else if currentDevice === 'Windows'}
			
 
				-                                AMD YES
			
 
				-                            {:else if currentDevice === 'macOS'}
			
 
				-                                M1 Ultra
			
 
				-                            {:else}
			
 
				-                                Intel
			
 
				-                            {/if}
			
 
				-                        </div>
			
 
				-                        <div>
			
 
				-                            {#if currentDevice === 'iOS'}
			
 
				-                                iPhone
			
 
				-                            {:else if currentDevice === 'Android'}
			
 
				-                                Android
			
 
				-                            {:else if currentDevice === 'Windows'}
			
 
				-                                Windows
			
 
				-                            {:else if currentDevice === 'macOS'}
			
 
				-                                MacBook Pro
			
 
				-                            {:else}
			
 
				-                                Ubuntu
			
 
				-                            {/if}
			
 
				-                        </div>
			
 
				-                    </div>
			
 
				-                </div>
			
 
				-            </Grid>
			
 
				-            <Grid row={2}>
			
 
				-                <div
			
 
				-                    class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
			
 
				-                >
			
 
				-                    <div class="flex justify-center">
			
 
				-                        <Switch inside="slot" radius="full">
			
 
				-                            <div slot="false">
			
 
				-                                <Icon name="ri-bluetooth-line" size={12} top={-1} />
			
 
				-                            </div>
			
 
				-                            <div slot="true">
			
 
				-                                <Icon name="ri-bluetooth-connect-line" size={12} theme top={-1} />
			
 
				-                            </div>
			
 
				-                        </Switch>
			
 
				-                    </div>
			
 
				-                    <div>Bluetooth</div>
			
 
				-                </div>
			
 
				-            </Grid>
			
 
				-            <Grid row={4}>
			
 
				-                <div
			
 
				-                    class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-around items-center shadow dark:shadow-white/10"
			
 
				-                >
			
 
				-                    <div class="w-1/2 overflow-hidden">
			
 
				-                        <img class="block dark:hidden" src="./assets/stdf_512px.png" alt="" />
			
 
				-                        <img class="hidden dark:block" src="./assets/stdf_dark_512px.png" alt="" />
			
 
				-                    </div>
			
 
				-                    <div>STDF</div>
			
 
				-                </div>
			
 
				-            </Grid>
			
 
				-            <Grid row={3}>
			
 
				-                <div
			
 
				-                    class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
			
 
				-                >
			
 
				-                    <div>92%</div>
			
 
				-                    <div class="animate-pulse">
			
 
				-                        <Icon name="ri-battery-2-charge-line" size={30} injClass="text-[green]" />
			
 
				-                    </div>
			
 
				-                    <div>charging</div>
			
 
				-                </div>
			
 
				-            </Grid>
			
 
				-            <Grid row={2}>
			
 
				-                <div
			
 
				-                    class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-center shadow dark:shadow-white/10"
			
 
				-                >
			
 
				-                    {#if currentDevice === 'iOS'}
			
 
				-                        <Icon name="ri-smartphone-line" size={30} />
			
 
				-                    {:else if currentDevice === 'Android'}
			
 
				-                        <Icon name="ri-tablet-line" size={30} />
			
 
				-                    {:else if currentDevice === 'Windows'}
			
 
				-                        <Icon name="ri-computer-line" size={30} />
			
 
				-                    {:else if currentDevice === 'macOS'}
			
 
				-                        <Icon name="ri-macbook-fill" size={30} />
			
 
				-                    {:else}
			
 
				-                        <Icon name="ri-ubuntu-line" size={30} />
			
 
				-                    {/if}
			
 
				-                </div>
			
 
				-            </Grid>
			
 
				-            <Grid row={2}>
			
 
				-                <div
			
 
				-                    class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-around items-center shadow dark:shadow-white/10 py-1"
			
 
				-                >
			
 
				-                    <div>
			
 
				-                        <Icon name="ri-sun-line" size={20} />
			
 
				-                    </div>
			
 
				-                    <div>
			
 
				-                        <div>68%</div>
			
 
				-                    </div>
			
 
				-                </div>
			
 
				-            </Grid>
			
 
				-            <Grid row={2}>
			
 
				-                <div
			
 
				-                    class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
			
 
				-                >
			
 
				-                    <div class="flex justify-center">
			
 
				-                        <Switch inside="slot" radius="full">
			
 
				-                            <div slot="false">
			
 
				-                                <Icon name="ri-wifi-off-line" size={12} />
			
 
				-                            </div>
			
 
				-                            <div slot="true">
			
 
				-                                <Icon name="ri-wifi-line" size={12} theme />
			
 
				-                            </div>
			
 
				-                        </Switch>
			
 
				-                    </div>
			
 
				-                    <div>Wi-Fi</div>
			
 
				-                </div>
			
 
				-            </Grid>
			
 
				-        </Grids>
			
 
				-    </div>
			
 
				+			<Grid row={2} col={2}>
			
 
				+				<div
			
 
				+					class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-center shadow dark:shadow-white/10"
			
 
				+				>
			
 
				+					<Button fill="lineTheme" radius="full" on:click={changeDeviceFun}>Switching</Button>
			
 
				+				</div>
			
 
				+			</Grid>
			
 
				+			<Grid row={2} col={2}>
			
 
				+				<div
			
 
				+					class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center flex justify-around shadow dark:shadow-white/10 py-1"
			
 
				+				>
			
 
				+					<div class="flex flex-col justify-center">
			
 
				+						{#if currentDevice === 'iOS'}
			
 
				+							<Icon name="ri-apple-fill" size={30} />
			
 
				+						{:else if currentDevice === 'Android'}
			
 
				+							<Icon name="ri-android-fill" size={30} />
			
 
				+						{:else if currentDevice === 'Windows'}
			
 
				+							<Icon name="ri-windows-fill" size={30} />
			
 
				+						{:else if currentDevice === 'macOS'}
			
 
				+							<Icon name="ri-command-fill" size={30} />
			
 
				+						{:else}
			
 
				+							<Icon name="ri-ubuntu-fill" size={30} />
			
 
				+						{/if}
			
 
				+					</div>
			
 
				+					<div class="flex flex-col justify-around">
			
 
				+						<div class="text-sm">
			
 
				+							{#if currentDevice === 'iOS'}
			
 
				+								A15 Bionic
			
 
				+							{:else if currentDevice === 'Android'}
			
 
				+								Snapdragon 8 Gen1
			
 
				+							{:else if currentDevice === 'Windows'}
			
 
				+								AMD YES
			
 
				+							{:else if currentDevice === 'macOS'}
			
 
				+								M1 Ultra
			
 
				+							{:else}
			
 
				+								Intel
			
 
				+							{/if}
			
 
				+						</div>
			
 
				+						<div>
			
 
				+							{#if currentDevice === 'iOS'}
			
 
				+								iPhone
			
 
				+							{:else if currentDevice === 'Android'}
			
 
				+								Android
			
 
				+							{:else if currentDevice === 'Windows'}
			
 
				+								Windows
			
 
				+							{:else if currentDevice === 'macOS'}
			
 
				+								MacBook Pro
			
 
				+							{:else}
			
 
				+								Ubuntu
			
 
				+							{/if}
			
 
				+						</div>
			
 
				+					</div>
			
 
				+				</div>
			
 
				+			</Grid>
			
 
				+			<Grid row={2}>
			
 
				+				<div
			
 
				+					class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
			
 
				+				>
			
 
				+					<div class="flex justify-center">
			
 
				+						<Switch inside="slot" radius="full">
			
 
				+							<div slot="false">
			
 
				+								<Icon name="ri-bluetooth-line" size={12} top={-1} />
			
 
				+							</div>
			
 
				+							<div slot="true">
			
 
				+								<Icon name="ri-bluetooth-connect-line" size={12} theme top={-1} />
			
 
				+							</div>
			
 
				+						</Switch>
			
 
				+					</div>
			
 
				+					<div>Bluetooth</div>
			
 
				+				</div>
			
 
				+			</Grid>
			
 
				+			<Grid row={4}>
			
 
				+				<div
			
 
				+					class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-around items-center shadow dark:shadow-white/10"
			
 
				+				>
			
 
				+					<div class="w-1/2 overflow-hidden">
			
 
				+						<img class="block dark:hidden" src="./assets/stdf_512px.png" alt="" />
			
 
				+						<img class="hidden dark:block" src="./assets/stdf_dark_512px.png" alt="" />
			
 
				+					</div>
			
 
				+					<div>STDF</div>
			
 
				+				</div>
			
 
				+			</Grid>
			
 
				+			<Grid row={3}>
			
 
				+				<div
			
 
				+					class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
			
 
				+				>
			
 
				+					<div>92%</div>
			
 
				+					<div class="animate-pulse">
			
 
				+						<Icon name="ri-battery-2-charge-line" size={30} injClass="text-[green]" />
			
 
				+					</div>
			
 
				+					<div>charging</div>
			
 
				+				</div>
			
 
				+			</Grid>
			
 
				+			<Grid row={2}>
			
 
				+				<div
			
 
				+					class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-center shadow dark:shadow-white/10"
			
 
				+				>
			
 
				+					{#if currentDevice === 'iOS'}
			
 
				+						<Icon name="ri-smartphone-line" size={30} />
			
 
				+					{:else if currentDevice === 'Android'}
			
 
				+						<Icon name="ri-tablet-line" size={30} />
			
 
				+					{:else if currentDevice === 'Windows'}
			
 
				+						<Icon name="ri-computer-line" size={30} />
			
 
				+					{:else if currentDevice === 'macOS'}
			
 
				+						<Icon name="ri-macbook-fill" size={30} />
			
 
				+					{:else}
			
 
				+						<Icon name="ri-ubuntu-line" size={30} />
			
 
				+					{/if}
			
 
				+				</div>
			
 
				+			</Grid>
			
 
				+			<Grid row={2}>
			
 
				+				<div
			
 
				+					class="bg-white/50 dark:bg-gray2/50 h-full rounded-lg text-xs text-center flex flex-col justify-around items-center shadow dark:shadow-white/10 py-1"
			
 
				+				>
			
 
				+					<div>
			
 
				+						<Icon name="ri-sun-line" size={20} />
			
 
				+					</div>
			
 
				+					<div>
			
 
				+						<div>68%</div>
			
 
				+					</div>
			
 
				+				</div>
			
 
				+			</Grid>
			
 
				+			<Grid row={2}>
			
 
				+				<div
			
 
				+					class="bg-white/50 dark:bg-gray2/50 p-1 h-full rounded-lg text-xs text-center flex flex-col justify-around shadow dark:shadow-white/10"
			
 
				+				>
			
 
				+					<div class="flex justify-center">
			
 
				+						<Switch inside="slot" radius="full">
			
 
				+							<div slot="false">
			
 
				+								<Icon name="ri-wifi-off-line" size={12} />
			
 
				+							</div>
			
 
				+							<div slot="true">
			
 
				+								<Icon name="ri-wifi-line" size={12} theme />
			
 
				+							</div>
			
 
				+						</Switch>
			
 
				+					</div>
			
 
				+					<div>Wi-Fi</div>
			
 
				+				</div>
			
 
				+			</Grid>
			
 
				+		</Grids>
			
 
				+	</div>
			
 
				 </div>
			
--- a/demo/src/pages/home/Home.svelte
+++ b/demo/src/pages/home/Home.svelte
@@ -1,66 +1,67 @@
 
				 <script>
			
 
				-    import { push } from 'svelte-spa-router';
			
 
				-    import { Cell, CellGroup } from 'stdf';
			
 
				-    import menuList from '../../data/menuList';
			
 
				+	import { push } from 'svelte-spa-router';
			
 
				+	import { Cell, CellGroup } from 'stdf';
			
 
				+	import menuList from '../../data/menuList';
			
 
				 
			
 
				-    // 循环 menuList，将所有元素的 childs 组成一个数组
			
 
				-    // Cycle menuList, and combine the childs of all elements into an array
			
 
				-    const menuListArr = menuList.reduce((acc, cur) => {
			
 
				-        if (cur.childs) {
			
 
				-            acc.push(...cur.childs);
			
 
				-        }
			
 
				-        return acc;
			
 
				-    }, []);
			
 
				+	// 循环 menuList，将所有元素的 childs 组成一个数组
			
 
				+	// Cycle menuList, and combine the childs of all elements into an array
			
 
				+	const menuListArr = menuList.reduce((acc, cur) => {
			
 
				+		if (cur.childs) {
			
 
				+			acc.push(...cur.childs);
			
 
				+		}
			
 
				+		return acc;
			
 
				+	}, []);
			
 
				 
			
 
				-    const pushFun = child => {
			
 
				-        push(`/${child.nav}`);
			
 
				-    };
			
 
				+	const pushFun = child => {
			
 
				+		push(`/${child.nav}`);
			
 
				+	};
			
 
				 
			
 
				-    const isZh = sessionStorage.getItem('lang') === 'zh_CN';
			
 
				+	const isZh = sessionStorage.getItem('lang') === 'zh_CN';
			
 
				 
			
 
				-    const changeLangFunc = () => {
			
 
				-        sessionStorage.setItem('lang', isZh ? 'en_US' : 'zh_CN');
			
 
				-        window.location.reload();
			
 
				-    };
			
 
				+	const changeLangFunc = () => {
			
 
				+		sessionStorage.setItem('lang', isZh ? 'en_US' : 'zh_CN');
			
 
				+		window.location.reload();
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="h-14 mt-8 mb-2 flex flex-col justify-center items-center">
			
 
				-    <svg viewBox="0 0 90 80">
			
 
				-        <path
			
 
				-            class="fill-primary dark:fill-dark"
			
 
				-            d="M0 0H20H40H50C64.8056 0 77.7325 8.04398 84.6487 20H50H40V22.6757V30H50C55.5229 30 60 34.4771 60 40C60 45.5229 55.5229 50 50 50H40V57.3243V78.7398V80H20V66.4583V20H15.3513H0V0ZM50 80C72.0914 80 90 62.0914 90 40C90 36.547 89.5625 33.1962 88.7398 30H67.3244C69.0261 32.9417 70 36.3571 70 40C70 51.0457 61.0457 60 50 60V80Z"
			
 
				-        />
			
 
				-        <path class="fill-dark dark:fill-primary" d="M20 30V0L0 50H20V80L40 30H20Z" />
			
 
				-    </svg>
			
 
				+	<svg viewBox="0 0 90 80">
			
 
				+		<path
			
 
				+			class="fill-primary dark:fill-dark"
			
 
				+			d="M0 0H20H40H50C64.8056 0 77.7325 8.04398 84.6487 20H50H40V22.6757V30H50C55.5229 30 60 34.4771 60 40C60 45.5229 55.5229 50 50 50H40V57.3243V78.7398V80H20V66.4583V20H15.3513H0V0ZM50 80C72.0914 80 90 62.0914 90 40C90 36.547 89.5625 33.1962 88.7398 30H67.3244C69.0261 32.9417 70 36.3571 70 40C70 51.0457 61.0457 60 50 60V80Z"
			
 
				+		/>
			
 
				+		<path class="fill-dark dark:fill-primary" d="M20 30V0L0 50H20V80L40 30H20Z" />
			
 
				+	</svg>
			
 
				 </div>
			
 
				 <a href="https://stdf.design" target="_blank" rel="noreferrer">
			
 
				-    <div class="text-center text-lg underline">stdf.design</div>
			
 
				+	<div class="text-center text-lg underline">stdf.design</div>
			
 
				 </a>
			
 
				 
			
 
				 <div class="flex flex-col py-4">
			
 
				-    <div>
			
 
				-        {#each menuList as menu}
			
 
				-            <div class="text-sm px-4 mt-8 mb-2 text-gray6">{isZh ? menu.class : menu.class_en}</div>
			
 
				-            <CellGroup>
			
 
				-                {#each menu.childs as child, i}
			
 
				-                    <Cell
			
 
				-                        title={isZh ? child.title : child.title_en}
			
 
				-                        mx="0"
			
 
				-                        my="0"
			
 
				-                        shadow="none"
			
 
				-                        radius="none"
			
 
				-                        line={i !== menu.childs.length - 1}
			
 
				-                        on:click={() => pushFun(child)}
			
 
				-                    />
			
 
				-                {/each}
			
 
				-            </CellGroup>
			
 
				-        {/each}
			
 
				-    </div>
			
 
				-    <div class="p-4">{isZh ? '当前组件总数：' : 'Current number of components: '}{menuListArr.length}</div>
			
 
				-    <div class="flex text-xs justify-around p-4 text-primary dark:text-dark underline">
			
 
				-        <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-        <div on:click={changeLangFunc}>
			
 
				-            {isZh ? 'English' : '简体中文'}
			
 
				-        </div>
			
 
				-    </div>
			
 
				+	<div>
			
 
				+		{#each menuList as menu}
			
 
				+			<div class="text-sm px-4 mt-8 mb-2 text-gray6">{isZh ? menu.class : menu.class_en}</div>
			
 
				+			<CellGroup>
			
 
				+				{#each menu.childs as child, i}
			
 
				+					<Cell
			
 
				+						title={isZh ? child.title : child.title_en}
			
 
				+						mx="0"
			
 
				+						my="0"
			
 
				+						shadow="none"
			
 
				+						radius="none"
			
 
				+						line={i !== menu.childs.length - 1}
			
 
				+						on:click={() => pushFun(child)}
			
 
				+					/>
			
 
				+				{/each}
			
 
				+			</CellGroup>
			
 
				+		{/each}
			
 
				+	</div>
			
 
				+	<div class="p-4">{isZh ? '当前组件总数：' : 'Current number of components: '}{menuListArr.length}</div>
			
 
				+	<div class="flex text-xs justify-around p-4 text-primary dark:text-dark underline">
			
 
				+		<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+		<!-- svelte-ignore a11y-no-static-element-interactions -->
			
 
				+		<div on:click={changeLangFunc}>
			
 
				+			{isZh ? 'English' : '简体中文'}
			
 
				+		</div>
			
 
				+	</div>
			
 
				 </div>
			
--- a/demo/src/pages/icon/IconDemo.svelte
+++ b/demo/src/pages/icon/IconDemo.svelte
@@ -1,123 +1,118 @@
 
				 <!-- Icon Demo，请确保已引入 symbol.svg 文件。 -->
			
 
				 <script>
			
 
				-    import { Icon } from 'stdf';
			
 
				+	import { Icon } from 'stdf';
			
 
				 
			
 
				-    const icons = ['ri-spy-fill', 'ri-chrome-fill', 'ri-riding-line', 'ri-switch-fill'];
			
 
				+	const icons = ['ri-spy-fill', 'ri-chrome-fill', 'ri-riding-line', 'ri-switch-fill'];
			
 
				 </script>
			
 
				 
			
 
				 <div class="felx felx-col space-y-12 px-4 py-8">
			
 
				-    <!-- 基础用法 -->
			
 
				-    <div>
			
 
				-        <div class="mb-2 font-bold text-xl">基础用法</div>
			
 
				-        <div class="flex flex-wrap justify-between">
			
 
				-            {#each icons as icon}
			
 
				-                <div class="py-2 text-center flex-1">
			
 
				-                    <Icon name={icon} />
			
 
				-                    <div class="text-xs mt-2 text-gray6">{icon}</div>
			
 
				-                </div>
			
 
				-            {/each}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-    <!-- 跟随主题色 -->
			
 
				-    <div>
			
 
				-        <div class="mb-2 font-bold text-xl">跟随主题色</div>
			
 
				-        <div class="flex flex-wrap justify-between">
			
 
				-            {#each icons as icon}
			
 
				-                <div class="py-2 text-center flex-1">
			
 
				-                    <Icon name={icon} theme />
			
 
				-                </div>
			
 
				-            {/each}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-    <!-- 不同大小 -->
			
 
				-    <div>
			
 
				-        <div class="mb-2 font-bold text-xl">不同大小</div>
			
 
				-        <div class="flex flex-wrap justify-between">
			
 
				-            {#each icons as icon, i}
			
 
				-                <div class="py-2 text-center flex-1">
			
 
				-                    <Icon name={icon} size={18 + i * 6} />
			
 
				-                    <div class="text-xs mt-2 text-gray6">{18 + i * 6}</div>
			
 
				-                </div>
			
 
				-            {/each}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-    <!-- 不同透明度 -->
			
 
				-    <div>
			
 
				-        <div class="mb-2 font-bold text-xl">不同透明度</div>
			
 
				-        <div class="flex flex-wrap justify-between">
			
 
				-            {#each icons as icon, i}
			
 
				-                <div class="py-2 text-center flex-1">
			
 
				-                    <Icon name={icon} alpha={Number((0.2 + i * 0.2).toFixed(1))} />
			
 
				-                    <div class="text-xs mt-2 text-gray6">{(0.2 + i * 0.2).toFixed(1)}</div>
			
 
				-                </div>
			
 
				-            {/each}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-    <!-- 自定义颜色（通过 injClass） -->
			
 
				-    <div>
			
 
				-        <div class="mb-2 font-bold text-xl">
			
 
				-            自定义颜色<span class="ml-2 text-xs text-gray6 font-normal">通过 injClass</span>
			
 
				-        </div>
			
 
				-        <div class="flex flex-wrap justify-between">
			
 
				-            {#each icons as icon}
			
 
				-                <div class="py-2 text-center flex-1">
			
 
				-                    <Icon name={icon} injClass="text-[red] dark:text-green" />
			
 
				-                </div>
			
 
				-            {/each}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-    <!-- 自定义颜色（通过 slot） -->
			
 
				-    <div>
			
 
				-        <div class="mb-2 font-bold text-xl">
			
 
				-            自定义颜色<span class="ml-2 text-xs text-gray6 font-normal">通过 slot</span>
			
 
				-        </div>
			
 
				-        <div class="flex flex-wrap justify-between">
			
 
				-            {#each icons as icon}
			
 
				-                <div class="py-2 text-center flex-1">
			
 
				-                    <Icon name="slot">
			
 
				-                        <i class="text-[#266CF6] dark:text-[#C84031]">
			
 
				-                            <Icon name={icon} />
			
 
				-                        </i>
			
 
				-                    </Icon>
			
 
				-                </div>
			
 
				-            {/each}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-    <!-- 插槽 -->
			
 
				-    <div>
			
 
				-        <div class="mb-2 font-bold text-xl">插槽</div>
			
 
				-        <div class="flex flex-wrap justify-between">
			
 
				-            {#each icons as icon}
			
 
				-                <div class="py-2 text-center flex-1">
			
 
				-                    <Icon name="slot">
			
 
				-                        <svg
			
 
				-                            height="24"
			
 
				-                            width="24"
			
 
				-                            aria-hidden="true"
			
 
				-                            viewBox="0 0 16 16"
			
 
				-                            data-view-component="true"
			
 
				-                            style="display: inline;"
			
 
				-                        >
			
 
				-                            <path
			
 
				-                                fill-rule="evenodd"
			
 
				-                                d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
			
 
				-                            />
			
 
				-                        </svg>
			
 
				-                    </Icon>
			
 
				-                </div>
			
 
				-            {/each}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-    <!-- 偏移 -->
			
 
				-    <div>
			
 
				-        <div class="mb-2 font-bold text-xl">偏移</div>
			
 
				-        <div class="flex flex-wrap justify-between">
			
 
				-            {#each icons as icon, i}
			
 
				-                <div class="py-2 text-center flex-1">
			
 
				-                    <Icon name={icons[1]} top={-4 + i * 2} />
			
 
				-                    top:{-4 + i * 2}
			
 
				-                </div>
			
 
				-            {/each}
			
 
				-        </div>
			
 
				-    </div>
			
 
				+	<!-- 基础用法 -->
			
 
				+	<div>
			
 
				+		<div class="mb-2 font-bold text-xl">基础用法</div>
			
 
				+		<div class="flex flex-wrap justify-between">
			
 
				+			{#each icons as icon}
			
 
				+				<div class="py-2 text-center flex-1">
			
 
				+					<Icon name={icon} />
			
 
				+					<div class="text-xs mt-2 text-gray6">{icon}</div>
			
 
				+				</div>
			
 
				+			{/each}
			
 
				+		</div>
			
 
				+	</div>
			
 
				+	<!-- 跟随主题色 -->
			
 
				+	<div>
			
 
				+		<div class="mb-2 font-bold text-xl">跟随主题色</div>
			
 
				+		<div class="flex flex-wrap justify-between">
			
 
				+			{#each icons as icon}
			
 
				+				<div class="py-2 text-center flex-1">
			
 
				+					<Icon name={icon} theme />
			
 
				+				</div>
			
 
				+			{/each}
			
 
				+		</div>
			
 
				+	</div>
			
 
				+	<!-- 不同大小 -->
			
 
				+	<div>
			
 
				+		<div class="mb-2 font-bold text-xl">不同大小</div>
			
 
				+		<div class="flex flex-wrap justify-between">
			
 
				+			{#each icons as icon, i}
			
 
				+				<div class="py-2 text-center flex-1">
			
 
				+					<Icon name={icon} size={18 + i * 6} />
			
 
				+					<div class="text-xs mt-2 text-gray6">{18 + i * 6}</div>
			
 
				+				</div>
			
 
				+			{/each}
			
 
				+		</div>
			
 
				+	</div>
			
 
				+	<!-- 不同透明度 -->
			
 
				+	<div>
			
 
				+		<div class="mb-2 font-bold text-xl">不同透明度</div>
			
 
				+		<div class="flex flex-wrap justify-between">
			
 
				+			{#each icons as icon, i}
			
 
				+				<div class="py-2 text-center flex-1">
			
 
				+					<Icon name={icon} alpha={Number((0.2 + i * 0.2).toFixed(1))} />
			
 
				+					<div class="text-xs mt-2 text-gray6">{(0.2 + i * 0.2).toFixed(1)}</div>
			
 
				+				</div>
			
 
				+			{/each}
			
 
				+		</div>
			
 
				+	</div>
			
 
				+	<!-- 自定义颜色（通过 injClass） -->
			
 
				+	<div>
			
 
				+		<div class="mb-2 font-bold text-xl">
			
 
				+			自定义颜色<span class="ml-2 text-xs text-gray6 font-normal">通过 injClass</span>
			
 
				+		</div>
			
 
				+		<div class="flex flex-wrap justify-between">
			
 
				+			{#each icons as icon}
			
 
				+				<div class="py-2 text-center flex-1">
			
 
				+					<Icon name={icon} injClass="text-[red] dark:text-green" />
			
 
				+				</div>
			
 
				+			{/each}
			
 
				+		</div>
			
 
				+	</div>
			
 
				+	<!-- 自定义颜色（通过 slot） -->
			
 
				+	<div>
			
 
				+		<div class="mb-2 font-bold text-xl">
			
 
				+			自定义颜色<span class="ml-2 text-xs text-gray6 font-normal">通过 slot</span>
			
 
				+		</div>
			
 
				+		<div class="flex flex-wrap justify-between">
			
 
				+			{#each icons as icon}
			
 
				+				<div class="py-2 text-center flex-1">
			
 
				+					<Icon name="slot">
			
 
				+						<i class="text-[#266CF6] dark:text-[#C84031]">
			
 
				+							<Icon name={icon} />
			
 
				+						</i>
			
 
				+					</Icon>
			
 
				+				</div>
			
 
				+			{/each}
			
 
				+		</div>
			
 
				+	</div>
			
 
				+	<!-- 插槽 -->
			
 
				+	<div>
			
 
				+		<div class="mb-2 font-bold text-xl">插槽</div>
			
 
				+		<div class="flex flex-wrap justify-between">
			
 
				+			<!-- eslint-disable-next-line no-unused-vars -->
			
 
				+			{#each icons as icon}
			
 
				+				<div class="py-2 text-center flex-1">
			
 
				+					<Icon name="slot">
			
 
				+						<svg height="24" width="24" aria-hidden="true" viewBox="0 0 16 16" data-view-component="true" style="display: inline;">
			
 
				+							<path
			
 
				+								fill-rule="evenodd"
			
 
				+								d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
			
 
				+							/>
			
 
				+						</svg>
			
 
				+					</Icon>
			
 
				+				</div>
			
 
				+			{/each}
			
 
				+		</div>
			
 
				+	</div>
			
 
				+	<!-- 偏移 -->
			
 
				+	<div>
			
 
				+		<div class="mb-2 font-bold text-xl">偏移</div>
			
 
				+		<div class="flex flex-wrap justify-between">
			
 
				+			<!-- eslint-disable-next-line no-unused-vars -->
			
 
				+			{#each icons as icon, i}
			
 
				+				<div class="py-2 text-center flex-1">
			
 
				+					<Icon name={icons[1]} top={-4 + i * 2} />
			
 
				+					top:{-4 + i * 2}
			
 
				+				</div>
			
 
				+			{/each}
			
 
				+		</div>
			
 
				+	</div>
			
 
				 </div>
			
--- a/demo/src/pages/icon/IconDemo_en.svelte
+++ b/demo/src/pages/icon/IconDemo_en.svelte
@@ -1,115 +1,110 @@
 
				 <!-- Icon Demo, Please make sure you have been introduced symbol.svg file. -->
			
 
				 <script>
			
 
				-    import { Icon } from 'stdf';
			
 
				+	import { Icon } from 'stdf';
			
 
				 
			
 
				-    const icons = ['ri-spy-fill', 'ri-chrome-fill', 'ri-riding-line', 'ri-switch-fill'];
			
 
				+	const icons = ['ri-spy-fill', 'ri-chrome-fill', 'ri-riding-line', 'ri-switch-fill'];
			
 
				 </script>
			
 
				 
			
 
				 <div class="felx felx-col space-y-12 px-4 py-8">
			
 
				-    <div>
			
 
				-        <div class="mb-2 font-bold text-xl">Basic usage</div>
			
 
				-        <div class="flex flex-wrap justify-between">
			
 
				-            {#each icons as icon}
			
 
				-                <div class="py-2 text-center flex-1">
			
 
				-                    <Icon name={icon} />
			
 
				-                    <div class="text-xs mt-2 text-gray6">{icon}</div>
			
 
				-                </div>
			
 
				-            {/each}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="mb-2 font-bold text-xl">Follow the theme color</div>
			
 
				-        <div class="flex flex-wrap justify-between">
			
 
				-            {#each icons as icon}
			
 
				-                <div class="py-2 text-center flex-1">
			
 
				-                    <Icon name={icon} theme />
			
 
				-                </div>
			
 
				-            {/each}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="mb-2 font-bold text-xl">Different size</div>
			
 
				-        <div class="flex flex-wrap justify-between">
			
 
				-            {#each icons as icon, i}
			
 
				-                <div class="py-2 text-center flex-1">
			
 
				-                    <Icon name={icon} size={18 + i * 6} />
			
 
				-                    <div class="text-xs mt-2 text-gray6">{18 + i * 6}</div>
			
 
				-                </div>
			
 
				-            {/each}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="mb-2 font-bold text-xl">Different transparency</div>
			
 
				-        <div class="flex flex-wrap justify-between">
			
 
				-            {#each icons as icon, i}
			
 
				-                <div class="py-2 text-center flex-1">
			
 
				-                    <Icon name={icon} alpha={Number((0.2 + i * 0.2).toFixed(1))} />
			
 
				-                    <div class="text-xs mt-2 text-gray6">{(0.2 + i * 0.2).toFixed(1)}</div>
			
 
				-                </div>
			
 
				-            {/each}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="mb-2 font-bold text-xl">
			
 
				-            Custom color<span class="ml-2 text-xs text-gray6 font-normal">By injClass</span>
			
 
				-        </div>
			
 
				-        <div class="flex flex-wrap justify-between">
			
 
				-            {#each icons as icon}
			
 
				-                <div class="py-2 text-center flex-1">
			
 
				-                    <Icon name={icon} injClass="text-[red] dark:text-green" />
			
 
				-                </div>
			
 
				-            {/each}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="mb-2 font-bold text-xl">
			
 
				-            Custom color<span class="ml-2 text-xs text-gray6 font-normal">by slot</span>
			
 
				-        </div>
			
 
				-        <div class="flex flex-wrap justify-between">
			
 
				-            {#each icons as icon}
			
 
				-                <div class="py-2 text-center flex-1">
			
 
				-                    <Icon name="slot">
			
 
				-                        <i class="text-[#266CF6] dark:text-[#C84031]">
			
 
				-                            <Icon name={icon} />
			
 
				-                        </i>
			
 
				-                    </Icon>
			
 
				-                </div>
			
 
				-            {/each}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="mb-2 font-bold text-xl">Slot</div>
			
 
				-        <div class="flex flex-wrap justify-between">
			
 
				-            {#each icons as icon}
			
 
				-                <div class="py-2 text-center flex-1">
			
 
				-                    <Icon name="slot">
			
 
				-                        <svg
			
 
				-                            height="24"
			
 
				-                            width="24"
			
 
				-                            aria-hidden="true"
			
 
				-                            viewBox="0 0 16 16"
			
 
				-                            data-view-component="true"
			
 
				-                            style="display: inline;"
			
 
				-                        >
			
 
				-                            <path
			
 
				-                                fill-rule="evenodd"
			
 
				-                                d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
			
 
				-                            />
			
 
				-                        </svg>
			
 
				-                    </Icon>
			
 
				-                </div>
			
 
				-            {/each}
			
 
				-        </div>
			
 
				-    </div>
			
 
				-    <div>
			
 
				-        <div class="mb-2 font-bold text-xl">Offset</div>
			
 
				-        <div class="flex flex-wrap justify-between">
			
 
				-            {#each icons as icon, i}
			
 
				-                <div class="py-2 text-center flex-1">
			
 
				-                    <Icon name={icons[1]} top={-4 + i * 2} />
			
 
				-                    top:{-4 + i * 2}
			
 
				-                </div>
			
 
				-            {/each}
			
 
				-        </div>
			
 
				-    </div>
			
 
				+	<div>
			
 
				+		<div class="mb-2 font-bold text-xl">Basic usage</div>
			
 
				+		<div class="flex flex-wrap justify-between">
			
 
				+			{#each icons as icon}
			
 
				+				<div class="py-2 text-center flex-1">
			
 
				+					<Icon name={icon} />
			
 
				+					<div class="text-xs mt-2 text-gray6">{icon}</div>
			
 
				+				</div>
			
 
				+			{/each}
			
 
				+		</div>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="mb-2 font-bold text-xl">Follow the theme color</div>
			
 
				+		<div class="flex flex-wrap justify-between">
			
 
				+			{#each icons as icon}
			
 
				+				<div class="py-2 text-center flex-1">
			
 
				+					<Icon name={icon} theme />
			
 
				+				</div>
			
 
				+			{/each}
			
 
				+		</div>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="mb-2 font-bold text-xl">Different size</div>
			
 
				+		<div class="flex flex-wrap justify-between">
			
 
				+			{#each icons as icon, i}
			
 
				+				<div class="py-2 text-center flex-1">
			
 
				+					<Icon name={icon} size={18 + i * 6} />
			
 
				+					<div class="text-xs mt-2 text-gray6">{18 + i * 6}</div>
			
 
				+				</div>
			
 
				+			{/each}
			
 
				+		</div>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="mb-2 font-bold text-xl">Different transparency</div>
			
 
				+		<div class="flex flex-wrap justify-between">
			
 
				+			{#each icons as icon, i}
			
 
				+				<div class="py-2 text-center flex-1">
			
 
				+					<Icon name={icon} alpha={Number((0.2 + i * 0.2).toFixed(1))} />
			
 
				+					<div class="text-xs mt-2 text-gray6">{(0.2 + i * 0.2).toFixed(1)}</div>
			
 
				+				</div>
			
 
				+			{/each}
			
 
				+		</div>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="mb-2 font-bold text-xl">
			
 
				+			Custom color<span class="ml-2 text-xs text-gray6 font-normal">By injClass</span>
			
 
				+		</div>
			
 
				+		<div class="flex flex-wrap justify-between">
			
 
				+			{#each icons as icon}
			
 
				+				<div class="py-2 text-center flex-1">
			
 
				+					<Icon name={icon} injClass="text-[red] dark:text-green" />
			
 
				+				</div>
			
 
				+			{/each}
			
 
				+		</div>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="mb-2 font-bold text-xl">
			
 
				+			Custom color<span class="ml-2 text-xs text-gray6 font-normal">by slot</span>
			
 
				+		</div>
			
 
				+		<div class="flex flex-wrap justify-between">
			
 
				+			{#each icons as icon}
			
 
				+				<div class="py-2 text-center flex-1">
			
 
				+					<Icon name="slot">
			
 
				+						<i class="text-[#266CF6] dark:text-[#C84031]">
			
 
				+							<Icon name={icon} />
			
 
				+						</i>
			
 
				+					</Icon>
			
 
				+				</div>
			
 
				+			{/each}
			
 
				+		</div>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="mb-2 font-bold text-xl">Slot</div>
			
 
				+		<div class="flex flex-wrap justify-between">
			
 
				+			<!-- eslint-disable-next-line no-unused-vars -->
			
 
				+			{#each icons as icon}
			
 
				+				<div class="py-2 text-center flex-1">
			
 
				+					<Icon name="slot">
			
 
				+						<svg height="24" width="24" aria-hidden="true" viewBox="0 0 16 16" data-view-component="true" style="display: inline;">
			
 
				+							<path
			
 
				+								fill-rule="evenodd"
			
 
				+								d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
			
 
				+							/>
			
 
				+						</svg>
			
 
				+					</Icon>
			
 
				+				</div>
			
 
				+			{/each}
			
 
				+		</div>
			
 
				+	</div>
			
 
				+	<div>
			
 
				+		<div class="mb-2 font-bold text-xl">Offset</div>
			
 
				+		<div class="flex flex-wrap justify-between">
			
 
				+			<!-- eslint-disable-next-line no-unused-vars -->
			
 
				+			{#each icons as icon, i}
			
 
				+				<div class="py-2 text-center flex-1">
			
 
				+					<Icon name={icons[1]} top={-4 + i * 2} />
			
 
				+					top:{-4 + i * 2}
			
 
				+				</div>
			
 
				+			{/each}
			
 
				+		</div>
			
 
				+	</div>
			
 
				 </div>
			
--- a/demo/src/pages/indexBar/IndexBarDemo.svelte
+++ b/demo/src/pages/indexBar/IndexBarDemo.svelte
@@ -1,180 +1,180 @@
 
				 <!-- IndexBar Demo -->
			
 
				 <script>
			
 
				-    import { IndexBar, Button, Toast } from 'stdf';
			
 
				+	import { IndexBar, Button, Toast } from 'stdf';
			
 
				 
			
 
				-    const addressList = [
			
 
				-        { index: 'A', title: 'A', child: [{ text: '澳门' }, { text: '安宁' }, { text: '安庆' }, { text: '鞍山' }] },
			
 
				-        { index: 'B', title: 'B', child: [{ text: '北京' }, { text: '保定' }, { text: '包头' }, { text: '宝鸡' }] },
			
 
				-        { index: 'C', title: 'C', child: [{ text: '承德' }, { text: '沧州' }, { text: '赤峰' }] },
			
 
				-        { index: 'D', title: 'D', child: [{ text: '大同' }, { text: '大连' }, { text: '大理' }] },
			
 
				-        { index: 'E', title: 'E', child: [{ text: '恩施' }, { text: '鄂尔多斯' }, { text: '峨眉山' }] },
			
 
				-        { index: 'F', title: 'F', child: [{ text: '抚顺' }, { text: '佛山' }, { text: '福泉' }] },
			
 
				-        { index: 'G', title: 'G', child: [{ text: '个旧' }, { text: '桂林' }, { text: '赣州' }] },
			
 
				-        { index: 'H', title: 'H', child: [{ text: '邯郸' }, { text: '呼和浩特' }, { text: '呼伦贝尔' }] },
			
 
				-        { index: 'J', title: 'J', child: [{ text: '吉林' }, { text: '酒泉' }, { text: '晋江' }] },
			
 
				-        { index: 'K', title: 'K', child: [{ text: '昆明' }, { text: '昆山' }, { text: '开封' }] },
			
 
				-        { index: 'L', title: 'L', child: [{ text: '拉萨' }, { text: '兰州' }, { text: '泸州' }] },
			
 
				-        { index: 'M', title: 'M', child: [{ text: '绵阳' }, { text: '马鞍山' }, { text: '牡丹江' }] },
			
 
				-        { index: 'N', title: 'N', child: [{ text: '南昌' }, { text: '南京' }, { text: '宁波' }] },
			
 
				-        { index: 'P', title: 'P', child: [{ text: '莆田' }, { text: '攀枝花' }, { text: '平顶山' }] },
			
 
				-        { index: 'Q', title: 'Q', child: [{ text: '曲靖' }, { text: '青岛' }, { text: '齐齐哈尔' }] },
			
 
				-        { index: 'R', title: 'R', child: [{ text: '瑞丽' }, { text: '瑞安' }, { text: '瑞金' }] },
			
 
				-        { index: 'S', title: 'S', child: [{ text: '三亚' }, { text: '上海' }, { text: '深圳' }] },
			
 
				-        { index: 'T', title: 'T', child: [{ text: '台州' }, { text: '太原' }, { text: '天津' }] },
			
 
				-        { index: 'W', title: 'W', child: [{ text: '武汉' }, { text: '无锡' }, { text: '芜湖' }] },
			
 
				-        { index: 'X', title: 'X', child: [{ text: '西安' }, { text: '厦门' }, { text: '宣威' }] },
			
 
				-        { index: 'Y', title: 'Y', child: [{ text: '义乌' }, { text: '银川' }, { text: '玉溪' }] },
			
 
				-        { index: 'Z', title: 'Z', child: [{ text: '昭通' }, { text: '遵义' }, { text: '张家界' }] },
			
 
				-    ];
			
 
				-    const emojiList = [
			
 
				-        { index: '😀', title: '表情与情感', child: [{ text: '😂' }, { text: '🥰' }, { text: '🥱' }, { text: '🧐' }] },
			
 
				-        { index: '👋', title: '人物与身体', child: [{ text: '👌' }, { text: '🤝' }, { text: '👨‍💻' }, { text: '💪' }] },
			
 
				-        { index: '🐵', title: '动物与自然', child: [{ text: '🦄' }, { text: '🌱' }, { text: '🦁' }, { text: '🐶' }] },
			
 
				-        { index: '🍎', title: '食物与饮料', child: [{ text: '🍑' }, { text: '🍞' }, { text: '🍽️' }, { text: '🍩' }] },
			
 
				-        { index: '🌍', title: '旅行与地理', child: [{ text: '🏔️' }, { text: '🚆' }, { text: '✈️' }, { text: '🛵' }] },
			
 
				-        { index: '🏆', title: '活动', child: [{ text: '⚽' }, { text: '🎨' }, { text: '🏀' }, { text: '🧨' }] },
			
 
				-        { index: '📱', title: '物品', child: [{ text: '🎩' }, { text: '💻' }, { text: '🎒' }, { text: '📖' }] },
			
 
				-        { index: '⚠️', title: '符号标志', child: [{ text: '🚫' }, { text: '⚛️' }, { text: '🛄' }, { text: '🔱' }] },
			
 
				-        { index: '🏁', title: '旗帜', child: [{ text: '🇨🇳' }, { text: '🇺🇸' }, { text: '🇧🇻' }, { text: '🇦🇹' }] },
			
 
				-    ];
			
 
				-    const movieTVList = [
			
 
				-        {
			
 
				-            index: '三',
			
 
				-            title: '三体',
			
 
				-            child: [
			
 
				-                { text: '地球往事' },
			
 
				-                { text: '黑暗森林' },
			
 
				-                { text: '死神永生' },
			
 
				-                { text: '科学边界' },
			
 
				-                { text: '射手和农场主' },
			
 
				-                { text: '寂静的春天' },
			
 
				-                { text: '宇宙闪烁' },
			
 
				-                { text: '地球叛军' },
			
 
				-                { text: '古筝行动' },
			
 
				-                { text: '智子' },
			
 
				-                { text: '面壁者' },
			
 
				-                { text: '咒语' },
			
 
				-                { text: '黑暗森林' },
			
 
				-                { text: '危机纪元' },
			
 
				-                { text: '威慑纪元' },
			
 
				-                { text: '广播纪元' },
			
 
				-                { text: '掩体纪元' },
			
 
				-                { text: '银河纪元' },
			
 
				-                { text: '时间开始' },
			
 
				-                { text: '时间之外，我们的宇宙' },
			
 
				-            ],
			
 
				-        },
			
 
				-        {
			
 
				-            index: '流',
			
 
				-            title: '流浪地球',
			
 
				-            child: [
			
 
				-                { text: '人类的勇气和坚毅必将被镌刻在星空之下。' },
			
 
				-                { text: '希望是像钻石一样珍贵的东西！' },
			
 
				-                { text: '希望，希望是我们唯一回家的方向。' },
			
 
				-                { text: '让人类永远保持理智，是一种奢求。' },
			
 
				-                { text: '道路千万条，安全第一条；行车不规范，亲人两行泪！' },
			
 
				-                { text: '那时候人们还没注意到太阳，人们更喜欢叫做钱的东西。' },
			
 
				-                { text: '为了我们的孩子，没有什么不能失去的了' },
			
 
				-                { text: 'moss没有叛逃!' },
			
 
				-                { text: '火石没了，我老婆孩子全他妈白死了！' },
			
 
				-            ],
			
 
				-        },
			
 
				-        {
			
 
				-            index: '仙',
			
 
				-            title: '仙剑奇侠传',
			
 
				-            child: [
			
 
				-                { text: '既不回头，何必不忘。既然无缘，何必誓言。' },
			
 
				-                { text: '没有值得不值得，只有愿意不愿意。' },
			
 
				-                { text: '不曾得到，谈何放下。既已得到，又如何放下。' },
			
 
				-                { text: '轮回的是故人，不变的是初心！' },
			
 
				-                { text: '明夕何夕，君已陌路。' },
			
 
				-                { text: '我曾经也拥有过爱，只是，我放弃了。' },
			
 
				-                { text: '你以为每天看到的东西，就会抓得住吗？' },
			
 
				-                { text: '世有无情人，却有痴情妖。' },
			
 
				-                { text: '君子，小人，皆在一念思量。' },
			
 
				-                { text: '到家了，一定要叫醒我，我怕我醒不过来。' },
			
 
				-                { text: '如果得道就是牺牲所有人来成全自己，我宁愿执迷不悟。' },
			
 
				-                { text: '我们今日一别，让我们十年后再相见，不见不散！' },
			
 
				-                { text: '一杯愁绪，几段情缘，莫过，与君对酒当歌。' },
			
 
				-            ],
			
 
				-        },
			
 
				-    ];
			
 
				-    const navHeight = 48;
			
 
				-    const bottomHeight = 50;
			
 
				-    const height = window.innerHeight - navHeight - bottomHeight;
			
 
				-    let radius = 'base';
			
 
				-    let dataFlag = 0;
			
 
				-    let scrollAlign = true;
			
 
				-    let injClassList = [];
			
 
				-    const changeRadiusFun = () => {
			
 
				-        radius = radius === 'base' ? 'full' : radius === 'full' ? 'none' : 'base';
			
 
				-    };
			
 
				-    const changeListFun = () => {
			
 
				-        dataFlag = dataFlag === 0 ? 1 : dataFlag === 1 ? 2 : 0;
			
 
				-    };
			
 
				-    const changeScrollAlignFun = () => {
			
 
				-        scrollAlign = !scrollAlign;
			
 
				-    };
			
 
				-    const changeClassFun = () => {
			
 
				-        injClassList = !injClassList.length ? ['!text-3xl text-center', 'text-xs text-center !py-1'] : [];
			
 
				-    };
			
 
				-    let visible = false;
			
 
				-    let toastObj = { index: 0, group: {}, childIndex: 0, child: {} };
			
 
				+	const addressList = [
			
 
				+		{ index: 'A', title: 'A', child: [{ text: '澳门' }, { text: '安宁' }, { text: '安庆' }, { text: '鞍山' }] },
			
 
				+		{ index: 'B', title: 'B', child: [{ text: '北京' }, { text: '保定' }, { text: '包头' }, { text: '宝鸡' }] },
			
 
				+		{ index: 'C', title: 'C', child: [{ text: '承德' }, { text: '沧州' }, { text: '赤峰' }] },
			
 
				+		{ index: 'D', title: 'D', child: [{ text: '大同' }, { text: '大连' }, { text: '大理' }] },
			
 
				+		{ index: 'E', title: 'E', child: [{ text: '恩施' }, { text: '鄂尔多斯' }, { text: '峨眉山' }] },
			
 
				+		{ index: 'F', title: 'F', child: [{ text: '抚顺' }, { text: '佛山' }, { text: '福泉' }] },
			
 
				+		{ index: 'G', title: 'G', child: [{ text: '个旧' }, { text: '桂林' }, { text: '赣州' }] },
			
 
				+		{ index: 'H', title: 'H', child: [{ text: '邯郸' }, { text: '呼和浩特' }, { text: '呼伦贝尔' }] },
			
 
				+		{ index: 'J', title: 'J', child: [{ text: '吉林' }, { text: '酒泉' }, { text: '晋江' }] },
			
 
				+		{ index: 'K', title: 'K', child: [{ text: '昆明' }, { text: '昆山' }, { text: '开封' }] },
			
 
				+		{ index: 'L', title: 'L', child: [{ text: '拉萨' }, { text: '兰州' }, { text: '泸州' }] },
			
 
				+		{ index: 'M', title: 'M', child: [{ text: '绵阳' }, { text: '马鞍山' }, { text: '牡丹江' }] },
			
 
				+		{ index: 'N', title: 'N', child: [{ text: '南昌' }, { text: '南京' }, { text: '宁波' }] },
			
 
				+		{ index: 'P', title: 'P', child: [{ text: '莆田' }, { text: '攀枝花' }, { text: '平顶山' }] },
			
 
				+		{ index: 'Q', title: 'Q', child: [{ text: '曲靖' }, { text: '青岛' }, { text: '齐齐哈尔' }] },
			
 
				+		{ index: 'R', title: 'R', child: [{ text: '瑞丽' }, { text: '瑞安' }, { text: '瑞金' }] },
			
 
				+		{ index: 'S', title: 'S', child: [{ text: '三亚' }, { text: '上海' }, { text: '深圳' }] },
			
 
				+		{ index: 'T', title: 'T', child: [{ text: '台州' }, { text: '太原' }, { text: '天津' }] },
			
 
				+		{ index: 'W', title: 'W', child: [{ text: '武汉' }, { text: '无锡' }, { text: '芜湖' }] },
			
 
				+		{ index: 'X', title: 'X', child: [{ text: '西安' }, { text: '厦门' }, { text: '宣威' }] },
			
 
				+		{ index: 'Y', title: 'Y', child: [{ text: '义乌' }, { text: '银川' }, { text: '玉溪' }] },
			
 
				+		{ index: 'Z', title: 'Z', child: [{ text: '昭通' }, { text: '遵义' }, { text: '张家界' }] },
			
 
				+	];
			
 
				+	const emojiList = [
			
 
				+		{ index: '😀', title: '表情与情感', child: [{ text: '😂' }, { text: '🥰' }, { text: '🥱' }, { text: '🧐' }] },
			
 
				+		{ index: '👋', title: '人物与身体', child: [{ text: '👌' }, { text: '🤝' }, { text: '👨‍💻' }, { text: '💪' }] },
			
 
				+		{ index: '🐵', title: '动物与自然', child: [{ text: '🦄' }, { text: '🌱' }, { text: '🦁' }, { text: '🐶' }] },
			
 
				+		{ index: '🍎', title: '食物与饮料', child: [{ text: '🍑' }, { text: '🍞' }, { text: '🍽️' }, { text: '🍩' }] },
			
 
				+		{ index: '🌍', title: '旅行与地理', child: [{ text: '🏔️' }, { text: '🚆' }, { text: '✈️' }, { text: '🛵' }] },
			
 
				+		{ index: '🏆', title: '活动', child: [{ text: '⚽' }, { text: '🎨' }, { text: '🏀' }, { text: '🧨' }] },
			
 
				+		{ index: '📱', title: '物品', child: [{ text: '🎩' }, { text: '💻' }, { text: '🎒' }, { text: '📖' }] },
			
 
				+		{ index: '⚠️', title: '符号标志', child: [{ text: '🚫' }, { text: '⚛️' }, { text: '🛄' }, { text: '🔱' }] },
			
 
				+		{ index: '🏁', title: '旗帜', child: [{ text: '🇨🇳' }, { text: '🇺🇸' }, { text: '🇧🇻' }, { text: '🇦🇹' }] },
			
 
				+	];
			
 
				+	const movieTVList = [
			
 
				+		{
			
 
				+			index: '三',
			
 
				+			title: '三体',
			
 
				+			child: [
			
 
				+				{ text: '地球往事' },
			
 
				+				{ text: '黑暗森林' },
			
 
				+				{ text: '死神永生' },
			
 
				+				{ text: '科学边界' },
			
 
				+				{ text: '射手和农场主' },
			
 
				+				{ text: '寂静的春天' },
			
 
				+				{ text: '宇宙闪烁' },
			
 
				+				{ text: '地球叛军' },
			
 
				+				{ text: '古筝行动' },
			
 
				+				{ text: '智子' },
			
 
				+				{ text: '面壁者' },
			
 
				+				{ text: '咒语' },
			
 
				+				{ text: '黑暗森林' },
			
 
				+				{ text: '危机纪元' },
			
 
				+				{ text: '威慑纪元' },
			
 
				+				{ text: '广播纪元' },
			
 
				+				{ text: '掩体纪元' },
			
 
				+				{ text: '银河纪元' },
			
 
				+				{ text: '时间开始' },
			
 
				+				{ text: '时间之外，我们的宇宙' },
			
 
				+			],
			
 
				+		},
			
 
				+		{
			
 
				+			index: '流',
			
 
				+			title: '流浪地球',
			
 
				+			child: [
			
 
				+				{ text: '人类的勇气和坚毅必将被镌刻在星空之下。' },
			
 
				+				{ text: '希望是像钻石一样珍贵的东西！' },
			
 
				+				{ text: '希望，希望是我们唯一回家的方向。' },
			
 
				+				{ text: '让人类永远保持理智，是一种奢求。' },
			
 
				+				{ text: '道路千万条，安全第一条；行车不规范，亲人两行泪！' },
			
 
				+				{ text: '那时候人们还没注意到太阳，人们更喜欢叫做钱的东西。' },
			
 
				+				{ text: '为了我们的孩子，没有什么不能失去的了' },
			
 
				+				{ text: 'moss没有叛逃!' },
			
 
				+				{ text: '火石没了，我老婆孩子全他妈白死了！' },
			
 
				+			],
			
 
				+		},
			
 
				+		{
			
 
				+			index: '仙',
			
 
				+			title: '仙剑奇侠传',
			
 
				+			child: [
			
 
				+				{ text: '既不回头，何必不忘。既然无缘，何必誓言。' },
			
 
				+				{ text: '没有值得不值得，只有愿意不愿意。' },
			
 
				+				{ text: '不曾得到，谈何放下。既已得到，又如何放下。' },
			
 
				+				{ text: '轮回的是故人，不变的是初心！' },
			
 
				+				{ text: '明夕何夕，君已陌路。' },
			
 
				+				{ text: '我曾经也拥有过爱，只是，我放弃了。' },
			
 
				+				{ text: '你以为每天看到的东西，就会抓得住吗？' },
			
 
				+				{ text: '世有无情人，却有痴情妖。' },
			
 
				+				{ text: '君子，小人，皆在一念思量。' },
			
 
				+				{ text: '到家了，一定要叫醒我，我怕我醒不过来。' },
			
 
				+				{ text: '如果得道就是牺牲所有人来成全自己，我宁愿执迷不悟。' },
			
 
				+				{ text: '我们今日一别，让我们十年后再相见，不见不散！' },
			
 
				+				{ text: '一杯愁绪，几段情缘，莫过，与君对酒当歌。' },
			
 
				+			],
			
 
				+		},
			
 
				+	];
			
 
				+	const navHeight = 48;
			
 
				+	const bottomHeight = 50;
			
 
				+	const height = window.innerHeight - navHeight - bottomHeight;
			
 
				+	let radius = 'base';
			
 
				+	let dataFlag = 0;
			
 
				+	let scrollAlign = true;
			
 
				+	let injClassList = [];
			
 
				+	const changeRadiusFun = () => {
			
 
				+		radius = radius === 'base' ? 'full' : radius === 'full' ? 'none' : 'base';
			
 
				+	};
			
 
				+	const changeListFun = () => {
			
 
				+		dataFlag = dataFlag === 0 ? 1 : dataFlag === 1 ? 2 : 0;
			
 
				+	};
			
 
				+	const changeScrollAlignFun = () => {
			
 
				+		scrollAlign = !scrollAlign;
			
 
				+	};
			
 
				+	const changeClassFun = () => {
			
 
				+		injClassList = !injClassList.length ? ['!text-3xl text-center', 'text-xs text-center !py-1'] : [];
			
 
				+	};
			
 
				+	let visible = false;
			
 
				+	let toastObj = { index: 0, group: {}, childIndex: 0, child: {} };
			
 
				 </script>
			
 
				 
			
 
				 {#if dataFlag === 0}
			
 
				-    <IndexBar
			
 
				-        data={addressList}
			
 
				-        {radius}
			
 
				-        {height}
			
 
				-        {scrollAlign}
			
 
				-        titleInjClass={injClassList[0]}
			
 
				-        textInjClass={injClassList[1]}
			
 
				-        top={navHeight}
			
 
				-        on:clickchild={e => {
			
 
				-            toastObj = e.detail;
			
 
				-            visible = true;
			
 
				-        }}
			
 
				-    />
			
 
				+	<IndexBar
			
 
				+		data={addressList}
			
 
				+		{radius}
			
 
				+		{height}
			
 
				+		{scrollAlign}
			
 
				+		titleInjClass={injClassList[0]}
			
 
				+		textInjClass={injClassList[1]}
			
 
				+		top={navHeight}
			
 
				+		on:clickchild={e => {
			
 
				+			toastObj = e.detail;
			
 
				+			visible = true;
			
 
				+		}}
			
 
				+	/>
			
 
				 {:else if dataFlag === 1}
			
 
				-    <IndexBar
			
 
				-        data={emojiList}
			
 
				-        {radius}
			
 
				-        {height}
			
 
				-        {scrollAlign}
			
 
				-        titleInjClass={injClassList[0]}
			
 
				-        textInjClass={injClassList[1]}
			
 
				-        top={navHeight}
			
 
				-        on:clickchild={e => {
			
 
				-            toastObj = e.detail;
			
 
				-            visible = true;
			
 
				-        }}
			
 
				-    />
			
 
				+	<IndexBar
			
 
				+		data={emojiList}
			
 
				+		{radius}
			
 
				+		{height}
			
 
				+		{scrollAlign}
			
 
				+		titleInjClass={injClassList[0]}
			
 
				+		textInjClass={injClassList[1]}
			
 
				+		top={navHeight}
			
 
				+		on:clickchild={e => {
			
 
				+			toastObj = e.detail;
			
 
				+			visible = true;
			
 
				+		}}
			
 
				+	/>
			
 
				 {:else}
			
 
				-    <IndexBar
			
 
				-        data={movieTVList}
			
 
				-        {radius}
			
 
				-        {height}
			
 
				-        {scrollAlign}
			
 
				-        titleInjClass={injClassList[0]}
			
 
				-        textInjClass={injClassList[1]}
			
 
				-        top={navHeight}
			
 
				-        on:clickchild={e => {
			
 
				-            toastObj = e.detail;
			
 
				-            visible = true;
			
 
				-        }}
			
 
				-    />
			
 
				+	<IndexBar
			
 
				+		data={movieTVList}
			
 
				+		{radius}
			
 
				+		{height}
			
 
				+		{scrollAlign}
			
 
				+		titleInjClass={injClassList[0]}
			
 
				+		textInjClass={injClassList[1]}
			
 
				+		top={navHeight}
			
 
				+		on:clickchild={e => {
			
 
				+			toastObj = e.detail;
			
 
				+			visible = true;
			
 
				+		}}
			
 
				+	/>
			
 
				 {/if}
			
 
				 <Toast
			
 
				-    bind:visible
			
 
				-    message={`点击了第 ${toastObj.index + 1} 组（${toastObj.group.title}）中的第 ${toastObj.childIndex + 1} 项（${toastObj.child.text}）`}
			
 
				+	bind:visible
			
 
				+	message={`点击了第 ${toastObj.index + 1} 组（${toastObj.group.title}）中的第 ${toastObj.childIndex + 1} 项（${toastObj.child.text}）`}
			
 
				 />
			
 
				 
			
 
				 <div class="sticky flex justify-between bottom-0 px-2 z-10 bg-white/90 dark:bg-black/90">
			
 
				-    <Button fill="lineTheme" size="auto" injClass="text-xs px-2" on:click={changeListFun}>切换数据</Button>
			
 
				-    <Button fill="lineTheme" size="auto" injClass="text-xs px-2" on:click={changeScrollAlignFun}>
			
 
				-        {scrollAlign ? '关闭' : '开启'}滚动对齐
			
 
				-    </Button>
			
 
				-    <Button fill="lineTheme" size="auto" injClass="text-xs px-2" on:click={changeRadiusFun}>切换圆角</Button>
			
 
				-    <Button fill="lineTheme" size="auto" injClass="text-xs px-2" on:click={changeClassFun}>切换样式</Button>
			
 
				+	<Button fill="lineTheme" size="auto" injClass="text-xs px-2" on:click={changeListFun}>切换数据</Button>
			
 
				+	<Button fill="lineTheme" size="auto" injClass="text-xs px-2" on:click={changeScrollAlignFun}>
			
 
				+		{scrollAlign ? '关闭' : '开启'}滚动对齐
			
 
				+	</Button>
			
 
				+	<Button fill="lineTheme" size="auto" injClass="text-xs px-2" on:click={changeRadiusFun}>切换圆角</Button>
			
 
				+	<Button fill="lineTheme" size="auto" injClass="text-xs px-2" on:click={changeClassFun}>切换样式</Button>
			
 
				 </div>
			
--- a/demo/src/pages/indexBar/IndexBarDemo_en.svelte
+++ b/demo/src/pages/indexBar/IndexBarDemo_en.svelte
@@ -1,181 +1,181 @@
 
				 <!-- IndexBar Demo -->
			
 
				 <script>
			
 
				-    import { IndexBar, Button, Toast } from 'stdf';
			
 
				+	import { IndexBar, Button, Toast } from 'stdf';
			
 
				 
			
 
				-    const addressList = [
			
 
				-        { index: 'A', title: 'A', child: [{ text: 'Macau' }, { text: 'Anning' }, { text: 'Anqing' }, { text: 'Anshan' }] },
			
 
				-        { index: 'B', title: 'B', child: [{ text: 'Beijing' }, { text: 'Baoding' }, { text: 'Baotou' }, { text: 'Baoji' }] },
			
 
				-        { index: 'C', title: 'C', child: [{ text: 'Chengde' }, { text: 'Cangzhou' }, { text: 'Chifeng' }] },
			
 
				-        { index: 'D', title: 'D', child: [{ text: 'Datong' }, { text: 'Dalian' }, { text: 'Dali' }] },
			
 
				-        { index: 'E', title: 'E', child: [{ text: 'Enshi' }, { text: 'Ordos' }, { text: 'Emeishan' }] },
			
 
				-        { index: 'F', title: 'F', child: [{ text: 'Fushun' }, { text: 'Foshan' }, { text: 'Fuquan' }] },
			
 
				-        { index: 'G', title: 'G', child: [{ text: 'Gejiu' }, { text: 'Guilin' }, { text: 'Ganzhou' }] },
			
 
				-        { index: 'H', title: 'H', child: [{ text: 'Handan' }, { text: 'Hohhot' }, { text: 'Hulunbuir' }] },
			
 
				-        { index: 'J', title: 'J', child: [{ text: 'Jilin' }, { text: 'Jiuquan' }, { text: 'Jinjiang' }] },
			
 
				-        { index: 'K', title: 'K', child: [{ text: 'Kunming' }, { text: 'Kunshan' }, { text: 'Kaifeng' }] },
			
 
				-        { index: 'L', title: 'L', child: [{ text: 'Lhasa' }, { text: 'Lanzhou' }, { text: 'Luzhou' }] },
			
 
				-        { index: 'M', title: 'M', child: [{ text: 'Mianyang' }, { text: 'Maans' }, { text: 'Mudanjiang' }] },
			
 
				-        { index: 'N', title: 'N', child: [{ text: 'Nanchang' }, { text: 'Nanjing' }, { text: 'Ningbo' }] },
			
 
				-        { index: 'P', title: 'P', child: [{ text: 'Putian' }, { text: 'Panzhihua' }, { text: 'Pingdingshan' }] },
			
 
				-        { index: 'Q', title: 'Q', child: [{ text: 'Qujing' }, { text: 'Qingdao' }, { text: 'Qiqihar' }] },
			
 
				-        { index: 'R', title: 'R', child: [{ text: 'Ruili' }, { text: 'Ruian' }, { text: 'Ruijin' }] },
			
 
				-        { index: 'S', title: 'S', child: [{ text: 'Sanya' }, { text: 'Shanghai' }, { text: 'Shenzhen' }] },
			
 
				-        { index: 'T', title: 'T', child: [{ text: 'Taizhou' }, { text: 'Taiyuan' }, { text: 'Tianjin' }] },
			
 
				-        { index: 'W', title: 'W', child: [{ text: 'Wuhan' }, { text: 'Wuxi' }, { text: 'Wuhu' }] },
			
 
				-        { index: 'X', title: 'X', child: [{ text: 'Xi an' }, { text: 'Xiamen' }, { text: 'Xuanwei' }] },
			
 
				-        { index: 'Y', title: 'Y', child: [{ text: 'Yiwu' }, { text: 'Yinchuan' }, { text: 'Yuxi' }] },
			
 
				-        { index: 'Z', title: 'Z', child: [{ text: 'Zhaotong' }, { text: 'Zunyi' }, { text: 'Zhangjiajie' }] },
			
 
				-    ];
			
 
				+	const addressList = [
			
 
				+		{ index: 'A', title: 'A', child: [{ text: 'Macau' }, { text: 'Anning' }, { text: 'Anqing' }, { text: 'Anshan' }] },
			
 
				+		{ index: 'B', title: 'B', child: [{ text: 'Beijing' }, { text: 'Baoding' }, { text: 'Baotou' }, { text: 'Baoji' }] },
			
 
				+		{ index: 'C', title: 'C', child: [{ text: 'Chengde' }, { text: 'Cangzhou' }, { text: 'Chifeng' }] },
			
 
				+		{ index: 'D', title: 'D', child: [{ text: 'Datong' }, { text: 'Dalian' }, { text: 'Dali' }] },
			
 
				+		{ index: 'E', title: 'E', child: [{ text: 'Enshi' }, { text: 'Ordos' }, { text: 'Emeishan' }] },
			
 
				+		{ index: 'F', title: 'F', child: [{ text: 'Fushun' }, { text: 'Foshan' }, { text: 'Fuquan' }] },
			
 
				+		{ index: 'G', title: 'G', child: [{ text: 'Gejiu' }, { text: 'Guilin' }, { text: 'Ganzhou' }] },
			
 
				+		{ index: 'H', title: 'H', child: [{ text: 'Handan' }, { text: 'Hohhot' }, { text: 'Hulunbuir' }] },
			
 
				+		{ index: 'J', title: 'J', child: [{ text: 'Jilin' }, { text: 'Jiuquan' }, { text: 'Jinjiang' }] },
			
 
				+		{ index: 'K', title: 'K', child: [{ text: 'Kunming' }, { text: 'Kunshan' }, { text: 'Kaifeng' }] },
			
 
				+		{ index: 'L', title: 'L', child: [{ text: 'Lhasa' }, { text: 'Lanzhou' }, { text: 'Luzhou' }] },
			
 
				+		{ index: 'M', title: 'M', child: [{ text: 'Mianyang' }, { text: 'Maans' }, { text: 'Mudanjiang' }] },
			
 
				+		{ index: 'N', title: 'N', child: [{ text: 'Nanchang' }, { text: 'Nanjing' }, { text: 'Ningbo' }] },
			
 
				+		{ index: 'P', title: 'P', child: [{ text: 'Putian' }, { text: 'Panzhihua' }, { text: 'Pingdingshan' }] },
			
 
				+		{ index: 'Q', title: 'Q', child: [{ text: 'Qujing' }, { text: 'Qingdao' }, { text: 'Qiqihar' }] },
			
 
				+		{ index: 'R', title: 'R', child: [{ text: 'Ruili' }, { text: 'Ruian' }, { text: 'Ruijin' }] },
			
 
				+		{ index: 'S', title: 'S', child: [{ text: 'Sanya' }, { text: 'Shanghai' }, { text: 'Shenzhen' }] },
			
 
				+		{ index: 'T', title: 'T', child: [{ text: 'Taizhou' }, { text: 'Taiyuan' }, { text: 'Tianjin' }] },
			
 
				+		{ index: 'W', title: 'W', child: [{ text: 'Wuhan' }, { text: 'Wuxi' }, { text: 'Wuhu' }] },
			
 
				+		{ index: 'X', title: 'X', child: [{ text: 'Xi an' }, { text: 'Xiamen' }, { text: 'Xuanwei' }] },
			
 
				+		{ index: 'Y', title: 'Y', child: [{ text: 'Yiwu' }, { text: 'Yinchuan' }, { text: 'Yuxi' }] },
			
 
				+		{ index: 'Z', title: 'Z', child: [{ text: 'Zhaotong' }, { text: 'Zunyi' }, { text: 'Zhangjiajie' }] },
			
 
				+	];
			
 
				 
			
 
				-    const emojiList = [
			
 
				-        { index: '😀', title: 'Smileys & Emotion', child: [{ text: '😂' }, { text: '🥰' }, { text: '🥱' }, { text: '🧐' }] },
			
 
				-        { index: '👋', title: 'People & Body', child: [{ text: '👌' }, { text: '🤝' }, { text: '👨‍💻' }, { text: '💪' }] },
			
 
				-        { index: '🐵', title: 'Animals & Nature', child: [{ text: '🦄' }, { text: '🌱' }, { text: '🦁' }, { text: '🐶' }] },
			
 
				-        { index: '🍎', title: 'Food & Drink', child: [{ text: '🍑' }, { text: '🍞' }, { text: '🍽️' }, { text: '🍩' }] },
			
 
				-        { index: '🌍', title: 'Travel & Places', child: [{ text: '🏔️' }, { text: '🚆' }, { text: '✈️' }, { text: '🛵' }] },
			
 
				-        { index: '🏆', title: 'Activities', child: [{ text: '⚽' }, { text: '🎨' }, { text: '🏀' }, { text: '🧨' }] },
			
 
				-        { index: '📱', title: 'Objects', child: [{ text: '🎩' }, { text: '💻' }, { text: '🎒' }, { text: '📖' }] },
			
 
				-        { index: '⚠️', title: 'Symbols', child: [{ text: '🚫' }, { text: '⚛️' }, { text: '🛄' }, { text: '🔱' }] },
			
 
				-        { index: '🏁', title: 'Flags', child: [{ text: '🇨🇳' }, { text: '🇺🇸' }, { text: '🇧🇻' }, { text: '🇦🇹' }] },
			
 
				-    ];
			
 
				-    const movieTVList = [
			
 
				-        {
			
 
				-            index: '三',
			
 
				-            title: '三体',
			
 
				-            child: [
			
 
				-                { text: '地球往事' },
			
 
				-                { text: '黑暗森林' },
			
 
				-                { text: '死神永生' },
			
 
				-                { text: '科学边界' },
			
 
				-                { text: '射手和农场主' },
			
 
				-                { text: '寂静的春天' },
			
 
				-                { text: '宇宙闪烁' },
			
 
				-                { text: '地球叛军' },
			
 
				-                { text: '古筝行动' },
			
 
				-                { text: '智子' },
			
 
				-                { text: '面壁者' },
			
 
				-                { text: '咒语' },
			
 
				-                { text: '黑暗森林' },
			
 
				-                { text: '危机纪元' },
			
 
				-                { text: '威慑纪元' },
			
 
				-                { text: '广播纪元' },
			
 
				-                { text: '掩体纪元' },
			
 
				-                { text: '银河纪元' },
			
 
				-                { text: '时间开始' },
			
 
				-                { text: '时间之外，我们的宇宙' },
			
 
				-            ],
			
 
				-        },
			
 
				-        {
			
 
				-            index: '流',
			
 
				-            title: '流浪地球',
			
 
				-            child: [
			
 
				-                { text: '人类的勇气和坚毅必将被镌刻在星空之下。' },
			
 
				-                { text: '希望是像钻石一样珍贵的东西！' },
			
 
				-                { text: '希望，希望是我们唯一回家的方向。' },
			
 
				-                { text: '让人类永远保持理智，是一种奢求。' },
			
 
				-                { text: '道路千万条，安全第一条；行车不规范，亲人两行泪！' },
			
 
				-                { text: '那时候人们还没注意到太阳，人们更喜欢叫做钱的东西。' },
			
 
				-                { text: '为了我们的孩子，没有什么不能失去的了' },
			
 
				-                { text: 'moss没有叛逃!' },
			
 
				-                { text: '火石没了，我老婆孩子全他妈白死了！' },
			
 
				-            ],
			
 
				-        },
			
 
				-        {
			
 
				-            index: '仙',
			
 
				-            title: '仙剑奇侠传',
			
 
				-            child: [
			
 
				-                { text: '既不回头，何必不忘。既然无缘，何必誓言。' },
			
 
				-                { text: '没有值得不值得，只有愿意不愿意。' },
			
 
				-                { text: '不曾得到，谈何放下。既已得到，又如何放下。' },
			
 
				-                { text: '轮回的是故人，不变的是初心！' },
			
 
				-                { text: '明夕何夕，君已陌路。' },
			
 
				-                { text: '我曾经也拥有过爱，只是，我放弃了。' },
			
 
				-                { text: '你以为每天看到的东西，就会抓得住吗？' },
			
 
				-                { text: '世有无情人，却有痴情妖。' },
			
 
				-                { text: '君子，小人，皆在一念思量。' },
			
 
				-                { text: '到家了，一定要叫醒我，我怕我醒不过来。' },
			
 
				-                { text: '如果得道就是牺牲所有人来成全自己，我宁愿执迷不悟。' },
			
 
				-                { text: '我们今日一别，让我们十年后再相见，不见不散！' },
			
 
				-                { text: '一杯愁绪，几段情缘，莫过，与君对酒当歌。' },
			
 
				-            ],
			
 
				-        },
			
 
				-    ];
			
 
				-    const navHeight = 48;
			
 
				-    const bottomHeight = 50;
			
 
				-    const height = window.innerHeight - navHeight - bottomHeight;
			
 
				-    let radius = 'base';
			
 
				-    let dataFlag = 0;
			
 
				-    let scrollAlign = true;
			
 
				-    let injClassList = [];
			
 
				-    const changeRadiusFun = () => {
			
 
				-        radius = radius === 'base' ? 'full' : radius === 'full' ? 'none' : 'base';
			
 
				-    };
			
 
				-    const changeListFun = () => {
			
 
				-        dataFlag = dataFlag === 0 ? 1 : dataFlag === 1 ? 2 : 0;
			
 
				-    };
			
 
				-    const changeScrollAlignFun = () => {
			
 
				-        scrollAlign = !scrollAlign;
			
 
				-    };
			
 
				-    const changeClassFun = () => {
			
 
				-        injClassList = !injClassList.length ? ['!text-3xl text-center', 'text-xs text-center !py-1'] : [];
			
 
				-    };
			
 
				-    let visible = false;
			
 
				-    let toastObj = { index: 0, group: {}, childIndex: 0, child: {} };
			
 
				+	const emojiList = [
			
 
				+		{ index: '😀', title: 'Smileys & Emotion', child: [{ text: '😂' }, { text: '🥰' }, { text: '🥱' }, { text: '🧐' }] },
			
 
				+		{ index: '👋', title: 'People & Body', child: [{ text: '👌' }, { text: '🤝' }, { text: '👨‍💻' }, { text: '💪' }] },
			
 
				+		{ index: '🐵', title: 'Animals & Nature', child: [{ text: '🦄' }, { text: '🌱' }, { text: '🦁' }, { text: '🐶' }] },
			
 
				+		{ index: '🍎', title: 'Food & Drink', child: [{ text: '🍑' }, { text: '🍞' }, { text: '🍽️' }, { text: '🍩' }] },
			
 
				+		{ index: '🌍', title: 'Travel & Places', child: [{ text: '🏔️' }, { text: '🚆' }, { text: '✈️' }, { text: '🛵' }] },
			
 
				+		{ index: '🏆', title: 'Activities', child: [{ text: '⚽' }, { text: '🎨' }, { text: '🏀' }, { text: '🧨' }] },
			
 
				+		{ index: '📱', title: 'Objects', child: [{ text: '🎩' }, { text: '💻' }, { text: '🎒' }, { text: '📖' }] },
			
 
				+		{ index: '⚠️', title: 'Symbols', child: [{ text: '🚫' }, { text: '⚛️' }, { text: '🛄' }, { text: '🔱' }] },
			
 
				+		{ index: '🏁', title: 'Flags', child: [{ text: '🇨🇳' }, { text: '🇺🇸' }, { text: '🇧🇻' }, { text: '🇦🇹' }] },
			
 
				+	];
			
 
				+	const movieTVList = [
			
 
				+		{
			
 
				+			index: '三',
			
 
				+			title: '三体',
			
 
				+			child: [
			
 
				+				{ text: '地球往事' },
			
 
				+				{ text: '黑暗森林' },
			
 
				+				{ text: '死神永生' },
			
 
				+				{ text: '科学边界' },
			
 
				+				{ text: '射手和农场主' },
			
 
				+				{ text: '寂静的春天' },
			
 
				+				{ text: '宇宙闪烁' },
			
 
				+				{ text: '地球叛军' },
			
 
				+				{ text: '古筝行动' },
			
 
				+				{ text: '智子' },
			
 
				+				{ text: '面壁者' },
			
 
				+				{ text: '咒语' },
			
 
				+				{ text: '黑暗森林' },
			
 
				+				{ text: '危机纪元' },
			
 
				+				{ text: '威慑纪元' },
			
 
				+				{ text: '广播纪元' },
			
 
				+				{ text: '掩体纪元' },
			
 
				+				{ text: '银河纪元' },
			
 
				+				{ text: '时间开始' },
			
 
				+				{ text: '时间之外，我们的宇宙' },
			
 
				+			],
			
 
				+		},
			
 
				+		{
			
 
				+			index: '流',
			
 
				+			title: '流浪地球',
			
 
				+			child: [
			
 
				+				{ text: '人类的勇气和坚毅必将被镌刻在星空之下。' },
			
 
				+				{ text: '希望是像钻石一样珍贵的东西！' },
			
 
				+				{ text: '希望，希望是我们唯一回家的方向。' },
			
 
				+				{ text: '让人类永远保持理智，是一种奢求。' },
			
 
				+				{ text: '道路千万条，安全第一条；行车不规范，亲人两行泪！' },
			
 
				+				{ text: '那时候人们还没注意到太阳，人们更喜欢叫做钱的东西。' },
			
 
				+				{ text: '为了我们的孩子，没有什么不能失去的了' },
			
 
				+				{ text: 'moss没有叛逃!' },
			
 
				+				{ text: '火石没了，我老婆孩子全他妈白死了！' },
			
 
				+			],
			
 
				+		},
			
 
				+		{
			
 
				+			index: '仙',
			
 
				+			title: '仙剑奇侠传',
			
 
				+			child: [
			
 
				+				{ text: '既不回头，何必不忘。既然无缘，何必誓言。' },
			
 
				+				{ text: '没有值得不值得，只有愿意不愿意。' },
			
 
				+				{ text: '不曾得到，谈何放下。既已得到，又如何放下。' },
			
 
				+				{ text: '轮回的是故人，不变的是初心！' },
			
 
				+				{ text: '明夕何夕，君已陌路。' },
			
 
				+				{ text: '我曾经也拥有过爱，只是，我放弃了。' },
			
 
				+				{ text: '你以为每天看到的东西，就会抓得住吗？' },
			
 
				+				{ text: '世有无情人，却有痴情妖。' },
			
 
				+				{ text: '君子，小人，皆在一念思量。' },
			
 
				+				{ text: '到家了，一定要叫醒我，我怕我醒不过来。' },
			
 
				+				{ text: '如果得道就是牺牲所有人来成全自己，我宁愿执迷不悟。' },
			
 
				+				{ text: '我们今日一别，让我们十年后再相见，不见不散！' },
			
 
				+				{ text: '一杯愁绪，几段情缘，莫过，与君对酒当歌。' },
			
 
				+			],
			
 
				+		},
			
 
				+	];
			
 
				+	const navHeight = 48;
			
 
				+	const bottomHeight = 50;
			
 
				+	const height = window.innerHeight - navHeight - bottomHeight;
			
 
				+	let radius = 'base';
			
 
				+	let dataFlag = 0;
			
 
				+	let scrollAlign = true;
			
 
				+	let injClassList = [];
			
 
				+	const changeRadiusFun = () => {
			
 
				+		radius = radius === 'base' ? 'full' : radius === 'full' ? 'none' : 'base';
			
 
				+	};
			
 
				+	const changeListFun = () => {
			
 
				+		dataFlag = dataFlag === 0 ? 1 : dataFlag === 1 ? 2 : 0;
			
 
				+	};
			
 
				+	const changeScrollAlignFun = () => {
			
 
				+		scrollAlign = !scrollAlign;
			
 
				+	};
			
 
				+	const changeClassFun = () => {
			
 
				+		injClassList = !injClassList.length ? ['!text-3xl text-center', 'text-xs text-center !py-1'] : [];
			
 
				+	};
			
 
				+	let visible = false;
			
 
				+	let toastObj = { index: 0, group: {}, childIndex: 0, child: {} };
			
 
				 </script>
			
 
				 
			
 
				 {#if dataFlag === 0}
			
 
				-    <IndexBar
			
 
				-        data={addressList}
			
 
				-        {radius}
			
 
				-        {height}
			
 
				-        {scrollAlign}
			
 
				-        titleInjClass={injClassList[0]}
			
 
				-        textInjClass={injClassList[1]}
			
 
				-        top={navHeight}
			
 
				-        on:clickchild={e => {
			
 
				-            toastObj = e.detail;
			
 
				-            visible = true;
			
 
				-        }}
			
 
				-    />
			
 
				+	<IndexBar
			
 
				+		data={addressList}
			
 
				+		{radius}
			
 
				+		{height}
			
 
				+		{scrollAlign}
			
 
				+		titleInjClass={injClassList[0]}
			
 
				+		textInjClass={injClassList[1]}
			
 
				+		top={navHeight}
			
 
				+		on:clickchild={e => {
			
 
				+			toastObj = e.detail;
			
 
				+			visible = true;
			
 
				+		}}
			
 
				+	/>
			
 
				 {:else if dataFlag === 1}
			
 
				-    <IndexBar
			
 
				-        data={emojiList}
			
 
				-        {radius}
			
 
				-        {height}
			
 
				-        {scrollAlign}
			
 
				-        titleInjClass={injClassList[0]}
			
 
				-        textInjClass={injClassList[1]}
			
 
				-        top={navHeight}
			
 
				-        on:clickchild={e => {
			
 
				-            toastObj = e.detail;
			
 
				-            visible = true;
			
 
				-        }}
			
 
				-    />
			
 
				+	<IndexBar
			
 
				+		data={emojiList}
			
 
				+		{radius}
			
 
				+		{height}
			
 
				+		{scrollAlign}
			
 
				+		titleInjClass={injClassList[0]}
			
 
				+		textInjClass={injClassList[1]}
			
 
				+		top={navHeight}
			
 
				+		on:clickchild={e => {
			
 
				+			toastObj = e.detail;
			
 
				+			visible = true;
			
 
				+		}}
			
 
				+	/>
			
 
				 {:else}
			
 
				-    <IndexBar
			
 
				-        data={movieTVList}
			
 
				-        {radius}
			
 
				-        {height}
			
 
				-        {scrollAlign}
			
 
				-        titleInjClass={injClassList[0]}
			
 
				-        textInjClass={injClassList[1]}
			
 
				-        top={navHeight}
			
 
				-        on:clickchild={e => {
			
 
				-            toastObj = e.detail;
			
 
				-            visible = true;
			
 
				-        }}
			
 
				-    />
			
 
				+	<IndexBar
			
 
				+		data={movieTVList}
			
 
				+		{radius}
			
 
				+		{height}
			
 
				+		{scrollAlign}
			
 
				+		titleInjClass={injClassList[0]}
			
 
				+		textInjClass={injClassList[1]}
			
 
				+		top={navHeight}
			
 
				+		on:clickchild={e => {
			
 
				+			toastObj = e.detail;
			
 
				+			visible = true;
			
 
				+		}}
			
 
				+	/>
			
 
				 {/if}
			
 
				 <Toast
			
 
				-    bind:visible
			
 
				-    message={`Clicked ${toastObj.index + 1} group(${toastObj.group.title}) ${toastObj.childIndex + 1} item(${toastObj.child.text})`}
			
 
				+	bind:visible
			
 
				+	message={`Clicked ${toastObj.index + 1} group(${toastObj.group.title}) ${toastObj.childIndex + 1} item(${toastObj.child.text})`}
			
 
				 />
			
 
				 
			
 
				 <div class="sticky flex justify-between bottom-0 px-2 z-10 bg-white/90 dark:bg-black/90">
			
 
				-    <Button fill="lineTheme" size="auto" injClass="text-xs px-2" on:click={changeListFun}>Switch data</Button>
			
 
				-    <Button fill="lineTheme" size="auto" injClass="text-xs px-2" on:click={changeScrollAlignFun}>
			
 
				-        {scrollAlign ? 'open' : 'close'} Align
			
 
				-    </Button>
			
 
				-    <Button fill="lineTheme" size="auto" injClass="text-xs px-2" on:click={changeRadiusFun}>Switch rounded</Button>
			
 
				-    <Button fill="lineTheme" size="auto" injClass="text-xs px-2" on:click={changeClassFun}>Switch style</Button>
			
 
				+	<Button fill="lineTheme" size="auto" injClass="text-xs px-2" on:click={changeListFun}>Switch data</Button>
			
 
				+	<Button fill="lineTheme" size="auto" injClass="text-xs px-2" on:click={changeScrollAlignFun}>
			
 
				+		{scrollAlign ? 'open' : 'close'} Align
			
 
				+	</Button>
			
 
				+	<Button fill="lineTheme" size="auto" injClass="text-xs px-2" on:click={changeRadiusFun}>Switch rounded</Button>
			
 
				+	<Button fill="lineTheme" size="auto" injClass="text-xs px-2" on:click={changeClassFun}>Switch style</Button>
			
 
				 </div>
			
--- a/demo/src/pages/input/InputDemo.svelte
+++ b/demo/src/pages/input/InputDemo.svelte
@@ -1,27 +1,27 @@
 
				 <!-- Input Demo -->
			
 
				 <script>
			
 
				-    import { getContext } from 'svelte';
			
 
				-    import { Input, Button, Icon, Toast } from 'stdf';
			
 
				-
			
 
				-    let value = '初始文本';
			
 
				-    let visible = false;
			
 
				-
			
 
				-    let IdCard = '';
			
 
				-
			
 
				-    const isIframe = getContext('iframe') === '1'; //判断是否是iframe
			
 
				-
			
 
				-    $: placeholderIdCard = IdCard === '' ? '请输入身份证号' : '';
			
 
				-    const clickLabel4Fun = () => {
			
 
				-        placeholderIdCard = '两秒后识别完毕......';
			
 
				-        setTimeout(() => {
			
 
				-            IdCard = '1234567890XXX-XX';
			
 
				-        }, 2000);
			
 
				-    };
			
 
				-    let mobileLength = 0;
			
 
				-    const changeStateFun = e => {
			
 
				-        mobileLength = e.detail.length;
			
 
				-    };
			
 
				-    $: mobileState = mobileLength === 11 ? 'success' : mobileLength === 0 ? 'theme' : 'error';
			
 
				+	import { getContext } from 'svelte';
			
 
				+	import { Input, Button, Icon, Toast } from 'stdf';
			
 
				+
			
 
				+	let value = '初始文本';
			
 
				+	let visible = false;
			
 
				+
			
 
				+	let IdCard = '';
			
 
				+
			
 
				+	const isIframe = getContext('iframe') === '1'; //判断是否是iframe
			
 
				+
			
 
				+	$: placeholderIdCard = IdCard === '' ? '请输入身份证号' : '';
			
 
				+	const clickLabel4Fun = () => {
			
 
				+		placeholderIdCard = '两秒后识别完毕......';
			
 
				+		setTimeout(() => {
			
 
				+			IdCard = '1234567890XXX-XX';
			
 
				+		}, 2000);
			
 
				+	};
			
 
				+	let mobileLength = 0;
			
 
				+	const changeStateFun = e => {
			
 
				+		mobileLength = e.detail.length;
			
 
				+	};
			
 
				+	$: mobileState = mobileLength === 11 ? 'success' : mobileLength === 0 ? 'theme' : 'error';
			
 
				 </script>
			
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">基础用法</div>
			
@@ -34,10 +34,10 @@
 
				 <Input title="文本" placeholder="我是自定义的 placeholder" />
			
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">
			
 
				-    不同输入类型
			
 
				-    {#if isIframe}
			
 
				-        <span class="text-xs opacity-50 ml-2">请在移动设备查看键盘类型。</span>
			
 
				-    {/if}
			
 
				+	不同输入类型
			
 
				+	{#if isIframe}
			
 
				+		<span class="text-xs opacity-50 ml-2">请在移动设备查看键盘类型。</span>
			
 
				+	{/if}
			
 
				 </div>
			
 
				 <Input title="任意文本（常规键盘）" />
			
 
				 <Input title="密码" type="password" />
			
@@ -104,9 +104,9 @@
 
				 <div class="px-4 pt-8 font-bold text-xl">左侧带图标</div>
			
 
				 <Input title="密码" type="password" label1={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }} />
			
 
				 <Input
			
 
				-    title="用户名"
			
 
				-    label1={{ name: 'ri-arrow-down-s-line', size: 16, alpha: 0.5 }}
			
 
				-    label3={{ name: 'ri-shield-user-line', size: 16, alpha: 0.5 }}
			
 
				+	title="用户名"
			
 
				+	label1={{ name: 'ri-arrow-down-s-line', size: 16, alpha: 0.5 }}
			
 
				+	label3={{ name: 'ri-shield-user-line', size: 16, alpha: 0.5 }}
			
 
				 />
			
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">左侧带文字</div>
			
@@ -120,19 +120,19 @@
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">左侧带图标、文字、图标</div>
			
 
				 <Input
			
 
				-    title="密码"
			
 
				-    type="password"
			
 
				-    label1={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
			
 
				-    label2="密码"
			
 
				-    label3={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
			
 
				+	title="密码"
			
 
				+	type="password"
			
 
				+	label1={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
			
 
				+	label2="密码"
			
 
				+	label3={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
			
 
				 />
			
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">右侧带图标</div>
			
 
				 <Input title="身份证号" label4={{ name: 'ri-qr-scan-line', size: 16, alpha: 0.5 }} />
			
 
				 <Input
			
 
				-    title="用户名"
			
 
				-    label4={{ name: 'ri-arrow-down-s-line', size: 16, alpha: 0.5 }}
			
 
				-    label6={{ name: 'ri-shield-user-line', size: 16, alpha: 0.5 }}
			
 
				+	title="用户名"
			
 
				+	label4={{ name: 'ri-arrow-down-s-line', size: 16, alpha: 0.5 }}
			
 
				+	label6={{ name: 'ri-shield-user-line', size: 16, alpha: 0.5 }}
			
 
				 />
			
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">右侧带文字</div>
			
@@ -146,11 +146,11 @@
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">右侧带图标、文字、图标</div>
			
 
				 <Input
			
 
				-    title="密码"
			
 
				-    type="password"
			
 
				-    label4={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
			
 
				-    label5="密码"
			
 
				-    label6={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
			
 
				+	title="密码"
			
 
				+	type="password"
			
 
				+	label4={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
			
 
				+	label5="密码"
			
 
				+	label6={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
			
 
				 />
			
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">左侧带文字右侧带图标</div>
			
@@ -158,14 +158,14 @@
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">左右六项全带</div>
			
 
				 <Input
			
 
				-    title="密码"
			
 
				-    type="password"
			
 
				-    label1={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
			
 
				-    label2="密码"
			
 
				-    label3={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
			
 
				-    label4={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
			
 
				-    label5="密码"
			
 
				-    label6={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
			
 
				+	title="密码"
			
 
				+	type="password"
			
 
				+	label1={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
			
 
				+	label2="密码"
			
 
				+	label3={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
			
 
				+	label4={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
			
 
				+	label5="密码"
			
 
				+	label6={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
			
 
				 />
			
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">提示信息与数据项组合</div>
			
@@ -178,61 +178,61 @@
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">展示所有可配置项</div>
			
 
				 <Input
			
 
				-    title="标题"
			
 
				-    placeholder="请输入文本"
			
 
				-    label1={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
			
 
				-    label2="标签2"
			
 
				-    label3={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
			
 
				-    label4={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
			
 
				-    label5="标签5"
			
 
				-    label6={{ name: 'ri-qr-scan-line', size: 16, alpha: 0.5 }}
			
 
				-    data1="数据项1"
			
 
				-    data2="数据项2"
			
 
				-    data3="数据项3"
			
 
				-    tip="提示信息"
			
 
				-    clear
			
 
				+	title="标题"
			
 
				+	placeholder="请输入文本"
			
 
				+	label1={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
			
 
				+	label2="标签2"
			
 
				+	label3={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
			
 
				+	label4={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
			
 
				+	label5="标签5"
			
 
				+	label6={{ name: 'ri-qr-scan-line', size: 16, alpha: 0.5 }}
			
 
				+	data1="数据项1"
			
 
				+	data2="数据项2"
			
 
				+	data3="数据项3"
			
 
				+	tip="提示信息"
			
 
				+	clear
			
 
				 />
			
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">label1 和 label4 使用插槽</div>
			
 
				 <Input title="验证码" label1="slot" label4="slot">
			
 
				-    <div slot="label1">
			
 
				-        <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
			
 
				-            <path
			
 
				-                d="M511.198384 637.07798c-17.170101 0-31.08202 13.911919-31.08202 31.08202v124.302222c0 17.157172 13.924848 31.08202 31.08202 31.08202s31.069091-13.924848 31.069091-31.08202v-124.302222c0-17.170101-13.911919-31.08202-31.069091-31.08202z m0 0"
			
 
				-                fill="#515151"
			
 
				-            />
			
 
				-            <path
			
 
				-                d="M759.815758 513.331717V264.145455C759.815758 126.823434 648.520404 15.515152 511.198384 15.515152c-137.309091 0-248.630303 111.308283-248.630303 248.630303v249.186262C223.702626 565.20404 200.40404 629.423838 200.40404 699.229091c0 171.649293 139.145051 310.794343 310.794344 310.794343s310.794343-139.145051 310.794343-310.794343c0-69.805253-23.311515-134.025051-62.176969-185.897374zM324.719192 264.145455c0-102.994747 83.497374-186.479192 186.479192-186.479192 102.981818 0 186.466263 83.484444 186.466262 186.479192v186.88c-51.975758-39.111111-116.402424-62.577778-186.466262-62.577778s-134.490505 23.453737-186.479192 62.577778V264.145455z m186.479192 683.726868c-137.309091 0-248.630303-111.321212-248.630303-248.643232 0-137.309091 111.308283-248.617374 248.630303-248.617374 132.628687 0 248.617374 115.988687 248.617374 248.617374 0 137.32202-111.295354 248.643232-248.617374 248.643232z m0 0"
			
 
				-                fill="#515151"
			
 
				-            />
			
 
				-        </svg>
			
 
				-    </div>
			
 
				-    <div slot="label4">
			
 
				-        <Button size="auto" heightOut="0" heightIn="1" fill="lineTheme">
			
 
				-            <div class="px-2">获取验证码</div>
			
 
				-        </Button>
			
 
				-    </div>
			
 
				+	<div slot="label1">
			
 
				+		<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
			
 
				+			<path
			
 
				+				d="M511.198384 637.07798c-17.170101 0-31.08202 13.911919-31.08202 31.08202v124.302222c0 17.157172 13.924848 31.08202 31.08202 31.08202s31.069091-13.924848 31.069091-31.08202v-124.302222c0-17.170101-13.911919-31.08202-31.069091-31.08202z m0 0"
			
 
				+				fill="#515151"
			
 
				+			/>
			
 
				+			<path
			
 
				+				d="M759.815758 513.331717V264.145455C759.815758 126.823434 648.520404 15.515152 511.198384 15.515152c-137.309091 0-248.630303 111.308283-248.630303 248.630303v249.186262C223.702626 565.20404 200.40404 629.423838 200.40404 699.229091c0 171.649293 139.145051 310.794343 310.794344 310.794343s310.794343-139.145051 310.794343-310.794343c0-69.805253-23.311515-134.025051-62.176969-185.897374zM324.719192 264.145455c0-102.994747 83.497374-186.479192 186.479192-186.479192 102.981818 0 186.466263 83.484444 186.466262 186.479192v186.88c-51.975758-39.111111-116.402424-62.577778-186.466262-62.577778s-134.490505 23.453737-186.479192 62.577778V264.145455z m186.479192 683.726868c-137.309091 0-248.630303-111.321212-248.630303-248.643232 0-137.309091 111.308283-248.617374 248.630303-248.617374 132.628687 0 248.617374 115.988687 248.617374 248.617374 0 137.32202-111.295354 248.643232-248.617374 248.643232z m0 0"
			
 
				+				fill="#515151"
			
 
				+			/>
			
 
				+		</svg>
			
 
				+	</div>
			
 
				+	<div slot="label4">
			
 
				+		<Button size="auto" heightOut="0" heightIn="1" fill="lineTheme">
			
 
				+			<div class="px-2">获取验证码</div>
			
 
				+		</Button>
			
 
				+	</div>
			
 
				 </Input>
			
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">动态显示</div>
			
 
				 <Input
			
 
				-    title="动态显示 label5"
			
 
				-    type="tel"
			
 
				-    placeholder="请输入11位手机号"
			
 
				-    maxlength={11}
			
 
				-    state={mobileState}
			
 
				-    on:change={changeStateFun}
			
 
				-    label5="slot"
			
 
				+	title="动态显示 label5"
			
 
				+	type="tel"
			
 
				+	placeholder="请输入11位手机号"
			
 
				+	maxlength={11}
			
 
				+	state={mobileState}
			
 
				+	on:change={changeStateFun}
			
 
				+	label5="slot"
			
 
				 >
			
 
				-    <div slot="label5">
			
 
				-        {#if mobileLength === 11}
			
 
				-            <Icon name="ri-check-fill" injClass="text-[green]" size={14} />
			
 
				-        {:else if mobileLength === 0}
			
 
				-            <!-- none -->
			
 
				-        {:else}
			
 
				-            <Icon name="ri-close-fill" injClass="text-[red]" size={14} />
			
 
				-        {/if}
			
 
				-    </div>
			
 
				+	<div slot="label5">
			
 
				+		{#if mobileLength === 11}
			
 
				+			<Icon name="ri-check-fill" injClass="text-[green]" size={14} />
			
 
				+		{:else if mobileLength === 0}
			
 
				+			<!-- none -->
			
 
				+		{:else}
			
 
				+			<Icon name="ri-close-fill" injClass="text-[red]" size={14} />
			
 
				+		{/if}
			
 
				+	</div>
			
 
				 </Input>
			
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">绑定 value</div>
			
@@ -242,12 +242,12 @@
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">点击 label4 触发事件</div>
			
 
				 <Input
			
 
				-    title="身份证号"
			
 
				-    placeholder={placeholderIdCard}
			
 
				-    bind:value={IdCard}
			
 
				-    label4={{ name: 'ri-qr-scan-line', size: 16, alpha: 0.5 }}
			
 
				-    on:clicklabel4={clickLabel4Fun}
			
 
				-    clear
			
 
				+	title="身份证号"
			
 
				+	placeholder={placeholderIdCard}
			
 
				+	bind:value={IdCard}
			
 
				+	label4={{ name: 'ri-qr-scan-line', size: 16, alpha: 0.5 }}
			
 
				+	on:clicklabel4={clickLabel4Fun}
			
 
				+	clear
			
 
				 />
			
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">textarea</div>
			
--- a/demo/src/pages/input/InputDemo_en.svelte
+++ b/demo/src/pages/input/InputDemo_en.svelte
@@ -1,27 +1,27 @@
 
				 <!-- Input Demo -->
			
 
				 <script>
			
 
				-    import { getContext } from 'svelte';
			
 
				-    import { Input, Button, Icon, Toast } from 'stdf';
			
 
				-
			
 
				-    let value = 'Init text';
			
 
				-    let visible = false;
			
 
				-
			
 
				-    let IdCard = '';
			
 
				-
			
 
				-    const isIframe = getContext('iframe') === '1'; //判断是否是iframe
			
 
				-
			
 
				-    $: placeholderIdCard = IdCard === '' ? 'Please enter identification number' : '';
			
 
				-    const clickLabel4Fun = () => {
			
 
				-        placeholderIdCard = 'After two seconds, the recognition is complete......';
			
 
				-        setTimeout(() => {
			
 
				-            IdCard = '1234567890XXX-XX';
			
 
				-        }, 2000);
			
 
				-    };
			
 
				-    let mobileLength = 0;
			
 
				-    const changeStateFun = e => {
			
 
				-        mobileLength = e.detail.length;
			
 
				-    };
			
 
				-    $: mobileState = mobileLength === 11 ? 'success' : mobileLength === 0 ? 'theme' : 'error';
			
 
				+	import { getContext } from 'svelte';
			
 
				+	import { Input, Button, Icon, Toast } from 'stdf';
			
 
				+
			
 
				+	let value = 'Init text';
			
 
				+	let visible = false;
			
 
				+
			
 
				+	let IdCard = '';
			
 
				+
			
 
				+	const isIframe = getContext('iframe') === '1'; //判断是否是iframe
			
 
				+
			
 
				+	$: placeholderIdCard = IdCard === '' ? 'Please enter identification number' : '';
			
 
				+	const clickLabel4Fun = () => {
			
 
				+		placeholderIdCard = 'After two seconds, the recognition is complete......';
			
 
				+		setTimeout(() => {
			
 
				+			IdCard = '1234567890XXX-XX';
			
 
				+		}, 2000);
			
 
				+	};
			
 
				+	let mobileLength = 0;
			
 
				+	const changeStateFun = e => {
			
 
				+		mobileLength = e.detail.length;
			
 
				+	};
			
 
				+	$: mobileState = mobileLength === 11 ? 'success' : mobileLength === 0 ? 'theme' : 'error';
			
 
				 </script>
			
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">Basic usage</div>
			
@@ -34,10 +34,10 @@
 
				 <Input title="text" placeholder="customize placeholder" />
			
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">
			
 
				-    Different input types
			
 
				-    {#if isIframe}
			
 
				-        <span class="text-xs opacity-50 ml-2">Please check the keyboard type on your mobile device.</span>
			
 
				-    {/if}
			
 
				+	Different input types
			
 
				+	{#if isIframe}
			
 
				+		<span class="text-xs opacity-50 ml-2">Please check the keyboard type on your mobile device.</span>
			
 
				+	{/if}
			
 
				 </div>
			
 
				 <Input title="Any text (conventional keyboard)" />
			
 
				 <Input title="password" type="password" />
			
@@ -100,20 +100,20 @@
 
				 <Input title="warning & line" inputStyle="line" state="error" />
			
 
				 <Input title="warning & line & Animation" inputStyle="line" state="error" lineTransition="center" />
			
 
				 <Input
			
 
				-    title="Dynamic change status color"
			
 
				-    type="tel"
			
 
				-    placeholder="Please enter the 11 -digit mobile phone number"
			
 
				-    maxlength={11}
			
 
				-    state={mobileState}
			
 
				-    on:change={changeStateFun}
			
 
				+	title="Dynamic change status color"
			
 
				+	type="tel"
			
 
				+	placeholder="Please enter the 11 -digit mobile phone number"
			
 
				+	maxlength={11}
			
 
				+	state={mobileState}
			
 
				+	on:change={changeStateFun}
			
 
				 />
			
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">Left with icon</div>
			
 
				 <Input title="password" type="password" label1={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }} />
			
 
				 <Input
			
 
				-    title="username"
			
 
				-    label1={{ name: 'ri-arrow-down-s-line', size: 16, alpha: 0.5 }}
			
 
				-    label3={{ name: 'ri-shield-user-line', size: 16, alpha: 0.5 }}
			
 
				+	title="username"
			
 
				+	label1={{ name: 'ri-arrow-down-s-line', size: 16, alpha: 0.5 }}
			
 
				+	label3={{ name: 'ri-shield-user-line', size: 16, alpha: 0.5 }}
			
 
				 />
			
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">Left with text</div>
			
@@ -127,19 +127,19 @@
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">left with icon & text & icon</div>
			
 
				 <Input
			
 
				-    title="password"
			
 
				-    type="password"
			
 
				-    label1={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
			
 
				-    label2="password"
			
 
				-    label3={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
			
 
				+	title="password"
			
 
				+	type="password"
			
 
				+	label1={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
			
 
				+	label2="password"
			
 
				+	label3={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
			
 
				 />
			
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">left with icon</div>
			
 
				 <Input title="ID number" label4={{ name: 'ri-qr-scan-line', size: 16, alpha: 0.5 }} />
			
 
				 <Input
			
 
				-    title="User"
			
 
				-    label4={{ name: 'ri-arrow-down-s-line', size: 16, alpha: 0.5 }}
			
 
				-    label6={{ name: 'ri-shield-user-line', size: 16, alpha: 0.5 }}
			
 
				+	title="User"
			
 
				+	label4={{ name: 'ri-arrow-down-s-line', size: 16, alpha: 0.5 }}
			
 
				+	label6={{ name: 'ri-shield-user-line', size: 16, alpha: 0.5 }}
			
 
				 />
			
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">right with text</div>
			
@@ -153,11 +153,11 @@
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">right with icon & text & icon</div>
			
 
				 <Input
			
 
				-    title="password"
			
 
				-    type="password"
			
 
				-    label4={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
			
 
				-    label5="password"
			
 
				-    label6={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
			
 
				+	title="password"
			
 
				+	type="password"
			
 
				+	label4={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
			
 
				+	label5="password"
			
 
				+	label6={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
			
 
				 />
			
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">left with text, right with icon</div>
			
@@ -165,14 +165,14 @@
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">Six left and right all band</div>
			
 
				 <Input
			
 
				-    title="password"
			
 
				-    type="password"
			
 
				-    label1={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
			
 
				-    label2="password"
			
 
				-    label3={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
			
 
				-    label4={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
			
 
				-    label5="password"
			
 
				-    label6={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
			
 
				+	title="password"
			
 
				+	type="password"
			
 
				+	label1={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
			
 
				+	label2="password"
			
 
				+	label3={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
			
 
				+	label4={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
			
 
				+	label5="password"
			
 
				+	label6={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
			
 
				 />
			
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">Prompt information and data item combination</div>
			
@@ -185,61 +185,61 @@
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">Show all configuration items</div>
			
 
				 <Input
			
 
				-    title="title"
			
 
				-    placeholder="Please enter the text"
			
 
				-    label1={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
			
 
				-    label2="label2"
			
 
				-    label3={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
			
 
				-    label4={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
			
 
				-    label5="label5"
			
 
				-    label6={{ name: 'ri-qr-scan-line', size: 16, alpha: 0.5 }}
			
 
				-    data1="data1"
			
 
				-    data2="data2"
			
 
				-    data3="data3"
			
 
				-    tip="tip"
			
 
				-    clear
			
 
				+	title="title"
			
 
				+	placeholder="Please enter the text"
			
 
				+	label1={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
			
 
				+	label2="label2"
			
 
				+	label3={{ name: 'ri-lock-line', size: 16, alpha: 0.5 }}
			
 
				+	label4={{ name: 'ri-bank-line', size: 16, alpha: 0.5 }}
			
 
				+	label5="label5"
			
 
				+	label6={{ name: 'ri-qr-scan-line', size: 16, alpha: 0.5 }}
			
 
				+	data1="data1"
			
 
				+	data2="data2"
			
 
				+	data3="data3"
			
 
				+	tip="tip"
			
 
				+	clear
			
 
				 />
			
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">label1 and label4 use slot</div>
			
 
				 <Input title="Verification code" label1="slot" label4="slot">
			
 
				-    <div slot="label1">
			
 
				-        <svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
			
 
				-            <path
			
 
				-                d="M511.198384 637.07798c-17.170101 0-31.08202 13.911919-31.08202 31.08202v124.302222c0 17.157172 13.924848 31.08202 31.08202 31.08202s31.069091-13.924848 31.069091-31.08202v-124.302222c0-17.170101-13.911919-31.08202-31.069091-31.08202z m0 0"
			
 
				-                fill="#515151"
			
 
				-            />
			
 
				-            <path
			
 
				-                d="M759.815758 513.331717V264.145455C759.815758 126.823434 648.520404 15.515152 511.198384 15.515152c-137.309091 0-248.630303 111.308283-248.630303 248.630303v249.186262C223.702626 565.20404 200.40404 629.423838 200.40404 699.229091c0 171.649293 139.145051 310.794343 310.794344 310.794343s310.794343-139.145051 310.794343-310.794343c0-69.805253-23.311515-134.025051-62.176969-185.897374zM324.719192 264.145455c0-102.994747 83.497374-186.479192 186.479192-186.479192 102.981818 0 186.466263 83.484444 186.466262 186.479192v186.88c-51.975758-39.111111-116.402424-62.577778-186.466262-62.577778s-134.490505 23.453737-186.479192 62.577778V264.145455z m186.479192 683.726868c-137.309091 0-248.630303-111.321212-248.630303-248.643232 0-137.309091 111.308283-248.617374 248.630303-248.617374 132.628687 0 248.617374 115.988687 248.617374 248.617374 0 137.32202-111.295354 248.643232-248.617374 248.643232z m0 0"
			
 
				-                fill="#515151"
			
 
				-            />
			
 
				-        </svg>
			
 
				-    </div>
			
 
				-    <div slot="label4">
			
 
				-        <Button size="auto" heightOut="0" heightIn="1" fill="lineTheme">
			
 
				-            <div class="px-2">Get code</div>
			
 
				-        </Button>
			
 
				-    </div>
			
 
				+	<div slot="label1">
			
 
				+		<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
			
 
				+			<path
			
 
				+				d="M511.198384 637.07798c-17.170101 0-31.08202 13.911919-31.08202 31.08202v124.302222c0 17.157172 13.924848 31.08202 31.08202 31.08202s31.069091-13.924848 31.069091-31.08202v-124.302222c0-17.170101-13.911919-31.08202-31.069091-31.08202z m0 0"
			
 
				+				fill="#515151"
			
 
				+			/>
			
 
				+			<path
			
 
				+				d="M759.815758 513.331717V264.145455C759.815758 126.823434 648.520404 15.515152 511.198384 15.515152c-137.309091 0-248.630303 111.308283-248.630303 248.630303v249.186262C223.702626 565.20404 200.40404 629.423838 200.40404 699.229091c0 171.649293 139.145051 310.794343 310.794344 310.794343s310.794343-139.145051 310.794343-310.794343c0-69.805253-23.311515-134.025051-62.176969-185.897374zM324.719192 264.145455c0-102.994747 83.497374-186.479192 186.479192-186.479192 102.981818 0 186.466263 83.484444 186.466262 186.479192v186.88c-51.975758-39.111111-116.402424-62.577778-186.466262-62.577778s-134.490505 23.453737-186.479192 62.577778V264.145455z m186.479192 683.726868c-137.309091 0-248.630303-111.321212-248.630303-248.643232 0-137.309091 111.308283-248.617374 248.630303-248.617374 132.628687 0 248.617374 115.988687 248.617374 248.617374 0 137.32202-111.295354 248.643232-248.617374 248.643232z m0 0"
			
 
				+				fill="#515151"
			
 
				+			/>
			
 
				+		</svg>
			
 
				+	</div>
			
 
				+	<div slot="label4">
			
 
				+		<Button size="auto" heightOut="0" heightIn="1" fill="lineTheme">
			
 
				+			<div class="px-2">Get code</div>
			
 
				+		</Button>
			
 
				+	</div>
			
 
				 </Input>
			
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">Dynamic display</div>
			
 
				 <Input
			
 
				-    title="Dynamic display label5"
			
 
				-    type="tel"
			
 
				-    placeholder="Please enter the 11 -digit mobile phone number"
			
 
				-    maxlength={11}
			
 
				-    state={mobileState}
			
 
				-    on:change={changeStateFun}
			
 
				-    label5="slot"
			
 
				+	title="Dynamic display label5"
			
 
				+	type="tel"
			
 
				+	placeholder="Please enter the 11 -digit mobile phone number"
			
 
				+	maxlength={11}
			
 
				+	state={mobileState}
			
 
				+	on:change={changeStateFun}
			
 
				+	label5="slot"
			
 
				 >
			
 
				-    <div slot="label5">
			
 
				-        {#if mobileLength === 11}
			
 
				-            <Icon name="ri-check-fill" injClass="text-[green]" size={14} />
			
 
				-        {:else if mobileLength === 0}
			
 
				-            <!-- none -->
			
 
				-        {:else}
			
 
				-            <Icon name="ri-close-fill" injClass="text-[red]" size={14} />
			
 
				-        {/if}
			
 
				-    </div>
			
 
				+	<div slot="label5">
			
 
				+		{#if mobileLength === 11}
			
 
				+			<Icon name="ri-check-fill" injClass="text-[green]" size={14} />
			
 
				+		{:else if mobileLength === 0}
			
 
				+			<!-- none -->
			
 
				+		{:else}
			
 
				+			<Icon name="ri-close-fill" injClass="text-[red]" size={14} />
			
 
				+		{/if}
			
 
				+	</div>
			
 
				 </Input>
			
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">bind value</div>
			
@@ -249,12 +249,12 @@
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">click label4 trigger event</div>
			
 
				 <Input
			
 
				-    title="ID number"
			
 
				-    placeholder={placeholderIdCard}
			
 
				-    bind:value={IdCard}
			
 
				-    label4={{ name: 'ri-qr-scan-line', size: 16, alpha: 0.5 }}
			
 
				-    on:clicklabel4={clickLabel4Fun}
			
 
				-    clear
			
 
				+	title="ID number"
			
 
				+	placeholder={placeholderIdCard}
			
 
				+	bind:value={IdCard}
			
 
				+	label4={{ name: 'ri-qr-scan-line', size: 16, alpha: 0.5 }}
			
 
				+	on:clicklabel4={clickLabel4Fun}
			
 
				+	clear
			
 
				 />
			
 
				 
			
 
				 <div class="px-4 pt-8 font-bold text-xl">textarea</div>
			
--- a/demo/src/pages/loading/LoadingDemo.svelte
+++ b/demo/src/pages/loading/LoadingDemo.svelte
@@ -1,150 +1,153 @@
 
				 <!--Loading Demo-->
			
 
				 <script>
			
 
				-    import { Loading, Tabs, TabContent, Button } from 'stdf';
			
 
				+	import { Loading, Tabs, TabContent, Button } from 'stdf';
			
 
				 
			
 
				-    //传入个数，返回随机生成的颜色数组
			
 
				-    const randomColorArr = num => {
			
 
				-        //随机生成16进制颜色
			
 
				-        const randomColor = () => '#' + ('00000' + ((Math.random() * 0x1000000) << 0).toString(16)).slice(-6);
			
 
				-        let arr = [];
			
 
				-        for (let i = 0; i < num; i++) {
			
 
				-            arr.push(randomColor());
			
 
				-        }
			
 
				-        return arr;
			
 
				-    };
			
 
				+	//传入个数，返回随机生成的颜色数组
			
 
				+	const randomColorArr = num => {
			
 
				+		//随机生成16进制颜色
			
 
				+		const randomColor = () => '#' + ('00000' + ((Math.random() * 0x1000000) << 0).toString(16)).slice(-6);
			
 
				+		let arr = [];
			
 
				+		for (let i = 0; i < num; i++) {
			
 
				+			arr.push(randomColor());
			
 
				+		}
			
 
				+		return arr;
			
 
				+	};
			
 
				 
			
 
				-    const arr1 = new Array(22);
			
 
				-    const arr2 = new Array(6);
			
 
				-    const arr4 = new Array(4);
			
 
				-    const labels = [{ text: '单色' }, { text: '双色' }, { text: '四色' }, { text: '其他' }];
			
 
				+	const arr1 = new Array(22);
			
 
				+	const arr2 = new Array(6);
			
 
				+	const arr4 = new Array(4);
			
 
				+	const labels = [{ text: '单色' }, { text: '双色' }, { text: '四色' }, { text: '其他' }];
			
 
				 
			
 
				-    const speedBtns = [0.5, 1, 2];
			
 
				-    let speed = 1;
			
 
				+	const speedBtns = [0.5, 1, 2];
			
 
				+	let speed = 1;
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-4">
			
 
				-    <Tabs tab={{ labels, mx: '4' }}>
			
 
				-        <TabContent>
			
 
				-            <div class="py-4">
			
 
				-                <div class="flex text-center font-bold text-sm">
			
 
				-                    {#each ['默认色', '主题色', '自选色', '反差色', '反主色'] as item}
			
 
				-                        <div class="flex-1 py-2 border border-black/5 dark:border-white/5">{item}</div>
			
 
				-                    {/each}
			
 
				-                </div>
			
 
				-                <div class="grid grid-cols-5">
			
 
				-                    {#each arr1 as item, i}
			
 
				-                        <div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				-                            <div class="w-[30px] h-[30px]">
			
 
				-                                <Loading type={'1_' + i} bind:speed />
			
 
				-                            </div>
			
 
				-                            <div class="text-xs text-center mt-4">{'1_' + i}</div>
			
 
				-                        </div>
			
 
				-                        <div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				-                            <div class="w-[30px] h-[30px]">
			
 
				-                                <Loading type={'1_' + i} theme bind:speed />
			
 
				-                            </div>
			
 
				-                            <div class="text-xs text-center mt-4">{'1_' + i}</div>
			
 
				-                        </div>
			
 
				-                        <div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				-                            <div class="w-[30px] h-[30px]">
			
 
				-                                <Loading type={'1_' + i} theme customColor={randomColorArr(1)} bind:speed />
			
 
				-                            </div>
			
 
				-                            <div class="text-xs text-center mt-4">{'1_' + i}</div>
			
 
				-                        </div>
			
 
				-                        <div
			
 
				-                            class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray5 dark:bg-gray9 text-white dark:text-black"
			
 
				-                        >
			
 
				-                            <div class="w-[30px] h-[30px]">
			
 
				-                                <Loading type={'1_' + i} inverse bind:speed />
			
 
				-                            </div>
			
 
				-                            <div class="text-xs text-center mt-4">{'1_' + i}</div>
			
 
				-                        </div>
			
 
				-                        <div
			
 
				-                            class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray5 dark:bg-gray9 text-white dark:text-black"
			
 
				-                        >
			
 
				-                            <div class="w-[30px] h-[30px]">
			
 
				-                                <Loading type={'1_' + i} theme inverse bind:speed />
			
 
				-                            </div>
			
 
				-                            <div class="text-xs text-center mt-4">{'1_' + i}</div>
			
 
				-                        </div>
			
 
				-                    {/each}
			
 
				-                </div>
			
 
				-            </div>
			
 
				-            <div class="text-xs p-4">持续更新...</div>
			
 
				-        </TabContent>
			
 
				-        <TabContent>
			
 
				-            <div class="py-4">
			
 
				-                <div class="flex text-center font-bold text-sm">
			
 
				-                    {#each ['默认色', '自选色', '反差色'] as item}
			
 
				-                        <div class="flex-1 py-2 border border-black/5 dark:border-white/5">{item}</div>
			
 
				-                    {/each}
			
 
				-                </div>
			
 
				-                <div class="grid grid-cols-3">
			
 
				-                    {#each arr2 as item, i}
			
 
				-                        <div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				-                            <div class="w-[30px] h-[30px]">
			
 
				-                                <Loading type={'2_' + i} bind:speed />
			
 
				-                            </div>
			
 
				-                            <div class="text-xs text-center mt-4">{'2_' + i}</div>
			
 
				-                        </div>
			
 
				-                        <div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				-                            <div class="w-[30px] h-[30px]">
			
 
				-                                <Loading type={'2_' + i} customColor={randomColorArr(2)} bind:speed />
			
 
				-                            </div>
			
 
				-                            <div class="text-xs text-center mt-4">{'2_' + i}</div>
			
 
				-                        </div>
			
 
				-                        <div
			
 
				-                            class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray5 dark:bg-gray9 text-white dark:text-black"
			
 
				-                        >
			
 
				-                            <div class="w-[30px] h-[30px]">
			
 
				-                                <Loading type={'2_' + i} inverse bind:speed />
			
 
				-                            </div>
			
 
				-                            <div class="text-xs text-center mt-4">{'2_' + i}</div>
			
 
				-                        </div>
			
 
				-                    {/each}
			
 
				-                </div>
			
 
				-            </div>
			
 
				-            <div class="text-xs p-4">持续更新...</div>
			
 
				-        </TabContent>
			
 
				-        <TabContent>
			
 
				-            <div class="py-4">
			
 
				-                <div class="flex text-center font-bold text-sm">
			
 
				-                    {#each ['默认色', '自选色', '默认色', '自选色'] as item}
			
 
				-                        <div class="flex-1 py-2 border border-black/5 dark:border-white/5">{item}</div>
			
 
				-                    {/each}
			
 
				-                </div>
			
 
				-                <div class="grid grid-cols-4">
			
 
				-                    {#each arr4 as item, i}
			
 
				-                        <div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				-                            <div class="w-[30px] h-[30px]">
			
 
				-                                <Loading type={'4_' + i} bind:speed />
			
 
				-                            </div>
			
 
				-                            <div class="text-xs text-center mt-4">{'4_' + i}</div>
			
 
				-                        </div>
			
 
				-                        <div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				-                            <div class="w-[30px] h-[30px]">
			
 
				-                                <Loading type={'4_' + i} customColor={randomColorArr(4)} bind:speed />
			
 
				-                            </div>
			
 
				-                            <div class="text-xs text-center mt-4">{'4_' + i}</div>
			
 
				-                        </div>
			
 
				-                    {/each}
			
 
				-                </div>
			
 
				-            </div>
			
 
				-            <div class="text-xs p-4">持续更新...</div>
			
 
				-        </TabContent>
			
 
				-        <TabContent>
			
 
				-            <div class="py-4" />
			
 
				-            <div class="text-xs p-4">持续更新...</div>
			
 
				-        </TabContent>
			
 
				-    </Tabs>
			
 
				+	<Tabs tab={{ labels, mx: '4' }}>
			
 
				+		<TabContent>
			
 
				+			<div class="py-4">
			
 
				+				<div class="flex text-center font-bold text-sm">
			
 
				+					{#each ['默认色', '主题色', '自选色', '反差色', '反主色'] as item}
			
 
				+						<div class="flex-1 py-2 border border-black/5 dark:border-white/5">{item}</div>
			
 
				+					{/each}
			
 
				+				</div>
			
 
				+				<div class="grid grid-cols-5">
			
 
				+					<!-- eslint-disable-next-line no-unused-vars -->
			
 
				+					{#each arr1 as item, i}
			
 
				+						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				+							<div class="w-[30px] h-[30px]">
			
 
				+								<Loading type={'1_' + i} bind:speed />
			
 
				+							</div>
			
 
				+							<div class="text-xs text-center mt-4">{'1_' + i}</div>
			
 
				+						</div>
			
 
				+						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				+							<div class="w-[30px] h-[30px]">
			
 
				+								<Loading type={'1_' + i} theme bind:speed />
			
 
				+							</div>
			
 
				+							<div class="text-xs text-center mt-4">{'1_' + i}</div>
			
 
				+						</div>
			
 
				+						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				+							<div class="w-[30px] h-[30px]">
			
 
				+								<Loading type={'1_' + i} theme customColor={randomColorArr(1)} bind:speed />
			
 
				+							</div>
			
 
				+							<div class="text-xs text-center mt-4">{'1_' + i}</div>
			
 
				+						</div>
			
 
				+						<div
			
 
				+							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray5 dark:bg-gray9 text-white dark:text-black"
			
 
				+						>
			
 
				+							<div class="w-[30px] h-[30px]">
			
 
				+								<Loading type={'1_' + i} inverse bind:speed />
			
 
				+							</div>
			
 
				+							<div class="text-xs text-center mt-4">{'1_' + i}</div>
			
 
				+						</div>
			
 
				+						<div
			
 
				+							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray5 dark:bg-gray9 text-white dark:text-black"
			
 
				+						>
			
 
				+							<div class="w-[30px] h-[30px]">
			
 
				+								<Loading type={'1_' + i} theme inverse bind:speed />
			
 
				+							</div>
			
 
				+							<div class="text-xs text-center mt-4">{'1_' + i}</div>
			
 
				+						</div>
			
 
				+					{/each}
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="text-xs p-4">持续更新...</div>
			
 
				+		</TabContent>
			
 
				+		<TabContent>
			
 
				+			<div class="py-4">
			
 
				+				<div class="flex text-center font-bold text-sm">
			
 
				+					{#each ['默认色', '自选色', '反差色'] as item}
			
 
				+						<div class="flex-1 py-2 border border-black/5 dark:border-white/5">{item}</div>
			
 
				+					{/each}
			
 
				+				</div>
			
 
				+				<div class="grid grid-cols-3">
			
 
				+					<!-- eslint-disable-next-line no-unused-vars -->
			
 
				+					{#each arr2 as item, i}
			
 
				+						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				+							<div class="w-[30px] h-[30px]">
			
 
				+								<Loading type={'2_' + i} bind:speed />
			
 
				+							</div>
			
 
				+							<div class="text-xs text-center mt-4">{'2_' + i}</div>
			
 
				+						</div>
			
 
				+						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				+							<div class="w-[30px] h-[30px]">
			
 
				+								<Loading type={'2_' + i} customColor={randomColorArr(2)} bind:speed />
			
 
				+							</div>
			
 
				+							<div class="text-xs text-center mt-4">{'2_' + i}</div>
			
 
				+						</div>
			
 
				+						<div
			
 
				+							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray5 dark:bg-gray9 text-white dark:text-black"
			
 
				+						>
			
 
				+							<div class="w-[30px] h-[30px]">
			
 
				+								<Loading type={'2_' + i} inverse bind:speed />
			
 
				+							</div>
			
 
				+							<div class="text-xs text-center mt-4">{'2_' + i}</div>
			
 
				+						</div>
			
 
				+					{/each}
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="text-xs p-4">持续更新...</div>
			
 
				+		</TabContent>
			
 
				+		<TabContent>
			
 
				+			<div class="py-4">
			
 
				+				<div class="flex text-center font-bold text-sm">
			
 
				+					{#each ['默认色', '自选色', '默认色', '自选色'] as item}
			
 
				+						<div class="flex-1 py-2 border border-black/5 dark:border-white/5">{item}</div>
			
 
				+					{/each}
			
 
				+				</div>
			
 
				+				<div class="grid grid-cols-4">
			
 
				+					<!-- eslint-disable-next-line no-unused-vars -->
			
 
				+					{#each arr4 as item, i}
			
 
				+						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				+							<div class="w-[30px] h-[30px]">
			
 
				+								<Loading type={'4_' + i} bind:speed />
			
 
				+							</div>
			
 
				+							<div class="text-xs text-center mt-4">{'4_' + i}</div>
			
 
				+						</div>
			
 
				+						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				+							<div class="w-[30px] h-[30px]">
			
 
				+								<Loading type={'4_' + i} customColor={randomColorArr(4)} bind:speed />
			
 
				+							</div>
			
 
				+							<div class="text-xs text-center mt-4">{'4_' + i}</div>
			
 
				+						</div>
			
 
				+					{/each}
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="text-xs p-4">持续更新...</div>
			
 
				+		</TabContent>
			
 
				+		<TabContent>
			
 
				+			<div class="py-4" />
			
 
				+			<div class="text-xs p-4">持续更新...</div>
			
 
				+		</TabContent>
			
 
				+	</Tabs>
			
 
				 </div>
			
 
				 <!-- 固定在底部的按钮组，控制速度 -->
			
 
				 <div class="sticky bottom-0 left-0 w-full flex gap-3 justify-between px-2 z-10 bg-white/90 dark:bg-black/90">
			
 
				-    {#each speedBtns as item}
			
 
				-        <div class="flex-1">
			
 
				-            <Button fill={speed === item ? 'base' : 'lineTheme'} size="full" injClass="text-xs px-2" on:click={() => (speed = item)}>
			
 
				-                {item} 倍速
			
 
				-            </Button>
			
 
				-        </div>
			
 
				-    {/each}
			
 
				+	{#each speedBtns as item}
			
 
				+		<div class="flex-1">
			
 
				+			<Button fill={speed === item ? 'base' : 'lineTheme'} size="full" injClass="text-xs px-2" on:click={() => (speed = item)}>
			
 
				+				{item} 倍速
			
 
				+			</Button>
			
 
				+		</div>
			
 
				+	{/each}
			
 
				 </div>
			
--- a/demo/src/pages/loading/LoadingDemo_en.svelte
+++ b/demo/src/pages/loading/LoadingDemo_en.svelte
@@ -1,150 +1,153 @@
 
				 <!--Loading Demo-->
			
 
				 <script>
			
 
				-    import { Loading, Tabs, TabContent, Button } from 'stdf';
			
 
				+	import { Loading, Tabs, TabContent, Button } from 'stdf';
			
 
				 
			
 
				-    //Input the number and return an array of randomly generated colors
			
 
				-    const randomColorArr = num => {
			
 
				-        // Generate a random hexadecimal color
			
 
				-        const randomColor = () => '#' + ('00000' + ((Math.random() * 0x1000000) << 0).toString(16)).slice(-6);
			
 
				-        let arr = [];
			
 
				-        for (let i = 0; i < num; i++) {
			
 
				-            arr.push(randomColor());
			
 
				-        }
			
 
				-        return arr;
			
 
				-    };
			
 
				+	//Input the number and return an array of randomly generated colors
			
 
				+	const randomColorArr = num => {
			
 
				+		// Generate a random hexadecimal color
			
 
				+		const randomColor = () => '#' + ('00000' + ((Math.random() * 0x1000000) << 0).toString(16)).slice(-6);
			
 
				+		let arr = [];
			
 
				+		for (let i = 0; i < num; i++) {
			
 
				+			arr.push(randomColor());
			
 
				+		}
			
 
				+		return arr;
			
 
				+	};
			
 
				 
			
 
				-    const arr1 = new Array(22);
			
 
				-    const arr2 = new Array(6);
			
 
				-    const arr4 = new Array(4);
			
 
				-    const labels = [{ text: 'One color' }, { text: 'Two color' }, { text: 'Four color' }, { text: 'Other' }];
			
 
				+	const arr1 = new Array(22);
			
 
				+	const arr2 = new Array(6);
			
 
				+	const arr4 = new Array(4);
			
 
				+	const labels = [{ text: 'One color' }, { text: 'Two color' }, { text: 'Four color' }, { text: 'Other' }];
			
 
				 
			
 
				-    const speedBtns = [0.5, 1, 2];
			
 
				-    let speed = 1;
			
 
				+	const speedBtns = [0.5, 1, 2];
			
 
				+	let speed = 1;
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-4">
			
 
				-    <Tabs tab={{ labels, mx: '4' }}>
			
 
				-        <TabContent>
			
 
				-            <div class="py-4">
			
 
				-                <div class="flex text-center font-bold text-sm">
			
 
				-                    {#each ['Default', 'Theme', 'Custom', 'Inverse', 'Inv theme'] as item}
			
 
				-                        <div class="flex-1 py-2 border border-black/5 dark:border-white/5">{item}</div>
			
 
				-                    {/each}
			
 
				-                </div>
			
 
				-                <div class="grid grid-cols-5">
			
 
				-                    {#each arr1 as item, i}
			
 
				-                        <div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				-                            <div class="w-[30px] h-[30px]">
			
 
				-                                <Loading type={'1_' + i} bind:speed />
			
 
				-                            </div>
			
 
				-                            <div class="text-xs text-center mt-4">{'1_' + i}</div>
			
 
				-                        </div>
			
 
				-                        <div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				-                            <div class="w-[30px] h-[30px]">
			
 
				-                                <Loading type={'1_' + i} theme bind:speed />
			
 
				-                            </div>
			
 
				-                            <div class="text-xs text-center mt-4">{'1_' + i}</div>
			
 
				-                        </div>
			
 
				-                        <div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				-                            <div class="w-[30px] h-[30px]">
			
 
				-                                <Loading type={'1_' + i} theme customColor={randomColorArr(1)} bind:speed />
			
 
				-                            </div>
			
 
				-                            <div class="text-xs text-center mt-4">{'1_' + i}</div>
			
 
				-                        </div>
			
 
				-                        <div
			
 
				-                            class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray5 dark:bg-gray9 text-white dark:text-black"
			
 
				-                        >
			
 
				-                            <div class="w-[30px] h-[30px]">
			
 
				-                                <Loading type={'1_' + i} inverse bind:speed />
			
 
				-                            </div>
			
 
				-                            <div class="text-xs text-center mt-4">{'1_' + i}</div>
			
 
				-                        </div>
			
 
				-                        <div
			
 
				-                            class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray5 dark:bg-gray9 text-white dark:text-black"
			
 
				-                        >
			
 
				-                            <div class="w-[30px] h-[30px]">
			
 
				-                                <Loading type={'1_' + i} theme inverse bind:speed />
			
 
				-                            </div>
			
 
				-                            <div class="text-xs text-center mt-4">{'1_' + i}</div>
			
 
				-                        </div>
			
 
				-                    {/each}
			
 
				-                </div>
			
 
				-            </div>
			
 
				-            <div class="text-xs p-4">Continually updated...</div>
			
 
				-        </TabContent>
			
 
				-        <TabContent>
			
 
				-            <div class="py-4">
			
 
				-                <div class="flex text-center font-bold text-sm">
			
 
				-                    {#each ['Default', 'Custom', 'Inverse'] as item}
			
 
				-                        <div class="flex-1 py-2 border border-black/5 dark:border-white/5">{item}</div>
			
 
				-                    {/each}
			
 
				-                </div>
			
 
				-                <div class="grid grid-cols-3">
			
 
				-                    {#each arr2 as item, i}
			
 
				-                        <div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				-                            <div class="w-[30px] h-[30px]">
			
 
				-                                <Loading type={'2_' + i} bind:speed />
			
 
				-                            </div>
			
 
				-                            <div class="text-xs text-center mt-4">{'2_' + i}</div>
			
 
				-                        </div>
			
 
				-                        <div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				-                            <div class="w-[30px] h-[30px]">
			
 
				-                                <Loading type={'2_' + i} customColor={randomColorArr(2)} bind:speed />
			
 
				-                            </div>
			
 
				-                            <div class="text-xs text-center mt-4">{'2_' + i}</div>
			
 
				-                        </div>
			
 
				-                        <div
			
 
				-                            class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray5 dark:bg-gray9 text-white dark:text-black"
			
 
				-                        >
			
 
				-                            <div class="w-[30px] h-[30px]">
			
 
				-                                <Loading type={'2_' + i} inverse bind:speed />
			
 
				-                            </div>
			
 
				-                            <div class="text-xs text-center mt-4">{'2_' + i}</div>
			
 
				-                        </div>
			
 
				-                    {/each}
			
 
				-                </div>
			
 
				-            </div>
			
 
				-            <div class="text-xs p-4">Continually updated...</div>
			
 
				-        </TabContent>
			
 
				-        <TabContent>
			
 
				-            <div class="py-4">
			
 
				-                <div class="flex text-center font-bold text-sm">
			
 
				-                    {#each ['Default', 'Custom', 'Default', 'Custom'] as item}
			
 
				-                        <div class="flex-1 py-2 border border-black/5 dark:border-white/5">{item}</div>
			
 
				-                    {/each}
			
 
				-                </div>
			
 
				-                <div class="grid grid-cols-4">
			
 
				-                    {#each arr4 as item, i}
			
 
				-                        <div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				-                            <div class="w-[30px] h-[30px]">
			
 
				-                                <Loading type={'4_' + i} bind:speed />
			
 
				-                            </div>
			
 
				-                            <div class="text-xs text-center mt-4">{'4_' + i}</div>
			
 
				-                        </div>
			
 
				-                        <div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				-                            <div class="w-[30px] h-[30px]">
			
 
				-                                <Loading type={'4_' + i} customColor={randomColorArr(4)} bind:speed />
			
 
				-                            </div>
			
 
				-                            <div class="text-xs text-center mt-4">{'4_' + i}</div>
			
 
				-                        </div>
			
 
				-                    {/each}
			
 
				-                </div>
			
 
				-            </div>
			
 
				-            <div class="text-xs p-4">Continually updated...</div>
			
 
				-        </TabContent>
			
 
				-        <TabContent>
			
 
				-            <div class="py-4" />
			
 
				-            <div class="text-xs p-4">Continually updated...</div>
			
 
				-        </TabContent>
			
 
				-    </Tabs>
			
 
				+	<Tabs tab={{ labels, mx: '4' }}>
			
 
				+		<TabContent>
			
 
				+			<div class="py-4">
			
 
				+				<div class="flex text-center font-bold text-sm">
			
 
				+					{#each ['Default', 'Theme', 'Custom', 'Inverse', 'Inv theme'] as item}
			
 
				+						<div class="flex-1 py-2 border border-black/5 dark:border-white/5">{item}</div>
			
 
				+					{/each}
			
 
				+				</div>
			
 
				+				<div class="grid grid-cols-5">
			
 
				+					<!-- eslint-disable-next-line no-unused-vars -->
			
 
				+					{#each arr1 as item, i}
			
 
				+						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				+							<div class="w-[30px] h-[30px]">
			
 
				+								<Loading type={'1_' + i} bind:speed />
			
 
				+							</div>
			
 
				+							<div class="text-xs text-center mt-4">{'1_' + i}</div>
			
 
				+						</div>
			
 
				+						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				+							<div class="w-[30px] h-[30px]">
			
 
				+								<Loading type={'1_' + i} theme bind:speed />
			
 
				+							</div>
			
 
				+							<div class="text-xs text-center mt-4">{'1_' + i}</div>
			
 
				+						</div>
			
 
				+						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				+							<div class="w-[30px] h-[30px]">
			
 
				+								<Loading type={'1_' + i} theme customColor={randomColorArr(1)} bind:speed />
			
 
				+							</div>
			
 
				+							<div class="text-xs text-center mt-4">{'1_' + i}</div>
			
 
				+						</div>
			
 
				+						<div
			
 
				+							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray5 dark:bg-gray9 text-white dark:text-black"
			
 
				+						>
			
 
				+							<div class="w-[30px] h-[30px]">
			
 
				+								<Loading type={'1_' + i} inverse bind:speed />
			
 
				+							</div>
			
 
				+							<div class="text-xs text-center mt-4">{'1_' + i}</div>
			
 
				+						</div>
			
 
				+						<div
			
 
				+							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray5 dark:bg-gray9 text-white dark:text-black"
			
 
				+						>
			
 
				+							<div class="w-[30px] h-[30px]">
			
 
				+								<Loading type={'1_' + i} theme inverse bind:speed />
			
 
				+							</div>
			
 
				+							<div class="text-xs text-center mt-4">{'1_' + i}</div>
			
 
				+						</div>
			
 
				+					{/each}
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="text-xs p-4">Continually updated...</div>
			
 
				+		</TabContent>
			
 
				+		<TabContent>
			
 
				+			<div class="py-4">
			
 
				+				<div class="flex text-center font-bold text-sm">
			
 
				+					{#each ['Default', 'Custom', 'Inverse'] as item}
			
 
				+						<div class="flex-1 py-2 border border-black/5 dark:border-white/5">{item}</div>
			
 
				+					{/each}
			
 
				+				</div>
			
 
				+				<div class="grid grid-cols-3">
			
 
				+					<!-- eslint-disable-next-line no-unused-vars -->
			
 
				+					{#each arr2 as item, i}
			
 
				+						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				+							<div class="w-[30px] h-[30px]">
			
 
				+								<Loading type={'2_' + i} bind:speed />
			
 
				+							</div>
			
 
				+							<div class="text-xs text-center mt-4">{'2_' + i}</div>
			
 
				+						</div>
			
 
				+						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				+							<div class="w-[30px] h-[30px]">
			
 
				+								<Loading type={'2_' + i} customColor={randomColorArr(2)} bind:speed />
			
 
				+							</div>
			
 
				+							<div class="text-xs text-center mt-4">{'2_' + i}</div>
			
 
				+						</div>
			
 
				+						<div
			
 
				+							class="py-6 w-full flex flex-col items-center border border-white/5 dark:border-black/5 bg-gray5 dark:bg-gray9 text-white dark:text-black"
			
 
				+						>
			
 
				+							<div class="w-[30px] h-[30px]">
			
 
				+								<Loading type={'2_' + i} inverse bind:speed />
			
 
				+							</div>
			
 
				+							<div class="text-xs text-center mt-4">{'2_' + i}</div>
			
 
				+						</div>
			
 
				+					{/each}
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="text-xs p-4">Continually updated...</div>
			
 
				+		</TabContent>
			
 
				+		<TabContent>
			
 
				+			<div class="py-4">
			
 
				+				<div class="flex text-center font-bold text-sm">
			
 
				+					{#each ['Default', 'Custom', 'Default', 'Custom'] as item}
			
 
				+						<div class="flex-1 py-2 border border-black/5 dark:border-white/5">{item}</div>
			
 
				+					{/each}
			
 
				+				</div>
			
 
				+				<div class="grid grid-cols-4">
			
 
				+					<!-- eslint-disable-next-line no-unused-vars -->
			
 
				+					{#each arr4 as item, i}
			
 
				+						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				+							<div class="w-[30px] h-[30px]">
			
 
				+								<Loading type={'4_' + i} bind:speed />
			
 
				+							</div>
			
 
				+							<div class="text-xs text-center mt-4">{'4_' + i}</div>
			
 
				+						</div>
			
 
				+						<div class="py-6 w-full flex flex-col items-center border border-black/5 dark:border-white/5">
			
 
				+							<div class="w-[30px] h-[30px]">
			
 
				+								<Loading type={'4_' + i} customColor={randomColorArr(4)} bind:speed />
			
 
				+							</div>
			
 
				+							<div class="text-xs text-center mt-4">{'4_' + i}</div>
			
 
				+						</div>
			
 
				+					{/each}
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="text-xs p-4">Continually updated...</div>
			
 
				+		</TabContent>
			
 
				+		<TabContent>
			
 
				+			<div class="py-4" />
			
 
				+			<div class="text-xs p-4">Continually updated...</div>
			
 
				+		</TabContent>
			
 
				+	</Tabs>
			
 
				 </div>
			
 
				 <!-- The button group fixed at the bottom, control speed -->
			
 
				 <div class="sticky bottom-0 left-0 w-full flex gap-3 justify-between px-2 z-10 bg-white/90 dark:bg-black/90">
			
 
				-    {#each speedBtns as item}
			
 
				-        <div class="flex-1">
			
 
				-            <Button fill={speed === item ? 'base' : 'lineTheme'} size="full" injClass="text-xs px-2" on:click={() => (speed = item)}>
			
 
				-                {item} speed
			
 
				-            </Button>
			
 
				-        </div>
			
 
				-    {/each}
			
 
				+	{#each speedBtns as item}
			
 
				+		<div class="flex-1">
			
 
				+			<Button fill={speed === item ? 'base' : 'lineTheme'} size="full" injClass="text-xs px-2" on:click={() => (speed = item)}>
			
 
				+				{item} speed
			
 
				+			</Button>
			
 
				+		</div>
			
 
				+	{/each}
			
 
				 </div>
			
--- a/demo/src/pages/mask/MaskDemo.svelte
+++ b/demo/src/pages/mask/MaskDemo.svelte
@@ -1,61 +1,61 @@
 
				 <!-- Mask Demo -->
			
 
				 <script>
			
 
				-    import { Mask, Toast, Cell, Button, Popup } from 'stdf';
			
 
				-
			
 
				-    let visible1 = false;
			
 
				-    let visible2 = false;
			
 
				-    let visible3 = false;
			
 
				-    let visible4 = false;
			
 
				-    let visible5 = false;
			
 
				-    let visible6 = false;
			
 
				-    let visible7 = false;
			
 
				-    let visible8 = false;
			
 
				-    let visible9 = false;
			
 
				-    let visible10 = false;
			
 
				-    let visible11 = false;
			
 
				-
			
 
				-    let isClick = false;
			
 
				+	import { Mask, Toast, Cell, Button, Popup } from 'stdf';
			
 
				+
			
 
				+	let visible1 = false;
			
 
				+	let visible2 = false;
			
 
				+	let visible3 = false;
			
 
				+	let visible4 = false;
			
 
				+	let visible5 = false;
			
 
				+	let visible6 = false;
			
 
				+	let visible7 = false;
			
 
				+	let visible8 = false;
			
 
				+	let visible9 = false;
			
 
				+	let visible10 = false;
			
 
				+	let visible11 = false;
			
 
				+
			
 
				+	let isClick = false;
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-4">
			
 
				-    <Cell title="基础用法" on:click={() => (visible1 = true)} />
			
 
				-    <Mask visible={visible1} on:clickMask={() => (visible1 = false)} />
			
 
				+	<Cell title="基础用法" on:click={() => (visible1 = true)} />
			
 
				+	<Mask visible={visible1} on:clickMask={() => (visible1 = false)} />
			
 
				 
			
 
				-    <Cell title="透明度为 0.1" on:click={() => (visible2 = true)} />
			
 
				-    <Mask visible={visible2} opacity={0.1} on:clickMask={() => (visible2 = false)} />
			
 
				+	<Cell title="透明度为 0.1" on:click={() => (visible2 = true)} />
			
 
				+	<Mask visible={visible2} opacity={0.1} on:clickMask={() => (visible2 = false)} />
			
 
				 
			
 
				-    <Cell title="透明度为 0.8" on:click={() => (visible3 = true)} />
			
 
				-    <Mask visible={visible3} opacity={0.8} on:clickMask={() => (visible3 = false)} />
			
 
				+	<Cell title="透明度为 0.8" on:click={() => (visible3 = true)} />
			
 
				+	<Mask visible={visible3} opacity={0.8} on:clickMask={() => (visible3 = false)} />
			
 
				 
			
 
				-    <Cell title="点击穿透" detail="请手动关闭" on:click={() => (visible4 = true)} />
			
 
				-    <Mask visible={visible4} clickable />
			
 
				-    <div class="flex">
			
 
				-        <div class="flex-1">
			
 
				-            <Button on:click={() => (isClick = !isClick)}>{isClick ? '已经点到我了' : '测试点击穿透'}</Button>
			
 
				-        </div>
			
 
				-        <div class="flex-1">
			
 
				-            <Button on:click={() => (visible4 = false)}>手动关闭</Button>
			
 
				-        </div>
			
 
				-    </div>
			
 
				+	<Cell title="点击穿透" detail="请手动关闭" on:click={() => (visible4 = true)} />
			
 
				+	<Mask visible={visible4} clickable />
			
 
				+	<div class="flex">
			
 
				+		<div class="flex-1">
			
 
				+			<Button on:click={() => (isClick = !isClick)}>{isClick ? '已经点到我了' : '测试点击穿透'}</Button>
			
 
				+		</div>
			
 
				+		<div class="flex-1">
			
 
				+			<Button on:click={() => (visible4 = false)}>手动关闭</Button>
			
 
				+		</div>
			
 
				+	</div>
			
 
				 
			
 
				-    <Cell title="反色遮罩" on:click={() => (visible5 = true)} />
			
 
				-    <Mask visible={visible5} inverse on:clickMask={() => (visible5 = false)} />
			
 
				+	<Cell title="反色遮罩" on:click={() => (visible5 = true)} />
			
 
				+	<Mask visible={visible5} inverse on:clickMask={() => (visible5 = false)} />
			
 
				 
			
 
				-    <Cell title="模糊遮罩" on:click={() => (visible6 = true)} />
			
 
				-    <Mask visible={visible6} backdropBlur="sm" opacity={0} on:clickMask={() => (visible6 = false)} />
			
 
				+	<Cell title="模糊遮罩" on:click={() => (visible6 = true)} />
			
 
				+	<Mask visible={visible6} backdropBlur="sm" opacity={0} on:clickMask={() => (visible6 = false)} />
			
 
				 
			
 
				-    <Cell title="加大模糊度" on:click={() => (visible7 = true)} />
			
 
				-    <Mask visible={visible7} backdropBlur="xl" opacity={0} on:clickMask={() => (visible7 = false)} />
			
 
				+	<Cell title="加大模糊度" on:click={() => (visible7 = true)} />
			
 
				+	<Mask visible={visible7} backdropBlur="xl" opacity={0} on:clickMask={() => (visible7 = false)} />
			
 
				 
			
 
				-    <Cell title="增加出现动画时长" on:click={() => (visible8 = true)} />
			
 
				-    <Mask visible={visible8} duration={1000} on:clickMask={() => (visible8 = false)} />
			
 
				+	<Cell title="增加出现动画时长" on:click={() => (visible8 = true)} />
			
 
				+	<Mask visible={visible8} duration={1000} on:clickMask={() => (visible8 = false)} />
			
 
				 
			
 
				-    <Cell title="增加消失动画时长" on:click={() => (visible9 = true)} />
			
 
				-    <Mask visible={visible9} outDuration={1000} on:clickMask={() => (visible9 = false)} />
			
 
				+	<Cell title="增加消失动画时长" on:click={() => (visible9 = true)} />
			
 
				+	<Mask visible={visible9} outDuration={1000} on:clickMask={() => (visible9 = false)} />
			
 
				 
			
 
				-    <Cell title="Toast 中使用" on:click={() => (visible10 = true)} />
			
 
				-    <Toast bind:visible={visible10} message="透明度为 0" />
			
 
				+	<Cell title="Toast 中使用" on:click={() => (visible10 = true)} />
			
 
				+	<Toast bind:visible={visible10} message="透明度为 0" />
			
 
				 
			
 
				-    <Cell title="Popup 中使用" on:click={() => (visible11 = true)} />
			
 
				-    <Popup bind:visible={visible11} />
			
 
				+	<Cell title="Popup 中使用" on:click={() => (visible11 = true)} />
			
 
				+	<Popup bind:visible={visible11} />
			
 
				 </div>
			
--- a/demo/src/pages/mask/MaskDemo_en.svelte
+++ b/demo/src/pages/mask/MaskDemo_en.svelte
@@ -1,61 +1,61 @@
 
				 <!-- Mask Demo -->
			
 
				 <script>
			
 
				-    import { Mask, Toast, Cell, Button, Popup } from 'stdf';
			
 
				-
			
 
				-    let visible1 = false;
			
 
				-    let visible2 = false;
			
 
				-    let visible3 = false;
			
 
				-    let visible4 = false;
			
 
				-    let visible5 = false;
			
 
				-    let visible6 = false;
			
 
				-    let visible7 = false;
			
 
				-    let visible8 = false;
			
 
				-    let visible9 = false;
			
 
				-    let visible10 = false;
			
 
				-    let visible11 = false;
			
 
				-
			
 
				-    let isClick = false;
			
 
				+	import { Mask, Toast, Cell, Button, Popup } from 'stdf';
			
 
				+
			
 
				+	let visible1 = false;
			
 
				+	let visible2 = false;
			
 
				+	let visible3 = false;
			
 
				+	let visible4 = false;
			
 
				+	let visible5 = false;
			
 
				+	let visible6 = false;
			
 
				+	let visible7 = false;
			
 
				+	let visible8 = false;
			
 
				+	let visible9 = false;
			
 
				+	let visible10 = false;
			
 
				+	let visible11 = false;
			
 
				+
			
 
				+	let isClick = false;
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-4">
			
 
				-    <Cell title="Basic usage" on:click={() => (visible1 = true)} />
			
 
				-    <Mask visible={visible1} on:clickMask={() => (visible1 = false)} />
			
 
				+	<Cell title="Basic usage" on:click={() => (visible1 = true)} />
			
 
				+	<Mask visible={visible1} on:clickMask={() => (visible1 = false)} />
			
 
				 
			
 
				-    <Cell title="Transparency is 0.1" on:click={() => (visible2 = true)} />
			
 
				-    <Mask visible={visible2} opacity={0.1} on:clickMask={() => (visible2 = false)} />
			
 
				+	<Cell title="Transparency is 0.1" on:click={() => (visible2 = true)} />
			
 
				+	<Mask visible={visible2} opacity={0.1} on:clickMask={() => (visible2 = false)} />
			
 
				 
			
 
				-    <Cell title="Transparency is 0.8" on:click={() => (visible3 = true)} />
			
 
				-    <Mask visible={visible3} opacity={0.8} on:clickMask={() => (visible3 = false)} />
			
 
				+	<Cell title="Transparency is 0.8" on:click={() => (visible3 = true)} />
			
 
				+	<Mask visible={visible3} opacity={0.8} on:clickMask={() => (visible3 = false)} />
			
 
				 
			
 
				-    <Cell title="Click through" detail="Please close manually" on:click={() => (visible4 = true)} />
			
 
				-    <Mask visible={visible4} clickable />
			
 
				-    <div class="flex">
			
 
				-        <div class="flex-1">
			
 
				-            <Button on:click={() => (isClick = !isClick)}>{isClick ? 'Click on me' : 'Click through'}</Button>
			
 
				-        </div>
			
 
				-        <div class="flex-1">
			
 
				-            <Button on:click={() => (visible4 = false)}>Manual shutdown</Button>
			
 
				-        </div>
			
 
				-    </div>
			
 
				+	<Cell title="Click through" detail="Please close manually" on:click={() => (visible4 = true)} />
			
 
				+	<Mask visible={visible4} clickable />
			
 
				+	<div class="flex">
			
 
				+		<div class="flex-1">
			
 
				+			<Button on:click={() => (isClick = !isClick)}>{isClick ? 'Click on me' : 'Click through'}</Button>
			
 
				+		</div>
			
 
				+		<div class="flex-1">
			
 
				+			<Button on:click={() => (visible4 = false)}>Manual shutdown</Button>
			
 
				+		</div>
			
 
				+	</div>
			
 
				 
			
 
				-    <Cell title="Reverse color mask" on:click={() => (visible5 = true)} />
			
 
				-    <Mask visible={visible5} inverse on:clickMask={() => (visible5 = false)} />
			
 
				+	<Cell title="Reverse color mask" on:click={() => (visible5 = true)} />
			
 
				+	<Mask visible={visible5} inverse on:clickMask={() => (visible5 = false)} />
			
 
				 
			
 
				-    <Cell title="Blur mask" on:click={() => (visible6 = true)} />
			
 
				-    <Mask visible={visible6} backdropBlur="sm" opacity={0} on:clickMask={() => (visible6 = false)} />
			
 
				+	<Cell title="Blur mask" on:click={() => (visible6 = true)} />
			
 
				+	<Mask visible={visible6} backdropBlur="sm" opacity={0} on:clickMask={() => (visible6 = false)} />
			
 
				 
			
 
				-    <Cell title="Increase ambiguity" on:click={() => (visible7 = true)} />
			
 
				-    <Mask visible={visible7} backdropBlur="xl" opacity={0} on:clickMask={() => (visible7 = false)} />
			
 
				+	<Cell title="Increase ambiguity" on:click={() => (visible7 = true)} />
			
 
				+	<Mask visible={visible7} backdropBlur="xl" opacity={0} on:clickMask={() => (visible7 = false)} />
			
 
				 
			
 
				-    <Cell title="Increased the animation time" on:click={() => (visible8 = true)} />
			
 
				-    <Mask visible={visible8} duration={1000} on:clickMask={() => (visible8 = false)} />
			
 
				+	<Cell title="Increased the animation time" on:click={() => (visible8 = true)} />
			
 
				+	<Mask visible={visible8} duration={1000} on:clickMask={() => (visible8 = false)} />
			
 
				 
			
 
				-    <Cell title="Increased the duration of vanishing animation" on:click={() => (visible9 = true)} />
			
 
				-    <Mask visible={visible9} outDuration={1000} on:clickMask={() => (visible9 = false)} />
			
 
				+	<Cell title="Increased the duration of vanishing animation" on:click={() => (visible9 = true)} />
			
 
				+	<Mask visible={visible9} outDuration={1000} on:clickMask={() => (visible9 = false)} />
			
 
				 
			
 
				-    <Cell title="Toast Use in" on:click={() => (visible10 = true)} />
			
 
				-    <Toast bind:visible={visible10} message="Transparency is 0" />
			
 
				+	<Cell title="Toast Use in" on:click={() => (visible10 = true)} />
			
 
				+	<Toast bind:visible={visible10} message="Transparency is 0" />
			
 
				 
			
 
				-    <Cell title="Popup Use in" on:click={() => (visible11 = true)} />
			
 
				-    <Popup bind:visible={visible11} />
			
 
				+	<Cell title="Popup Use in" on:click={() => (visible11 = true)} />
			
 
				+	<Popup bind:visible={visible11} />
			
 
				 </div>
			
--- a/demo/src/pages/modal/ModalDemo.svelte
+++ b/demo/src/pages/modal/ModalDemo.svelte
@@ -1,92 +1,92 @@
 
				 <!-- Modal Demo -->
			
 
				 <script>
			
 
				-    import { Modal, Cell, Toast } from 'stdf';
			
 
				-    import Aphorism from '../../components/Aphorism.svelte';
			
 
				-
			
 
				-    let visible1 = false;
			
 
				-    let visible2 = false;
			
 
				-    let visible3 = false;
			
 
				-    let visible4 = false;
			
 
				-    let visible5 = false;
			
 
				-    let visible6 = false;
			
 
				-    let visible7 = false;
			
 
				-    let visible8 = false;
			
 
				-    let visible9 = false;
			
 
				-    let visible10 = false;
			
 
				-    let visible11 = false;
			
 
				-    let visible12 = false;
			
 
				-    let visible13 = false;
			
 
				-    let visible14 = false;
			
 
				-    let visible15 = false;
			
 
				-
			
 
				-    let toastVisible = false;
			
 
				-
			
 
				-    $: if (visible15) {
			
 
				-        setTimeout(() => {
			
 
				-            visible15 = false;
			
 
				-        }, 3000);
			
 
				-    }
			
 
				+	import { Modal, Cell, Toast } from 'stdf';
			
 
				+	import Aphorism from '../../components/Aphorism.svelte';
			
 
				+
			
 
				+	let visible1 = false;
			
 
				+	let visible2 = false;
			
 
				+	let visible3 = false;
			
 
				+	let visible4 = false;
			
 
				+	let visible5 = false;
			
 
				+	let visible6 = false;
			
 
				+	let visible7 = false;
			
 
				+	let visible8 = false;
			
 
				+	let visible9 = false;
			
 
				+	let visible10 = false;
			
 
				+	let visible11 = false;
			
 
				+	let visible12 = false;
			
 
				+	let visible13 = false;
			
 
				+	let visible14 = false;
			
 
				+	let visible15 = false;
			
 
				+
			
 
				+	let toastVisible = false;
			
 
				+
			
 
				+	$: if (visible15) {
			
 
				+		setTimeout(() => {
			
 
				+			visible15 = false;
			
 
				+		}, 3000);
			
 
				+	}
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-4">
			
 
				-    <Cell title="基础用法" on:click={() => (visible1 = true)} />
			
 
				-    <Modal bind:visible={visible1} title="您明白吗？" content="留下来的人才是最痛苦的" btnText="我明白了" />
			
 
				-
			
 
				-    <Cell title="内容使用插槽" on:click={() => (visible2 = true)} />
			
 
				-    <Modal bind:visible={visible2} contentSlot>
			
 
				-        <Aphorism num={1} compact />
			
 
				-    </Modal>
			
 
				-
			
 
				-    <Cell title="不显示标题" on:click={() => (visible3 = true)} />
			
 
				-    <Modal bind:visible={visible3} title="" />
			
 
				-
			
 
				-    <Cell title="不显示按钮" on:click={() => (visible4 = true)} />
			
 
				-    <Modal bind:visible={visible4} showBtn={false} contentSlot>
			
 
				-        <Aphorism num={1} compact />
			
 
				-    </Modal>
			
 
				-
			
 
				-    <Cell title="点击遮罩关闭" on:click={() => (visible5 = true)} />
			
 
				-    <Modal bind:visible={visible5} popup={{ maskClosable: true }} />
			
 
				-
			
 
				-    <Cell title="自定义图标" on:click={() => (visible6 = true)} />
			
 
				-    <Modal
			
 
				-        bind:visible={visible6}
			
 
				-        content="请佩戴口罩！"
			
 
				-        showIcon
			
 
				-        icon={{ name: 'ri-surgical-mask-fill', size: 40, injClass: 'text-[#48a1b4]' }}
			
 
				-    />
			
 
				-
			
 
				-    <Cell title="错误状态按钮" on:click={() => (visible8 = true)} />
			
 
				-    <Modal bind:visible={visible8} btnText="我错了" button={{ state: 'error' }} />
			
 
				-
			
 
				-    <Cell title="全圆角按钮" on:click={() => (visible9 = true)} />
			
 
				-    <Modal bind:visible={visible9} button={{ radius: 'full' }} />
			
 
				-
			
 
				-    <Cell title="主题色纯文本按钮" on:click={() => (visible12 = true)} />
			
 
				-    <Modal bind:visible={visible12} button={{ fill: 'textTheme' }} />
			
 
				-
			
 
				-    <Cell title="内容使用插槽且滚动" on:click={() => (visible10 = true)} />
			
 
				-    <Modal bind:visible={visible10} contentSlot>
			
 
				-        <div class="h-56 overflow-auto">
			
 
				-            <Aphorism num={6} compact />
			
 
				-        </div>
			
 
				-    </Modal>
			
 
				+	<Cell title="基础用法" on:click={() => (visible1 = true)} />
			
 
				+	<Modal bind:visible={visible1} title="您明白吗？" content="留下来的人才是最痛苦的" btnText="我明白了" />
			
 
				+
			
 
				+	<Cell title="内容使用插槽" on:click={() => (visible2 = true)} />
			
 
				+	<Modal bind:visible={visible2} contentSlot>
			
 
				+		<Aphorism num={1} compact />
			
 
				+	</Modal>
			
 
				+
			
 
				+	<Cell title="不显示标题" on:click={() => (visible3 = true)} />
			
 
				+	<Modal bind:visible={visible3} title="" />
			
 
				+
			
 
				+	<Cell title="不显示按钮" on:click={() => (visible4 = true)} />
			
 
				+	<Modal bind:visible={visible4} showBtn={false} contentSlot>
			
 
				+		<Aphorism num={1} compact />
			
 
				+	</Modal>
			
 
				+
			
 
				+	<Cell title="点击遮罩关闭" on:click={() => (visible5 = true)} />
			
 
				+	<Modal bind:visible={visible5} popup={{ maskClosable: true }} />
			
 
				+
			
 
				+	<Cell title="自定义图标" on:click={() => (visible6 = true)} />
			
 
				+	<Modal
			
 
				+		bind:visible={visible6}
			
 
				+		content="请佩戴口罩！"
			
 
				+		showIcon
			
 
				+		icon={{ name: 'ri-surgical-mask-fill', size: 40, injClass: 'text-[#48a1b4]' }}
			
 
				+	/>
			
 
				+
			
 
				+	<Cell title="错误状态按钮" on:click={() => (visible8 = true)} />
			
 
				+	<Modal bind:visible={visible8} btnText="我错了" button={{ state: 'error' }} />
			
 
				+
			
 
				+	<Cell title="全圆角按钮" on:click={() => (visible9 = true)} />
			
 
				+	<Modal bind:visible={visible9} button={{ radius: 'full' }} />
			
 
				+
			
 
				+	<Cell title="主题色纯文本按钮" on:click={() => (visible12 = true)} />
			
 
				+	<Modal bind:visible={visible12} button={{ fill: 'textTheme' }} />
			
 
				+
			
 
				+	<Cell title="内容使用插槽且滚动" on:click={() => (visible10 = true)} />
			
 
				+	<Modal bind:visible={visible10} contentSlot>
			
 
				+		<div class="h-56 overflow-auto">
			
 
				+			<Aphorism num={6} compact />
			
 
				+		</div>
			
 
				+	</Modal>
			
 
				 
			
 
				-    <Cell title="显示窄一点" on:click={() => (visible7 = true)} />
			
 
				-    <Modal bind:visible={visible7} popup={{ px: '20' }} />
			
 
				+	<Cell title="显示窄一点" on:click={() => (visible7 = true)} />
			
 
				+	<Modal bind:visible={visible7} popup={{ px: '20' }} />
			
 
				 
			
 
				-    <Cell title="另一种动画效果" on:click={() => (visible11 = true)} />
			
 
				-    <Modal bind:visible={visible11} content="回弹过渡" popup={{ easeType: 'backOut' }} />
			
 
				+	<Cell title="另一种动画效果" on:click={() => (visible11 = true)} />
			
 
				+	<Modal bind:visible={visible11} content="回弹过渡" popup={{ easeType: 'backOut' }} />
			
 
				 
			
 
				-    <Cell title="监听关闭事件" on:click={() => (visible13 = true)} />
			
 
				-    <Modal bind:visible={visible13} on:close={() => (toastVisible = true)} />
			
 
				-    <Toast bind:visible={toastVisible} message="关闭了 Modal！" />
			
 
				+	<Cell title="监听关闭事件" on:click={() => (visible13 = true)} />
			
 
				+	<Modal bind:visible={visible13} on:close={() => (toastVisible = true)} />
			
 
				+	<Toast bind:visible={toastVisible} message="关闭了 Modal！" />
			
 
				 
			
 
				-    <Cell title="标题居左" on:click={() => (visible14 = true)} />
			
 
				-    <Modal bind:visible={visible14} title="标题居左" titleAlign="left" />
			
 
				+	<Cell title="标题居左" on:click={() => (visible14 = true)} />
			
 
				+	<Modal bind:visible={visible14} title="标题居左" titleAlign="left" />
			
 
				 
			
 
				-    <Cell title="自动关闭" on:click={() => (visible15 = true)} />
			
 
				-    <Modal bind:visible={visible15} content="别动！3 秒后我立即消失！" />
			
 
				+	<Cell title="自动关闭" on:click={() => (visible15 = true)} />
			
 
				+	<Modal bind:visible={visible15} content="别动！3 秒后我立即消失！" />
			
 
				 </div>
			
 
				 
			
 
				 <!-- Aphorism.svelte -->
			
--- a/demo/src/pages/modal/ModalDemo_en.svelte
+++ b/demo/src/pages/modal/ModalDemo_en.svelte
@@ -1,92 +1,92 @@
 
				 <!-- Modal Demo -->
			
 
				 <script>
			
 
				-    import { Modal, Cell, Toast } from 'stdf';
			
 
				-    import Aphorism from '../../components/Aphorism.svelte';
			
 
				-
			
 
				-    let visible1 = false;
			
 
				-    let visible2 = false;
			
 
				-    let visible3 = false;
			
 
				-    let visible4 = false;
			
 
				-    let visible5 = false;
			
 
				-    let visible6 = false;
			
 
				-    let visible7 = false;
			
 
				-    let visible8 = false;
			
 
				-    let visible9 = false;
			
 
				-    let visible10 = false;
			
 
				-    let visible11 = false;
			
 
				-    let visible12 = false;
			
 
				-    let visible13 = false;
			
 
				-    let visible14 = false;
			
 
				-    let visible15 = false;
			
 
				-
			
 
				-    let toastVisible = false;
			
 
				-
			
 
				-    $: if (visible15) {
			
 
				-        setTimeout(() => {
			
 
				-            visible15 = false;
			
 
				-        }, 3000);
			
 
				-    }
			
 
				+	import { Modal, Cell, Toast } from 'stdf';
			
 
				+	import Aphorism from '../../components/Aphorism.svelte';
			
 
				+
			
 
				+	let visible1 = false;
			
 
				+	let visible2 = false;
			
 
				+	let visible3 = false;
			
 
				+	let visible4 = false;
			
 
				+	let visible5 = false;
			
 
				+	let visible6 = false;
			
 
				+	let visible7 = false;
			
 
				+	let visible8 = false;
			
 
				+	let visible9 = false;
			
 
				+	let visible10 = false;
			
 
				+	let visible11 = false;
			
 
				+	let visible12 = false;
			
 
				+	let visible13 = false;
			
 
				+	let visible14 = false;
			
 
				+	let visible15 = false;
			
 
				+
			
 
				+	let toastVisible = false;
			
 
				+
			
 
				+	$: if (visible15) {
			
 
				+		setTimeout(() => {
			
 
				+			visible15 = false;
			
 
				+		}, 3000);
			
 
				+	}
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-4">
			
 
				-    <Cell title="Basic usage" on:click={() => (visible1 = true)} />
			
 
				-    <Modal bind:visible={visible1} title="Do you understand?" content="Those who stay will suffer the most" btnText="I see" />
			
 
				-
			
 
				-    <Cell title="Content usage slot" on:click={() => (visible2 = true)} />
			
 
				-    <Modal bind:visible={visible2} contentSlot>
			
 
				-        <Aphorism num={1} compact />
			
 
				-    </Modal>
			
 
				-
			
 
				-    <Cell title="Do not show the title" on:click={() => (visible3 = true)} />
			
 
				-    <Modal bind:visible={visible3} title="" />
			
 
				-
			
 
				-    <Cell title="Do not show button" on:click={() => (visible4 = true)} />
			
 
				-    <Modal bind:visible={visible4} showBtn={false} contentSlot>
			
 
				-        <Aphorism num={1} compact />
			
 
				-    </Modal>
			
 
				-
			
 
				-    <Cell title="Click the mask to close" on:click={() => (visible5 = true)} />
			
 
				-    <Modal bind:visible={visible5} popup={{ maskClosable: true }} />
			
 
				-
			
 
				-    <Cell title="Custom icon" on:click={() => (visible6 = true)} />
			
 
				-    <Modal
			
 
				-        bind:visible={visible6}
			
 
				-        content="Please wear a mask!"
			
 
				-        showIcon
			
 
				-        icon={{ name: 'ri-surgical-mask-fill', size: 40, injClass: 'text-[#48a1b4]' }}
			
 
				-    />
			
 
				-
			
 
				-    <Cell title="Error status button" on:click={() => (visible8 = true)} />
			
 
				-    <Modal bind:visible={visible8} btnText="I was wrong." button={{ state: 'error' }} />
			
 
				-
			
 
				-    <Cell title="Full rounded corner button" on:click={() => (visible9 = true)} />
			
 
				-    <Modal bind:visible={visible9} button={{ radius: 'full' }} />
			
 
				-
			
 
				-    <Cell title="Theme color plain text button" on:click={() => (visible12 = true)} />
			
 
				-    <Modal bind:visible={visible12} button={{ fill: 'textTheme' }} />
			
 
				-
			
 
				-    <Cell title="Content uses slots and scrolls" on:click={() => (visible10 = true)} />
			
 
				-    <Modal bind:visible={visible10} contentSlot>
			
 
				-        <div class="h-56 overflow-auto">
			
 
				-            <Aphorism num={6} compact />
			
 
				-        </div>
			
 
				-    </Modal>
			
 
				+	<Cell title="Basic usage" on:click={() => (visible1 = true)} />
			
 
				+	<Modal bind:visible={visible1} title="Do you understand?" content="Those who stay will suffer the most" btnText="I see" />
			
 
				+
			
 
				+	<Cell title="Content usage slot" on:click={() => (visible2 = true)} />
			
 
				+	<Modal bind:visible={visible2} contentSlot>
			
 
				+		<Aphorism num={1} compact />
			
 
				+	</Modal>
			
 
				+
			
 
				+	<Cell title="Do not show the title" on:click={() => (visible3 = true)} />
			
 
				+	<Modal bind:visible={visible3} title="" />
			
 
				+
			
 
				+	<Cell title="Do not show button" on:click={() => (visible4 = true)} />
			
 
				+	<Modal bind:visible={visible4} showBtn={false} contentSlot>
			
 
				+		<Aphorism num={1} compact />
			
 
				+	</Modal>
			
 
				+
			
 
				+	<Cell title="Click the mask to close" on:click={() => (visible5 = true)} />
			
 
				+	<Modal bind:visible={visible5} popup={{ maskClosable: true }} />
			
 
				+
			
 
				+	<Cell title="Custom icon" on:click={() => (visible6 = true)} />
			
 
				+	<Modal
			
 
				+		bind:visible={visible6}
			
 
				+		content="Please wear a mask!"
			
 
				+		showIcon
			
 
				+		icon={{ name: 'ri-surgical-mask-fill', size: 40, injClass: 'text-[#48a1b4]' }}
			
 
				+	/>
			
 
				+
			
 
				+	<Cell title="Error status button" on:click={() => (visible8 = true)} />
			
 
				+	<Modal bind:visible={visible8} btnText="I was wrong." button={{ state: 'error' }} />
			
 
				+
			
 
				+	<Cell title="Full rounded corner button" on:click={() => (visible9 = true)} />
			
 
				+	<Modal bind:visible={visible9} button={{ radius: 'full' }} />
			
 
				+
			
 
				+	<Cell title="Theme color plain text button" on:click={() => (visible12 = true)} />
			
 
				+	<Modal bind:visible={visible12} button={{ fill: 'textTheme' }} />
			
 
				+
			
 
				+	<Cell title="Content uses slots and scrolls" on:click={() => (visible10 = true)} />
			
 
				+	<Modal bind:visible={visible10} contentSlot>
			
 
				+		<div class="h-56 overflow-auto">
			
 
				+			<Aphorism num={6} compact />
			
 
				+		</div>
			
 
				+	</Modal>
			
 
				 
			
 
				-    <Cell title="Show narrow" on:click={() => (visible7 = true)} />
			
 
				-    <Modal bind:visible={visible7} popup={{ px: '20' }} />
			
 
				+	<Cell title="Show narrow" on:click={() => (visible7 = true)} />
			
 
				+	<Modal bind:visible={visible7} popup={{ px: '20' }} />
			
 
				 
			
 
				-    <Cell title="Another animation effect" on:click={() => (visible11 = true)} />
			
 
				-    <Modal bind:visible={visible11} content="Rebound transition" popup={{ easeType: 'backOut' }} />
			
 
				+	<Cell title="Another animation effect" on:click={() => (visible11 = true)} />
			
 
				+	<Modal bind:visible={visible11} content="Rebound transition" popup={{ easeType: 'backOut' }} />
			
 
				 
			
 
				-    <Cell title="Listening shutdown event" on:click={() => (visible13 = true)} />
			
 
				-    <Modal bind:visible={visible13} on:close={() => (toastVisible = true)} />
			
 
				-    <Toast bind:visible={toastVisible} message="Shut down Modal！" />
			
 
				+	<Cell title="Listening shutdown event" on:click={() => (visible13 = true)} />
			
 
				+	<Modal bind:visible={visible13} on:close={() => (toastVisible = true)} />
			
 
				+	<Toast bind:visible={toastVisible} message="Shut down Modal！" />
			
 
				 
			
 
				-    <Cell title="Heading left" on:click={() => (visible14 = true)} />
			
 
				-    <Modal bind:visible={visible14} title="Heading left" titleAlign="left" />
			
 
				+	<Cell title="Heading left" on:click={() => (visible14 = true)} />
			
 
				+	<Modal bind:visible={visible14} title="Heading left" titleAlign="left" />
			
 
				 
			
 
				-    <Cell title="Automatic shutdown" on:click={() => (visible15 = true)} />
			
 
				-    <Modal bind:visible={visible15} content="Don't move! I'll be gone in three seconds!" />
			
 
				+	<Cell title="Automatic shutdown" on:click={() => (visible15 = true)} />
			
 
				+	<Modal bind:visible={visible15} content="Don't move! I'll be gone in three seconds!" />
			
 
				 </div>
			
 
				 
			
 
				 <!-- Aphorism.svelte -->
			
--- a/demo/src/pages/navBar/NavBarDemo.svelte
+++ b/demo/src/pages/navBar/NavBarDemo.svelte
@@ -1,68 +1,67 @@
 
				 <!-- NavBar Demo -->
			
 
				 <script>
			
 
				-    import { NavBar, Icon, Toast } from 'stdf';
			
 
				+	import { NavBar, Icon, Toast } from 'stdf';
			
 
				 
			
 
				-    const icons1 = [{ name: 'ri-paint-brush-line', theme: true }, { name: 'ri-share-line' }];
			
 
				-    const icons2 = [{ name: 'ri-command-line' }, { name: 'ri-drag-move-line' }];
			
 
				-    const icons3 = [{ name: 'ri-indent-decrease' }, { name: 'ri-service-line' }];
			
 
				-    const icons4 = [{ name: 'ri-hand-heart-line', theme: true }, { name: 'ri-parent-line' }];
			
 
				+	const icons1 = [{ name: 'ri-paint-brush-line', theme: true }, { name: 'ri-share-line' }];
			
 
				+	const icons2 = [{ name: 'ri-command-line' }, { name: 'ri-drag-move-line' }];
			
 
				+	const icons3 = [{ name: 'ri-indent-decrease' }, { name: 'ri-service-line' }];
			
 
				+	const icons4 = [{ name: 'ri-hand-heart-line', theme: true }, { name: 'ri-parent-line' }];
			
 
				 
			
 
				-    let visible1 = false;
			
 
				-    let visible2 = false;
			
 
				-    let rightIndex = 0;
			
 
				-    let visible3 = false;
			
 
				+	let visible1 = false;
			
 
				+	let visible2 = false;
			
 
				+	let rightIndex = 0;
			
 
				+	let visible3 = false;
			
 
				 </script>
			
 
				 
			
 
				 <div class="flex flex-col space-y-8 py-8">
			
 
				-    <!-- 基础用法 -->
			
 
				-    <NavBar title="基础用法" />
			
 
				-    <!-- 右侧使用 Remix Icon -->
			
 
				-    <NavBar title="右侧使用 Icon" rights={icons1} />
			
 
				-    <!-- 点击左侧 -->
			
 
				-    <NavBar title="点击左侧" on:clickleft={() => (visible1 = true)} />
			
 
				-    <Toast bind:visible={visible1} message="点击了左侧！" />
			
 
				-    <!-- 点击右侧 -->
			
 
				-    <NavBar
			
 
				-        title="点击右侧"
			
 
				-        rights={icons2}
			
 
				-        on:clickright={e => {
			
 
				-            visible2 = true;
			
 
				-            rightIndex = e.detail;
			
 
				-        }}
			
 
				-    />
			
 
				-    <Toast bind:visible={visible2} message={`点击的右侧图标索引值是 ${rightIndex}。`} />
			
 
				-    <!-- 无底部分割线，文字过长 -->
			
 
				-    <NavBar title="无左侧与底分割线，文字过长长长长长长长" left="" line={false} rights={icons3} />
			
 
				-    <!-- 自定义背景颜色 -->
			
 
				-    <NavBar title="自定义背景颜色 by injClass" injClass="bg-[wheat] dark:bg-[purple]" />
			
 
				-    <!-- 自定义文字颜色 -->
			
 
				-    <NavBar titleSlot>
			
 
				-        <div slot="title" class="text-[red] dark:text-[green]">自定义文字颜色 by slot</div>
			
 
				-    </NavBar>
			
 
				-    <!-- 插槽渲染标题区域 -->
			
 
				-    <NavBar titleSlot rightSlot>
			
 
				-        <div slot="title" class="flex flex-col justify-around text-xs h-12">
			
 
				-            <div class="text-sm">title 插槽渲染标题区域</div>
			
 
				-            <div>right 插槽渲染右侧且可点击</div>
			
 
				-        </div>
			
 
				-        <div slot="right">
			
 
				-            <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-            <div class="h-12 w-12 text-center text-primary dark:text-dark cursor-pointer" on:click={() => (visible3 = true)}>Hello</div>
			
 
				-        </div>
			
 
				-    </NavBar>
			
 
				-    <Toast bind:visible={visible3} message="点击了右侧插槽内容！" />
			
 
				-    <!-- 关爱版 -->
			
 
				-    <NavBar title="关爱版导航栏" love rights={icons4} />
			
 
				-    <!-- 灵活的自定义 -->
			
 
				-    <NavBar titleSlot injClass="!bg-transparent" leftSlot line={false} rightSlot>
			
 
				-        <div slot="left" class="h-8 w-8 m-2 leading-8 text-center bg-white dark:bg-black/50 rounded-full">
			
 
				-            <Icon name="ri-home-7-line" size={18} top={-2} />
			
 
				-        </div>
			
 
				-        <div slot="title" class="px-3 h-8 my-2 leading-8 text-sm bg-white dark:bg-black/50 rounded-full">
			
 
				-            injClass 与 slot 结合自定义样式
			
 
				-        </div>
			
 
				-        <div slot="right" class="h-8 w-8 m-2 leading-8 text-center bg-white dark:bg-black/50 rounded-full">
			
 
				-            <Icon name="ri-customer-service-2-line" size={18} top={-2} />
			
 
				-        </div>
			
 
				-    </NavBar>
			
 
				+	<!-- 基础用法 -->
			
 
				+	<NavBar title="基础用法" />
			
 
				+	<!-- 右侧使用 Remix Icon -->
			
 
				+	<NavBar title="右侧使用 Icon" rights={icons1} />
			
 
				+	<!-- 点击左侧 -->
			
 
				+	<NavBar title="点击左侧" on:clickleft={() => (visible1 = true)} />
			
 
				+	<Toast bind:visible={visible1} message="点击了左侧！" />
			
 
				+	<!-- 点击右侧 -->
			
 
				+	<NavBar
			
 
				+		title="点击右侧"
			
 
				+		rights={icons2}
			
 
				+		on:clickright={e => {
			
 
				+			visible2 = true;
			
 
				+			rightIndex = e.detail;
			
 
				+		}}
			
 
				+	/>
			
 
				+	<Toast bind:visible={visible2} message={`点击的右侧图标索引值是 ${rightIndex}。`} />
			
 
				+	<!-- 无底部分割线，文字过长 -->
			
 
				+	<NavBar title="无左侧与底分割线，文字过长长长长长长长" left="" line={false} rights={icons3} />
			
 
				+	<!-- 自定义背景颜色 -->
			
 
				+	<NavBar title="自定义背景颜色 by injClass" injClass="bg-[wheat] dark:bg-[purple]" />
			
 
				+	<!-- 自定义文字颜色 -->
			
 
				+	<NavBar titleSlot>
			
 
				+		<div slot="title" class="text-[red] dark:text-[green]">自定义文字颜色 by slot</div>
			
 
				+	</NavBar>
			
 
				+	<!-- 插槽渲染标题区域 -->
			
 
				+	<NavBar titleSlot rightSlot>
			
 
				+		<div slot="title" class="flex flex-col justify-around text-xs h-12">
			
 
				+			<div class="text-sm">title 插槽渲染标题区域</div>
			
 
				+			<div>right 插槽渲染右侧且可点击</div>
			
 
				+		</div>
			
 
				+		<div slot="right">
			
 
				+			<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+			<!-- svelte-ignore a11y-no-static-element-interactions -->
			
 
				+			<div class="h-12 w-12 text-center text-primary dark:text-dark cursor-pointer" on:click={() => (visible3 = true)}>Hello</div>
			
 
				+		</div>
			
 
				+	</NavBar>
			
 
				+	<Toast bind:visible={visible3} message="点击了右侧插槽内容！" />
			
 
				+	<!-- 关爱版 -->
			
 
				+	<NavBar title="关爱版导航栏" love rights={icons4} />
			
 
				+	<!-- 灵活的自定义 -->
			
 
				+	<NavBar titleSlot injClass="!bg-transparent" leftSlot line={false} rightSlot>
			
 
				+		<div slot="left" class="h-8 w-8 m-2 leading-8 text-center bg-white dark:bg-black/50 rounded-full">
			
 
				+			<Icon name="ri-home-7-line" size={18} top={-2} />
			
 
				+		</div>
			
 
				+		<div slot="title" class="px-3 h-8 my-2 leading-8 text-sm bg-white dark:bg-black/50 rounded-full">injClass 与 slot 结合自定义样式</div>
			
 
				+		<div slot="right" class="h-8 w-8 m-2 leading-8 text-center bg-white dark:bg-black/50 rounded-full">
			
 
				+			<Icon name="ri-customer-service-2-line" size={18} top={-2} />
			
 
				+		</div>
			
 
				+	</NavBar>
			
 
				 </div>
			
--- a/demo/src/pages/navBar/NavBarDemo_en.svelte
+++ b/demo/src/pages/navBar/NavBarDemo_en.svelte
@@ -1,67 +1,73 @@
 
				 <!-- NavBar Demo -->
			
 
				 <script>
			
 
				-    import { NavBar, Icon, Toast } from 'stdf';
			
 
				+	import { NavBar, Icon, Toast } from 'stdf';
			
 
				 
			
 
				-    const icons1 = [{ name: 'ri-paint-brush-line', theme: true }, { name: 'ri-share-line' }];
			
 
				-    const icons2 = [{ name: 'ri-command-line' }, { name: 'ri-drag-move-line' }];
			
 
				-    const icons3 = [{ name: 'ri-indent-decrease' }, { name: 'ri-service-line' }];
			
 
				-    const icons4 = [{ name: 'ri-hand-heart-line', theme: true }, { name: 'ri-parent-line' }];
			
 
				+	const icons1 = [{ name: 'ri-paint-brush-line', theme: true }, { name: 'ri-share-line' }];
			
 
				+	const icons2 = [{ name: 'ri-command-line' }, { name: 'ri-drag-move-line' }];
			
 
				+	const icons3 = [{ name: 'ri-indent-decrease' }, { name: 'ri-service-line' }];
			
 
				+	const icons4 = [{ name: 'ri-hand-heart-line', theme: true }, { name: 'ri-parent-line' }];
			
 
				 
			
 
				-    let visible1 = false;
			
 
				-    let visible2 = false;
			
 
				-    let rightIndex = 0;
			
 
				-    let visible3 = false;
			
 
				+	let visible1 = false;
			
 
				+	let visible2 = false;
			
 
				+	let rightIndex = 0;
			
 
				+	let visible3 = false;
			
 
				 </script>
			
 
				 
			
 
				 <div class="flex flex-col space-y-8 py-8">
			
 
				-    <NavBar title="Basic usage" />
			
 
				-    
			
 
				-    <NavBar title="Right-side use Icon" rights={icons1} />
			
 
				- 
			
 
				-    <NavBar title="Click on the left" on:clickleft={() => (visible1 = true)} />
			
 
				-    <Toast bind:visible={visible1} message="Click on the left!" />
			
 
				+	<NavBar title="Basic usage" />
			
 
				 
			
 
				-    <NavBar
			
 
				-        title="Click right"
			
 
				-        rights={icons2}
			
 
				-        on:clickright={e => {
			
 
				-            visible2 = true;
			
 
				-            rightIndex = e.detail;
			
 
				-        }}
			
 
				-    />
			
 
				-    <Toast bind:visible={visible2} message={`Click the right icon index value is ${rightIndex}。`} />
			
 
				+	<NavBar title="Right-side use Icon" rights={icons1} />
			
 
				 
			
 
				-    <NavBar title="There is no dividing line between the left side and the bottom, and the text is too long" left="" line={false} rights={icons3} />
			
 
				+	<NavBar title="Click on the left" on:clickleft={() => (visible1 = true)} />
			
 
				+	<Toast bind:visible={visible1} message="Click on the left!" />
			
 
				 
			
 
				-    <NavBar title="Customize the background color by injClass" injClass="bg-[wheat] dark:bg-[purple]" />
			
 
				+	<NavBar
			
 
				+		title="Click right"
			
 
				+		rights={icons2}
			
 
				+		on:clickright={e => {
			
 
				+			visible2 = true;
			
 
				+			rightIndex = e.detail;
			
 
				+		}}
			
 
				+	/>
			
 
				+	<Toast bind:visible={visible2} message={`Click the right icon index value is ${rightIndex}。`} />
			
 
				 
			
 
				-    <NavBar titleSlot>
			
 
				-        <div slot="title" class="text-[red] dark:text-[green]">Customize text colors by slot</div>
			
 
				-    </NavBar>
			
 
				+	<NavBar
			
 
				+		title="There is no dividing line between the left side and the bottom, and the text is too long"
			
 
				+		left=""
			
 
				+		line={false}
			
 
				+		rights={icons3}
			
 
				+	/>
			
 
				 
			
 
				-    <NavBar titleSlot rightSlot>
			
 
				-        <div slot="title" class="flex flex-col justify-around text-xs h-12">
			
 
				-            <div class="text-sm">title Slot render header area</div>
			
 
				-            <div>right Slot render right and clickable</div>
			
 
				-        </div>
			
 
				-        <div slot="right">
			
 
				-            <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-            <div class="h-12 w-12 text-center text-primary dark:text-dark cursor-pointer" on:click={() => (visible3 = true)}>Hello</div>
			
 
				-        </div>
			
 
				-    </NavBar>
			
 
				-    <Toast bind:visible={visible3} message="Click on the right slot content!" />
			
 
				+	<NavBar title="Customize the background color by injClass" injClass="bg-[wheat] dark:bg-[purple]" />
			
 
				 
			
 
				-    <NavBar title="Care edition navigation bar" love rights={icons4} />
			
 
				+	<NavBar titleSlot>
			
 
				+		<div slot="title" class="text-[red] dark:text-[green]">Customize text colors by slot</div>
			
 
				+	</NavBar>
			
 
				 
			
 
				-    <NavBar titleSlot injClass="!bg-transparent" leftSlot line={false} rightSlot>
			
 
				-        <div slot="left" class="h-8 w-8 m-2 leading-8 text-center bg-white dark:bg-black/50 rounded-full">
			
 
				-            <Icon name="ri-home-7-line" size={18} top={-2} />
			
 
				-        </div>
			
 
				-        <div slot="title" class="px-3 h-8 my-2 leading-8 text-sm bg-white dark:bg-black/50 rounded-full">
			
 
				-            injClass and slot combine custom styles
			
 
				-        </div>
			
 
				-        <div slot="right" class="h-8 w-8 m-2 leading-8 text-center bg-white dark:bg-black/50 rounded-full">
			
 
				-            <Icon name="ri-customer-service-2-line" size={18} top={-2} />
			
 
				-        </div>
			
 
				-    </NavBar>
			
 
				+	<NavBar titleSlot rightSlot>
			
 
				+		<div slot="title" class="flex flex-col justify-around text-xs h-12">
			
 
				+			<div class="text-sm">title Slot render header area</div>
			
 
				+			<div>right Slot render right and clickable</div>
			
 
				+		</div>
			
 
				+		<div slot="right">
			
 
				+			<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+			<!-- svelte-ignore a11y-no-static-element-interactions -->
			
 
				+			<div class="h-12 w-12 text-center text-primary dark:text-dark cursor-pointer" on:click={() => (visible3 = true)}>Hello</div>
			
 
				+		</div>
			
 
				+	</NavBar>
			
 
				+	<Toast bind:visible={visible3} message="Click on the right slot content!" />
			
 
				+
			
 
				+	<NavBar title="Care edition navigation bar" love rights={icons4} />
			
 
				+
			
 
				+	<NavBar titleSlot injClass="!bg-transparent" leftSlot line={false} rightSlot>
			
 
				+		<div slot="left" class="h-8 w-8 m-2 leading-8 text-center bg-white dark:bg-black/50 rounded-full">
			
 
				+			<Icon name="ri-home-7-line" size={18} top={-2} />
			
 
				+		</div>
			
 
				+		<div slot="title" class="px-3 h-8 my-2 leading-8 text-sm bg-white dark:bg-black/50 rounded-full">
			
 
				+			injClass and slot combine custom styles
			
 
				+		</div>
			
 
				+		<div slot="right" class="h-8 w-8 m-2 leading-8 text-center bg-white dark:bg-black/50 rounded-full">
			
 
				+			<Icon name="ri-customer-service-2-line" size={18} top={-2} />
			
 
				+		</div>
			
 
				+	</NavBar>
			
 
				 </div>
			
--- a/demo/src/pages/noticeBar/NoticeBarDemo.svelte
+++ b/demo/src/pages/noticeBar/NoticeBarDemo.svelte
@@ -1,18 +1,18 @@
 
				 <!-- NoticeBar Demo -->
			
 
				 <script>
			
 
				-    import {NoticeBar, Toast} from 'stdf';
			
 
				+	import { NoticeBar, Toast } from 'stdf';
			
 
				 
			
 
				-    let textList = ['1. 这是第一条通告内容！', '2. 这是第二条通告内容！'];
			
 
				-    let textLongList = ['1. 这条通告超长长长长长长长长长长长长长长长长长长长长长！', '2. 这是第二条通告内容！'];
			
 
				+	let textList = ['1. 这是第一条通告内容！', '2. 这是第二条通告内容！'];
			
 
				+	let textLongList = ['1. 这条通告超长长长长长长长长长长长长长长长长长长长长长！', '2. 这是第二条通告内容！'];
			
 
				 
			
 
				-    let visible = false;
			
 
				+	let visible = false;
			
 
				 </script>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">基础用法</div>
			
 
				 <NoticeBar {textList}></NoticeBar>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">通告内容较短不滚动</div>
			
 
				-<NoticeBar textList={['1. 短通告！','2. 短通告！']}></NoticeBar>
			
 
				+<NoticeBar textList={['1. 短通告！', '2. 短通告！']}></NoticeBar>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">设定通告间距</div>
			
 
				 <NoticeBar space={200} {textList}></NoticeBar>
			
@@ -21,8 +21,8 @@
 
				 <NoticeBar speed={100} {textList}></NoticeBar>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">右侧箭头（监听点击事件）</div>
			
 
				-<NoticeBar rightIcon="arrow" {textList} on:clickright={()=>visible=true}></NoticeBar>
			
 
				-<Toast bind:visible message='点击了右侧箭头！'></Toast>
			
 
				+<NoticeBar rightIcon="arrow" {textList} on:clickright={() => (visible = true)}></NoticeBar>
			
 
				+<Toast bind:visible message="点击了右侧箭头！"></Toast>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">右侧无内容</div>
			
 
				 <NoticeBar rightIcon="none" {textList}></NoticeBar>
			
@@ -31,12 +31,12 @@
 
				 <NoticeBar leftIcon="none" {textList}></NoticeBar>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">设定文字大小</div>
			
 
				-<NoticeBar fontSize='lg' {textList}></NoticeBar>
			
 
				+<NoticeBar fontSize="lg" {textList}></NoticeBar>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">自定义左侧</div>
			
 
				-<NoticeBar leftIcon={{name:'ri-notification-2-line',size: 16, top:-1}} {textList}></NoticeBar>
			
 
				-<NoticeBar leftIcon={{name:'ri-wireless-charging-line',size: 16, top:-1}} {textList}></NoticeBar>
			
 
				-<NoticeBar leftIcon='slot' {textList}>🥳</NoticeBar>
			
 
				+<NoticeBar leftIcon={{ name: 'ri-notification-2-line', size: 16, top: -1 }} {textList}></NoticeBar>
			
 
				+<NoticeBar leftIcon={{ name: 'ri-wireless-charging-line', size: 16, top: -1 }} {textList}></NoticeBar>
			
 
				+<NoticeBar leftIcon="slot" {textList}>🥳</NoticeBar>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">垂直滚动</div>
			
 
				 <NoticeBar vertical {textList}></NoticeBar>
			
@@ -55,7 +55,6 @@
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">自定义样式</div>
			
 
				 <NoticeBar injClass="!text-error !bg-error/10" {textList}></NoticeBar>
			
 
				-<NoticeBar leftIcon={{name:'ri-check-line',size: 16, top:-1}} injClass="!text-success !bg-success/10" {textList}></NoticeBar>
			
 
				+<NoticeBar leftIcon={{ name: 'ri-check-line', size: 16, top: -1 }} injClass="!text-success !bg-success/10" {textList}></NoticeBar>
			
 
				 <NoticeBar injClass="!text-purple !bg-purple/10" {textList}></NoticeBar>
			
 
				 <div class="pb-8"></div>
			
 
				-
			
--- a/demo/src/pages/noticeBar/NoticeBarDemo_en.svelte
+++ b/demo/src/pages/noticeBar/NoticeBarDemo_en.svelte
@@ -1,18 +1,21 @@
 
				 <!-- NoticeBar Demo -->
			
 
				 <script>
			
 
				-    import {NoticeBar, Toast} from 'stdf';
			
 
				+	import { NoticeBar, Toast } from 'stdf';
			
 
				 
			
 
				-    let textList = ['1. This is the first announcement!', '2. This is the second notice!'];
			
 
				-    let textLongList = ['1. This message long, long, long, long, long, long, long, long, long, long, long, long, long!', '2. This is the second notice!'];
			
 
				+	let textList = ['1. This is the first announcement!', '2. This is the second notice!'];
			
 
				+	let textLongList = [
			
 
				+		'1. This message long, long, long, long, long, long, long, long, long, long, long, long, long!',
			
 
				+		'2. This is the second notice!',
			
 
				+	];
			
 
				 
			
 
				-    let visible = false;
			
 
				+	let visible = false;
			
 
				 </script>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">Basic usage</div>
			
 
				 <NoticeBar {textList}></NoticeBar>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">The announcements are short and do not scroll</div>
			
 
				-<NoticeBar textList={['1. Short notice!','2. Short notice!']}></NoticeBar>
			
 
				+<NoticeBar textList={['1. Short notice!', '2. Short notice!']}></NoticeBar>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">Set notification spacing</div>
			
 
				 <NoticeBar space={200} {textList}></NoticeBar>
			
@@ -21,8 +24,8 @@
 
				 <NoticeBar speed={100} {textList}></NoticeBar>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">Right arrow (listen for click events)</div>
			
 
				-<NoticeBar rightIcon="arrow" {textList} on:clickright={()=>visible=true}></NoticeBar>
			
 
				-<Toast bind:visible message='Click the right arrow!'></Toast>
			
 
				+<NoticeBar rightIcon="arrow" {textList} on:clickright={() => (visible = true)}></NoticeBar>
			
 
				+<Toast bind:visible message="Click the right arrow!"></Toast>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">No content on the right</div>
			
 
				 <NoticeBar rightIcon="none" {textList}></NoticeBar>
			
@@ -31,12 +34,12 @@
 
				 <NoticeBar leftIcon="none" {textList}></NoticeBar>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">Set text size</div>
			
 
				-<NoticeBar fontSize='lg' {textList}></NoticeBar>
			
 
				+<NoticeBar fontSize="lg" {textList}></NoticeBar>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">Custom left</div>
			
 
				-<NoticeBar leftIcon={{name:'ri-notification-2-line',size: 16, top:-1}} {textList}></NoticeBar>
			
 
				-<NoticeBar leftIcon={{name:'ri-wireless-charging-line',size: 16, top:-1}} {textList}></NoticeBar>
			
 
				-<NoticeBar leftIcon='slot' {textList}>🥳</NoticeBar>
			
 
				+<NoticeBar leftIcon={{ name: 'ri-notification-2-line', size: 16, top: -1 }} {textList}></NoticeBar>
			
 
				+<NoticeBar leftIcon={{ name: 'ri-wireless-charging-line', size: 16, top: -1 }} {textList}></NoticeBar>
			
 
				+<NoticeBar leftIcon="slot" {textList}>🥳</NoticeBar>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">Vertical rolling</div>
			
 
				 <NoticeBar vertical {textList}></NoticeBar>
			
@@ -55,7 +58,6 @@
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">Custom style</div>
			
 
				 <NoticeBar injClass="!text-error !bg-error/10" {textList}></NoticeBar>
			
 
				-<NoticeBar leftIcon={{name:'ri-check-line',size: 16, top:-1}} injClass="!text-success !bg-success/10" {textList}></NoticeBar>
			
 
				+<NoticeBar leftIcon={{ name: 'ri-check-line', size: 16, top: -1 }} injClass="!text-success !bg-success/10" {textList}></NoticeBar>
			
 
				 <NoticeBar injClass="!text-purple !bg-purple/10" {textList}></NoticeBar>
			
 
				 <div class="pb-8"></div>
			
 
				-
			
--- a/demo/src/pages/pagination/PaginationDemo.svelte
+++ b/demo/src/pages/pagination/PaginationDemo.svelte
@@ -1,47 +1,47 @@
 
				 <script>
			
 
				-    import { onMount } from 'svelte';
			
 
				-    import { Pagination, Loading } from 'stdf';
			
 
				-    import aphorisms from '../../data/aphorisms';
			
 
				-
			
 
				-    // 总数，一般是后端接口返回
			
 
				-    const total = 200;
			
 
				-
			
 
				-    // 当前页码，演示事件监听
			
 
				-    let current = 1;
			
 
				-    const preFunc = e => {
			
 
				-        current = e.detail;
			
 
				-    };
			
 
				-    const nextFunc = e => {
			
 
				-        current = e.detail;
			
 
				-    };
			
 
				-    const changeFunc = e => {
			
 
				-        current = e.detail;
			
 
				-    };
			
 
				-
			
 
				-    // 模拟请求数据
			
 
				-    let data = [];
			
 
				-    let currentPage = 1;
			
 
				-    let pageSize = 4;
			
 
				-    let totalData = 0;
			
 
				-    let loading = false;
			
 
				-    const getData = current => {
			
 
				-        loading = true;
			
 
				-        // 使用 setTimeout 模拟请求
			
 
				-        setTimeout(() => {
			
 
				-            loading = false;
			
 
				-            //从 aphorisms 随机取出 pageSize 条数据
			
 
				-            data = aphorisms.sort(() => Math.random() - 0.5).slice(0, pageSize);
			
 
				-            totalData = 64;
			
 
				-        }, 2000);
			
 
				-    };
			
 
				-    const changePageFunc = e => {
			
 
				-        currentPage = e.detail;
			
 
				-        getData(currentPage);
			
 
				-    };
			
 
				-    // 初始请求第一页
			
 
				-    onMount(() => {
			
 
				-        getData(currentPage);
			
 
				-    });
			
 
				+	import { onMount } from 'svelte';
			
 
				+	import { Pagination, Loading } from 'stdf';
			
 
				+	import aphorisms from '../../data/aphorisms';
			
 
				+
			
 
				+	// 总数，一般是后端接口返回
			
 
				+	const total = 200;
			
 
				+
			
 
				+	// 当前页码，演示事件监听
			
 
				+	let current = 1;
			
 
				+	const preFunc = e => {
			
 
				+		current = e.detail;
			
 
				+	};
			
 
				+	const nextFunc = e => {
			
 
				+		current = e.detail;
			
 
				+	};
			
 
				+	const changeFunc = e => {
			
 
				+		current = e.detail;
			
 
				+	};
			
 
				+
			
 
				+	// 模拟请求数据
			
 
				+	let data = [];
			
 
				+	let currentPage = 1;
			
 
				+	let pageSize = 4;
			
 
				+	let totalData = 0;
			
 
				+	let loading = false;
			
 
				+	const getData = () => {
			
 
				+		loading = true;
			
 
				+		// 使用 setTimeout 模拟请求
			
 
				+		setTimeout(() => {
			
 
				+			loading = false;
			
 
				+			//从 aphorisms 随机取出 pageSize 条数据
			
 
				+			data = aphorisms.sort(() => Math.random() - 0.5).slice(0, pageSize);
			
 
				+			totalData = 64;
			
 
				+		}, 2000);
			
 
				+	};
			
 
				+	const changePageFunc = e => {
			
 
				+		currentPage = e.detail;
			
 
				+		getData(currentPage);
			
 
				+	};
			
 
				+	// 初始请求第一页
			
 
				+	onMount(() => {
			
 
				+		getData(currentPage);
			
 
				+	});
			
 
				 </script>
			
 
				 
			
 
				 <div class="m-4 mt-24 font-bold text-lg">基础用法</div>
			
@@ -65,10 +65,10 @@
 
				 <div class="mx-4 mt-8 font-bold text-lg">最大显示 5 页</div>
			
 
				 <div class="mx-4 mb-4 text-xs">适合分页区域较小的场景</div>
			
 
				 <div class="flex items-center">
			
 
				-    <div class="px-4">这是我的地盘</div>
			
 
				-    <div class="flex-1">
			
 
				-        <Pagination maxShowPage={5} {total} />
			
 
				-    </div>
			
 
				+	<div class="px-4">这是我的地盘</div>
			
 
				+	<div class="flex-1">
			
 
				+		<Pagination maxShowPage={5} {total} />
			
 
				+	</div>
			
 
				 </div>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">无数据</div>
			
@@ -109,18 +109,18 @@
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">模拟请求</div>
			
 
				 <div class="px-4 py-8 divide-y divide-black/5 dark:divide-white/5 min-h-[20rem] relative">
			
 
				-    {#each data as item}
			
 
				-        <div class:py-6={pageSize > 1}>
			
 
				-            <div class="text-sm text-justify">{item.text}</div>
			
 
				-            <div class="text-right mt-1" class:italic={item.fromItalic}>{item.from}</div>
			
 
				-        </div>
			
 
				-    {/each}
			
 
				-    {#if loading}
			
 
				-        <div class="absolute inset-0 w-full h-full backdrop-blur flex flex-col justify-center gap-8 text-center">
			
 
				-            <div>查询第 {currentPage} 页数据...</div>
			
 
				-            <Loading />
			
 
				-        </div>
			
 
				-    {/if}
			
 
				+	{#each data as item}
			
 
				+		<div class:py-6={pageSize > 1}>
			
 
				+			<div class="text-sm text-justify">{item.text}</div>
			
 
				+			<div class="text-right mt-1" class:italic={item.fromItalic}>{item.from}</div>
			
 
				+		</div>
			
 
				+	{/each}
			
 
				+	{#if loading}
			
 
				+		<div class="absolute inset-0 w-full h-full backdrop-blur flex flex-col justify-center gap-8 text-center">
			
 
				+			<div>查询第 {currentPage} 页数据...</div>
			
 
				+			<Loading />
			
 
				+		</div>
			
 
				+	{/if}
			
 
				 </div>
			
 
				 <Pagination {pageSize} total={totalData} on:change={changePageFunc} />
			
 
				 
			
--- a/demo/src/pages/pagination/PaginationDemo_en.svelte
+++ b/demo/src/pages/pagination/PaginationDemo_en.svelte
@@ -1,47 +1,47 @@
 
				 <script>
			
 
				-    import { onMount } from 'svelte';
			
 
				-    import { Pagination, Loading } from 'stdf';
			
 
				-    import aphorisms from '../../data/aphorisms';
			
 
				-
			
 
				-    // total data number, generally, the back-end interface returns
			
 
				-    const total = 200;
			
 
				-
			
 
				-    // Current page number, demo event monitoring
			
 
				-    let current = 1;
			
 
				-    const preFunc = e => {
			
 
				-        current = e.detail;
			
 
				-    };
			
 
				-    const nextFunc = e => {
			
 
				-        current = e.detail;
			
 
				-    };
			
 
				-    const changeFunc = e => {
			
 
				-        current = e.detail;
			
 
				-    };
			
 
				-
			
 
				-    // Simulation request data
			
 
				-    let data = [];
			
 
				-    let currentPage = 1;
			
 
				-    let pageSize = 4;
			
 
				-    let totalData = 0;
			
 
				-    let loading = false;
			
 
				-    const getData = current => {
			
 
				-        loading = true;
			
 
				-        // Simulate a request using setTimeout
			
 
				-        setTimeout(() => {
			
 
				-            loading = false;
			
 
				-            // Randomly extract pageSize pieces of data from aphorisms
			
 
				-            data = aphorisms.sort(() => Math.random() - 0.5).slice(0, pageSize);
			
 
				-            totalData = 64;
			
 
				-        }, 2000);
			
 
				-    };
			
 
				-    const changePageFunc = e => {
			
 
				-        currentPage = e.detail;
			
 
				-        getData(currentPage);
			
 
				-    };
			
 
				-    // First page of the initial request
			
 
				-    onMount(() => {
			
 
				-        getData(currentPage);
			
 
				-    });
			
 
				+	import { onMount } from 'svelte';
			
 
				+	import { Pagination, Loading } from 'stdf';
			
 
				+	import aphorisms from '../../data/aphorisms';
			
 
				+
			
 
				+	// total data number, generally, the back-end interface returns
			
 
				+	const total = 200;
			
 
				+
			
 
				+	// Current page number, demo event monitoring
			
 
				+	let current = 1;
			
 
				+	const preFunc = e => {
			
 
				+		current = e.detail;
			
 
				+	};
			
 
				+	const nextFunc = e => {
			
 
				+		current = e.detail;
			
 
				+	};
			
 
				+	const changeFunc = e => {
			
 
				+		current = e.detail;
			
 
				+	};
			
 
				+
			
 
				+	// Simulation request data
			
 
				+	let data = [];
			
 
				+	let currentPage = 1;
			
 
				+	let pageSize = 4;
			
 
				+	let totalData = 0;
			
 
				+	let loading = false;
			
 
				+	const getData = () => {
			
 
				+		loading = true;
			
 
				+		// Simulate a request using setTimeout
			
 
				+		setTimeout(() => {
			
 
				+			loading = false;
			
 
				+			// Randomly extract pageSize pieces of data from aphorisms
			
 
				+			data = aphorisms.sort(() => Math.random() - 0.5).slice(0, pageSize);
			
 
				+			totalData = 64;
			
 
				+		}, 2000);
			
 
				+	};
			
 
				+	const changePageFunc = e => {
			
 
				+		currentPage = e.detail;
			
 
				+		getData(currentPage);
			
 
				+	};
			
 
				+	// First page of the initial request
			
 
				+	onMount(() => {
			
 
				+		getData(currentPage);
			
 
				+	});
			
 
				 </script>
			
 
				 
			
 
				 <div class="m-4 mt-24 font-bold text-lg">Basic usage</div>
			
@@ -65,10 +65,10 @@
 
				 <div class="mx-4 mt-8 font-bold text-lg">Maximum display 5 pages</div>
			
 
				 <div class="mx-4 mb-4 text-xs">Suitable for scenes with smaller paging area</div>
			
 
				 <div class="flex items-center">
			
 
				-    <div class="px-4">This is my site</div>
			
 
				-    <div class="flex-1">
			
 
				-        <Pagination maxShowPage={5} {total} />
			
 
				-    </div>
			
 
				+	<div class="px-4">This is my site</div>
			
 
				+	<div class="flex-1">
			
 
				+		<Pagination maxShowPage={5} {total} />
			
 
				+	</div>
			
 
				 </div>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">no data</div>
			
@@ -109,18 +109,18 @@
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">Simulation request</div>
			
 
				 <div class="px-4 py-8 divide-y divide-black/5 dark:divide-white/5 min-h-[20rem] relative">
			
 
				-    {#each data as item}
			
 
				-        <div class:py-6={pageSize > 1}>
			
 
				-            <div class="text-sm text-justify">{item.text}</div>
			
 
				-            <div class="text-right mt-1" class:italic={item.fromItalic}>{item.from}</div>
			
 
				-        </div>
			
 
				-    {/each}
			
 
				-    {#if loading}
			
 
				-        <div class="absolute inset-0 w-full h-full backdrop-blur flex flex-col justify-center gap-8 text-center">
			
 
				-            <div>Query {currentPage} Page data...</div>
			
 
				-            <Loading />
			
 
				-        </div>
			
 
				-    {/if}
			
 
				+	{#each data as item}
			
 
				+		<div class:py-6={pageSize > 1}>
			
 
				+			<div class="text-sm text-justify">{item.text}</div>
			
 
				+			<div class="text-right mt-1" class:italic={item.fromItalic}>{item.from}</div>
			
 
				+		</div>
			
 
				+	{/each}
			
 
				+	{#if loading}
			
 
				+		<div class="absolute inset-0 w-full h-full backdrop-blur flex flex-col justify-center gap-8 text-center">
			
 
				+			<div>Query {currentPage} Page data...</div>
			
 
				+			<Loading />
			
 
				+		</div>
			
 
				+	{/if}
			
 
				 </div>
			
 
				 <Pagination {pageSize} total={totalData} on:change={changePageFunc} />
			
 
				 
			
--- a/demo/src/pages/picker/PickerDemo.svelte
+++ b/demo/src/pages/picker/PickerDemo.svelte
@@ -1,158 +1,158 @@
 
				 <!-- Picker Demo -->
			
 
				 <script>
			
 
				-    import { Picker, Cell } from 'stdf';
			
 
				-    // 为避免 Demo 页面杂乱，具体参考数据放在 data.js 文件内，可查看此页面底部注释。
			
 
				-    import {
			
 
				-        someProvinceList,
			
 
				-        weekList,
			
 
				-        amOrPmList,
			
 
				-        timeList,
			
 
				-        cityList,
			
 
				-        linkageData,
			
 
				-        linkagDiffLabelKeyData,
			
 
				-        linkagCustomChildrenKeyData,
			
 
				-    } from './data';
			
 
				+	import { Picker, Cell } from 'stdf';
			
 
				+	// 为避免 Demo 页面杂乱，具体参考数据放在 data.js 文件内，可查看此页面底部注释。
			
 
				+	import {
			
 
				+		someProvinceList,
			
 
				+		weekList,
			
 
				+		amOrPmList,
			
 
				+		timeList,
			
 
				+		cityList,
			
 
				+		linkageData,
			
 
				+		linkagDiffLabelKeyData,
			
 
				+		linkagCustomChildrenKeyData,
			
 
				+	} from './data';
			
 
				 
			
 
				-    const datas = [{ data: someProvinceList }];
			
 
				-    const leftDatas = [{ data: someProvinceList, align: 'left' }];
			
 
				-    const showRow7Datas = [{ data: someProvinceList, showRow: 7 }];
			
 
				-    const init3Datas = [{ data: someProvinceList, initIndex: 3 }];
			
 
				-    const noAnimationDatas = [{ data: someProvinceList, useAnimation: false }];
			
 
				-    const customKeyDatas = [{ data: cityList, labelKey: 'cityName' }];
			
 
				-    const col3Datas = [{ data: weekList }, { data: amOrPmList }, { data: timeList }];
			
 
				-    const col3DiffAlignDatas = [
			
 
				-        { data: weekList, align: 'left' },
			
 
				-        { data: amOrPmList, align: 'center' },
			
 
				-        { data: timeList, align: 'right' },
			
 
				-    ];
			
 
				-    const col3DiffShowRowDatas = [{ data: weekList }, { data: amOrPmList, showRow: 3 }, { data: timeList, showRow: 7 }];
			
 
				-    const col3DiffFlexDatas = [
			
 
				-        { data: weekList, flex: 3 },
			
 
				-        { data: amOrPmList, flex: 1 },
			
 
				-        { data: timeList, flex: 2 },
			
 
				-    ];
			
 
				+	const datas = [{ data: someProvinceList }];
			
 
				+	const leftDatas = [{ data: someProvinceList, align: 'left' }];
			
 
				+	const showRow7Datas = [{ data: someProvinceList, showRow: 7 }];
			
 
				+	const init3Datas = [{ data: someProvinceList, initIndex: 3 }];
			
 
				+	const noAnimationDatas = [{ data: someProvinceList, useAnimation: false }];
			
 
				+	const customKeyDatas = [{ data: cityList, labelKey: 'cityName' }];
			
 
				+	const col3Datas = [{ data: weekList }, { data: amOrPmList }, { data: timeList }];
			
 
				+	const col3DiffAlignDatas = [
			
 
				+		{ data: weekList, align: 'left' },
			
 
				+		{ data: amOrPmList, align: 'center' },
			
 
				+		{ data: timeList, align: 'right' },
			
 
				+	];
			
 
				+	const col3DiffShowRowDatas = [{ data: weekList }, { data: amOrPmList, showRow: 3 }, { data: timeList, showRow: 7 }];
			
 
				+	const col3DiffFlexDatas = [
			
 
				+		{ data: weekList, flex: 3 },
			
 
				+		{ data: amOrPmList, flex: 1 },
			
 
				+		{ data: timeList, flex: 2 },
			
 
				+	];
			
 
				 
			
 
				-    let visible1 = false;
			
 
				-    let visible2 = false;
			
 
				-    let visible3 = false;
			
 
				-    let visible4 = false;
			
 
				-    let visible5 = false;
			
 
				-    let visible6 = false;
			
 
				-    let visible7 = false;
			
 
				-    let visible8 = false;
			
 
				-    let visible9 = false;
			
 
				-    let visible10 = false;
			
 
				-    let visible11 = false;
			
 
				-    let visible12 = false;
			
 
				-    let visible13 = false;
			
 
				-    let visible14 = false;
			
 
				-    let visible15 = false;
			
 
				-    let visible16 = false;
			
 
				-    let visible17 = false;
			
 
				-    let visible18 = false;
			
 
				-    let visible19 = false;
			
 
				-    let visible20 = false;
			
 
				-    let visible21 = false;
			
 
				-    let visible22 = false;
			
 
				+	let visible1 = false;
			
 
				+	let visible2 = false;
			
 
				+	let visible3 = false;
			
 
				+	let visible4 = false;
			
 
				+	let visible5 = false;
			
 
				+	let visible6 = false;
			
 
				+	let visible7 = false;
			
 
				+	let visible8 = false;
			
 
				+	let visible9 = false;
			
 
				+	let visible10 = false;
			
 
				+	let visible11 = false;
			
 
				+	let visible12 = false;
			
 
				+	let visible13 = false;
			
 
				+	let visible14 = false;
			
 
				+	let visible15 = false;
			
 
				+	let visible16 = false;
			
 
				+	let visible17 = false;
			
 
				+	let visible18 = false;
			
 
				+	let visible19 = false;
			
 
				+	let visible20 = false;
			
 
				+	let visible21 = false;
			
 
				+	let visible22 = false;
			
 
				 
			
 
				-    let currentDetail = '请选择';
			
 
				-    const getCurrentDetailFunc = e => {
			
 
				-        currentDetail = e.detail.items[0].label;
			
 
				-    };
			
 
				-    let allItems = [];
			
 
				-    let allIndexs = [];
			
 
				-    const getAllDataFunc = e => {
			
 
				-        allItems = e.detail.items;
			
 
				-        allIndexs = e.detail.indexs;
			
 
				-    };
			
 
				+	let currentDetail = '请选择';
			
 
				+	const getCurrentDetailFunc = e => {
			
 
				+		currentDetail = e.detail.items[0].label;
			
 
				+	};
			
 
				+	let allItems = [];
			
 
				+	let allIndexs = [];
			
 
				+	const getAllDataFunc = e => {
			
 
				+		allItems = e.detail.items;
			
 
				+		allIndexs = e.detail.indexs;
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-4">
			
 
				-    <Cell title="基础用法" on:click={() => (visible1 = true)} />
			
 
				-    <Picker bind:visible={visible1} {datas} />
			
 
				+	<Cell title="基础用法" on:click={() => (visible1 = true)} />
			
 
				+	<Picker bind:visible={visible1} {datas} />
			
 
				 
			
 
				-    <Cell title="自定义标题" on:click={() => (visible2 = true)} />
			
 
				-    <Picker bind:visible={visible2} title="请选择省份" {datas} />
			
 
				+	<Cell title="自定义标题" on:click={() => (visible2 = true)} />
			
 
				+	<Picker bind:visible={visible2} title="请选择省份" {datas} />
			
 
				 
			
 
				-    <Cell title="可见 7 行" on:click={() => (visible3 = true)} />
			
 
				-    <Picker bind:visible={visible3} datas={showRow7Datas} />
			
 
				+	<Cell title="可见 7 行" on:click={() => (visible3 = true)} />
			
 
				+	<Picker bind:visible={visible3} datas={showRow7Datas} />
			
 
				 
			
 
				-    <Cell title="关闭自动滚动至上次选定项" on:click={() => (visible4 = true)} />
			
 
				-    <Picker bind:visible={visible4} {datas} autoScrollToLast={false} />
			
 
				+	<Cell title="关闭自动滚动至上次选定项" on:click={() => (visible4 = true)} />
			
 
				+	<Picker bind:visible={visible4} {datas} autoScrollToLast={false} />
			
 
				 
			
 
				-    <Cell title="初始选定始终为第 4 项" on:click={() => (visible5 = true)} subTitle="需要关闭自动选定上次选中项" />
			
 
				-    <Picker bind:visible={visible5} datas={init3Datas} autoScrollToLast={false} />
			
 
				+	<Cell title="初始选定始终为第 4 项" on:click={() => (visible5 = true)} subTitle="需要关闭自动选定上次选中项" />
			
 
				+	<Picker bind:visible={visible5} datas={init3Datas} autoScrollToLast={false} />
			
 
				 
			
 
				-    <Cell title="自动滚动时取消动画" on:click={() => (visible6 = true)} />
			
 
				-    <Picker bind:visible={visible6} datas={noAnimationDatas} />
			
 
				+	<Cell title="自动滚动时取消动画" on:click={() => (visible6 = true)} />
			
 
				+	<Picker bind:visible={visible6} datas={noAnimationDatas} />
			
 
				 
			
 
				-    <Cell title="自定义 label 的 key 值" on:click={() => (visible7 = true)} />
			
 
				-    <Picker bind:visible={visible7} datas={customKeyDatas} title="请选择城市" />
			
 
				+	<Cell title="自定义 label 的 key 值" on:click={() => (visible7 = true)} />
			
 
				+	<Picker bind:visible={visible7} datas={customKeyDatas} title="请选择城市" />
			
 
				 
			
 
				-    <Cell title="右侧展示选定项" detail={currentDetail} on:click={() => (visible8 = true)} />
			
 
				-    <Picker bind:visible={visible8} {datas} on:confirm={getCurrentDetailFunc} />
			
 
				+	<Cell title="右侧展示选定项" detail={currentDetail} on:click={() => (visible8 = true)} />
			
 
				+	<Picker bind:visible={visible8} {datas} on:confirm={getCurrentDetailFunc} />
			
 
				 
			
 
				-    <Cell title="单列左对齐" on:click={() => (visible20 = true)} />
			
 
				-    <Picker bind:visible={visible20} datas={leftDatas} />
			
 
				+	<Cell title="单列左对齐" on:click={() => (visible20 = true)} />
			
 
				+	<Picker bind:visible={visible20} datas={leftDatas} />
			
 
				 
			
 
				-    <Cell title="多列选择器" on:click={() => (visible9 = true)} />
			
 
				-    <Picker bind:visible={visible9} datas={col3Datas} />
			
 
				+	<Cell title="多列选择器" on:click={() => (visible9 = true)} />
			
 
				+	<Picker bind:visible={visible9} datas={col3Datas} />
			
 
				 
			
 
				-    <Cell title="不同列可见行数" on:click={() => (visible10 = true)} />
			
 
				-    <Picker bind:visible={visible10} datas={col3DiffShowRowDatas} />
			
 
				+	<Cell title="不同列可见行数" on:click={() => (visible10 = true)} />
			
 
				+	<Picker bind:visible={visible10} datas={col3DiffShowRowDatas} />
			
 
				 
			
 
				-    <Cell title="不同列 flex 比例" on:click={() => (visible11 = true)} />
			
 
				-    <Picker bind:visible={visible11} datas={col3DiffFlexDatas} />
			
 
				+	<Cell title="不同列 flex 比例" on:click={() => (visible11 = true)} />
			
 
				+	<Picker bind:visible={visible11} datas={col3DiffFlexDatas} />
			
 
				 
			
 
				-    <Cell title="多列不同对齐方式" on:click={() => (visible21 = true)} />
			
 
				-    <Picker bind:visible={visible21} datas={col3DiffAlignDatas} />
			
 
				+	<Cell title="多列不同对齐方式" on:click={() => (visible21 = true)} />
			
 
				+	<Picker bind:visible={visible21} datas={col3DiffAlignDatas} />
			
 
				 
			
 
				-    <Cell title="多级联动" on:click={() => (visible12 = true)} />
			
 
				-    <Picker bind:visible={visible12} datas={linkageData} isLinkage />
			
 
				+	<Cell title="多级联动" on:click={() => (visible12 = true)} />
			
 
				+	<Picker bind:visible={visible12} datas={linkageData} isLinkage />
			
 
				 
			
 
				-    <Cell title="多级联动不同可见行数" on:click={() => (visible13 = true)} />
			
 
				-    <Picker bind:visible={visible13} datas={linkageData} linkageShowRows={[3, 5, 7]} isLinkage />
			
 
				+	<Cell title="多级联动不同可见行数" on:click={() => (visible13 = true)} />
			
 
				+	<Picker bind:visible={visible13} datas={linkageData} linkageShowRows={[3, 5, 7]} isLinkage />
			
 
				 
			
 
				-    <Cell title="多级联动不同 flex 比例" on:click={() => (visible14 = true)} />
			
 
				-    <Picker bind:visible={visible14} datas={linkageData} linkageFlexs={[1, 2, 3]} isLinkage />
			
 
				+	<Cell title="多级联动不同 flex 比例" on:click={() => (visible14 = true)} />
			
 
				+	<Picker bind:visible={visible14} datas={linkageData} linkageFlexs={[1, 2, 3]} isLinkage />
			
 
				 
			
 
				-    <Cell title="多级联动自定义每级 label 的 key 值" on:click={() => (visible15 = true)} />
			
 
				-    <Picker bind:visible={visible15} datas={linkagDiffLabelKeyData} linkageLabelKeys={['province', 'city', 'region']} isLinkage />
			
 
				+	<Cell title="多级联动自定义每级 label 的 key 值" on:click={() => (visible15 = true)} />
			
 
				+	<Picker bind:visible={visible15} datas={linkagDiffLabelKeyData} linkageLabelKeys={['province', 'city', 'region']} isLinkage />
			
 
				 
			
 
				-    <Cell title="多级联动自定义上下级 children 的 key 值" on:click={() => (visible16 = true)} />
			
 
				-    <Picker bind:visible={visible16} datas={linkagCustomChildrenKeyData} linkageChildrenKey="child" isLinkage />
			
 
				+	<Cell title="多级联动自定义上下级 children 的 key 值" on:click={() => (visible16 = true)} />
			
 
				+	<Picker bind:visible={visible16} datas={linkagCustomChildrenKeyData} linkageChildrenKey="child" isLinkage />
			
 
				 
			
 
				-    <Cell title="联动不同对齐方式" on:click={() => (visible22 = true)} />
			
 
				-    <Picker bind:visible={visible22} datas={linkageData} linkageAligns={['right', 'center', 'left']} isLinkage />
			
 
				+	<Cell title="联动不同对齐方式" on:click={() => (visible22 = true)} />
			
 
				+	<Picker bind:visible={visible22} datas={linkageData} linkageAligns={['right', 'center', 'left']} isLinkage />
			
 
				 
			
 
				-    <Cell title="多级联动设置每列初始选定项" on:click={() => (visible17 = true)} />
			
 
				-    <Picker bind:visible={visible17} datas={linkageData} linkageInitIndexs={[0, 1, 8]} isLinkage />
			
 
				+	<Cell title="多级联动设置每列初始选定项" on:click={() => (visible17 = true)} />
			
 
				+	<Picker bind:visible={visible17} datas={linkageData} linkageInitIndexs={[0, 1, 8]} isLinkage />
			
 
				 
			
 
				-    <div class="px-4">
			
 
				-        {#if allItems.length}
			
 
				-            当前选定了：
			
 
				-            {#each allItems as item}
			
 
				-                <span class="mr-2 text-primary dark:text-dark">{item.label}</span>
			
 
				-            {/each}
			
 
				-        {:else}
			
 
				-            <div>请选定数据</div>
			
 
				-        {/if}
			
 
				-    </div>
			
 
				-    <div class="px-4">
			
 
				-        {#if allIndexs.length}
			
 
				-            当前选定值位于所在列的索引值分别为：
			
 
				-            {#each allIndexs as index}
			
 
				-                <span class="mr-2 text-primary dark:text-dark">{index}</span>
			
 
				-            {/each}
			
 
				-        {:else}
			
 
				-            <div>请选定数据</div>
			
 
				-        {/if}
			
 
				-    </div>
			
 
				-    <Cell title="获取选定数据" on:click={() => (visible18 = true)} />
			
 
				-    <Picker bind:visible={visible18} datas={col3Datas} on:confirm={getAllDataFunc} />
			
 
				+	<div class="px-4">
			
 
				+		{#if allItems.length}
			
 
				+			当前选定了：
			
 
				+			{#each allItems as item}
			
 
				+				<span class="mr-2 text-primary dark:text-dark">{item.label}</span>
			
 
				+			{/each}
			
 
				+		{:else}
			
 
				+			<div>请选定数据</div>
			
 
				+		{/if}
			
 
				+	</div>
			
 
				+	<div class="px-4">
			
 
				+		{#if allIndexs.length}
			
 
				+			当前选定值位于所在列的索引值分别为：
			
 
				+			{#each allIndexs as index}
			
 
				+				<span class="mr-2 text-primary dark:text-dark">{index}</span>
			
 
				+			{/each}
			
 
				+		{:else}
			
 
				+			<div>请选定数据</div>
			
 
				+		{/if}
			
 
				+	</div>
			
 
				+	<Cell title="获取选定数据" on:click={() => (visible18 = true)} />
			
 
				+	<Picker bind:visible={visible18} datas={col3Datas} on:confirm={getAllDataFunc} />
			
 
				 
			
 
				-    <Cell title="顶部来点圆角" on:click={() => (visible19 = true)} />
			
 
				-    <Picker bind:visible={visible19} {datas} popup={{ radius: 'xl' }} />
			
 
				+	<Cell title="顶部来点圆角" on:click={() => (visible19 = true)} />
			
 
				+	<Picker bind:visible={visible19} {datas} popup={{ radius: 'xl' }} />
			
 
				 </div>
			
 
				 
			
 
				 <!-- data.js -->
			
--- a/demo/src/pages/picker/PickerDemo_en.svelte
+++ b/demo/src/pages/picker/PickerDemo_en.svelte
@@ -1,162 +1,162 @@
 
				 <!-- Picker Demo -->
			
 
				 <script>
			
 
				-    import { Picker, Cell } from 'stdf';
			
 
				-    // In order to avoid the messy Demo page, the specific reference data is placed in the data.js file, and you can view the bottom of the page.
			
 
				-    import {
			
 
				-        someProvinceList,
			
 
				-        weekList,
			
 
				-        amOrPmList,
			
 
				-        timeList,
			
 
				-        cityList,
			
 
				-        linkageData,
			
 
				-        linkagDiffLabelKeyData,
			
 
				-        linkagCustomChildrenKeyData,
			
 
				-    } from './data_en';
			
 
				+	import { Picker, Cell } from 'stdf';
			
 
				+	// In order to avoid the messy Demo page, the specific reference data is placed in the data.js file, and you can view the bottom of the page.
			
 
				+	import {
			
 
				+		someProvinceList,
			
 
				+		weekList,
			
 
				+		amOrPmList,
			
 
				+		timeList,
			
 
				+		cityList,
			
 
				+		linkageData,
			
 
				+		linkagDiffLabelKeyData,
			
 
				+		linkagCustomChildrenKeyData,
			
 
				+	} from './data_en';
			
 
				 
			
 
				-    const datas = [{ data: someProvinceList }];
			
 
				-    const leftDatas = [{ data: someProvinceList, align: 'left' }];
			
 
				-    const showRow7Datas = [{ data: someProvinceList, showRow: 7 }];
			
 
				-    const init3Datas = [{ data: someProvinceList, initIndex: 3 }];
			
 
				-    const noAnimationDatas = [{ data: someProvinceList, useAnimation: false }];
			
 
				-    const customKeyDatas = [{ data: cityList, labelKey: 'cityName' }];
			
 
				-    const col3Datas = [{ data: weekList }, { data: amOrPmList }, { data: timeList }];
			
 
				-    const col3DiffAlignDatas = [
			
 
				-        { data: weekList, align: 'left' },
			
 
				-        { data: amOrPmList, align: 'center' },
			
 
				-        { data: timeList, align: 'right' },
			
 
				-    ];
			
 
				-    const col3DiffShowRowDatas = [{ data: weekList }, { data: amOrPmList, showRow: 3 }, { data: timeList, showRow: 7 }];
			
 
				-    const col3DiffFlexDatas = [
			
 
				-        { data: weekList, flex: 3 },
			
 
				-        { data: amOrPmList, flex: 1 },
			
 
				-        { data: timeList, flex: 2 },
			
 
				-    ];
			
 
				+	const datas = [{ data: someProvinceList }];
			
 
				+	const leftDatas = [{ data: someProvinceList, align: 'left' }];
			
 
				+	const showRow7Datas = [{ data: someProvinceList, showRow: 7 }];
			
 
				+	const init3Datas = [{ data: someProvinceList, initIndex: 3 }];
			
 
				+	const noAnimationDatas = [{ data: someProvinceList, useAnimation: false }];
			
 
				+	const customKeyDatas = [{ data: cityList, labelKey: 'cityName' }];
			
 
				+	const col3Datas = [{ data: weekList }, { data: amOrPmList }, { data: timeList }];
			
 
				+	const col3DiffAlignDatas = [
			
 
				+		{ data: weekList, align: 'left' },
			
 
				+		{ data: amOrPmList, align: 'center' },
			
 
				+		{ data: timeList, align: 'right' },
			
 
				+	];
			
 
				+	const col3DiffShowRowDatas = [{ data: weekList }, { data: amOrPmList, showRow: 3 }, { data: timeList, showRow: 7 }];
			
 
				+	const col3DiffFlexDatas = [
			
 
				+		{ data: weekList, flex: 3 },
			
 
				+		{ data: amOrPmList, flex: 1 },
			
 
				+		{ data: timeList, flex: 2 },
			
 
				+	];
			
 
				 
			
 
				-    let visible1 = false;
			
 
				-    let visible2 = false;
			
 
				-    let visible3 = false;
			
 
				-    let visible4 = false;
			
 
				-    let visible5 = false;
			
 
				-    let visible6 = false;
			
 
				-    let visible7 = false;
			
 
				-    let visible8 = false;
			
 
				-    let visible9 = false;
			
 
				-    let visible10 = false;
			
 
				-    let visible11 = false;
			
 
				-    let visible12 = false;
			
 
				-    let visible13 = false;
			
 
				-    let visible14 = false;
			
 
				-    let visible15 = false;
			
 
				-    let visible16 = false;
			
 
				-    let visible17 = false;
			
 
				-    let visible18 = false;
			
 
				-    let visible19 = false;
			
 
				-    let visible20 = false;
			
 
				-    let visible21 = false;
			
 
				-    let visible22 = false;
			
 
				+	let visible1 = false;
			
 
				+	let visible2 = false;
			
 
				+	let visible3 = false;
			
 
				+	let visible4 = false;
			
 
				+	let visible5 = false;
			
 
				+	let visible6 = false;
			
 
				+	let visible7 = false;
			
 
				+	let visible8 = false;
			
 
				+	let visible9 = false;
			
 
				+	let visible10 = false;
			
 
				+	let visible11 = false;
			
 
				+	let visible12 = false;
			
 
				+	let visible13 = false;
			
 
				+	let visible14 = false;
			
 
				+	let visible15 = false;
			
 
				+	let visible16 = false;
			
 
				+	let visible17 = false;
			
 
				+	let visible18 = false;
			
 
				+	let visible19 = false;
			
 
				+	let visible20 = false;
			
 
				+	let visible21 = false;
			
 
				+	let visible22 = false;
			
 
				 
			
 
				-    let currentDetail = 'please choose';
			
 
				-    const getCurrentDetailFunc = e => {
			
 
				-        currentDetail = e.detail.items[0].label;
			
 
				-    };
			
 
				-    let allItems = [];
			
 
				-    let allIndexs = [];
			
 
				-    const getAllDataFunc = e => {
			
 
				-        allItems = e.detail.items;
			
 
				-        allIndexs = e.detail.indexs;
			
 
				-    };
			
 
				+	let currentDetail = 'please choose';
			
 
				+	const getCurrentDetailFunc = e => {
			
 
				+		currentDetail = e.detail.items[0].label;
			
 
				+	};
			
 
				+	let allItems = [];
			
 
				+	let allIndexs = [];
			
 
				+	const getAllDataFunc = e => {
			
 
				+		allItems = e.detail.items;
			
 
				+		allIndexs = e.detail.indexs;
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-4">
			
 
				-    <Cell title="Basic usage" on:click={() => (visible1 = true)} />
			
 
				-    <Picker bind:visible={visible1} {datas} />
			
 
				+	<Cell title="Basic usage" on:click={() => (visible1 = true)} />
			
 
				+	<Picker bind:visible={visible1} {datas} />
			
 
				 
			
 
				-    <Cell title="Custom title" on:click={() => (visible2 = true)} />
			
 
				-    <Picker bind:visible={visible2} title="Please select province" {datas} />
			
 
				+	<Cell title="Custom title" on:click={() => (visible2 = true)} />
			
 
				+	<Picker bind:visible={visible2} title="Please select province" {datas} />
			
 
				 
			
 
				-    <Cell title="Visible line 7" on:click={() => (visible3 = true)} />
			
 
				-    <Picker bind:visible={visible3} datas={showRow7Datas} />
			
 
				+	<Cell title="Visible line 7" on:click={() => (visible3 = true)} />
			
 
				+	<Picker bind:visible={visible3} datas={showRow7Datas} />
			
 
				 
			
 
				-    <Cell title="Do not roll until the last selection item" on:click={() => (visible4 = true)} />
			
 
				-    <Picker bind:visible={visible4} {datas} autoScrollToLast={false} />
			
 
				+	<Cell title="Do not roll until the last selection item" on:click={() => (visible4 = true)} />
			
 
				+	<Picker bind:visible={visible4} {datas} autoScrollToLast={false} />
			
 
				 
			
 
				-    <Cell
			
 
				-        title="The initial selection is always item 4"
			
 
				-        on:click={() => (visible5 = true)}
			
 
				-        subTitle="You need to disable automatic selection of the last selected item"
			
 
				-    />
			
 
				-    <Picker bind:visible={visible5} datas={init3Datas} autoScrollToLast={false} />
			
 
				+	<Cell
			
 
				+		title="The initial selection is always item 4"
			
 
				+		on:click={() => (visible5 = true)}
			
 
				+		subTitle="You need to disable automatic selection of the last selected item"
			
 
				+	/>
			
 
				+	<Picker bind:visible={visible5} datas={init3Datas} autoScrollToLast={false} />
			
 
				 
			
 
				-    <Cell title="Cancel animation when auto scrolling" on:click={() => (visible6 = true)} />
			
 
				-    <Picker bind:visible={visible6} datas={noAnimationDatas} />
			
 
				+	<Cell title="Cancel animation when auto scrolling" on:click={() => (visible6 = true)} />
			
 
				+	<Picker bind:visible={visible6} datas={noAnimationDatas} />
			
 
				 
			
 
				-    <Cell title="Customize the key value of the label" on:click={() => (visible7 = true)} />
			
 
				-    <Picker bind:visible={visible7} datas={customKeyDatas} title="Please select city" />
			
 
				+	<Cell title="Customize the key value of the label" on:click={() => (visible7 = true)} />
			
 
				+	<Picker bind:visible={visible7} datas={customKeyDatas} title="Please select city" />
			
 
				 
			
 
				-    <Cell title="The selected items are displayed on the right" detail={currentDetail} on:click={() => (visible8 = true)} />
			
 
				-    <Picker bind:visible={visible8} {datas} on:confirm={getCurrentDetailFunc} />
			
 
				+	<Cell title="The selected items are displayed on the right" detail={currentDetail} on:click={() => (visible8 = true)} />
			
 
				+	<Picker bind:visible={visible8} {datas} on:confirm={getCurrentDetailFunc} />
			
 
				 
			
 
				-    <Cell title="Single column left justified" on:click={() => (visible20 = true)} />
			
 
				-    <Picker bind:visible={visible20} datas={leftDatas} />
			
 
				+	<Cell title="Single column left justified" on:click={() => (visible20 = true)} />
			
 
				+	<Picker bind:visible={visible20} datas={leftDatas} />
			
 
				 
			
 
				-    <Cell title="Multi-column selector" on:click={() => (visible9 = true)} />
			
 
				-    <Picker bind:visible={visible9} datas={col3Datas} />
			
 
				+	<Cell title="Multi-column selector" on:click={() => (visible9 = true)} />
			
 
				+	<Picker bind:visible={visible9} datas={col3Datas} />
			
 
				 
			
 
				-    <Cell title="Number of visible rows for different columns" on:click={() => (visible10 = true)} />
			
 
				-    <Picker bind:visible={visible10} datas={col3DiffShowRowDatas} />
			
 
				+	<Cell title="Number of visible rows for different columns" on:click={() => (visible10 = true)} />
			
 
				+	<Picker bind:visible={visible10} datas={col3DiffShowRowDatas} />
			
 
				 
			
 
				-    <Cell title="flex ratio for different columns" on:click={() => (visible11 = true)} />
			
 
				-    <Picker bind:visible={visible11} datas={col3DiffFlexDatas} />
			
 
				+	<Cell title="flex ratio for different columns" on:click={() => (visible11 = true)} />
			
 
				+	<Picker bind:visible={visible11} datas={col3DiffFlexDatas} />
			
 
				 
			
 
				-    <Cell title="Multiple columns with different alignments" on:click={() => (visible21 = true)} />
			
 
				-    <Picker bind:visible={visible21} datas={col3DiffAlignDatas} />
			
 
				+	<Cell title="Multiple columns with different alignments" on:click={() => (visible21 = true)} />
			
 
				+	<Picker bind:visible={visible21} datas={col3DiffAlignDatas} />
			
 
				 
			
 
				-    <Cell title="Multilevel linkage" on:click={() => (visible12 = true)} />
			
 
				-    <Picker bind:visible={visible12} datas={linkageData} isLinkage />
			
 
				+	<Cell title="Multilevel linkage" on:click={() => (visible12 = true)} />
			
 
				+	<Picker bind:visible={visible12} datas={linkageData} isLinkage />
			
 
				 
			
 
				-    <Cell title="Multilevel linkage has different visible lines" on:click={() => (visible13 = true)} />
			
 
				-    <Picker bind:visible={visible13} datas={linkageData} linkageShowRows={[3, 5, 7]} isLinkage />
			
 
				+	<Cell title="Multilevel linkage has different visible lines" on:click={() => (visible13 = true)} />
			
 
				+	<Picker bind:visible={visible13} datas={linkageData} linkageShowRows={[3, 5, 7]} isLinkage />
			
 
				 
			
 
				-    <Cell title="Multistage linkage with different flex proportions" on:click={() => (visible14 = true)} />
			
 
				-    <Picker bind:visible={visible14} datas={linkageData} linkageFlexs={[1, 2, 3]} isLinkage />
			
 
				+	<Cell title="Multistage linkage with different flex proportions" on:click={() => (visible14 = true)} />
			
 
				+	<Picker bind:visible={visible14} datas={linkageData} linkageFlexs={[1, 2, 3]} isLinkage />
			
 
				 
			
 
				-    <Cell title="Multilevel linkage defines the key values of labels at each level" on:click={() => (visible15 = true)} />
			
 
				-    <Picker bind:visible={visible15} datas={linkagDiffLabelKeyData} linkageLabelKeys={['province', 'city', 'region']} isLinkage />
			
 
				+	<Cell title="Multilevel linkage defines the key values of labels at each level" on:click={() => (visible15 = true)} />
			
 
				+	<Picker bind:visible={visible15} datas={linkagDiffLabelKeyData} linkageLabelKeys={['province', 'city', 'region']} isLinkage />
			
 
				 
			
 
				-    <Cell title="Multilevel linkage You can customize key values for the upper and lower children" on:click={() => (visible16 = true)} />
			
 
				-    <Picker bind:visible={visible16} datas={linkagCustomChildrenKeyData} linkageChildrenKey="child" isLinkage />
			
 
				+	<Cell title="Multilevel linkage You can customize key values for the upper and lower children" on:click={() => (visible16 = true)} />
			
 
				+	<Picker bind:visible={visible16} datas={linkagCustomChildrenKeyData} linkageChildrenKey="child" isLinkage />
			
 
				 
			
 
				-    <Cell title="Linkage different alignment modes" on:click={() => (visible22 = true)} />
			
 
				-    <Picker bind:visible={visible22} datas={linkageData} linkageAligns={['right', 'center', 'left']} isLinkage />
			
 
				+	<Cell title="Linkage different alignment modes" on:click={() => (visible22 = true)} />
			
 
				+	<Picker bind:visible={visible22} datas={linkageData} linkageAligns={['right', 'center', 'left']} isLinkage />
			
 
				 
			
 
				-    <Cell title="Multilevel linkage sets the initial selection for each column" on:click={() => (visible17 = true)} />
			
 
				-    <Picker bind:visible={visible17} datas={linkageData} linkageInitIndexs={[0, 1, 8]} isLinkage />
			
 
				+	<Cell title="Multilevel linkage sets the initial selection for each column" on:click={() => (visible17 = true)} />
			
 
				+	<Picker bind:visible={visible17} datas={linkageData} linkageInitIndexs={[0, 1, 8]} isLinkage />
			
 
				 
			
 
				-    <div class="px-4">
			
 
				-        {#if allItems.length}
			
 
				-            Currently selected:
			
 
				-            {#each allItems as item}
			
 
				-                <span class="mr-2 text-primary dark:text-dark">{item.label}</span>
			
 
				-            {/each}
			
 
				-        {:else}
			
 
				-            <div>Please select data</div>
			
 
				-        {/if}
			
 
				-    </div>
			
 
				-    <div class="px-4">
			
 
				-        {#if allIndexs.length}
			
 
				-            The index values of the current selected values in the column are:
			
 
				-            {#each allIndexs as index}
			
 
				-                <span class="mr-2 text-primary dark:text-dark">{index}</span>
			
 
				-            {/each}
			
 
				-        {:else}
			
 
				-            <div>Please select data</div>
			
 
				-        {/if}
			
 
				-    </div>
			
 
				-    <Cell title="Get selected data" on:click={() => (visible18 = true)} />
			
 
				-    <Picker bind:visible={visible18} datas={col3Datas} on:confirm={getAllDataFunc} />
			
 
				+	<div class="px-4">
			
 
				+		{#if allItems.length}
			
 
				+			Currently selected:
			
 
				+			{#each allItems as item}
			
 
				+				<span class="mr-2 text-primary dark:text-dark">{item.label}</span>
			
 
				+			{/each}
			
 
				+		{:else}
			
 
				+			<div>Please select data</div>
			
 
				+		{/if}
			
 
				+	</div>
			
 
				+	<div class="px-4">
			
 
				+		{#if allIndexs.length}
			
 
				+			The index values of the current selected values in the column are:
			
 
				+			{#each allIndexs as index}
			
 
				+				<span class="mr-2 text-primary dark:text-dark">{index}</span>
			
 
				+			{/each}
			
 
				+		{:else}
			
 
				+			<div>Please select data</div>
			
 
				+		{/if}
			
 
				+	</div>
			
 
				+	<Cell title="Get selected data" on:click={() => (visible18 = true)} />
			
 
				+	<Picker bind:visible={visible18} datas={col3Datas} on:confirm={getAllDataFunc} />
			
 
				 
			
 
				-    <Cell title="I want some rounded corners on the top" on:click={() => (visible19 = true)} />
			
 
				-    <Picker bind:visible={visible19} {datas} popup={{ radius: 'xl' }} />
			
 
				+	<Cell title="I want some rounded corners on the top" on:click={() => (visible19 = true)} />
			
 
				+	<Picker bind:visible={visible19} {datas} popup={{ radius: 'xl' }} />
			
 
				 </div>
			
 
				 
			
 
				 <!-- data.js -->
			
--- a/demo/src/pages/picker/data.js
+++ b/demo/src/pages/picker/data.js
@@ -1,637 +1,637 @@
 
				 const someProvinceList = [
			
 
				-    { label: '云南' },
			
 
				-    { label: '北京' },
			
 
				-    { label: '广东' },
			
 
				-    { label: '重庆' },
			
 
				-    { label: '四川' },
			
 
				-    { label: '湖北' },
			
 
				-    { label: '河南' },
			
 
				-    { label: '湖南' },
			
 
				-    { label: '山东' },
			
 
				-    { label: '江苏' },
			
 
				-    { label: '浙江' },
			
 
				-    { label: '江西' },
			
 
				-    { label: '安徽' },
			
 
				-    { label: '福建' },
			
 
				+	{ label: '云南' },
			
 
				+	{ label: '北京' },
			
 
				+	{ label: '广东' },
			
 
				+	{ label: '重庆' },
			
 
				+	{ label: '四川' },
			
 
				+	{ label: '湖北' },
			
 
				+	{ label: '河南' },
			
 
				+	{ label: '湖南' },
			
 
				+	{ label: '山东' },
			
 
				+	{ label: '江苏' },
			
 
				+	{ label: '浙江' },
			
 
				+	{ label: '江西' },
			
 
				+	{ label: '安徽' },
			
 
				+	{ label: '福建' },
			
 
				 ];
			
 
				 const weekList = [
			
 
				-    { label: '星期一' },
			
 
				-    { label: '星期二' },
			
 
				-    { label: '星期三' },
			
 
				-    { label: '星期四' },
			
 
				-    { label: '星期五' },
			
 
				-    { label: '星期六' },
			
 
				-    { label: '星期日' },
			
 
				+	{ label: '星期一' },
			
 
				+	{ label: '星期二' },
			
 
				+	{ label: '星期三' },
			
 
				+	{ label: '星期四' },
			
 
				+	{ label: '星期五' },
			
 
				+	{ label: '星期六' },
			
 
				+	{ label: '星期日' },
			
 
				 ];
			
 
				 const amOrPmList = [{ label: '上午' }, { label: '下午' }];
			
 
				 const timeList = [
			
 
				-    { label: '01:00' },
			
 
				-    { label: '02:00' },
			
 
				-    { label: '03:00' },
			
 
				-    { label: '04:00' },
			
 
				-    { label: '05:00' },
			
 
				-    { label: '06:00' },
			
 
				-    { label: '07:00' },
			
 
				-    { label: '08:00' },
			
 
				-    { label: '09:00' },
			
 
				-    { label: '10:00' },
			
 
				-    { label: '11:00' },
			
 
				-    { label: '12:00' },
			
 
				+	{ label: '01:00' },
			
 
				+	{ label: '02:00' },
			
 
				+	{ label: '03:00' },
			
 
				+	{ label: '04:00' },
			
 
				+	{ label: '05:00' },
			
 
				+	{ label: '06:00' },
			
 
				+	{ label: '07:00' },
			
 
				+	{ label: '08:00' },
			
 
				+	{ label: '09:00' },
			
 
				+	{ label: '10:00' },
			
 
				+	{ label: '11:00' },
			
 
				+	{ label: '12:00' },
			
 
				 ];
			
 
				 const cityList = [
			
 
				-    { cityName: '昆明' },
			
 
				-    { cityName: '曲靖' },
			
 
				-    { cityName: '玉溪' },
			
 
				-    { cityName: '保山' },
			
 
				-    { cityName: '昭通' },
			
 
				-    { cityName: '丽江' },
			
 
				-    { cityName: '普洱' },
			
 
				-    { cityName: '临沧' },
			
 
				-    { cityName: '楚雄' },
			
 
				-    { cityName: '红河' },
			
 
				-    { cityName: '文山' },
			
 
				+	{ cityName: '昆明' },
			
 
				+	{ cityName: '曲靖' },
			
 
				+	{ cityName: '玉溪' },
			
 
				+	{ cityName: '保山' },
			
 
				+	{ cityName: '昭通' },
			
 
				+	{ cityName: '丽江' },
			
 
				+	{ cityName: '普洱' },
			
 
				+	{ cityName: '临沧' },
			
 
				+	{ cityName: '楚雄' },
			
 
				+	{ cityName: '红河' },
			
 
				+	{ cityName: '文山' },
			
 
				 ];
			
 
				 const linkageData = [
			
 
				-    {
			
 
				-        label: '云南',
			
 
				-        children: [
			
 
				-            {
			
 
				-                label: '昆明',
			
 
				-                children: [
			
 
				-                    { label: '盘龙区' },
			
 
				-                    { label: '五华区' },
			
 
				-                    { label: '官渡区' },
			
 
				-                    { label: '西山区' },
			
 
				-                    { label: '东川区' },
			
 
				-                    { label: '呈贡区' },
			
 
				-                    { label: '晋宁区' },
			
 
				-                    { label: '富民县' },
			
 
				-                    { label: '宜良县' },
			
 
				-                    { label: '石林彝族自治县' },
			
 
				-                    { label: '嵩明县' },
			
 
				-                    { label: '禄劝彝族苗族自治县' },
			
 
				-                    { label: '寻甸回族彝族自治县' },
			
 
				-                    { label: '安宁市' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '曲靖',
			
 
				-                children: [
			
 
				-                    { label: '麒麟区' },
			
 
				-                    { label: '沾益区' },
			
 
				-                    { label: '马龙县' },
			
 
				-                    { label: '陆良县' },
			
 
				-                    { label: '师宗县' },
			
 
				-                    { label: '罗平县' },
			
 
				-                    { label: '富源县' },
			
 
				-                    { label: '会泽县' },
			
 
				-                    { label: '宣威市' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '玉溪',
			
 
				-                children: [
			
 
				-                    { label: '红塔区' },
			
 
				-                    { label: '江川区' },
			
 
				-                    { label: '澄江县' },
			
 
				-                    { label: '通海县' },
			
 
				-                    { label: '华宁县' },
			
 
				-                    { label: '易门县' },
			
 
				-                    { label: '峨山彝族自治县' },
			
 
				-                    { label: '新平彝族傣族自治县' },
			
 
				-                    { label: '元江哈尼族彝族傣族自治县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '保山',
			
 
				-                children: [
			
 
				-                    { label: '隆阳区' },
			
 
				-                    { label: '施甸县' },
			
 
				-                    { label: '龙陵县' },
			
 
				-                    { label: '昌宁县' },
			
 
				-                    { label: '腾冲市' },
			
 
				-                    { label: '龙陵县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '丽江',
			
 
				-                children: [
			
 
				-                    { label: '古城区' },
			
 
				-                    { label: '永胜县' },
			
 
				-                    { label: '华坪县' },
			
 
				-                    { label: '玉龙纳西族自治县' },
			
 
				-                    { label: '宁蒗彝族自治县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '普洱',
			
 
				-                children: [
			
 
				-                    { label: '思茅区' },
			
 
				-                    { label: '宁洱哈尼族彝族自治县' },
			
 
				-                    { label: '墨江哈尼族自治县' },
			
 
				-                    { label: '景东彝族自治县' },
			
 
				-                    { label: '景谷傣族彝族自治县' },
			
 
				-                    { label: '镇沅彝族哈尼族拉祜族自治县' },
			
 
				-                    { label: '江城哈尼族彝族自治县' },
			
 
				-                    { label: '孟连傣族拉祜族佤族自治县' },
			
 
				-                    { label: '澜沧拉祜族自治县' },
			
 
				-                    { label: '西盟佤族自治县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '临沧',
			
 
				-                children: [
			
 
				-                    { label: '临翔区' },
			
 
				-                    { label: '凤庆县' },
			
 
				-                    { label: '云县' },
			
 
				-                    { label: '永德县' },
			
 
				-                    { label: '镇康县' },
			
 
				-                    { label: '双江拉祜族佤族布朗族傣族自治县' },
			
 
				-                    { label: '耿马傣族佤族自治县' },
			
 
				-                    { label: '沧源佤族自治县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '楚雄',
			
 
				-                children: [
			
 
				-                    { label: '楚雄市' },
			
 
				-                    { label: '双柏县' },
			
 
				-                    { label: '牟定县' },
			
 
				-                    { label: '南华县' },
			
 
				-                    { label: '姚安县' },
			
 
				-                    { label: '大姚县' },
			
 
				-                    { label: '永仁县' },
			
 
				-                    { label: '元谋县' },
			
 
				-                    { label: '武定县' },
			
 
				-                    { label: '禄丰县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '红河',
			
 
				-                children: [
			
 
				-                    { label: '个旧市' },
			
 
				-                    { label: '开远市' },
			
 
				-                    { label: '蒙自市' },
			
 
				-                    { label: '弥勒市' },
			
 
				-                    { label: '屏边苗族自治县' },
			
 
				-                    { label: '建水县' },
			
 
				-                    { label: '石屏县' },
			
 
				-                    { label: '泸西县' },
			
 
				-                    { label: '元阳县' },
			
 
				-                    { label: '红河县' },
			
 
				-                    { label: '金平苗族瑶族傣族自治县' },
			
 
				-                    { label: '绿春县' },
			
 
				-                    { label: '河口瑶族自治县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '文山',
			
 
				-                children: [
			
 
				-                    { label: '文山市' },
			
 
				-                    { label: '砚山县' },
			
 
				-                    { label: '西畴县' },
			
 
				-                    { label: '麻栗坡县' },
			
 
				-                    { label: '马关县' },
			
 
				-                    { label: '丘北县' },
			
 
				-                    { label: '广南县' },
			
 
				-                    { label: '富宁县' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        label: '广东',
			
 
				-        children: [
			
 
				-            {
			
 
				-                label: '广州',
			
 
				-                children: [
			
 
				-                    { label: '天河区' },
			
 
				-                    { label: '海珠区' },
			
 
				-                    { label: '荔湾区' },
			
 
				-                    { label: '越秀区' },
			
 
				-                    { label: '白云区' },
			
 
				-                    { label: '黄埔区' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '深圳',
			
 
				-                children: [
			
 
				-                    { label: '罗湖区' },
			
 
				-                    { label: '福田区' },
			
 
				-                    { label: '南山区' },
			
 
				-                    { label: '宝安区' },
			
 
				-                    { label: '龙岗区' },
			
 
				-                    { label: '盐田区' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '珠海',
			
 
				-                children: [{ label: '香洲区' }, { label: '斗门区' }, { label: '金湾区' }],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '汕头',
			
 
				-                children: [
			
 
				-                    { label: '龙湖区' },
			
 
				-                    { label: '金平区' },
			
 
				-                    { label: '濠江区' },
			
 
				-                    { label: '潮阳区' },
			
 
				-                    { label: '潮南区' },
			
 
				-                    { label: '澄海区' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '佛山',
			
 
				-                children: [{ label: '禅城区' }, { label: '南海区' }, { label: '顺德区' }, { label: '三水区' }, { label: '高明区' }],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        label: '四川',
			
 
				-        children: [
			
 
				-            {
			
 
				-                label: '成都',
			
 
				-                children: [
			
 
				-                    { label: '锦江区' },
			
 
				-                    { label: '青羊区' },
			
 
				-                    { label: '金牛区' },
			
 
				-                    { label: '武侯区' },
			
 
				-                    { label: '成华区' },
			
 
				-                    { label: '龙泉驿区' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '绵阳',
			
 
				-                children: [
			
 
				-                    { label: '涪城区' },
			
 
				-                    { label: '游仙区' },
			
 
				-                    { label: '安州区' },
			
 
				-                    { label: '三台县' },
			
 
				-                    { label: '盐亭县' },
			
 
				-                    { label: '梓潼县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '自贡',
			
 
				-                children: [
			
 
				-                    { label: '自流井区' },
			
 
				-                    { label: '贡井区' },
			
 
				-                    { label: '大安区' },
			
 
				-                    { label: '沿滩区' },
			
 
				-                    { label: '荣县' },
			
 
				-                    { label: '富顺县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '攀枝花',
			
 
				-                children: [{ label: '东区' }, { label: '西区' }, { label: '仁和区' }, { label: '米易县' }, { label: '盐边县' }],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        label: '北京',
			
 
				-        children: [
			
 
				-            {
			
 
				-                label: '北京市',
			
 
				-                children: [
			
 
				-                    { label: '东城区' },
			
 
				-                    { label: '西城区' },
			
 
				-                    { label: '朝阳区' },
			
 
				-                    { label: '丰台区' },
			
 
				-                    { label: '石景山区' },
			
 
				-                    { label: '海淀区' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        label: '浙江',
			
 
				-        children: [
			
 
				-            {
			
 
				-                label: '杭州',
			
 
				-                children: [
			
 
				-                    { label: '上城区' },
			
 
				-                    { label: '下城区' },
			
 
				-                    { label: '江干区' },
			
 
				-                    { label: '拱墅区' },
			
 
				-                    { label: '西湖区' },
			
 
				-                    { label: '滨江区' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '宁波',
			
 
				-                children: [
			
 
				-                    { label: '海曙区' },
			
 
				-                    { label: '江东区' },
			
 
				-                    { label: '江北区' },
			
 
				-                    { label: '北仑区' },
			
 
				-                    { label: '镇海区' },
			
 
				-                    { label: '鄞州区' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '温州',
			
 
				-                children: [
			
 
				-                    { label: '鹿城区' },
			
 
				-                    { label: '龙湾区' },
			
 
				-                    { label: '瓯海区' },
			
 
				-                    { label: '洞头区' },
			
 
				-                    { label: '永嘉县' },
			
 
				-                    { label: '平阳县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '嘉兴',
			
 
				-                children: [
			
 
				-                    { label: '南湖区' },
			
 
				-                    { label: '秀洲区' },
			
 
				-                    { label: '嘉善县' },
			
 
				-                    { label: '海盐县' },
			
 
				-                    { label: '海宁市' },
			
 
				-                    { label: '平湖市' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '湖州',
			
 
				-                children: [{ label: '吴兴区' }, { label: '南浔区' }, { label: '德清县' }, { label: '长兴县' }, { label: '安吉县' }],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				+	{
			
 
				+		label: '云南',
			
 
				+		children: [
			
 
				+			{
			
 
				+				label: '昆明',
			
 
				+				children: [
			
 
				+					{ label: '盘龙区' },
			
 
				+					{ label: '五华区' },
			
 
				+					{ label: '官渡区' },
			
 
				+					{ label: '西山区' },
			
 
				+					{ label: '东川区' },
			
 
				+					{ label: '呈贡区' },
			
 
				+					{ label: '晋宁区' },
			
 
				+					{ label: '富民县' },
			
 
				+					{ label: '宜良县' },
			
 
				+					{ label: '石林彝族自治县' },
			
 
				+					{ label: '嵩明县' },
			
 
				+					{ label: '禄劝彝族苗族自治县' },
			
 
				+					{ label: '寻甸回族彝族自治县' },
			
 
				+					{ label: '安宁市' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '曲靖',
			
 
				+				children: [
			
 
				+					{ label: '麒麟区' },
			
 
				+					{ label: '沾益区' },
			
 
				+					{ label: '马龙县' },
			
 
				+					{ label: '陆良县' },
			
 
				+					{ label: '师宗县' },
			
 
				+					{ label: '罗平县' },
			
 
				+					{ label: '富源县' },
			
 
				+					{ label: '会泽县' },
			
 
				+					{ label: '宣威市' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '玉溪',
			
 
				+				children: [
			
 
				+					{ label: '红塔区' },
			
 
				+					{ label: '江川区' },
			
 
				+					{ label: '澄江县' },
			
 
				+					{ label: '通海县' },
			
 
				+					{ label: '华宁县' },
			
 
				+					{ label: '易门县' },
			
 
				+					{ label: '峨山彝族自治县' },
			
 
				+					{ label: '新平彝族傣族自治县' },
			
 
				+					{ label: '元江哈尼族彝族傣族自治县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '保山',
			
 
				+				children: [
			
 
				+					{ label: '隆阳区' },
			
 
				+					{ label: '施甸县' },
			
 
				+					{ label: '龙陵县' },
			
 
				+					{ label: '昌宁县' },
			
 
				+					{ label: '腾冲市' },
			
 
				+					{ label: '龙陵县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '丽江',
			
 
				+				children: [
			
 
				+					{ label: '古城区' },
			
 
				+					{ label: '永胜县' },
			
 
				+					{ label: '华坪县' },
			
 
				+					{ label: '玉龙纳西族自治县' },
			
 
				+					{ label: '宁蒗彝族自治县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '普洱',
			
 
				+				children: [
			
 
				+					{ label: '思茅区' },
			
 
				+					{ label: '宁洱哈尼族彝族自治县' },
			
 
				+					{ label: '墨江哈尼族自治县' },
			
 
				+					{ label: '景东彝族自治县' },
			
 
				+					{ label: '景谷傣族彝族自治县' },
			
 
				+					{ label: '镇沅彝族哈尼族拉祜族自治县' },
			
 
				+					{ label: '江城哈尼族彝族自治县' },
			
 
				+					{ label: '孟连傣族拉祜族佤族自治县' },
			
 
				+					{ label: '澜沧拉祜族自治县' },
			
 
				+					{ label: '西盟佤族自治县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '临沧',
			
 
				+				children: [
			
 
				+					{ label: '临翔区' },
			
 
				+					{ label: '凤庆县' },
			
 
				+					{ label: '云县' },
			
 
				+					{ label: '永德县' },
			
 
				+					{ label: '镇康县' },
			
 
				+					{ label: '双江拉祜族佤族布朗族傣族自治县' },
			
 
				+					{ label: '耿马傣族佤族自治县' },
			
 
				+					{ label: '沧源佤族自治县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '楚雄',
			
 
				+				children: [
			
 
				+					{ label: '楚雄市' },
			
 
				+					{ label: '双柏县' },
			
 
				+					{ label: '牟定县' },
			
 
				+					{ label: '南华县' },
			
 
				+					{ label: '姚安县' },
			
 
				+					{ label: '大姚县' },
			
 
				+					{ label: '永仁县' },
			
 
				+					{ label: '元谋县' },
			
 
				+					{ label: '武定县' },
			
 
				+					{ label: '禄丰县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '红河',
			
 
				+				children: [
			
 
				+					{ label: '个旧市' },
			
 
				+					{ label: '开远市' },
			
 
				+					{ label: '蒙自市' },
			
 
				+					{ label: '弥勒市' },
			
 
				+					{ label: '屏边苗族自治县' },
			
 
				+					{ label: '建水县' },
			
 
				+					{ label: '石屏县' },
			
 
				+					{ label: '泸西县' },
			
 
				+					{ label: '元阳县' },
			
 
				+					{ label: '红河县' },
			
 
				+					{ label: '金平苗族瑶族傣族自治县' },
			
 
				+					{ label: '绿春县' },
			
 
				+					{ label: '河口瑶族自治县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '文山',
			
 
				+				children: [
			
 
				+					{ label: '文山市' },
			
 
				+					{ label: '砚山县' },
			
 
				+					{ label: '西畴县' },
			
 
				+					{ label: '麻栗坡县' },
			
 
				+					{ label: '马关县' },
			
 
				+					{ label: '丘北县' },
			
 
				+					{ label: '广南县' },
			
 
				+					{ label: '富宁县' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		label: '广东',
			
 
				+		children: [
			
 
				+			{
			
 
				+				label: '广州',
			
 
				+				children: [
			
 
				+					{ label: '天河区' },
			
 
				+					{ label: '海珠区' },
			
 
				+					{ label: '荔湾区' },
			
 
				+					{ label: '越秀区' },
			
 
				+					{ label: '白云区' },
			
 
				+					{ label: '黄埔区' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '深圳',
			
 
				+				children: [
			
 
				+					{ label: '罗湖区' },
			
 
				+					{ label: '福田区' },
			
 
				+					{ label: '南山区' },
			
 
				+					{ label: '宝安区' },
			
 
				+					{ label: '龙岗区' },
			
 
				+					{ label: '盐田区' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '珠海',
			
 
				+				children: [{ label: '香洲区' }, { label: '斗门区' }, { label: '金湾区' }],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '汕头',
			
 
				+				children: [
			
 
				+					{ label: '龙湖区' },
			
 
				+					{ label: '金平区' },
			
 
				+					{ label: '濠江区' },
			
 
				+					{ label: '潮阳区' },
			
 
				+					{ label: '潮南区' },
			
 
				+					{ label: '澄海区' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '佛山',
			
 
				+				children: [{ label: '禅城区' }, { label: '南海区' }, { label: '顺德区' }, { label: '三水区' }, { label: '高明区' }],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		label: '四川',
			
 
				+		children: [
			
 
				+			{
			
 
				+				label: '成都',
			
 
				+				children: [
			
 
				+					{ label: '锦江区' },
			
 
				+					{ label: '青羊区' },
			
 
				+					{ label: '金牛区' },
			
 
				+					{ label: '武侯区' },
			
 
				+					{ label: '成华区' },
			
 
				+					{ label: '龙泉驿区' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '绵阳',
			
 
				+				children: [
			
 
				+					{ label: '涪城区' },
			
 
				+					{ label: '游仙区' },
			
 
				+					{ label: '安州区' },
			
 
				+					{ label: '三台县' },
			
 
				+					{ label: '盐亭县' },
			
 
				+					{ label: '梓潼县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '自贡',
			
 
				+				children: [
			
 
				+					{ label: '自流井区' },
			
 
				+					{ label: '贡井区' },
			
 
				+					{ label: '大安区' },
			
 
				+					{ label: '沿滩区' },
			
 
				+					{ label: '荣县' },
			
 
				+					{ label: '富顺县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '攀枝花',
			
 
				+				children: [{ label: '东区' }, { label: '西区' }, { label: '仁和区' }, { label: '米易县' }, { label: '盐边县' }],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		label: '北京',
			
 
				+		children: [
			
 
				+			{
			
 
				+				label: '北京市',
			
 
				+				children: [
			
 
				+					{ label: '东城区' },
			
 
				+					{ label: '西城区' },
			
 
				+					{ label: '朝阳区' },
			
 
				+					{ label: '丰台区' },
			
 
				+					{ label: '石景山区' },
			
 
				+					{ label: '海淀区' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		label: '浙江',
			
 
				+		children: [
			
 
				+			{
			
 
				+				label: '杭州',
			
 
				+				children: [
			
 
				+					{ label: '上城区' },
			
 
				+					{ label: '下城区' },
			
 
				+					{ label: '江干区' },
			
 
				+					{ label: '拱墅区' },
			
 
				+					{ label: '西湖区' },
			
 
				+					{ label: '滨江区' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '宁波',
			
 
				+				children: [
			
 
				+					{ label: '海曙区' },
			
 
				+					{ label: '江东区' },
			
 
				+					{ label: '江北区' },
			
 
				+					{ label: '北仑区' },
			
 
				+					{ label: '镇海区' },
			
 
				+					{ label: '鄞州区' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '温州',
			
 
				+				children: [
			
 
				+					{ label: '鹿城区' },
			
 
				+					{ label: '龙湾区' },
			
 
				+					{ label: '瓯海区' },
			
 
				+					{ label: '洞头区' },
			
 
				+					{ label: '永嘉县' },
			
 
				+					{ label: '平阳县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '嘉兴',
			
 
				+				children: [
			
 
				+					{ label: '南湖区' },
			
 
				+					{ label: '秀洲区' },
			
 
				+					{ label: '嘉善县' },
			
 
				+					{ label: '海盐县' },
			
 
				+					{ label: '海宁市' },
			
 
				+					{ label: '平湖市' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '湖州',
			
 
				+				children: [{ label: '吴兴区' }, { label: '南浔区' }, { label: '德清县' }, { label: '长兴县' }, { label: '安吉县' }],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				 ];
			
 
				 const linkagDiffLabelKeyData = [
			
 
				-    {
			
 
				-        province: '云南',
			
 
				-        children: [
			
 
				-            {
			
 
				-                city: '昆明',
			
 
				-                children: [
			
 
				-                    { region: '盘龙区' },
			
 
				-                    { region: '五华区' },
			
 
				-                    { region: '官渡区' },
			
 
				-                    { region: '西山区' },
			
 
				-                    { region: '东川区' },
			
 
				-                    { region: '呈贡区' },
			
 
				-                    { region: '晋宁区' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                city: '曲靖',
			
 
				-                children: [
			
 
				-                    { region: '麒麟区' },
			
 
				-                    { region: '沾益区' },
			
 
				-                    { region: '马龙县' },
			
 
				-                    { region: '陆良县' },
			
 
				-                    { region: '师宗县' },
			
 
				-                    { region: '罗平县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                city: '玉溪',
			
 
				-                children: [
			
 
				-                    { region: '红塔区' },
			
 
				-                    { region: '江川区' },
			
 
				-                    { region: '澄江县' },
			
 
				-                    { region: '通海县' },
			
 
				-                    { region: '华宁县' },
			
 
				-                    { region: '易门县' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        province: '贵州',
			
 
				-        children: [
			
 
				-            {
			
 
				-                city: '贵阳',
			
 
				-                children: [
			
 
				-                    { region: '南明区' },
			
 
				-                    { region: '云岩区' },
			
 
				-                    { region: '花溪区' },
			
 
				-                    { region: '乌当区' },
			
 
				-                    { region: '白云区' },
			
 
				-                    { region: '观山湖区' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                city: '遵义',
			
 
				-                children: [
			
 
				-                    { region: '红花岗区' },
			
 
				-                    { region: '汇川区' },
			
 
				-                    { region: '播州区' },
			
 
				-                    { region: '桐梓县' },
			
 
				-                    { region: '绥阳县' },
			
 
				-                    { region: '正安县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                city: '六盘水',
			
 
				-                children: [{ region: '钟山区' }, { region: '六枝特区' }, { region: '水城县' }, { region: '盘县' }],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        province: '四川',
			
 
				-        children: [
			
 
				-            {
			
 
				-                city: '成都',
			
 
				-                children: [
			
 
				-                    { region: '锦江区' },
			
 
				-                    { region: '青羊区' },
			
 
				-                    { region: '金牛区' },
			
 
				-                    { region: '武侯区' },
			
 
				-                    { region: '成华区' },
			
 
				-                    { region: '龙泉驿区' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                city: '绵阳',
			
 
				-                children: [
			
 
				-                    { region: '涪城区' },
			
 
				-                    { region: '游仙区' },
			
 
				-                    { region: '安州区' },
			
 
				-                    { region: '三台县' },
			
 
				-                    { region: '盐亭县' },
			
 
				-                    { region: '梓潼县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                city: '攀枝花',
			
 
				-                children: [{ region: '东区' }, { region: '西区' }, { region: '仁和区' }, { region: '米易县' }, { region: '盐边县' }],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        province: '北京',
			
 
				-        children: [
			
 
				-            {
			
 
				-                city: '北京',
			
 
				-                children: [
			
 
				-                    { region: '东城区' },
			
 
				-                    { region: '西城区' },
			
 
				-                    { region: '朝阳区' },
			
 
				-                    { region: '丰台区' },
			
 
				-                    { region: '石景山区' },
			
 
				-                    { region: '海淀区' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				+	{
			
 
				+		province: '云南',
			
 
				+		children: [
			
 
				+			{
			
 
				+				city: '昆明',
			
 
				+				children: [
			
 
				+					{ region: '盘龙区' },
			
 
				+					{ region: '五华区' },
			
 
				+					{ region: '官渡区' },
			
 
				+					{ region: '西山区' },
			
 
				+					{ region: '东川区' },
			
 
				+					{ region: '呈贡区' },
			
 
				+					{ region: '晋宁区' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				city: '曲靖',
			
 
				+				children: [
			
 
				+					{ region: '麒麟区' },
			
 
				+					{ region: '沾益区' },
			
 
				+					{ region: '马龙县' },
			
 
				+					{ region: '陆良县' },
			
 
				+					{ region: '师宗县' },
			
 
				+					{ region: '罗平县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				city: '玉溪',
			
 
				+				children: [
			
 
				+					{ region: '红塔区' },
			
 
				+					{ region: '江川区' },
			
 
				+					{ region: '澄江县' },
			
 
				+					{ region: '通海县' },
			
 
				+					{ region: '华宁县' },
			
 
				+					{ region: '易门县' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		province: '贵州',
			
 
				+		children: [
			
 
				+			{
			
 
				+				city: '贵阳',
			
 
				+				children: [
			
 
				+					{ region: '南明区' },
			
 
				+					{ region: '云岩区' },
			
 
				+					{ region: '花溪区' },
			
 
				+					{ region: '乌当区' },
			
 
				+					{ region: '白云区' },
			
 
				+					{ region: '观山湖区' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				city: '遵义',
			
 
				+				children: [
			
 
				+					{ region: '红花岗区' },
			
 
				+					{ region: '汇川区' },
			
 
				+					{ region: '播州区' },
			
 
				+					{ region: '桐梓县' },
			
 
				+					{ region: '绥阳县' },
			
 
				+					{ region: '正安县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				city: '六盘水',
			
 
				+				children: [{ region: '钟山区' }, { region: '六枝特区' }, { region: '水城县' }, { region: '盘县' }],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		province: '四川',
			
 
				+		children: [
			
 
				+			{
			
 
				+				city: '成都',
			
 
				+				children: [
			
 
				+					{ region: '锦江区' },
			
 
				+					{ region: '青羊区' },
			
 
				+					{ region: '金牛区' },
			
 
				+					{ region: '武侯区' },
			
 
				+					{ region: '成华区' },
			
 
				+					{ region: '龙泉驿区' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				city: '绵阳',
			
 
				+				children: [
			
 
				+					{ region: '涪城区' },
			
 
				+					{ region: '游仙区' },
			
 
				+					{ region: '安州区' },
			
 
				+					{ region: '三台县' },
			
 
				+					{ region: '盐亭县' },
			
 
				+					{ region: '梓潼县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				city: '攀枝花',
			
 
				+				children: [{ region: '东区' }, { region: '西区' }, { region: '仁和区' }, { region: '米易县' }, { region: '盐边县' }],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		province: '北京',
			
 
				+		children: [
			
 
				+			{
			
 
				+				city: '北京',
			
 
				+				children: [
			
 
				+					{ region: '东城区' },
			
 
				+					{ region: '西城区' },
			
 
				+					{ region: '朝阳区' },
			
 
				+					{ region: '丰台区' },
			
 
				+					{ region: '石景山区' },
			
 
				+					{ region: '海淀区' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				 ];
			
 
				 const linkagCustomChildrenKeyData = [
			
 
				-    {
			
 
				-        label: '云南',
			
 
				-        child: [
			
 
				-            {
			
 
				-                label: '昆明',
			
 
				-                child: [
			
 
				-                    { label: '盘龙区' },
			
 
				-                    { label: '五华区' },
			
 
				-                    { label: '官渡区' },
			
 
				-                    { label: '西山区' },
			
 
				-                    { label: '东川区' },
			
 
				-                    { label: '呈贡区' },
			
 
				-                    { label: '晋宁区' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '曲靖',
			
 
				-                child: [
			
 
				-                    { label: '麒麟区' },
			
 
				-                    { label: '沾益区' },
			
 
				-                    { label: '马龙县' },
			
 
				-                    { label: '陆良县' },
			
 
				-                    { label: '师宗县' },
			
 
				-                    { label: '罗平县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '玉溪',
			
 
				-                child: [
			
 
				-                    { label: '红塔区' },
			
 
				-                    { label: '江川区' },
			
 
				-                    { label: '澄江县' },
			
 
				-                    { label: '通海县' },
			
 
				-                    { label: '华宁县' },
			
 
				-                    { label: '易门县' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        label: '贵州',
			
 
				-        child: [
			
 
				-            {
			
 
				-                label: '贵阳',
			
 
				-                child: [
			
 
				-                    { label: '南明区' },
			
 
				-                    { label: '云岩区' },
			
 
				-                    { label: '花溪区' },
			
 
				-                    { label: '乌当区' },
			
 
				-                    { label: '白云区' },
			
 
				-                    { label: '观山湖区' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '遵义',
			
 
				-                child: [
			
 
				-                    { label: '红花岗区' },
			
 
				-                    { label: '汇川区' },
			
 
				-                    { label: '播州区' },
			
 
				-                    { label: '桐梓县' },
			
 
				-                    { label: '绥阳县' },
			
 
				-                    { label: '正安县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '六盘水',
			
 
				-                child: [{ label: '钟山区' }, { label: '六枝特区' }, { label: '水城县' }, { label: '盘县' }],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        label: '四川',
			
 
				-        child: [
			
 
				-            {
			
 
				-                label: '成都',
			
 
				-                child: [
			
 
				-                    { label: '锦江区' },
			
 
				-                    { label: '青羊区' },
			
 
				-                    { label: '金牛区' },
			
 
				-                    { label: '武侯区' },
			
 
				-                    { label: '成华区' },
			
 
				-                    { label: '龙泉驿区' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '绵阳',
			
 
				-                child: [
			
 
				-                    { label: '涪城区' },
			
 
				-                    { label: '游仙区' },
			
 
				-                    { label: '安州区' },
			
 
				-                    { label: '三台县' },
			
 
				-                    { label: '盐亭县' },
			
 
				-                    { label: '梓潼县' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '攀枝花',
			
 
				-                child: [{ label: '东区' }, { label: '西区' }, { label: '仁和区' }, { label: '米易县' }, { label: '盐边县' }],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        label: '北京',
			
 
				-        child: [
			
 
				-            {
			
 
				-                label: '北京',
			
 
				-                child: [
			
 
				-                    { label: '东城区' },
			
 
				-                    { label: '西城区' },
			
 
				-                    { label: '朝阳区' },
			
 
				-                    { label: '丰台区' },
			
 
				-                    { label: '石景山区' },
			
 
				-                    { label: '海淀区' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        label: '浙江',
			
 
				-        child: [
			
 
				-            {
			
 
				-                label: '杭州',
			
 
				-                child: [
			
 
				-                    { label: '西湖区' },
			
 
				-                    { label: '上城区' },
			
 
				-                    { label: '下城区' },
			
 
				-                    { label: '江干区' },
			
 
				-                    { label: '拱墅区' },
			
 
				-                    { label: '滨江区' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '宁波',
			
 
				-                child: [
			
 
				-                    { label: '海曙区' },
			
 
				-                    { label: '江东区' },
			
 
				-                    { label: '江北区' },
			
 
				-                    { label: '北仑区' },
			
 
				-                    { label: '镇海区' },
			
 
				-                    { label: '鄞州区' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: '温州',
			
 
				-                child: [
			
 
				-                    { label: '鹿城区' },
			
 
				-                    { label: '龙湾区' },
			
 
				-                    { label: '瓯海区' },
			
 
				-                    { label: '洞头区' },
			
 
				-                    { label: '永嘉县' },
			
 
				-                    { label: '平阳县' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				+	{
			
 
				+		label: '云南',
			
 
				+		child: [
			
 
				+			{
			
 
				+				label: '昆明',
			
 
				+				child: [
			
 
				+					{ label: '盘龙区' },
			
 
				+					{ label: '五华区' },
			
 
				+					{ label: '官渡区' },
			
 
				+					{ label: '西山区' },
			
 
				+					{ label: '东川区' },
			
 
				+					{ label: '呈贡区' },
			
 
				+					{ label: '晋宁区' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '曲靖',
			
 
				+				child: [
			
 
				+					{ label: '麒麟区' },
			
 
				+					{ label: '沾益区' },
			
 
				+					{ label: '马龙县' },
			
 
				+					{ label: '陆良县' },
			
 
				+					{ label: '师宗县' },
			
 
				+					{ label: '罗平县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '玉溪',
			
 
				+				child: [
			
 
				+					{ label: '红塔区' },
			
 
				+					{ label: '江川区' },
			
 
				+					{ label: '澄江县' },
			
 
				+					{ label: '通海县' },
			
 
				+					{ label: '华宁县' },
			
 
				+					{ label: '易门县' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		label: '贵州',
			
 
				+		child: [
			
 
				+			{
			
 
				+				label: '贵阳',
			
 
				+				child: [
			
 
				+					{ label: '南明区' },
			
 
				+					{ label: '云岩区' },
			
 
				+					{ label: '花溪区' },
			
 
				+					{ label: '乌当区' },
			
 
				+					{ label: '白云区' },
			
 
				+					{ label: '观山湖区' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '遵义',
			
 
				+				child: [
			
 
				+					{ label: '红花岗区' },
			
 
				+					{ label: '汇川区' },
			
 
				+					{ label: '播州区' },
			
 
				+					{ label: '桐梓县' },
			
 
				+					{ label: '绥阳县' },
			
 
				+					{ label: '正安县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '六盘水',
			
 
				+				child: [{ label: '钟山区' }, { label: '六枝特区' }, { label: '水城县' }, { label: '盘县' }],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		label: '四川',
			
 
				+		child: [
			
 
				+			{
			
 
				+				label: '成都',
			
 
				+				child: [
			
 
				+					{ label: '锦江区' },
			
 
				+					{ label: '青羊区' },
			
 
				+					{ label: '金牛区' },
			
 
				+					{ label: '武侯区' },
			
 
				+					{ label: '成华区' },
			
 
				+					{ label: '龙泉驿区' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '绵阳',
			
 
				+				child: [
			
 
				+					{ label: '涪城区' },
			
 
				+					{ label: '游仙区' },
			
 
				+					{ label: '安州区' },
			
 
				+					{ label: '三台县' },
			
 
				+					{ label: '盐亭县' },
			
 
				+					{ label: '梓潼县' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '攀枝花',
			
 
				+				child: [{ label: '东区' }, { label: '西区' }, { label: '仁和区' }, { label: '米易县' }, { label: '盐边县' }],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		label: '北京',
			
 
				+		child: [
			
 
				+			{
			
 
				+				label: '北京',
			
 
				+				child: [
			
 
				+					{ label: '东城区' },
			
 
				+					{ label: '西城区' },
			
 
				+					{ label: '朝阳区' },
			
 
				+					{ label: '丰台区' },
			
 
				+					{ label: '石景山区' },
			
 
				+					{ label: '海淀区' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		label: '浙江',
			
 
				+		child: [
			
 
				+			{
			
 
				+				label: '杭州',
			
 
				+				child: [
			
 
				+					{ label: '西湖区' },
			
 
				+					{ label: '上城区' },
			
 
				+					{ label: '下城区' },
			
 
				+					{ label: '江干区' },
			
 
				+					{ label: '拱墅区' },
			
 
				+					{ label: '滨江区' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '宁波',
			
 
				+				child: [
			
 
				+					{ label: '海曙区' },
			
 
				+					{ label: '江东区' },
			
 
				+					{ label: '江北区' },
			
 
				+					{ label: '北仑区' },
			
 
				+					{ label: '镇海区' },
			
 
				+					{ label: '鄞州区' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: '温州',
			
 
				+				child: [
			
 
				+					{ label: '鹿城区' },
			
 
				+					{ label: '龙湾区' },
			
 
				+					{ label: '瓯海区' },
			
 
				+					{ label: '洞头区' },
			
 
				+					{ label: '永嘉县' },
			
 
				+					{ label: '平阳县' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				 ];
			
 
				 
			
 
				 export { someProvinceList, weekList, amOrPmList, timeList, cityList, linkageData, linkagDiffLabelKeyData, linkagCustomChildrenKeyData };
			
--- a/demo/src/pages/picker/data_en.js
+++ b/demo/src/pages/picker/data_en.js
@@ -1,624 +1,613 @@
 
				 const someProvinceList = [
			
 
				-    { label: 'Yunnan' },
			
 
				-    { label: 'Beijing' },
			
 
				-    { label: 'Guangdong' },
			
 
				-    { label: 'Chongqing' },
			
 
				-    { label: 'Sichuan' },
			
 
				-    { label: 'Hubei' },
			
 
				-    { label: 'Henan' },
			
 
				-    { label: 'Hunan' },
			
 
				-    { label: 'Shandong' },
			
 
				-    { label: 'Jiangsu' },
			
 
				-    { label: 'Zhejiang' },
			
 
				-    { label: 'Jiangxi' },
			
 
				-    { label: 'Anhui' },
			
 
				-    { label: 'Fujian' },
			
 
				+	{ label: 'Yunnan' },
			
 
				+	{ label: 'Beijing' },
			
 
				+	{ label: 'Guangdong' },
			
 
				+	{ label: 'Chongqing' },
			
 
				+	{ label: 'Sichuan' },
			
 
				+	{ label: 'Hubei' },
			
 
				+	{ label: 'Henan' },
			
 
				+	{ label: 'Hunan' },
			
 
				+	{ label: 'Shandong' },
			
 
				+	{ label: 'Jiangsu' },
			
 
				+	{ label: 'Zhejiang' },
			
 
				+	{ label: 'Jiangxi' },
			
 
				+	{ label: 'Anhui' },
			
 
				+	{ label: 'Fujian' },
			
 
				 ];
			
 
				 const weekList = [
			
 
				-    { label: 'Monday' },
			
 
				-    { label: 'Tuesday' },
			
 
				-    { label: 'Wednesday' },
			
 
				-    { label: 'Thursday' },
			
 
				-    { label: 'Friday' },
			
 
				-    { label: 'Saturday' },
			
 
				-    { label: 'Sunday' },
			
 
				+	{ label: 'Monday' },
			
 
				+	{ label: 'Tuesday' },
			
 
				+	{ label: 'Wednesday' },
			
 
				+	{ label: 'Thursday' },
			
 
				+	{ label: 'Friday' },
			
 
				+	{ label: 'Saturday' },
			
 
				+	{ label: 'Sunday' },
			
 
				 ];
			
 
				 const amOrPmList = [{ label: 'AM' }, { label: 'PM' }];
			
 
				 const timeList = [
			
 
				-    { label: '01:00' },
			
 
				-    { label: '02:00' },
			
 
				-    { label: '03:00' },
			
 
				-    { label: '04:00' },
			
 
				-    { label: '05:00' },
			
 
				-    { label: '06:00' },
			
 
				-    { label: '07:00' },
			
 
				-    { label: '08:00' },
			
 
				-    { label: '09:00' },
			
 
				-    { label: '10:00' },
			
 
				-    { label: '11:00' },
			
 
				-    { label: '12:00' },
			
 
				+	{ label: '01:00' },
			
 
				+	{ label: '02:00' },
			
 
				+	{ label: '03:00' },
			
 
				+	{ label: '04:00' },
			
 
				+	{ label: '05:00' },
			
 
				+	{ label: '06:00' },
			
 
				+	{ label: '07:00' },
			
 
				+	{ label: '08:00' },
			
 
				+	{ label: '09:00' },
			
 
				+	{ label: '10:00' },
			
 
				+	{ label: '11:00' },
			
 
				+	{ label: '12:00' },
			
 
				 ];
			
 
				 const cityList = [
			
 
				-    { cityName: 'kunming' },
			
 
				-    { cityName: 'qujing' },
			
 
				-    { cityName: 'yuxi' },
			
 
				-    { cityName: 'baoshan' },
			
 
				-    { cityName: 'zhaotong' },
			
 
				-    { cityName: 'lijiang' },
			
 
				-    { cityName: 'puer' },
			
 
				-    { cityName: 'lincang' },
			
 
				-    { cityName: 'chuxiong' },
			
 
				-    { cityName: 'honghe' },
			
 
				-    { cityName: 'wenshan' },
			
 
				+	{ cityName: 'kunming' },
			
 
				+	{ cityName: 'qujing' },
			
 
				+	{ cityName: 'yuxi' },
			
 
				+	{ cityName: 'baoshan' },
			
 
				+	{ cityName: 'zhaotong' },
			
 
				+	{ cityName: 'lijiang' },
			
 
				+	{ cityName: 'puer' },
			
 
				+	{ cityName: 'lincang' },
			
 
				+	{ cityName: 'chuxiong' },
			
 
				+	{ cityName: 'honghe' },
			
 
				+	{ cityName: 'wenshan' },
			
 
				 ];
			
 
				 const linkageData = [
			
 
				-    {
			
 
				-        label: 'Yunnan',
			
 
				-        children: [
			
 
				-            {
			
 
				-                label: 'Kunming',
			
 
				-                children: [
			
 
				-                    { label: 'Panlong District' },
			
 
				-                    { label: 'Wuhua District' },
			
 
				-                    { label: 'Guandu District' },
			
 
				-                    { label: 'Xishan District' },
			
 
				-                    { label: 'Dongchuan District' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Qujing',
			
 
				-                children: [
			
 
				-                    { label: 'Qilin District' },
			
 
				-                    { label: 'Zhanyi District' },
			
 
				-                    { label: 'Malong County' },
			
 
				-                    { label: 'Luliang County' },
			
 
				-                    { label: 'Shizong County' },
			
 
				-                    { label: 'Luoping County' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Yuxi',
			
 
				-                children: [
			
 
				-                    { label: 'Hongta District' },
			
 
				-                    { label: 'Jiangchuan District' },
			
 
				-                    { label: 'Chengjiang County' },
			
 
				-                    { label: 'Tonghai County' },
			
 
				-                    { label: 'Huaning County' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Baoshan',
			
 
				-                children: [
			
 
				-                    { label: 'Longyang District' },
			
 
				-                    { label: 'Shidian County' },
			
 
				-                    { label: 'Longling County' },
			
 
				-                    { label: 'Changning County' },
			
 
				-                    { label: 'Tengchong City' },
			
 
				-                    { label: 'Longling County' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Lijiang',
			
 
				-                children: [{ label: 'Gucheng District' }, { label: 'Yongsheng County' }, { label: 'Huaping County' }],
			
 
				-            },
			
 
				-            {
			
 
				-                label: "Pu'er",
			
 
				-                children: [
			
 
				-                    { label: 'Simao District' },
			
 
				-                    { label: "Ning'er Hani and Yi Autonomous County" },
			
 
				-                    { label: 'Mojiang Hani Autonomous County' },
			
 
				-                    { label: 'Jingdong Yi Autonomous County' },
			
 
				-                    { label: 'Jinggu Dai and Yi Autonomous County' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Lincang',
			
 
				-                children: [
			
 
				-                    { label: 'Linxia District' },
			
 
				-                    { label: 'Fengqing County' },
			
 
				-                    { label: 'Yun County' },
			
 
				-                    { label: 'Yongde County' },
			
 
				-                    { label: 'Zhenkang County' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Chuxiong',
			
 
				-                children: [
			
 
				-                    { label: 'Chuxiong City' },
			
 
				-                    { label: 'Shuangbai County' },
			
 
				-                    { label: 'Mouding County' },
			
 
				-                    { label: 'Nanhua County' },
			
 
				-                    { label: "Yao'an County" },
			
 
				-                    { label: 'Dayao County' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Honghe',
			
 
				-                children: [
			
 
				-                    { label: 'Gejiu City' },
			
 
				-                    { label: 'Kaiyuan City' },
			
 
				-                    { label: 'Mengzi City' },
			
 
				-                    { label: 'Mile City' },
			
 
				-                    { label: 'Pingbian Miao Autonomous County' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Wenshan',
			
 
				-                children: [
			
 
				-                    { label: 'Wenshan City' },
			
 
				-                    { label: 'Yanshan County' },
			
 
				-                    { label: 'Xichou County' },
			
 
				-                    { label: 'Malipo County' },
			
 
				-                    { label: 'Maguan County' },
			
 
				-                    { label: 'Qiubei County' },
			
 
				-                    { label: 'Guangnan County' },
			
 
				-                    { label: 'Funing County' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        label: 'Guangdong',
			
 
				-        children: [
			
 
				-            {
			
 
				-                label: 'Guangzhou',
			
 
				-                children: [
			
 
				-                    { label: 'Tianhe District' },
			
 
				-                    { label: 'Haizhu District' },
			
 
				-                    { label: 'Liwan District' },
			
 
				-                    { label: 'Yuexiu District' },
			
 
				-                    { label: 'Baiyun District' },
			
 
				-                    { label: 'Huangpu District' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Shenzhen',
			
 
				-                children: [
			
 
				-                    { label: 'Luohu District' },
			
 
				-                    { label: 'Futian District' },
			
 
				-                    { label: 'Nanshan District' },
			
 
				-                    { label: "Bao'an District" },
			
 
				-                    { label: 'Longgang District' },
			
 
				-                    { label: 'Yantian District' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Zhuhai',
			
 
				-                children: [{ label: 'Xiangzhou District' }, { label: 'Doumen District' }, { label: 'Jinwan District' }],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Shantou',
			
 
				-                children: [
			
 
				-                    { label: 'Longhu District' },
			
 
				-                    { label: 'Jinping District' },
			
 
				-                    { label: 'Haojiang District' },
			
 
				-                    { label: 'Chaoyang District' },
			
 
				-                    { label: "Chao'an District" },
			
 
				-                    { label: 'Chenghai District' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Foshan',
			
 
				-                children: [
			
 
				-                    { label: 'Chancheng District' },
			
 
				-                    { label: 'Nanhai District' },
			
 
				-                    { label: 'Shunde District' },
			
 
				-                    { label: 'Sanshui District' },
			
 
				-                    { label: 'Gaoming District' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        label: 'Sichuan',
			
 
				-        children: [
			
 
				-            {
			
 
				-                label: 'Chengdu',
			
 
				-                children: [
			
 
				-                    { label: 'Jinjiang District' },
			
 
				-                    { label: 'Qingyang District' },
			
 
				-                    { label: 'Jinniu District' },
			
 
				-                    { label: 'Wuhou District' },
			
 
				-                    { label: 'Chenghua District' },
			
 
				-                    { label: 'Longquanyi District' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Mianyang',
			
 
				-                children: [
			
 
				-                    { label: 'Fucheng District' },
			
 
				-                    { label: 'Youxian District' },
			
 
				-                    { label: 'Anzhou District' },
			
 
				-                    { label: 'Santai County' },
			
 
				-                    { label: 'Yanting County' },
			
 
				-                    { label: 'Zitong County' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Zigong',
			
 
				-                children: [
			
 
				-                    { label: 'Ziliujing District' },
			
 
				-                    { label: 'Gongjing District' },
			
 
				-                    { label: "Da'an District" },
			
 
				-                    { label: 'Yantan District' },
			
 
				-                    { label: 'Rong County' },
			
 
				-                    { label: 'Fushun County' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Panzhihua',
			
 
				-                children: [
			
 
				-                    { label: 'Dong District' },
			
 
				-                    { label: 'Xi District' },
			
 
				-                    { label: 'Renhe District' },
			
 
				-                    { label: 'Miyi County' },
			
 
				-                    { label: 'Yanbian County' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        label: 'Beijing',
			
 
				-        children: [
			
 
				-            {
			
 
				-                label: 'Beijing City',
			
 
				-                children: [
			
 
				-                    { label: 'Dongcheng District' },
			
 
				-                    { label: 'Xicheng District' },
			
 
				-                    { label: 'Chaoyang District' },
			
 
				-                    { label: 'Fengtai District' },
			
 
				-                    { label: 'Shijingshan District' },
			
 
				-                    { label: 'Haidian District' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        label: 'Zhejiang',
			
 
				-        children: [
			
 
				-            {
			
 
				-                label: 'Hangzhou',
			
 
				-                children: [
			
 
				-                    { label: 'Shangcheng District' },
			
 
				-                    { label: 'Xiacheng District' },
			
 
				-                    { label: 'Jianggan District' },
			
 
				-                    { label: 'Gongshu District' },
			
 
				-                    { label: 'Xihu District' },
			
 
				-                    { label: 'Binjiang District' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Ningbo',
			
 
				-                children: [
			
 
				-                    { label: 'Haishu District' },
			
 
				-                    { label: 'Jiangdong District' },
			
 
				-                    { label: 'Jiangbei District' },
			
 
				-                    { label: 'Beilun District' },
			
 
				-                    { label: 'Zhenhai District' },
			
 
				-                    { label: 'Yinzhou District' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Wenzhou',
			
 
				-                children: [
			
 
				-                    { label: 'Lucheng District' },
			
 
				-                    { label: 'Longwan District' },
			
 
				-                    { label: 'Ouhai District' },
			
 
				-                    { label: 'Dongtou District' },
			
 
				-                    { label: 'Yongjia County' },
			
 
				-                    { label: 'Pingyang County' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Jiaxing',
			
 
				-                children: [
			
 
				-                    { label: 'Nanhu District' },
			
 
				-                    { label: 'Xiuzhou District' },
			
 
				-                    { label: 'Jiashan County' },
			
 
				-                    { label: 'Haiyan County' },
			
 
				-                    { label: 'Haining City' },
			
 
				-                    { label: 'Pinghu City' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'Huzhou',
			
 
				-                children: [
			
 
				-                    { label: 'Wuxing District' },
			
 
				-                    { label: 'Nanxun District' },
			
 
				-                    { label: 'Deqing County' },
			
 
				-                    { label: 'Changxing County' },
			
 
				-                    { label: 'Anji County' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				+	{
			
 
				+		label: 'Yunnan',
			
 
				+		children: [
			
 
				+			{
			
 
				+				label: 'Kunming',
			
 
				+				children: [
			
 
				+					{ label: 'Panlong District' },
			
 
				+					{ label: 'Wuhua District' },
			
 
				+					{ label: 'Guandu District' },
			
 
				+					{ label: 'Xishan District' },
			
 
				+					{ label: 'Dongchuan District' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Qujing',
			
 
				+				children: [
			
 
				+					{ label: 'Qilin District' },
			
 
				+					{ label: 'Zhanyi District' },
			
 
				+					{ label: 'Malong County' },
			
 
				+					{ label: 'Luliang County' },
			
 
				+					{ label: 'Shizong County' },
			
 
				+					{ label: 'Luoping County' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Yuxi',
			
 
				+				children: [
			
 
				+					{ label: 'Hongta District' },
			
 
				+					{ label: 'Jiangchuan District' },
			
 
				+					{ label: 'Chengjiang County' },
			
 
				+					{ label: 'Tonghai County' },
			
 
				+					{ label: 'Huaning County' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Baoshan',
			
 
				+				children: [
			
 
				+					{ label: 'Longyang District' },
			
 
				+					{ label: 'Shidian County' },
			
 
				+					{ label: 'Longling County' },
			
 
				+					{ label: 'Changning County' },
			
 
				+					{ label: 'Tengchong City' },
			
 
				+					{ label: 'Longling County' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Lijiang',
			
 
				+				children: [{ label: 'Gucheng District' }, { label: 'Yongsheng County' }, { label: 'Huaping County' }],
			
 
				+			},
			
 
				+			{
			
 
				+				label: "Pu'er",
			
 
				+				children: [
			
 
				+					{ label: 'Simao District' },
			
 
				+					{ label: "Ning'er Hani and Yi Autonomous County" },
			
 
				+					{ label: 'Mojiang Hani Autonomous County' },
			
 
				+					{ label: 'Jingdong Yi Autonomous County' },
			
 
				+					{ label: 'Jinggu Dai and Yi Autonomous County' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Lincang',
			
 
				+				children: [
			
 
				+					{ label: 'Linxia District' },
			
 
				+					{ label: 'Fengqing County' },
			
 
				+					{ label: 'Yun County' },
			
 
				+					{ label: 'Yongde County' },
			
 
				+					{ label: 'Zhenkang County' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Chuxiong',
			
 
				+				children: [
			
 
				+					{ label: 'Chuxiong City' },
			
 
				+					{ label: 'Shuangbai County' },
			
 
				+					{ label: 'Mouding County' },
			
 
				+					{ label: 'Nanhua County' },
			
 
				+					{ label: "Yao'an County" },
			
 
				+					{ label: 'Dayao County' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Honghe',
			
 
				+				children: [
			
 
				+					{ label: 'Gejiu City' },
			
 
				+					{ label: 'Kaiyuan City' },
			
 
				+					{ label: 'Mengzi City' },
			
 
				+					{ label: 'Mile City' },
			
 
				+					{ label: 'Pingbian Miao Autonomous County' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Wenshan',
			
 
				+				children: [
			
 
				+					{ label: 'Wenshan City' },
			
 
				+					{ label: 'Yanshan County' },
			
 
				+					{ label: 'Xichou County' },
			
 
				+					{ label: 'Malipo County' },
			
 
				+					{ label: 'Maguan County' },
			
 
				+					{ label: 'Qiubei County' },
			
 
				+					{ label: 'Guangnan County' },
			
 
				+					{ label: 'Funing County' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		label: 'Guangdong',
			
 
				+		children: [
			
 
				+			{
			
 
				+				label: 'Guangzhou',
			
 
				+				children: [
			
 
				+					{ label: 'Tianhe District' },
			
 
				+					{ label: 'Haizhu District' },
			
 
				+					{ label: 'Liwan District' },
			
 
				+					{ label: 'Yuexiu District' },
			
 
				+					{ label: 'Baiyun District' },
			
 
				+					{ label: 'Huangpu District' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Shenzhen',
			
 
				+				children: [
			
 
				+					{ label: 'Luohu District' },
			
 
				+					{ label: 'Futian District' },
			
 
				+					{ label: 'Nanshan District' },
			
 
				+					{ label: "Bao'an District" },
			
 
				+					{ label: 'Longgang District' },
			
 
				+					{ label: 'Yantian District' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Zhuhai',
			
 
				+				children: [{ label: 'Xiangzhou District' }, { label: 'Doumen District' }, { label: 'Jinwan District' }],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Shantou',
			
 
				+				children: [
			
 
				+					{ label: 'Longhu District' },
			
 
				+					{ label: 'Jinping District' },
			
 
				+					{ label: 'Haojiang District' },
			
 
				+					{ label: 'Chaoyang District' },
			
 
				+					{ label: "Chao'an District" },
			
 
				+					{ label: 'Chenghai District' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Foshan',
			
 
				+				children: [
			
 
				+					{ label: 'Chancheng District' },
			
 
				+					{ label: 'Nanhai District' },
			
 
				+					{ label: 'Shunde District' },
			
 
				+					{ label: 'Sanshui District' },
			
 
				+					{ label: 'Gaoming District' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		label: 'Sichuan',
			
 
				+		children: [
			
 
				+			{
			
 
				+				label: 'Chengdu',
			
 
				+				children: [
			
 
				+					{ label: 'Jinjiang District' },
			
 
				+					{ label: 'Qingyang District' },
			
 
				+					{ label: 'Jinniu District' },
			
 
				+					{ label: 'Wuhou District' },
			
 
				+					{ label: 'Chenghua District' },
			
 
				+					{ label: 'Longquanyi District' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Mianyang',
			
 
				+				children: [
			
 
				+					{ label: 'Fucheng District' },
			
 
				+					{ label: 'Youxian District' },
			
 
				+					{ label: 'Anzhou District' },
			
 
				+					{ label: 'Santai County' },
			
 
				+					{ label: 'Yanting County' },
			
 
				+					{ label: 'Zitong County' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Zigong',
			
 
				+				children: [
			
 
				+					{ label: 'Ziliujing District' },
			
 
				+					{ label: 'Gongjing District' },
			
 
				+					{ label: "Da'an District" },
			
 
				+					{ label: 'Yantan District' },
			
 
				+					{ label: 'Rong County' },
			
 
				+					{ label: 'Fushun County' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Panzhihua',
			
 
				+				children: [
			
 
				+					{ label: 'Dong District' },
			
 
				+					{ label: 'Xi District' },
			
 
				+					{ label: 'Renhe District' },
			
 
				+					{ label: 'Miyi County' },
			
 
				+					{ label: 'Yanbian County' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		label: 'Beijing',
			
 
				+		children: [
			
 
				+			{
			
 
				+				label: 'Beijing City',
			
 
				+				children: [
			
 
				+					{ label: 'Dongcheng District' },
			
 
				+					{ label: 'Xicheng District' },
			
 
				+					{ label: 'Chaoyang District' },
			
 
				+					{ label: 'Fengtai District' },
			
 
				+					{ label: 'Shijingshan District' },
			
 
				+					{ label: 'Haidian District' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		label: 'Zhejiang',
			
 
				+		children: [
			
 
				+			{
			
 
				+				label: 'Hangzhou',
			
 
				+				children: [
			
 
				+					{ label: 'Shangcheng District' },
			
 
				+					{ label: 'Xiacheng District' },
			
 
				+					{ label: 'Jianggan District' },
			
 
				+					{ label: 'Gongshu District' },
			
 
				+					{ label: 'Xihu District' },
			
 
				+					{ label: 'Binjiang District' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Ningbo',
			
 
				+				children: [
			
 
				+					{ label: 'Haishu District' },
			
 
				+					{ label: 'Jiangdong District' },
			
 
				+					{ label: 'Jiangbei District' },
			
 
				+					{ label: 'Beilun District' },
			
 
				+					{ label: 'Zhenhai District' },
			
 
				+					{ label: 'Yinzhou District' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Wenzhou',
			
 
				+				children: [
			
 
				+					{ label: 'Lucheng District' },
			
 
				+					{ label: 'Longwan District' },
			
 
				+					{ label: 'Ouhai District' },
			
 
				+					{ label: 'Dongtou District' },
			
 
				+					{ label: 'Yongjia County' },
			
 
				+					{ label: 'Pingyang County' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Jiaxing',
			
 
				+				children: [
			
 
				+					{ label: 'Nanhu District' },
			
 
				+					{ label: 'Xiuzhou District' },
			
 
				+					{ label: 'Jiashan County' },
			
 
				+					{ label: 'Haiyan County' },
			
 
				+					{ label: 'Haining City' },
			
 
				+					{ label: 'Pinghu City' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'Huzhou',
			
 
				+				children: [
			
 
				+					{ label: 'Wuxing District' },
			
 
				+					{ label: 'Nanxun District' },
			
 
				+					{ label: 'Deqing County' },
			
 
				+					{ label: 'Changxing County' },
			
 
				+					{ label: 'Anji County' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				 ];
			
 
				 const linkagDiffLabelKeyData = [
			
 
				-    {
			
 
				-        province: 'Yunnan',
			
 
				-        children: [
			
 
				-            {
			
 
				-                city: 'Kunming',
			
 
				-                children: [
			
 
				-                    { region: 'Panlong Qu' },
			
 
				-                    { region: 'Wuhua Qu' },
			
 
				-                    { region: 'Guandu Qu' },
			
 
				-                    { region: 'Xishan Qu' },
			
 
				-                    { region: 'Dongchuan Qu' },
			
 
				-                    { region: 'Chenggong Qu' },
			
 
				-                    { region: 'Jinning Qu' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                city: 'Qujing',
			
 
				-                children: [
			
 
				-                    { region: 'Qilin Qu' },
			
 
				-                    { region: 'Zhanyi Qu' },
			
 
				-                    { region: 'Malong Xian' },
			
 
				-                    { region: 'Luliang Xian' },
			
 
				-                    { region: 'Shizong Xian' },
			
 
				-                    { region: 'Luoping Xian' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                city: 'Yuxi',
			
 
				-                children: [
			
 
				-                    { region: 'Hongta Qu' },
			
 
				-                    { region: 'Jiangchuan Qu' },
			
 
				-                    { region: 'Chengjiang Xian' },
			
 
				-                    { region: 'Tonghai Xian' },
			
 
				-                    { region: 'Huaning Xian' },
			
 
				-                    { region: 'Yimen Xian' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        province: 'Guizhou',
			
 
				-        children: [
			
 
				-            {
			
 
				-                city: 'Guiyang',
			
 
				-                children: [
			
 
				-                    { region: 'Nanming Qu' },
			
 
				-                    { region: 'Yunyan Qu' },
			
 
				-                    { region: 'Huaxi Qu' },
			
 
				-                    { region: 'Wudang Qu' },
			
 
				-                    { region: 'Baiyun Qu' },
			
 
				-                    { region: 'Guanshanhu Qu' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                city: 'Zunyi',
			
 
				-                children: [
			
 
				-                    { region: 'Honghuagang Qu' },
			
 
				-                    { region: 'Huichuan Qu' },
			
 
				-                    { region: 'Bozhou Qu' },
			
 
				-                    { region: 'Tongzi Xian' },
			
 
				-                    { region: 'Suiyang Xian' },
			
 
				-                    { region: 'Zhengan Xian' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                city: 'Liupanshui',
			
 
				-                children: [
			
 
				-                    { region: 'Zhongshan Qu' },
			
 
				-                    { region: 'Liuzhi Special District' },
			
 
				-                    { region: 'Shuicheng Xian' },
			
 
				-                    { region: 'Pan Xian' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        province: 'Sichuan',
			
 
				-        children: [
			
 
				-            {
			
 
				-                city: 'Chengdu',
			
 
				-                children: [
			
 
				-                    { region: 'Jinjiang Qu' },
			
 
				-                    { region: 'Qingyang Qu' },
			
 
				-                    { region: 'Jinniu Qu' },
			
 
				-                    { region: 'Wuhou Qu' },
			
 
				-                    { region: 'Chenghua Qu' },
			
 
				-                    { region: 'Longquanyi Qu' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                city: 'Mianyang',
			
 
				-                children: [
			
 
				-                    { region: 'Fucheng Qu' },
			
 
				-                    { region: 'Youxian Qu' },
			
 
				-                    { region: 'Anzhou Qu' },
			
 
				-                    { region: 'Santai Xian' },
			
 
				-                    { region: 'Yanling Xian' },
			
 
				-                    { region: 'Zitong Xian' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                city: 'Panzhihua',
			
 
				-                children: [
			
 
				-                    { region: 'Dongqu' },
			
 
				-                    { region: 'Xiqu' },
			
 
				-                    { region: 'Renhe Qu' },
			
 
				-                    { region: 'Miyi Xian' },
			
 
				-                    { region: 'Yanbian Xian' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        province: 'Beijing',
			
 
				-        children: [
			
 
				-            {
			
 
				-                city: 'Beijing',
			
 
				-                children: [
			
 
				-                    { region: 'Dongcheng Qu' },
			
 
				-                    { region: 'Xicheng Qu' },
			
 
				-                    { region: 'Chaoyang Qu' },
			
 
				-                    { region: 'Fengtai Qu' },
			
 
				-                    { region: 'Shijingshan Qu' },
			
 
				-                    { region: 'Haidian Qu' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				+	{
			
 
				+		province: 'Yunnan',
			
 
				+		children: [
			
 
				+			{
			
 
				+				city: 'Kunming',
			
 
				+				children: [
			
 
				+					{ region: 'Panlong Qu' },
			
 
				+					{ region: 'Wuhua Qu' },
			
 
				+					{ region: 'Guandu Qu' },
			
 
				+					{ region: 'Xishan Qu' },
			
 
				+					{ region: 'Dongchuan Qu' },
			
 
				+					{ region: 'Chenggong Qu' },
			
 
				+					{ region: 'Jinning Qu' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				city: 'Qujing',
			
 
				+				children: [
			
 
				+					{ region: 'Qilin Qu' },
			
 
				+					{ region: 'Zhanyi Qu' },
			
 
				+					{ region: 'Malong Xian' },
			
 
				+					{ region: 'Luliang Xian' },
			
 
				+					{ region: 'Shizong Xian' },
			
 
				+					{ region: 'Luoping Xian' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				city: 'Yuxi',
			
 
				+				children: [
			
 
				+					{ region: 'Hongta Qu' },
			
 
				+					{ region: 'Jiangchuan Qu' },
			
 
				+					{ region: 'Chengjiang Xian' },
			
 
				+					{ region: 'Tonghai Xian' },
			
 
				+					{ region: 'Huaning Xian' },
			
 
				+					{ region: 'Yimen Xian' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		province: 'Guizhou',
			
 
				+		children: [
			
 
				+			{
			
 
				+				city: 'Guiyang',
			
 
				+				children: [
			
 
				+					{ region: 'Nanming Qu' },
			
 
				+					{ region: 'Yunyan Qu' },
			
 
				+					{ region: 'Huaxi Qu' },
			
 
				+					{ region: 'Wudang Qu' },
			
 
				+					{ region: 'Baiyun Qu' },
			
 
				+					{ region: 'Guanshanhu Qu' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				city: 'Zunyi',
			
 
				+				children: [
			
 
				+					{ region: 'Honghuagang Qu' },
			
 
				+					{ region: 'Huichuan Qu' },
			
 
				+					{ region: 'Bozhou Qu' },
			
 
				+					{ region: 'Tongzi Xian' },
			
 
				+					{ region: 'Suiyang Xian' },
			
 
				+					{ region: 'Zhengan Xian' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				city: 'Liupanshui',
			
 
				+				children: [{ region: 'Zhongshan Qu' }, { region: 'Liuzhi Special District' }, { region: 'Shuicheng Xian' }, { region: 'Pan Xian' }],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		province: 'Sichuan',
			
 
				+		children: [
			
 
				+			{
			
 
				+				city: 'Chengdu',
			
 
				+				children: [
			
 
				+					{ region: 'Jinjiang Qu' },
			
 
				+					{ region: 'Qingyang Qu' },
			
 
				+					{ region: 'Jinniu Qu' },
			
 
				+					{ region: 'Wuhou Qu' },
			
 
				+					{ region: 'Chenghua Qu' },
			
 
				+					{ region: 'Longquanyi Qu' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				city: 'Mianyang',
			
 
				+				children: [
			
 
				+					{ region: 'Fucheng Qu' },
			
 
				+					{ region: 'Youxian Qu' },
			
 
				+					{ region: 'Anzhou Qu' },
			
 
				+					{ region: 'Santai Xian' },
			
 
				+					{ region: 'Yanling Xian' },
			
 
				+					{ region: 'Zitong Xian' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				city: 'Panzhihua',
			
 
				+				children: [{ region: 'Dongqu' }, { region: 'Xiqu' }, { region: 'Renhe Qu' }, { region: 'Miyi Xian' }, { region: 'Yanbian Xian' }],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		province: 'Beijing',
			
 
				+		children: [
			
 
				+			{
			
 
				+				city: 'Beijing',
			
 
				+				children: [
			
 
				+					{ region: 'Dongcheng Qu' },
			
 
				+					{ region: 'Xicheng Qu' },
			
 
				+					{ region: 'Chaoyang Qu' },
			
 
				+					{ region: 'Fengtai Qu' },
			
 
				+					{ region: 'Shijingshan Qu' },
			
 
				+					{ region: 'Haidian Qu' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				 ];
			
 
				 const linkagCustomChildrenKeyData = [
			
 
				-    {
			
 
				-        label: 'YunNan',
			
 
				-        child: [
			
 
				-            {
			
 
				-                label: 'KunMing',
			
 
				-                child: [
			
 
				-                    { label: 'PanLongQu' },
			
 
				-                    { label: 'WuHuaQu' },
			
 
				-                    { label: 'GuanDuQu' },
			
 
				-                    { label: 'XiShanQu' },
			
 
				-                    { label: 'DongChuanQu' },
			
 
				-                    { label: 'ChengGongQu' },
			
 
				-                    { label: 'JinNingQu' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'QuJing',
			
 
				-                child: [
			
 
				-                    { label: 'QiLinQu' },
			
 
				-                    { label: 'ZhanYiQu' },
			
 
				-                    { label: 'MaLongXian' },
			
 
				-                    { label: 'LuLiangXian' },
			
 
				-                    { label: 'ShiZongXian' },
			
 
				-                    { label: 'LuoPingXian' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'YuXi',
			
 
				-                child: [
			
 
				-                    { label: 'HongTaQu' },
			
 
				-                    { label: 'JiangChuanQu' },
			
 
				-                    { label: 'ChengJiangXian' },
			
 
				-                    { label: 'TongHaiXian' },
			
 
				-                    { label: 'HuaNingXian' },
			
 
				-                    { label: 'YiMenXian' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        label: 'GuiZhou',
			
 
				-        child: [
			
 
				-            {
			
 
				-                label: 'GuiYang',
			
 
				-                child: [
			
 
				-                    { label: 'NanMingQu' },
			
 
				-                    { label: 'YunYanQu' },
			
 
				-                    { label: 'HuaXiQu' },
			
 
				-                    { label: 'WuDangQu' },
			
 
				-                    { label: 'BaiYunQu' },
			
 
				-                    { label: 'GuanShanHuQu' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'ZunYi',
			
 
				-                child: [
			
 
				-                    { label: 'HongHuaGangQu' },
			
 
				-                    { label: 'HuiChuanQu' },
			
 
				-                    { label: 'BoZhouQu' },
			
 
				-                    { label: 'TongZiXian' },
			
 
				-                    { label: 'SuiYangXian' },
			
 
				-                    { label: 'ZhengAnXian' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'LiuPanShui',
			
 
				-                child: [{ label: 'ZhongShanQu' }, { label: 'LiuZhiTeQu' }, { label: 'ShuiChengXian' }, { label: 'PanXian' }],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        label: 'SiChuan',
			
 
				-        child: [
			
 
				-            {
			
 
				-                label: 'ChengDu',
			
 
				-                child: [
			
 
				-                    { label: 'JinJiangQu' },
			
 
				-                    { label: 'QingYangQu' },
			
 
				-                    { label: 'JinNiuQu' },
			
 
				-                    { label: 'WuHouQu' },
			
 
				-                    { label: 'ChengHuaQu' },
			
 
				-                    { label: 'LongQuanYiQu' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'MianYang',
			
 
				-                child: [
			
 
				-                    { label: 'FuChengQu' },
			
 
				-                    { label: 'YouXianQu' },
			
 
				-                    { label: 'AnZhouQu' },
			
 
				-                    { label: 'SanTaiXian' },
			
 
				-                    { label: 'YanTingXian' },
			
 
				-                    { label: 'ZiTongXian' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'PanZhiHua',
			
 
				-                child: [{ label: 'DongQu' }, { label: 'XiQu' }, { label: 'RenHeQu' }, { label: 'MiYiXian' }, { label: 'YanBianXian' }],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        label: 'BeiJing',
			
 
				-        child: [
			
 
				-            {
			
 
				-                label: 'BeiJing',
			
 
				-                child: [
			
 
				-                    { label: 'DongChengQu' },
			
 
				-                    { label: 'XiChengQu' },
			
 
				-                    { label: 'ChaoYangQu' },
			
 
				-                    { label: 'FengTaiQu' },
			
 
				-                    { label: 'ShiJingShanQu' },
			
 
				-                    { label: 'HaiDianQu' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				-    {
			
 
				-        label: 'ZheJiang',
			
 
				-        child: [
			
 
				-            {
			
 
				-                label: 'HangZhou',
			
 
				-                child: [
			
 
				-                    { label: 'XiHuQu' },
			
 
				-                    { label: 'ShangChengQu' },
			
 
				-                    { label: 'XiaChengQu' },
			
 
				-                    { label: 'JiangGanQu' },
			
 
				-                    { label: 'GongShuQu' },
			
 
				-                    { label: 'BinJiangQu' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'NingBo',
			
 
				-                child: [
			
 
				-                    { label: 'HaiShuQu' },
			
 
				-                    { label: 'JiangDongQu' },
			
 
				-                    { label: 'JiangBeiQu' },
			
 
				-                    { label: 'BeiLunQu' },
			
 
				-                    { label: 'ZhenHaiQu' },
			
 
				-                    { label: 'YinZhouQu' },
			
 
				-                ],
			
 
				-            },
			
 
				-            {
			
 
				-                label: 'WenZhou',
			
 
				-                child: [
			
 
				-                    { label: 'LuChengQu' },
			
 
				-                    { label: 'LongWanQu' },
			
 
				-                    { label: 'OuHaiQu' },
			
 
				-                    { label: 'DongTouQu' },
			
 
				-                    { label: 'YongJiaXian' },
			
 
				-                    { label: 'PingYangXian' },
			
 
				-                ],
			
 
				-            },
			
 
				-        ],
			
 
				-    },
			
 
				+	{
			
 
				+		label: 'YunNan',
			
 
				+		child: [
			
 
				+			{
			
 
				+				label: 'KunMing',
			
 
				+				child: [
			
 
				+					{ label: 'PanLongQu' },
			
 
				+					{ label: 'WuHuaQu' },
			
 
				+					{ label: 'GuanDuQu' },
			
 
				+					{ label: 'XiShanQu' },
			
 
				+					{ label: 'DongChuanQu' },
			
 
				+					{ label: 'ChengGongQu' },
			
 
				+					{ label: 'JinNingQu' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'QuJing',
			
 
				+				child: [
			
 
				+					{ label: 'QiLinQu' },
			
 
				+					{ label: 'ZhanYiQu' },
			
 
				+					{ label: 'MaLongXian' },
			
 
				+					{ label: 'LuLiangXian' },
			
 
				+					{ label: 'ShiZongXian' },
			
 
				+					{ label: 'LuoPingXian' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'YuXi',
			
 
				+				child: [
			
 
				+					{ label: 'HongTaQu' },
			
 
				+					{ label: 'JiangChuanQu' },
			
 
				+					{ label: 'ChengJiangXian' },
			
 
				+					{ label: 'TongHaiXian' },
			
 
				+					{ label: 'HuaNingXian' },
			
 
				+					{ label: 'YiMenXian' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		label: 'GuiZhou',
			
 
				+		child: [
			
 
				+			{
			
 
				+				label: 'GuiYang',
			
 
				+				child: [
			
 
				+					{ label: 'NanMingQu' },
			
 
				+					{ label: 'YunYanQu' },
			
 
				+					{ label: 'HuaXiQu' },
			
 
				+					{ label: 'WuDangQu' },
			
 
				+					{ label: 'BaiYunQu' },
			
 
				+					{ label: 'GuanShanHuQu' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'ZunYi',
			
 
				+				child: [
			
 
				+					{ label: 'HongHuaGangQu' },
			
 
				+					{ label: 'HuiChuanQu' },
			
 
				+					{ label: 'BoZhouQu' },
			
 
				+					{ label: 'TongZiXian' },
			
 
				+					{ label: 'SuiYangXian' },
			
 
				+					{ label: 'ZhengAnXian' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'LiuPanShui',
			
 
				+				child: [{ label: 'ZhongShanQu' }, { label: 'LiuZhiTeQu' }, { label: 'ShuiChengXian' }, { label: 'PanXian' }],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		label: 'SiChuan',
			
 
				+		child: [
			
 
				+			{
			
 
				+				label: 'ChengDu',
			
 
				+				child: [
			
 
				+					{ label: 'JinJiangQu' },
			
 
				+					{ label: 'QingYangQu' },
			
 
				+					{ label: 'JinNiuQu' },
			
 
				+					{ label: 'WuHouQu' },
			
 
				+					{ label: 'ChengHuaQu' },
			
 
				+					{ label: 'LongQuanYiQu' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'MianYang',
			
 
				+				child: [
			
 
				+					{ label: 'FuChengQu' },
			
 
				+					{ label: 'YouXianQu' },
			
 
				+					{ label: 'AnZhouQu' },
			
 
				+					{ label: 'SanTaiXian' },
			
 
				+					{ label: 'YanTingXian' },
			
 
				+					{ label: 'ZiTongXian' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'PanZhiHua',
			
 
				+				child: [{ label: 'DongQu' }, { label: 'XiQu' }, { label: 'RenHeQu' }, { label: 'MiYiXian' }, { label: 'YanBianXian' }],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		label: 'BeiJing',
			
 
				+		child: [
			
 
				+			{
			
 
				+				label: 'BeiJing',
			
 
				+				child: [
			
 
				+					{ label: 'DongChengQu' },
			
 
				+					{ label: 'XiChengQu' },
			
 
				+					{ label: 'ChaoYangQu' },
			
 
				+					{ label: 'FengTaiQu' },
			
 
				+					{ label: 'ShiJingShanQu' },
			
 
				+					{ label: 'HaiDianQu' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				+	{
			
 
				+		label: 'ZheJiang',
			
 
				+		child: [
			
 
				+			{
			
 
				+				label: 'HangZhou',
			
 
				+				child: [
			
 
				+					{ label: 'XiHuQu' },
			
 
				+					{ label: 'ShangChengQu' },
			
 
				+					{ label: 'XiaChengQu' },
			
 
				+					{ label: 'JiangGanQu' },
			
 
				+					{ label: 'GongShuQu' },
			
 
				+					{ label: 'BinJiangQu' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'NingBo',
			
 
				+				child: [
			
 
				+					{ label: 'HaiShuQu' },
			
 
				+					{ label: 'JiangDongQu' },
			
 
				+					{ label: 'JiangBeiQu' },
			
 
				+					{ label: 'BeiLunQu' },
			
 
				+					{ label: 'ZhenHaiQu' },
			
 
				+					{ label: 'YinZhouQu' },
			
 
				+				],
			
 
				+			},
			
 
				+			{
			
 
				+				label: 'WenZhou',
			
 
				+				child: [
			
 
				+					{ label: 'LuChengQu' },
			
 
				+					{ label: 'LongWanQu' },
			
 
				+					{ label: 'OuHaiQu' },
			
 
				+					{ label: 'DongTouQu' },
			
 
				+					{ label: 'YongJiaXian' },
			
 
				+					{ label: 'PingYangXian' },
			
 
				+				],
			
 
				+			},
			
 
				+		],
			
 
				+	},
			
 
				 ];
			
 
				 
			
 
				 export { someProvinceList, weekList, amOrPmList, timeList, cityList, linkageData, linkagDiffLabelKeyData, linkagCustomChildrenKeyData };
			
--- a/demo/src/pages/placeholder/PlaceholderDemo.svelte
+++ b/demo/src/pages/placeholder/PlaceholderDemo.svelte
@@ -1,6 +1,6 @@
 
				 <!-- Placeholder Demo -->
			
 
				 <script>
			
 
				-    import { Placeholder, Grids, Grid } from 'stdf';
			
 
				+	import { Placeholder, Grids, Grid } from 'stdf';
			
 
				 </script>
			
 
				 
			
 
				 <div class="m-4 font-bold text-lg">基础用法</div>
			
@@ -11,9 +11,9 @@
 
				 
			
 
				 <div class="m-4 font-bold text-lg">不同圆角</div>
			
 
				 <div class="flex flex-col space-y-4">
			
 
				-    <Placeholder radius="none">无圆角</Placeholder>
			
 
				-    <Placeholder radius="xl">XL 圆角</Placeholder>
			
 
				-    <Placeholder radius="full">全圆角</Placeholder>
			
 
				+	<Placeholder radius="none">无圆角</Placeholder>
			
 
				+	<Placeholder radius="xl">XL 圆角</Placeholder>
			
 
				+	<Placeholder radius="full">全圆角</Placeholder>
			
 
				 </div>
			
 
				 
			
 
				 <div class="m-4 font-bold text-lg">有阴影</div>
			
@@ -24,11 +24,11 @@
 
				 
			
 
				 <div class="m-4 font-bold text-lg">与 Grids 结合</div>
			
 
				 <Grids>
			
 
				-    <Grid row={3} col={2}><Placeholder>3﹡2</Placeholder></Grid>
			
 
				-    <Grid col={3}><Placeholder>1﹡3</Placeholder></Grid>
			
 
				-    <Grid row={3}><Placeholder>3﹡1</Placeholder></Grid>
			
 
				-    <Grid row={2} col={2}><Placeholder>2﹡2</Placeholder></Grid>
			
 
				-    <Grid><Placeholder>1﹡1</Placeholder></Grid>
			
 
				-    <Grid><Placeholder>1﹡1</Placeholder></Grid>
			
 
				+	<Grid row={3} col={2}><Placeholder>3﹡2</Placeholder></Grid>
			
 
				+	<Grid col={3}><Placeholder>1﹡3</Placeholder></Grid>
			
 
				+	<Grid row={3}><Placeholder>3﹡1</Placeholder></Grid>
			
 
				+	<Grid row={2} col={2}><Placeholder>2﹡2</Placeholder></Grid>
			
 
				+	<Grid><Placeholder>1﹡1</Placeholder></Grid>
			
 
				+	<Grid><Placeholder>1﹡1</Placeholder></Grid>
			
 
				 </Grids>
			
 
				-<div class='pb-4'></div>
			
 
				+<div class="pb-4"></div>
			
--- a/demo/src/pages/placeholder/PlaceholderDemo_en.svelte
+++ b/demo/src/pages/placeholder/PlaceholderDemo_en.svelte
@@ -1,6 +1,6 @@
 
				 <!-- Placeholder Demo -->
			
 
				 <script>
			
 
				-    import { Placeholder, Grids, Grid } from 'stdf';
			
 
				+	import { Placeholder, Grids, Grid } from 'stdf';
			
 
				 </script>
			
 
				 
			
 
				 <div class="m-4 font-bold text-lg">Basic usage</div>
			
@@ -11,9 +11,9 @@
 
				 
			
 
				 <div class="m-4 font-bold text-lg">Different fillet</div>
			
 
				 <div class="flex flex-col space-y-4">
			
 
				-    <Placeholder radius="none">unfillet</Placeholder>
			
 
				-    <Placeholder radius="xl">XL Rounded corner</Placeholder>
			
 
				-    <Placeholder radius="full">Full fillet</Placeholder>
			
 
				+	<Placeholder radius="none">unfillet</Placeholder>
			
 
				+	<Placeholder radius="xl">XL Rounded corner</Placeholder>
			
 
				+	<Placeholder radius="full">Full fillet</Placeholder>
			
 
				 </div>
			
 
				 
			
 
				 <div class="m-4 font-bold text-lg">shaded</div>
			
@@ -24,11 +24,11 @@
 
				 
			
 
				 <div class="m-4 font-bold text-lg">Combined with Grids</div>
			
 
				 <Grids>
			
 
				-    <Grid row={3} col={2}><Placeholder>3﹡2</Placeholder></Grid>
			
 
				-    <Grid col={3}><Placeholder>1﹡3</Placeholder></Grid>
			
 
				-    <Grid row={3}><Placeholder>3﹡1</Placeholder></Grid>
			
 
				-    <Grid row={2} col={2}><Placeholder>2﹡2</Placeholder></Grid>
			
 
				-    <Grid><Placeholder>1﹡1</Placeholder></Grid>
			
 
				-    <Grid><Placeholder>1﹡1</Placeholder></Grid>
			
 
				+	<Grid row={3} col={2}><Placeholder>3﹡2</Placeholder></Grid>
			
 
				+	<Grid col={3}><Placeholder>1﹡3</Placeholder></Grid>
			
 
				+	<Grid row={3}><Placeholder>3﹡1</Placeholder></Grid>
			
 
				+	<Grid row={2} col={2}><Placeholder>2﹡2</Placeholder></Grid>
			
 
				+	<Grid><Placeholder>1﹡1</Placeholder></Grid>
			
 
				+	<Grid><Placeholder>1﹡1</Placeholder></Grid>
			
 
				 </Grids>
			
 
				-<div class='pb-4'></div>
			
 
				+<div class="pb-4"></div>
			
--- a/demo/src/pages/popup/PopupDemo.svelte
+++ b/demo/src/pages/popup/PopupDemo.svelte
@@ -1,151 +1,149 @@
 
				 <!-- Popup Demo -->
			
 
				 <script>
			
 
				-    import { Cell, Popup, Button, Icon } from 'stdf';
			
 
				-    import Aphorism from '../../components/Aphorism.svelte';
			
 
				-
			
 
				-    let visible1 = false;
			
 
				-    let visible2 = false;
			
 
				-    let visible3 = false;
			
 
				-    let visible4 = false;
			
 
				-    let visible5 = false;
			
 
				-    let visible6 = false;
			
 
				-    let visible7 = false;
			
 
				-    let visible8 = false;
			
 
				-    let visible9 = false;
			
 
				-    let visible10 = false;
			
 
				-    let visible11 = false;
			
 
				-    let visible12 = false;
			
 
				-    let visible13 = false;
			
 
				-    let visible14 = false;
			
 
				-    let visible15 = false;
			
 
				-    let visible16 = false;
			
 
				-    let visible17 = false;
			
 
				-    let visible18 = false;
			
 
				-    let visible19 = false;
			
 
				-    let visible20 = false;
			
 
				-    let visible21 = false;
			
 
				-
			
 
				-    let size = 40;
			
 
				+	import { Cell, Popup, Button, Icon } from 'stdf';
			
 
				+	import Aphorism from '../../components/Aphorism.svelte';
			
 
				+
			
 
				+	let visible1 = false;
			
 
				+	let visible2 = false;
			
 
				+	let visible3 = false;
			
 
				+	let visible4 = false;
			
 
				+	let visible5 = false;
			
 
				+	let visible6 = false;
			
 
				+	let visible7 = false;
			
 
				+	let visible8 = false;
			
 
				+	let visible9 = false;
			
 
				+	let visible10 = false;
			
 
				+	let visible11 = false;
			
 
				+	let visible12 = false;
			
 
				+	let visible13 = false;
			
 
				+	let visible14 = false;
			
 
				+	let visible15 = false;
			
 
				+	let visible16 = false;
			
 
				+	let visible17 = false;
			
 
				+	let visible18 = false;
			
 
				+	let visible19 = false;
			
 
				+	let visible20 = false;
			
 
				+	let visible21 = false;
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-4">
			
 
				-    <Cell title="基础用法" on:click={() => (visible1 = true)} />
			
 
				-    <Popup bind:visible={visible1} />
			
 
				-
			
 
				-    <Cell title="顶部位置" on:click={() => (visible2 = true)} />
			
 
				-    <Popup bind:visible={visible2} position="top" />
			
 
				-
			
 
				-    <Cell title="左侧位置" on:click={() => (visible3 = true)} />
			
 
				-    <Popup bind:visible={visible3} position="left" />
			
 
				-
			
 
				-    <Cell title="右侧位置" on:click={() => (visible4 = true)} />
			
 
				-    <Popup bind:visible={visible4} position="right" />
			
 
				-
			
 
				-    <Cell title="中间位置" on:click={() => (visible5 = true)} />
			
 
				-    <Popup bind:visible={visible5} position="center" />
			
 
				-
			
 
				-    <Cell title="顶部位置有圆角" on:click={() => (visible6 = true)} />
			
 
				-    <Popup bind:visible={visible6} radius="xl" />
			
 
				-
			
 
				-    <Cell title="有圆角和间距" on:click={() => (visible7 = true)} />
			
 
				-    <Popup bind:visible={visible7} radiusPosition="all" radius="3xl" px="4" py="4" />
			
 
				-
			
 
				-    <Cell title="中间位置有间距和圆角" on:click={() => (visible10 = true)} />
			
 
				-    <Popup bind:visible={visible10} position="center" radiusPosition="all" radius="xl" px="8" />
			
 
				-
			
 
				-    <Cell title="设置出现动画缓动" detail="回弹" on:click={() => (visible11 = true)} />
			
 
				-    <Popup bind:visible={visible11} position="center" radiusPosition="all" radius="xl" px="8" easeType="backOut" />
			
 
				-
			
 
				-    <Cell title="换一个出现动画缓动" detail="弹跳" on:click={() => (visible16 = true)} />
			
 
				-    <Popup bind:visible={visible16} easeType="bounceOut" />
			
 
				-
			
 
				-    <Cell title="不同大小" on:click={() => (visible8 = true)} />
			
 
				-    <Popup bind:visible={visible8} size={80} />
			
 
				-
			
 
				-    <Cell title="左侧位置不同大小" on:click={() => (visible9 = true)} />
			
 
				-    <Popup bind:visible={visible9} size={80} position="left" />
			
 
				-
			
 
				-    <Cell title="遮罩完全透明且模糊" on:click={() => (visible12 = true)} />
			
 
				-    <Popup bind:visible={visible12} position="center" radiusPosition="all" radius="xl" px="8" mask={{ opacity: 0, backdropBlur: 'base' }} />
			
 
				-
			
 
				-    <Cell title="点击遮罩不会关闭" on:click={() => (visible13 = true)} />
			
 
				-    <Popup bind:visible={visible13} maskClosable={false}>
			
 
				-        <div class="flex flex-col justify-center h-full">
			
 
				-            <Button on:click={() => (visible13 = false)}>关闭</Button>
			
 
				-        </div>
			
 
				-    </Popup>
			
 
				-
			
 
				-    <Cell title="大小自动" detail="取决于内部元素" on:click={() => (visible14 = true)} />
			
 
				-    <Popup bind:visible={visible14} size={0} radiusPosition="all" radius="3xl" px="4" py="4" transitionDistance={353}>
			
 
				-        <div class="w-full text-center">
			
 
				-            <div class="py-6 font-bold text-xl">AirPods Pro 已连接</div>
			
 
				-            <div class="w-1/2 m-auto">
			
 
				-                <img class="w-full object-cover" src="/assets/images/airpods-pro2.png" alt="" />
			
 
				-            </div>
			
 
				-            <div class="flex justify-around py-6 text-primary dark:text-dark">
			
 
				-                <div>设置</div>
			
 
				-                <div>音乐</div>
			
 
				-            </div>
			
 
				-        </div>
			
 
				-    </Popup>
			
 
				-
			
 
				-    <Cell title="左侧位置自动大小" on:click={() => (visible20 = true)} />
			
 
				-    <Popup bind:visible={visible20} size={0} position="left" py="48" radiusPosition="right" radius="2xl" transitionDistance={80}>
			
 
				-        <div class="h-full flex flex-col justify-around text-primary dark:text-dark">
			
 
				-            <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-            <div class="p-6" on:click={() => (visible20 = false)}>首页</div>
			
 
				-            <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-            <div class="p-6" on:click={() => (visible20 = false)}>设置</div>
			
 
				-            <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-            <div class="p-6" on:click={() => (visible20 = false)}>关于</div>
			
 
				-        </div>
			
 
				-    </Popup>
			
 
				-
			
 
				-    <Cell title="大小自动背景透明" on:click={() => (visible17 = true)} />
			
 
				-    <Popup bind:visible={visible17} position="top" size={0} px="4" py="8" transparent transitionDistance={136}>
			
 
				-        <div class="w-full bg-black text-white rounded-full flex justify-between p-3">
			
 
				-            <div class="flex">
			
 
				-                <div class="w-12 h-12 rounded-full overflow-hidden">
			
 
				-                    <img class="w-full object-cover" src="/assets/images/avatar_1.jpg" alt="" />
			
 
				-                </div>
			
 
				-                <div class="flex flex-col justify-end pl-4">
			
 
				-                    <div class="text-xs text-white/40">手机</div>
			
 
				-                    <div>胡歌</div>
			
 
				-                </div>
			
 
				-            </div>
			
 
				-            <div class="flex space-x-3">
			
 
				-                <div
			
 
				-                    class="w-12 h-12 rounded-full bg-[#ff3b30] flex flex-col justify-center items-center"
			
 
				-                    style="transform: rotate(135deg);"
			
 
				-                >
			
 
				-                    <Icon name="ri-phone-fill" />
			
 
				-                </div>
			
 
				-                <div class="w-12 h-12 rounded-full bg-[#4cd964] flex flex-col justify-center items-center">
			
 
				-                    <Icon name="ri-phone-fill" />
			
 
				-                </div>
			
 
				-            </div>
			
 
				-        </div>
			
 
				-    </Popup>
			
 
				-
			
 
				-    <Cell title="居中位置背景透明" on:click={() => (visible18 = true)} />
			
 
				-    <Popup bind:visible={visible18} size={0} position="center" transparent>
			
 
				-        <div class="flex flex-col justify-center">
			
 
				-            <div class="w-1/2 m-auto">
			
 
				-                <img class="w-full object-cover" src="/assets/images/airpods-pro2.png" alt="" />
			
 
				-            </div>
			
 
				-        </div>
			
 
				-    </Popup>
			
 
				-
			
 
				-    <Cell title="反色遮罩" on:click={() => (visible15 = true)} />
			
 
				-    <Popup bind:visible={visible15} mask={{ inverse: true }} />
			
 
				-
			
 
				-    <Cell title="溢出滚动" on:click={() => (visible19 = true)} />
			
 
				-    <Popup bind:visible={visible19} size={30} position="center">
			
 
				-        <Aphorism num={4} />
			
 
				-    </Popup>
			
 
				-
			
 
				-    <Cell title="允许 body 滚动" on:click={() => (visible21 = true)} />
			
 
				-    <Popup bind:visible={visible21} allowBodyScroll />
			
 
				+	<Cell title="基础用法" on:click={() => (visible1 = true)} />
			
 
				+	<Popup bind:visible={visible1} />
			
 
				+
			
 
				+	<Cell title="顶部位置" on:click={() => (visible2 = true)} />
			
 
				+	<Popup bind:visible={visible2} position="top" />
			
 
				+
			
 
				+	<Cell title="左侧位置" on:click={() => (visible3 = true)} />
			
 
				+	<Popup bind:visible={visible3} position="left" />
			
 
				+
			
 
				+	<Cell title="右侧位置" on:click={() => (visible4 = true)} />
			
 
				+	<Popup bind:visible={visible4} position="right" />
			
 
				+
			
 
				+	<Cell title="中间位置" on:click={() => (visible5 = true)} />
			
 
				+	<Popup bind:visible={visible5} position="center" />
			
 
				+
			
 
				+	<Cell title="顶部位置有圆角" on:click={() => (visible6 = true)} />
			
 
				+	<Popup bind:visible={visible6} radius="xl" />
			
 
				+
			
 
				+	<Cell title="有圆角和间距" on:click={() => (visible7 = true)} />
			
 
				+	<Popup bind:visible={visible7} radiusPosition="all" radius="3xl" px="4" py="4" />
			
 
				+
			
 
				+	<Cell title="中间位置有间距和圆角" on:click={() => (visible10 = true)} />
			
 
				+	<Popup bind:visible={visible10} position="center" radiusPosition="all" radius="xl" px="8" />
			
 
				+
			
 
				+	<Cell title="设置出现动画缓动" detail="回弹" on:click={() => (visible11 = true)} />
			
 
				+	<Popup bind:visible={visible11} position="center" radiusPosition="all" radius="xl" px="8" easeType="backOut" />
			
 
				+
			
 
				+	<Cell title="换一个出现动画缓动" detail="弹跳" on:click={() => (visible16 = true)} />
			
 
				+	<Popup bind:visible={visible16} easeType="bounceOut" />
			
 
				+
			
 
				+	<Cell title="不同大小" on:click={() => (visible8 = true)} />
			
 
				+	<Popup bind:visible={visible8} size={80} />
			
 
				+
			
 
				+	<Cell title="左侧位置不同大小" on:click={() => (visible9 = true)} />
			
 
				+	<Popup bind:visible={visible9} size={80} position="left" />
			
 
				+
			
 
				+	<Cell title="遮罩完全透明且模糊" on:click={() => (visible12 = true)} />
			
 
				+	<Popup bind:visible={visible12} position="center" radiusPosition="all" radius="xl" px="8" mask={{ opacity: 0, backdropBlur: 'base' }} />
			
 
				+
			
 
				+	<Cell title="点击遮罩不会关闭" on:click={() => (visible13 = true)} />
			
 
				+	<Popup bind:visible={visible13} maskClosable={false}>
			
 
				+		<div class="flex flex-col justify-center h-full">
			
 
				+			<Button on:click={() => (visible13 = false)}>关闭</Button>
			
 
				+		</div>
			
 
				+	</Popup>
			
 
				+
			
 
				+	<Cell title="大小自动" detail="取决于内部元素" on:click={() => (visible14 = true)} />
			
 
				+	<Popup bind:visible={visible14} size={0} radiusPosition="all" radius="3xl" px="4" py="4" transitionDistance={353}>
			
 
				+		<div class="w-full text-center">
			
 
				+			<div class="py-6 font-bold text-xl">AirPods Pro 已连接</div>
			
 
				+			<div class="w-1/2 m-auto">
			
 
				+				<img class="w-full object-cover" src="/assets/images/airpods-pro2.png" alt="" />
			
 
				+			</div>
			
 
				+			<div class="flex justify-around py-6 text-primary dark:text-dark">
			
 
				+				<div>设置</div>
			
 
				+				<div>音乐</div>
			
 
				+			</div>
			
 
				+		</div>
			
 
				+	</Popup>
			
 
				+
			
 
				+	<Cell title="左侧位置自动大小" on:click={() => (visible20 = true)} />
			
 
				+	<Popup bind:visible={visible20} size={0} position="left" py="48" radiusPosition="right" radius="2xl" transitionDistance={80}>
			
 
				+		<div class="h-full flex flex-col justify-around text-primary dark:text-dark">
			
 
				+			<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+			<!-- svelte-ignore a11y-no-static-element-interactions -->
			
 
				+			<div class="p-6" on:click={() => (visible20 = false)}>首页</div>
			
 
				+			<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+			<!-- svelte-ignore a11y-no-static-element-interactions -->
			
 
				+			<div class="p-6" on:click={() => (visible20 = false)}>设置</div>
			
 
				+			<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+			<!-- svelte-ignore a11y-no-static-element-interactions -->
			
 
				+			<div class="p-6" on:click={() => (visible20 = false)}>关于</div>
			
 
				+		</div>
			
 
				+	</Popup>
			
 
				+
			
 
				+	<Cell title="大小自动背景透明" on:click={() => (visible17 = true)} />
			
 
				+	<Popup bind:visible={visible17} position="top" size={0} px="4" py="8" transparent transitionDistance={136}>
			
 
				+		<div class="w-full bg-black text-white rounded-full flex justify-between p-3">
			
 
				+			<div class="flex">
			
 
				+				<div class="w-12 h-12 rounded-full overflow-hidden">
			
 
				+					<img class="w-full object-cover" src="/assets/images/avatar_1.jpg" alt="" />
			
 
				+				</div>
			
 
				+				<div class="flex flex-col justify-end pl-4">
			
 
				+					<div class="text-xs text-white/40">手机</div>
			
 
				+					<div>胡歌</div>
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="flex space-x-3">
			
 
				+				<div class="w-12 h-12 rounded-full bg-[#ff3b30] flex flex-col justify-center items-center" style="transform: rotate(135deg);">
			
 
				+					<Icon name="ri-phone-fill" />
			
 
				+				</div>
			
 
				+				<div class="w-12 h-12 rounded-full bg-[#4cd964] flex flex-col justify-center items-center">
			
 
				+					<Icon name="ri-phone-fill" />
			
 
				+				</div>
			
 
				+			</div>
			
 
				+		</div>
			
 
				+	</Popup>
			
 
				+
			
 
				+	<Cell title="居中位置背景透明" on:click={() => (visible18 = true)} />
			
 
				+	<Popup bind:visible={visible18} size={0} position="center" transparent>
			
 
				+		<div class="flex flex-col justify-center">
			
 
				+			<div class="w-1/2 m-auto">
			
 
				+				<img class="w-full object-cover" src="/assets/images/airpods-pro2.png" alt="" />
			
 
				+			</div>
			
 
				+		</div>
			
 
				+	</Popup>
			
 
				+
			
 
				+	<Cell title="反色遮罩" on:click={() => (visible15 = true)} />
			
 
				+	<Popup bind:visible={visible15} mask={{ inverse: true }} />
			
 
				+
			
 
				+	<Cell title="溢出滚动" on:click={() => (visible19 = true)} />
			
 
				+	<Popup bind:visible={visible19} size={30} position="center">
			
 
				+		<Aphorism num={4} />
			
 
				+	</Popup>
			
 
				+
			
 
				+	<Cell title="允许 body 滚动" on:click={() => (visible21 = true)} />
			
 
				+	<Popup bind:visible={visible21} allowBodyScroll />
			
 
				 </div>
			
 
				 
			
 
				 <!-- Aphorism.svelte -->
			
--- a/demo/src/pages/popup/PopupDemo_en.svelte
+++ b/demo/src/pages/popup/PopupDemo_en.svelte
@@ -1,151 +1,149 @@
 
				 <!-- Popup Demo -->
			
 
				 <script>
			
 
				-    import { Cell, Popup, Button, Icon } from 'stdf';
			
 
				-    import Aphorism from '../../components/Aphorism.svelte';
			
 
				-
			
 
				-    let visible1 = false;
			
 
				-    let visible2 = false;
			
 
				-    let visible3 = false;
			
 
				-    let visible4 = false;
			
 
				-    let visible5 = false;
			
 
				-    let visible6 = false;
			
 
				-    let visible7 = false;
			
 
				-    let visible8 = false;
			
 
				-    let visible9 = false;
			
 
				-    let visible10 = false;
			
 
				-    let visible11 = false;
			
 
				-    let visible12 = false;
			
 
				-    let visible13 = false;
			
 
				-    let visible14 = false;
			
 
				-    let visible15 = false;
			
 
				-    let visible16 = false;
			
 
				-    let visible17 = false;
			
 
				-    let visible18 = false;
			
 
				-    let visible19 = false;
			
 
				-    let visible20 = false;
			
 
				-    let visible21 = false;
			
 
				-
			
 
				-    let size = 40;
			
 
				+	import { Cell, Popup, Button, Icon } from 'stdf';
			
 
				+	import Aphorism from '../../components/Aphorism.svelte';
			
 
				+
			
 
				+	let visible1 = false;
			
 
				+	let visible2 = false;
			
 
				+	let visible3 = false;
			
 
				+	let visible4 = false;
			
 
				+	let visible5 = false;
			
 
				+	let visible6 = false;
			
 
				+	let visible7 = false;
			
 
				+	let visible8 = false;
			
 
				+	let visible9 = false;
			
 
				+	let visible10 = false;
			
 
				+	let visible11 = false;
			
 
				+	let visible12 = false;
			
 
				+	let visible13 = false;
			
 
				+	let visible14 = false;
			
 
				+	let visible15 = false;
			
 
				+	let visible16 = false;
			
 
				+	let visible17 = false;
			
 
				+	let visible18 = false;
			
 
				+	let visible19 = false;
			
 
				+	let visible20 = false;
			
 
				+	let visible21 = false;
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-4">
			
 
				-    <Cell title="Basic usage" on:click={() => (visible1 = true)} />
			
 
				-    <Popup bind:visible={visible1} />
			
 
				-
			
 
				-    <Cell title="Top position" on:click={() => (visible2 = true)} />
			
 
				-    <Popup bind:visible={visible2} position="top" />
			
 
				-
			
 
				-    <Cell title="Left position" on:click={() => (visible3 = true)} />
			
 
				-    <Popup bind:visible={visible3} position="left" />
			
 
				-
			
 
				-    <Cell title="Right side position" on:click={() => (visible4 = true)} />
			
 
				-    <Popup bind:visible={visible4} position="right" />
			
 
				-
			
 
				-    <Cell title="Intermediate position" on:click={() => (visible5 = true)} />
			
 
				-    <Popup bind:visible={visible5} position="center" />
			
 
				-
			
 
				-    <Cell title="Rounded corners at the top" on:click={() => (visible6 = true)} />
			
 
				-    <Popup bind:visible={visible6} radius="xl" />
			
 
				-
			
 
				-    <Cell title="Have rounded corners and spacing" on:click={() => (visible7 = true)} />
			
 
				-    <Popup bind:visible={visible7} radiusPosition="all" radius="3xl" px="4" py="4" />
			
 
				-
			
 
				-    <Cell title="The center is spaced and rounded" on:click={() => (visible10 = true)} />
			
 
				-    <Popup bind:visible={visible10} position="center" radiusPosition="all" radius="xl" px="8" />
			
 
				-
			
 
				-    <Cell title="Set animation easing to appear" detail="rebound" on:click={() => (visible11 = true)} />
			
 
				-    <Popup bind:visible={visible11} position="center" radiusPosition="all" radius="xl" px="8" easeType="backOut" />
			
 
				-
			
 
				-    <Cell title="Let's replace it with a slow animation" detail="bounce" on:click={() => (visible16 = true)} />
			
 
				-    <Popup bind:visible={visible16} easeType="bounceOut" />
			
 
				-
			
 
				-    <Cell title="Different size" on:click={() => (visible8 = true)} />
			
 
				-    <Popup bind:visible={visible8} size={80} />
			
 
				-
			
 
				-    <Cell title="The left side has different sizes" on:click={() => (visible9 = true)} />
			
 
				-    <Popup bind:visible={visible9} size={80} position="left" />
			
 
				-
			
 
				-    <Cell title="The mask is completely transparent and fuzzy" on:click={() => (visible12 = true)} />
			
 
				-    <Popup bind:visible={visible12} position="center" radiusPosition="all" radius="xl" px="8" mask={{ opacity: 0, backdropBlur: 'base' }} />
			
 
				-
			
 
				-    <Cell title="Clicking the mask does not close" on:click={() => (visible13 = true)} />
			
 
				-    <Popup bind:visible={visible13} maskClosable={false}>
			
 
				-        <div class="flex flex-col justify-center h-full">
			
 
				-            <Button on:click={() => (visible13 = false)}>Shut down</Button>
			
 
				-        </div>
			
 
				-    </Popup>
			
 
				-
			
 
				-    <Cell title="Size automatic" detail="Depends on internal elements" on:click={() => (visible14 = true)} />
			
 
				-    <Popup bind:visible={visible14} size={0} radiusPosition="all" radius="3xl" px="4" py="4" transitionDistance={353}>
			
 
				-        <div class="w-full text-center">
			
 
				-            <div class="py-6 font-bold text-xl">AirPods Pro connected</div>
			
 
				-            <div class="w-1/2 m-auto">
			
 
				-                <img class="w-full object-cover" src="/assets/images/airpods-pro2.png" alt="" />
			
 
				-            </div>
			
 
				-            <div class="flex justify-around py-6 text-primary dark:text-dark">
			
 
				-                <div>set</div>
			
 
				-                <div>music</div>
			
 
				-            </div>
			
 
				-        </div>
			
 
				-    </Popup>
			
 
				-
			
 
				-    <Cell title="The left position is automatically sized" on:click={() => (visible20 = true)} />
			
 
				-    <Popup bind:visible={visible20} size={0} position="left" py="48" radiusPosition="right" radius="2xl" transitionDistance={80}>
			
 
				-        <div class="h-full flex flex-col justify-around text-primary dark:text-dark">
			
 
				-            <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-            <div class="p-6" on:click={() => (visible20 = false)}>Home page</div>
			
 
				-            <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-            <div class="p-6" on:click={() => (visible20 = false)}>set</div>
			
 
				-            <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-            <div class="p-6" on:click={() => (visible20 = false)}>about</div>
			
 
				-        </div>
			
 
				-    </Popup>
			
 
				-
			
 
				-    <Cell title="Size automatic background transparent" on:click={() => (visible17 = true)} />
			
 
				-    <Popup bind:visible={visible17} position="top" size={0} px="4" py="8" transparent transitionDistance={136}>
			
 
				-        <div class="w-full bg-black text-white rounded-full flex justify-between p-3">
			
 
				-            <div class="flex">
			
 
				-                <div class="w-12 h-12 rounded-full overflow-hidden">
			
 
				-                    <img class="w-full object-cover" src="/assets/images/avatar_1.jpg" alt="" />
			
 
				-                </div>
			
 
				-                <div class="flex flex-col justify-end pl-4">
			
 
				-                    <div class="text-xs text-white/40">Mobile phone</div>
			
 
				-                    <div>Hu Ge</div>
			
 
				-                </div>
			
 
				-            </div>
			
 
				-            <div class="flex space-x-3">
			
 
				-                <div
			
 
				-                    class="w-12 h-12 rounded-full bg-[#ff3b30] flex flex-col justify-center items-center"
			
 
				-                    style="transform: rotate(135deg);"
			
 
				-                >
			
 
				-                    <Icon name="ri-phone-fill" />
			
 
				-                </div>
			
 
				-                <div class="w-12 h-12 rounded-full bg-[#4cd964] flex flex-col justify-center items-center">
			
 
				-                    <Icon name="ri-phone-fill" />
			
 
				-                </div>
			
 
				-            </div>
			
 
				-        </div>
			
 
				-    </Popup>
			
 
				-
			
 
				-    <Cell title="The center position has a transparent background" on:click={() => (visible18 = true)} />
			
 
				-    <Popup bind:visible={visible18} size={0} position="center" transparent>
			
 
				-        <div class="flex flex-col justify-center">
			
 
				-            <div class="w-1/2 m-auto">
			
 
				-                <img class="w-full object-cover" src="/assets/images/airpods-pro2.png" alt="" />
			
 
				-            </div>
			
 
				-        </div>
			
 
				-    </Popup>
			
 
				-
			
 
				-    <Cell title="Reverse color mask" on:click={() => (visible15 = true)} />
			
 
				-    <Popup bind:visible={visible15} mask={{ inverse: true }} />
			
 
				-
			
 
				-    <Cell title="Overflow roll" on:click={() => (visible19 = true)} />
			
 
				-    <Popup bind:visible={visible19} size={30} position="center">
			
 
				-        <Aphorism num={4} />
			
 
				-    </Popup>
			
 
				-
			
 
				-    <Cell title="allow body roll" on:click={() => (visible21 = true)} />
			
 
				-    <Popup bind:visible={visible21} allowBodyScroll />
			
 
				+	<Cell title="Basic usage" on:click={() => (visible1 = true)} />
			
 
				+	<Popup bind:visible={visible1} />
			
 
				+
			
 
				+	<Cell title="Top position" on:click={() => (visible2 = true)} />
			
 
				+	<Popup bind:visible={visible2} position="top" />
			
 
				+
			
 
				+	<Cell title="Left position" on:click={() => (visible3 = true)} />
			
 
				+	<Popup bind:visible={visible3} position="left" />
			
 
				+
			
 
				+	<Cell title="Right side position" on:click={() => (visible4 = true)} />
			
 
				+	<Popup bind:visible={visible4} position="right" />
			
 
				+
			
 
				+	<Cell title="Intermediate position" on:click={() => (visible5 = true)} />
			
 
				+	<Popup bind:visible={visible5} position="center" />
			
 
				+
			
 
				+	<Cell title="Rounded corners at the top" on:click={() => (visible6 = true)} />
			
 
				+	<Popup bind:visible={visible6} radius="xl" />
			
 
				+
			
 
				+	<Cell title="Have rounded corners and spacing" on:click={() => (visible7 = true)} />
			
 
				+	<Popup bind:visible={visible7} radiusPosition="all" radius="3xl" px="4" py="4" />
			
 
				+
			
 
				+	<Cell title="The center is spaced and rounded" on:click={() => (visible10 = true)} />
			
 
				+	<Popup bind:visible={visible10} position="center" radiusPosition="all" radius="xl" px="8" />
			
 
				+
			
 
				+	<Cell title="Set animation easing to appear" detail="rebound" on:click={() => (visible11 = true)} />
			
 
				+	<Popup bind:visible={visible11} position="center" radiusPosition="all" radius="xl" px="8" easeType="backOut" />
			
 
				+
			
 
				+	<Cell title="Let's replace it with a slow animation" detail="bounce" on:click={() => (visible16 = true)} />
			
 
				+	<Popup bind:visible={visible16} easeType="bounceOut" />
			
 
				+
			
 
				+	<Cell title="Different size" on:click={() => (visible8 = true)} />
			
 
				+	<Popup bind:visible={visible8} size={80} />
			
 
				+
			
 
				+	<Cell title="The left side has different sizes" on:click={() => (visible9 = true)} />
			
 
				+	<Popup bind:visible={visible9} size={80} position="left" />
			
 
				+
			
 
				+	<Cell title="The mask is completely transparent and fuzzy" on:click={() => (visible12 = true)} />
			
 
				+	<Popup bind:visible={visible12} position="center" radiusPosition="all" radius="xl" px="8" mask={{ opacity: 0, backdropBlur: 'base' }} />
			
 
				+
			
 
				+	<Cell title="Clicking the mask does not close" on:click={() => (visible13 = true)} />
			
 
				+	<Popup bind:visible={visible13} maskClosable={false}>
			
 
				+		<div class="flex flex-col justify-center h-full">
			
 
				+			<Button on:click={() => (visible13 = false)}>Shut down</Button>
			
 
				+		</div>
			
 
				+	</Popup>
			
 
				+
			
 
				+	<Cell title="Size automatic" detail="Depends on internal elements" on:click={() => (visible14 = true)} />
			
 
				+	<Popup bind:visible={visible14} size={0} radiusPosition="all" radius="3xl" px="4" py="4" transitionDistance={353}>
			
 
				+		<div class="w-full text-center">
			
 
				+			<div class="py-6 font-bold text-xl">AirPods Pro connected</div>
			
 
				+			<div class="w-1/2 m-auto">
			
 
				+				<img class="w-full object-cover" src="/assets/images/airpods-pro2.png" alt="" />
			
 
				+			</div>
			
 
				+			<div class="flex justify-around py-6 text-primary dark:text-dark">
			
 
				+				<div>set</div>
			
 
				+				<div>music</div>
			
 
				+			</div>
			
 
				+		</div>
			
 
				+	</Popup>
			
 
				+
			
 
				+	<Cell title="The left position is automatically sized" on:click={() => (visible20 = true)} />
			
 
				+	<Popup bind:visible={visible20} size={0} position="left" py="48" radiusPosition="right" radius="2xl" transitionDistance={80}>
			
 
				+		<div class="h-full flex flex-col justify-around text-primary dark:text-dark">
			
 
				+			<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+			<!-- svelte-ignore a11y-no-static-element-interactions -->
			
 
				+			<div class="p-6" on:click={() => (visible20 = false)}>Home page</div>
			
 
				+			<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+			<!-- svelte-ignore a11y-no-static-element-interactions -->
			
 
				+			<div class="p-6" on:click={() => (visible20 = false)}>set</div>
			
 
				+			<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+			<!-- svelte-ignore a11y-no-static-element-interactions -->
			
 
				+			<div class="p-6" on:click={() => (visible20 = false)}>about</div>
			
 
				+		</div>
			
 
				+	</Popup>
			
 
				+
			
 
				+	<Cell title="Size automatic background transparent" on:click={() => (visible17 = true)} />
			
 
				+	<Popup bind:visible={visible17} position="top" size={0} px="4" py="8" transparent transitionDistance={136}>
			
 
				+		<div class="w-full bg-black text-white rounded-full flex justify-between p-3">
			
 
				+			<div class="flex">
			
 
				+				<div class="w-12 h-12 rounded-full overflow-hidden">
			
 
				+					<img class="w-full object-cover" src="/assets/images/avatar_1.jpg" alt="" />
			
 
				+				</div>
			
 
				+				<div class="flex flex-col justify-end pl-4">
			
 
				+					<div class="text-xs text-white/40">Mobile phone</div>
			
 
				+					<div>Hu Ge</div>
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<div class="flex space-x-3">
			
 
				+				<div class="w-12 h-12 rounded-full bg-[#ff3b30] flex flex-col justify-center items-center" style="transform: rotate(135deg);">
			
 
				+					<Icon name="ri-phone-fill" />
			
 
				+				</div>
			
 
				+				<div class="w-12 h-12 rounded-full bg-[#4cd964] flex flex-col justify-center items-center">
			
 
				+					<Icon name="ri-phone-fill" />
			
 
				+				</div>
			
 
				+			</div>
			
 
				+		</div>
			
 
				+	</Popup>
			
 
				+
			
 
				+	<Cell title="The center position has a transparent background" on:click={() => (visible18 = true)} />
			
 
				+	<Popup bind:visible={visible18} size={0} position="center" transparent>
			
 
				+		<div class="flex flex-col justify-center">
			
 
				+			<div class="w-1/2 m-auto">
			
 
				+				<img class="w-full object-cover" src="/assets/images/airpods-pro2.png" alt="" />
			
 
				+			</div>
			
 
				+		</div>
			
 
				+	</Popup>
			
 
				+
			
 
				+	<Cell title="Reverse color mask" on:click={() => (visible15 = true)} />
			
 
				+	<Popup bind:visible={visible15} mask={{ inverse: true }} />
			
 
				+
			
 
				+	<Cell title="Overflow roll" on:click={() => (visible19 = true)} />
			
 
				+	<Popup bind:visible={visible19} size={30} position="center">
			
 
				+		<Aphorism num={4} />
			
 
				+	</Popup>
			
 
				+
			
 
				+	<Cell title="allow body roll" on:click={() => (visible21 = true)} />
			
 
				+	<Popup bind:visible={visible21} allowBodyScroll />
			
 
				 </div>
			
 
				 
			
 
				 <!-- Aphorism.svelte -->
			
--- a/demo/src/pages/progress/ProgressDemo.svelte
+++ b/demo/src/pages/progress/ProgressDemo.svelte
@@ -1,92 +1,95 @@
 
				 <!--Progress Demo-->
			
 
				 <script>
			
 
				-    import { Progress, Button } from 'stdf';
			
 
				+	import { Progress, Button } from 'stdf';
			
 
				 
			
 
				-    let percent = 20;
			
 
				-    const changePercentFun = type => {
			
 
				-        if (type === '+10') {
			
 
				-            percent += 10;
			
 
				-            if (percent > 100) {
			
 
				-                percent = 100;
			
 
				-            }
			
 
				-        } else {
			
 
				-            percent -= 10;
			
 
				-            if (percent < 0) {
			
 
				-                percent = 0;
			
 
				-            }
			
 
				-        }
			
 
				-    };
			
 
				+	let percent = 20;
			
 
				+	const changePercentFun = type => {
			
 
				+		if (type === '+10') {
			
 
				+			percent += 10;
			
 
				+			if (percent > 100) {
			
 
				+				percent = 100;
			
 
				+			}
			
 
				+		} else {
			
 
				+			percent -= 10;
			
 
				+			if (percent < 0) {
			
 
				+				percent = 0;
			
 
				+			}
			
 
				+		}
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="px-4 pb-8">
			
 
				-    <div class="m-4 mt-8 font-bold text-lg">基础用法</div>
			
 
				-    <Progress />
			
 
				+	<div class="m-4 mt-8 font-bold text-lg">基础用法</div>
			
 
				+	<Progress />
			
 
				 
			
 
				-    <div class="m-4 mt-8 font-bold text-lg">不同高度</div>
			
 
				-    <div class="flex flex-col space-y-4">
			
 
				-        <Progress height="1" />
			
 
				-        <Progress height="2" />
			
 
				-        <Progress height="3" />
			
 
				-        <Progress height="4" />
			
 
				-    </div>
			
 
				+	<div class="m-4 mt-8 font-bold text-lg">不同高度</div>
			
 
				+	<div class="flex flex-col space-y-4">
			
 
				+		<Progress height="1" />
			
 
				+		<Progress height="2" />
			
 
				+		<Progress height="3" />
			
 
				+		<Progress height="4" />
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="m-4 mt-8 font-bold text-lg">百分比不同位置</div>
			
 
				-    <div class="flex flex-col space-y-4">
			
 
				-        <Progress />
			
 
				-        <Progress percentPosition="inner" />
			
 
				-        <Progress percentPosition="block" />
			
 
				-        <Progress percentPosition="none" />
			
 
				-    </div>
			
 
				+	<div class="m-4 mt-8 font-bold text-lg">百分比不同位置</div>
			
 
				+	<div class="flex flex-col space-y-4">
			
 
				+		<Progress />
			
 
				+		<Progress percentPosition="inner" />
			
 
				+		<Progress percentPosition="block" />
			
 
				+		<Progress percentPosition="none" />
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="m-4 mt-8 font-bold text-lg">不同圆角风格</div>
			
 
				-    <div class="flex flex-col space-y-4">
			
 
				-        <Progress radius="none" />
			
 
				-        <Progress radius="base" />
			
 
				-        <Progress radius="none" percentPosition="block" />
			
 
				-        <Progress radius="base" percentPosition="block" />
			
 
				-        <Progress percentPosition="block" />
			
 
				-    </div>
			
 
				+	<div class="m-4 mt-8 font-bold text-lg">不同圆角风格</div>
			
 
				+	<div class="flex flex-col space-y-4">
			
 
				+		<Progress radius="none" />
			
 
				+		<Progress radius="base" />
			
 
				+		<Progress radius="none" percentPosition="block" />
			
 
				+		<Progress radius="base" percentPosition="block" />
			
 
				+		<Progress percentPosition="block" />
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="m-4 mt-8 font-bold text-lg">置灰</div>
			
 
				-    <div class="flex flex-col space-y-4">
			
 
				-        <Progress inactive />
			
 
				-        <Progress inactive percentPosition="block" />
			
 
				-    </div>
			
 
				+	<div class="m-4 mt-8 font-bold text-lg">置灰</div>
			
 
				+	<div class="flex flex-col space-y-4">
			
 
				+		<Progress inactive />
			
 
				+		<Progress inactive percentPosition="block" />
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="m-4 mt-8 font-bold text-lg">过渡效果</div>
			
 
				-    <div class="flex flex-col space-y-4 mb-4 px-2">
			
 
				-        <Progress {percent} />
			
 
				-        <Progress {percent} percentPosition="inner" />
			
 
				-        <Progress {percent} percentPosition="block" />
			
 
				-        <Progress {percent} duration="500" />
			
 
				-        <Progress {percent} duration="1000" />
			
 
				-    </div>
			
 
				-    <Button heightIn="0" group size="full">
			
 
				-        <div class="flex">
			
 
				-            <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-            <div class="flex-1 border-r py-2 active:opacity-80" on:click={() => changePercentFun('-10')}>进度 -10</div>
			
 
				-            <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-            <div class="flex-1 border-r py-2 active:opacity-80" on:click={() => changePercentFun('+10')}>进度 +10</div>
			
 
				-            <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-            <div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>重置</div>
			
 
				-        </div>
			
 
				-    </Button>
			
 
				+	<div class="m-4 mt-8 font-bold text-lg">过渡效果</div>
			
 
				+	<div class="flex flex-col space-y-4 mb-4 px-2">
			
 
				+		<Progress {percent} />
			
 
				+		<Progress {percent} percentPosition="inner" />
			
 
				+		<Progress {percent} percentPosition="block" />
			
 
				+		<Progress {percent} duration="500" />
			
 
				+		<Progress {percent} duration="1000" />
			
 
				+	</div>
			
 
				+	<Button heightIn="0" group size="full">
			
 
				+		<div class="flex">
			
 
				+			<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+			<!-- svelte-ignore a11y-no-static-element-interactions -->
			
 
				+			<div class="flex-1 border-r py-2 active:opacity-80" on:click={() => changePercentFun('-10')}>进度 -10</div>
			
 
				+			<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+			<!-- svelte-ignore a11y-no-static-element-interactions -->
			
 
				+			<div class="flex-1 border-r py-2 active:opacity-80" on:click={() => changePercentFun('+10')}>进度 +10</div>
			
 
				+			<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+			<!-- svelte-ignore a11y-no-static-element-interactions -->
			
 
				+			<div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>重置</div>
			
 
				+		</div>
			
 
				+	</Button>
			
 
				 
			
 
				-    <div class="m-4 mt-8 font-bold text-lg">自定义颜色</div>
			
 
				-    <div class="flex flex-col space-y-4">
			
 
				-        <Progress injClass="bg-success dark:bg-error" />
			
 
				-        <Progress injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]" />
			
 
				-        <Progress percentPosition="block" injClass="bg-orange" />
			
 
				-        <Progress trackInjClass="!bg-primary/20 dark:!bg-dark/20" />
			
 
				-    </div>
			
 
				+	<div class="m-4 mt-8 font-bold text-lg">自定义颜色</div>
			
 
				+	<div class="flex flex-col space-y-4">
			
 
				+		<Progress injClass="bg-success dark:bg-error" />
			
 
				+		<Progress injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]" />
			
 
				+		<Progress percentPosition="block" injClass="bg-orange" />
			
 
				+		<Progress trackInjClass="!bg-primary/20 dark:!bg-dark/20" />
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="m-4 mt-8 font-bold text-lg">自定义文字</div>
			
 
				-    <div class="flex flex-col space-y-4">
			
 
				-        <Progress useSlot>
			
 
				-            <div class="text-xs whitespace-nowrap">已完成 2/3</div>
			
 
				-        </Progress>
			
 
				-        <Progress useSlot percentPosition="block">
			
 
				-            <div class="text-xs whitespace-nowrap">已完成 2/3</div>
			
 
				-        </Progress>
			
 
				-    </div>
			
 
				+	<div class="m-4 mt-8 font-bold text-lg">自定义文字</div>
			
 
				+	<div class="flex flex-col space-y-4">
			
 
				+		<Progress useSlot>
			
 
				+			<div class="text-xs whitespace-nowrap">已完成 2/3</div>
			
 
				+		</Progress>
			
 
				+		<Progress useSlot percentPosition="block">
			
 
				+			<div class="text-xs whitespace-nowrap">已完成 2/3</div>
			
 
				+		</Progress>
			
 
				+	</div>
			
 
				 </div>
			
--- a/demo/src/pages/progress/ProgressDemo_en.svelte
+++ b/demo/src/pages/progress/ProgressDemo_en.svelte
@@ -1,92 +1,95 @@
 
				 <!--Progress Demo-->
			
 
				 <script>
			
 
				-    import { Progress, Button } from 'stdf';
			
 
				+	import { Progress, Button } from 'stdf';
			
 
				 
			
 
				-    let percent = 20;
			
 
				-    const changePercentFun = type => {
			
 
				-        if (type === '+10') {
			
 
				-            percent += 10;
			
 
				-            if (percent > 100) {
			
 
				-                percent = 100;
			
 
				-            }
			
 
				-        } else {
			
 
				-            percent -= 10;
			
 
				-            if (percent < 0) {
			
 
				-                percent = 0;
			
 
				-            }
			
 
				-        }
			
 
				-    };
			
 
				+	let percent = 20;
			
 
				+	const changePercentFun = type => {
			
 
				+		if (type === '+10') {
			
 
				+			percent += 10;
			
 
				+			if (percent > 100) {
			
 
				+				percent = 100;
			
 
				+			}
			
 
				+		} else {
			
 
				+			percent -= 10;
			
 
				+			if (percent < 0) {
			
 
				+				percent = 0;
			
 
				+			}
			
 
				+		}
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="px-4 pb-8">
			
 
				-    <div class="m-4 mt-8 font-bold text-lg">Basic usage</div>
			
 
				-    <Progress />
			
 
				+	<div class="m-4 mt-8 font-bold text-lg">Basic usage</div>
			
 
				+	<Progress />
			
 
				 
			
 
				-    <div class="m-4 mt-8 font-bold text-lg">Different heights</div>
			
 
				-    <div class="flex flex-col space-y-4">
			
 
				-        <Progress height="1" />
			
 
				-        <Progress height="2" />
			
 
				-        <Progress height="3" />
			
 
				-        <Progress height="4" />
			
 
				-    </div>
			
 
				+	<div class="m-4 mt-8 font-bold text-lg">Different heights</div>
			
 
				+	<div class="flex flex-col space-y-4">
			
 
				+		<Progress height="1" />
			
 
				+		<Progress height="2" />
			
 
				+		<Progress height="3" />
			
 
				+		<Progress height="4" />
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="m-4 mt-8 font-bold text-lg">Percentage different position</div>
			
 
				-    <div class="flex flex-col space-y-4">
			
 
				-        <Progress />
			
 
				-        <Progress percentPosition="inner" />
			
 
				-        <Progress percentPosition="block" />
			
 
				-        <Progress percentPosition="none" />
			
 
				-    </div>
			
 
				+	<div class="m-4 mt-8 font-bold text-lg">Percentage different position</div>
			
 
				+	<div class="flex flex-col space-y-4">
			
 
				+		<Progress />
			
 
				+		<Progress percentPosition="inner" />
			
 
				+		<Progress percentPosition="block" />
			
 
				+		<Progress percentPosition="none" />
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="m-4 mt-8 font-bold text-lg">Different styles of rounded corners</div>
			
 
				-    <div class="flex flex-col space-y-4">
			
 
				-        <Progress radius="none" />
			
 
				-        <Progress radius="base" />
			
 
				-        <Progress radius="none" percentPosition="block" />
			
 
				-        <Progress radius="base" percentPosition="block" />
			
 
				-        <Progress percentPosition="block" />
			
 
				-    </div>
			
 
				+	<div class="m-4 mt-8 font-bold text-lg">Different styles of rounded corners</div>
			
 
				+	<div class="flex flex-col space-y-4">
			
 
				+		<Progress radius="none" />
			
 
				+		<Progress radius="base" />
			
 
				+		<Progress radius="none" percentPosition="block" />
			
 
				+		<Progress radius="base" percentPosition="block" />
			
 
				+		<Progress percentPosition="block" />
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="m-4 mt-8 font-bold text-lg">Ash setting</div>
			
 
				-    <div class="flex flex-col space-y-4">
			
 
				-        <Progress inactive />
			
 
				-        <Progress inactive percentPosition="block" />
			
 
				-    </div>
			
 
				+	<div class="m-4 mt-8 font-bold text-lg">Ash setting</div>
			
 
				+	<div class="flex flex-col space-y-4">
			
 
				+		<Progress inactive />
			
 
				+		<Progress inactive percentPosition="block" />
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="m-4 mt-8 font-bold text-lg">Transition effect</div>
			
 
				-    <div class="flex flex-col space-y-4 mb-4 px-2">
			
 
				-        <Progress {percent} />
			
 
				-        <Progress {percent} percentPosition="inner" />
			
 
				-        <Progress {percent} percentPosition="block" />
			
 
				-        <Progress {percent} duration="500" />
			
 
				-        <Progress {percent} duration="1000" />
			
 
				-    </div>
			
 
				-    <Button heightIn="0" group size="full">
			
 
				-        <div class="flex">
			
 
				-            <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-            <div class="flex-1 border-r py-2 active:opacity-80" on:click={() => changePercentFun('-10')}>progress -10</div>
			
 
				-            <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-            <div class="flex-1 border-r py-2 active:opacity-80" on:click={() => changePercentFun('+10')}>progress +10</div>
			
 
				-            <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-            <div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>reset</div>
			
 
				-        </div>
			
 
				-    </Button>
			
 
				+	<div class="m-4 mt-8 font-bold text-lg">Transition effect</div>
			
 
				+	<div class="flex flex-col space-y-4 mb-4 px-2">
			
 
				+		<Progress {percent} />
			
 
				+		<Progress {percent} percentPosition="inner" />
			
 
				+		<Progress {percent} percentPosition="block" />
			
 
				+		<Progress {percent} duration="500" />
			
 
				+		<Progress {percent} duration="1000" />
			
 
				+	</div>
			
 
				+	<Button heightIn="0" group size="full">
			
 
				+		<div class="flex">
			
 
				+			<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+			<!-- svelte-ignore a11y-no-static-element-interactions -->
			
 
				+			<div class="flex-1 border-r py-2 active:opacity-80" on:click={() => changePercentFun('-10')}>progress -10</div>
			
 
				+			<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+			<!-- svelte-ignore a11y-no-static-element-interactions -->
			
 
				+			<div class="flex-1 border-r py-2 active:opacity-80" on:click={() => changePercentFun('+10')}>progress +10</div>
			
 
				+			<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+			<!-- svelte-ignore a11y-no-static-element-interactions -->
			
 
				+			<div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>reset</div>
			
 
				+		</div>
			
 
				+	</Button>
			
 
				 
			
 
				-    <div class="m-4 mt-8 font-bold text-lg">Custom color</div>
			
 
				-    <div class="flex flex-col space-y-4">
			
 
				-        <Progress injClass="bg-success dark:bg-error" />
			
 
				-        <Progress injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]" />
			
 
				-        <Progress percentPosition="block" injClass="bg-orange" />
			
 
				-        <Progress trackInjClass="!bg-primary/20 dark:!bg-dark/20" />
			
 
				-    </div>
			
 
				+	<div class="m-4 mt-8 font-bold text-lg">Custom color</div>
			
 
				+	<div class="flex flex-col space-y-4">
			
 
				+		<Progress injClass="bg-success dark:bg-error" />
			
 
				+		<Progress injClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]" />
			
 
				+		<Progress percentPosition="block" injClass="bg-orange" />
			
 
				+		<Progress trackInjClass="!bg-primary/20 dark:!bg-dark/20" />
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="m-4 mt-8 font-bold text-lg">Custom text</div>
			
 
				-    <div class="flex flex-col space-y-4">
			
 
				-        <Progress useSlot>
			
 
				-            <div class="text-xs whitespace-nowrap">completed 2/3</div>
			
 
				-        </Progress>
			
 
				-        <Progress useSlot percentPosition="block">
			
 
				-            <div class="text-xs whitespace-nowrap">completed 2/3</div>
			
 
				-        </Progress>
			
 
				-    </div>
			
 
				+	<div class="m-4 mt-8 font-bold text-lg">Custom text</div>
			
 
				+	<div class="flex flex-col space-y-4">
			
 
				+		<Progress useSlot>
			
 
				+			<div class="text-xs whitespace-nowrap">completed 2/3</div>
			
 
				+		</Progress>
			
 
				+		<Progress useSlot percentPosition="block">
			
 
				+			<div class="text-xs whitespace-nowrap">completed 2/3</div>
			
 
				+		</Progress>
			
 
				+	</div>
			
 
				 </div>
			
--- a/demo/src/pages/progressLoop/ProgressLoopDemo.svelte
+++ b/demo/src/pages/progressLoop/ProgressLoopDemo.svelte
@@ -1,132 +1,135 @@
 
				 <!--ProgressLoop Demo-->
			
 
				 <script>
			
 
				-    import { ProgressLoop, Button } from 'stdf';
			
 
				+	import { ProgressLoop, Button } from 'stdf';
			
 
				 
			
 
				-    let percent = 20;
			
 
				-    const changePercentFun = type => {
			
 
				-        if (type === '+10') {
			
 
				-            percent += 10;
			
 
				-            if (percent > 100) {
			
 
				-                percent = 100;
			
 
				-            }
			
 
				-        } else {
			
 
				-            percent -= 10;
			
 
				-            if (percent < 0) {
			
 
				-                percent = 0;
			
 
				-            }
			
 
				-        }
			
 
				-    };
			
 
				+	let percent = 20;
			
 
				+	const changePercentFun = type => {
			
 
				+		if (type === '+10') {
			
 
				+			percent += 10;
			
 
				+			if (percent > 100) {
			
 
				+				percent = 100;
			
 
				+			}
			
 
				+		} else {
			
 
				+			percent -= 10;
			
 
				+			if (percent < 0) {
			
 
				+				percent = 0;
			
 
				+			}
			
 
				+		}
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">基础用法</div>
			
 
				 <div class="w-1/3 mx-4">
			
 
				-    <ProgressLoop />
			
 
				+	<ProgressLoop />
			
 
				 </div>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">不同宽度</div>
			
 
				 <div class="flex flex-grow gap-4 mx-4">
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop strokeWidth={0.5} />
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop strokeWidth={1} />
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop strokeWidth={6} />
			
 
				-    </div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop strokeWidth={0.5} />
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop strokeWidth={1} />
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop strokeWidth={6} />
			
 
				+	</div>
			
 
				 </div>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">直边端点</div>
			
 
				 <div class="w-1/3 mx-4">
			
 
				-    <ProgressLoop butt />
			
 
				+	<ProgressLoop butt />
			
 
				 </div>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">逆时针方向</div>
			
 
				 <div class="w-1/3 mx-4">
			
 
				-    <ProgressLoop reverse />
			
 
				+	<ProgressLoop reverse />
			
 
				 </div>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">自定义颜色</div>
			
 
				 <div class="flex flex-grow gap-2 m-4">
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop injClass="stroke-success dark:stroke-error" />
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop gradient={['#CE9FFC', '#7367F0']} />
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop gradient={['#CE9FFC', '#7367F0']} reverse />
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop trackInjClass="!stroke-primary/20 dark:!stroke-dark/20" />
			
 
				-    </div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop injClass="stroke-success dark:stroke-error" />
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop gradient={['#CE9FFC', '#7367F0']} />
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop gradient={['#CE9FFC', '#7367F0']} reverse />
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop trackInjClass="!stroke-primary/20 dark:!stroke-dark/20" />
			
 
				+	</div>
			
 
				 </div>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">自定义文字</div>
			
 
				 <div class="flex flex-grow gap-2 m-4">
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop useSlot>
			
 
				-            <div class="text-xs text-center">
			
 
				-                <div>已完成</div>
			
 
				-                <div class="text-lg text-primary dark:text-dark">6666</div>
			
 
				-                <div>步</div>
			
 
				-            </div>
			
 
				-        </ProgressLoop>
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop useSlot>
			
 
				-            <div class="text-xs text-center">
			
 
				-                <div>剩余流量</div>
			
 
				-                <div class="text-lg text-primary dark:text-dark">66</div>
			
 
				-                <div>GB</div>
			
 
				-            </div>
			
 
				-        </ProgressLoop>
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop useSlot>
			
 
				-            <div class="text-xs">完成 2/3</div>
			
 
				-        </ProgressLoop>
			
 
				-    </div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop useSlot>
			
 
				+			<div class="text-xs text-center">
			
 
				+				<div>已完成</div>
			
 
				+				<div class="text-lg text-primary dark:text-dark">6666</div>
			
 
				+				<div>步</div>
			
 
				+			</div>
			
 
				+		</ProgressLoop>
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop useSlot>
			
 
				+			<div class="text-xs text-center">
			
 
				+				<div>剩余流量</div>
			
 
				+				<div class="text-lg text-primary dark:text-dark">66</div>
			
 
				+				<div>GB</div>
			
 
				+			</div>
			
 
				+		</ProgressLoop>
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop useSlot>
			
 
				+			<div class="text-xs">完成 2/3</div>
			
 
				+		</ProgressLoop>
			
 
				+	</div>
			
 
				 </div>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">过渡效果</div>
			
 
				 <div class="flex flex-grow gap-2 m-4">
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop {percent} />
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop {percent} butt />
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop {percent} strokeWidth={4} />
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop {percent} reverse />
			
 
				-    </div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop {percent} />
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop {percent} butt />
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop {percent} strokeWidth={4} />
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop {percent} reverse />
			
 
				+	</div>
			
 
				 </div>
			
 
				 <div class="flex flex-grow gap-2 m-4">
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop {percent} duration="150" />
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop {percent} duration="500" />
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop {percent} duration="1000" />
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop {percent} gradient={['#CE9FFC', '#7367F0']} />
			
 
				-    </div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop {percent} duration="150" />
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop {percent} duration="500" />
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop {percent} duration="1000" />
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop {percent} gradient={['#CE9FFC', '#7367F0']} />
			
 
				+	</div>
			
 
				 </div>
			
 
				 <div class="mx-4 pb-8">
			
 
				-    <Button heightIn="0" group size="full">
			
 
				-        <div class="flex">
			
 
				-            <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-            <div class="flex-1 border-r py-2 active:opacity-80" on:click={() => changePercentFun('-10')}>进度 -10</div>
			
 
				-            <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-            <div class="flex-1 border-r py-2 active:opacity-80" on:click={() => changePercentFun('+10')}>进度 +10</div>
			
 
				-            <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-            <div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>重置</div>
			
 
				-        </div>
			
 
				-    </Button>
			
 
				+	<Button heightIn="0" group size="full">
			
 
				+		<div class="flex">
			
 
				+			<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+			<!-- svelte-ignore a11y-no-static-element-interactions -->
			
 
				+			<div class="flex-1 border-r py-2 active:opacity-80" on:click={() => changePercentFun('-10')}>进度 -10</div>
			
 
				+			<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+			<!-- svelte-ignore a11y-no-static-element-interactions -->
			
 
				+			<div class="flex-1 border-r py-2 active:opacity-80" on:click={() => changePercentFun('+10')}>进度 +10</div>
			
 
				+			<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+			<!-- svelte-ignore a11y-no-static-element-interactions -->
			
 
				+			<div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>重置</div>
			
 
				+		</div>
			
 
				+	</Button>
			
 
				 </div>
			
--- a/demo/src/pages/progressLoop/ProgressLoopDemo_en.svelte
+++ b/demo/src/pages/progressLoop/ProgressLoopDemo_en.svelte
@@ -1,132 +1,135 @@
 
				 <!--ProgressLoop Demo-->
			
 
				 <script>
			
 
				-    import { ProgressLoop, Button } from 'stdf';
			
 
				+	import { ProgressLoop, Button } from 'stdf';
			
 
				 
			
 
				-    let percent = 20;
			
 
				-    const changePercentFun = type => {
			
 
				-        if (type === '+10') {
			
 
				-            percent += 10;
			
 
				-            if (percent > 100) {
			
 
				-                percent = 100;
			
 
				-            }
			
 
				-        } else {
			
 
				-            percent -= 10;
			
 
				-            if (percent < 0) {
			
 
				-                percent = 0;
			
 
				-            }
			
 
				-        }
			
 
				-    };
			
 
				+	let percent = 20;
			
 
				+	const changePercentFun = type => {
			
 
				+		if (type === '+10') {
			
 
				+			percent += 10;
			
 
				+			if (percent > 100) {
			
 
				+				percent = 100;
			
 
				+			}
			
 
				+		} else {
			
 
				+			percent -= 10;
			
 
				+			if (percent < 0) {
			
 
				+				percent = 0;
			
 
				+			}
			
 
				+		}
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">Basic usage</div>
			
 
				 <div class="w-1/3 mx-4">
			
 
				-    <ProgressLoop />
			
 
				+	<ProgressLoop />
			
 
				 </div>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">Different width</div>
			
 
				 <div class="flex flex-grow gap-4 mx-4">
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop strokeWidth={0.5} />
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop strokeWidth={1} />
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop strokeWidth={6} />
			
 
				-    </div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop strokeWidth={0.5} />
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop strokeWidth={1} />
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop strokeWidth={6} />
			
 
				+	</div>
			
 
				 </div>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">Straight end</div>
			
 
				 <div class="w-1/3 mx-4">
			
 
				-    <ProgressLoop butt />
			
 
				+	<ProgressLoop butt />
			
 
				 </div>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">Counterclockwise direction</div>
			
 
				 <div class="w-1/3 mx-4">
			
 
				-    <ProgressLoop reverse />
			
 
				+	<ProgressLoop reverse />
			
 
				 </div>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">Custom color</div>
			
 
				 <div class="flex flex-grow gap-2 m-4">
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop injClass="stroke-success dark:stroke-error" />
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop gradient={['#CE9FFC', '#7367F0']} />
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop gradient={['#CE9FFC', '#7367F0']} reverse />
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop trackInjClass="!stroke-primary/20 dark:!stroke-dark/20" />
			
 
				-    </div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop injClass="stroke-success dark:stroke-error" />
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop gradient={['#CE9FFC', '#7367F0']} />
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop gradient={['#CE9FFC', '#7367F0']} reverse />
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop trackInjClass="!stroke-primary/20 dark:!stroke-dark/20" />
			
 
				+	</div>
			
 
				 </div>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">Custom text</div>
			
 
				 <div class="flex flex-grow gap-2 m-4">
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop useSlot>
			
 
				-            <div class="text-xs text-center">
			
 
				-                <div>Completed</div>
			
 
				-                <div class="text-lg text-primary dark:text-dark">6666</div>
			
 
				-                <div>step</div>
			
 
				-            </div>
			
 
				-        </ProgressLoop>
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop useSlot>
			
 
				-            <div class="text-xs text-center">
			
 
				-                <div>Residual flow</div>
			
 
				-                <div class="text-lg text-primary dark:text-dark">66</div>
			
 
				-                <div>GB</div>
			
 
				-            </div>
			
 
				-        </ProgressLoop>
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop useSlot>
			
 
				-            <div class="text-xs">complete 2/3</div>
			
 
				-        </ProgressLoop>
			
 
				-    </div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop useSlot>
			
 
				+			<div class="text-xs text-center">
			
 
				+				<div>Completed</div>
			
 
				+				<div class="text-lg text-primary dark:text-dark">6666</div>
			
 
				+				<div>step</div>
			
 
				+			</div>
			
 
				+		</ProgressLoop>
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop useSlot>
			
 
				+			<div class="text-xs text-center">
			
 
				+				<div>Residual flow</div>
			
 
				+				<div class="text-lg text-primary dark:text-dark">66</div>
			
 
				+				<div>GB</div>
			
 
				+			</div>
			
 
				+		</ProgressLoop>
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop useSlot>
			
 
				+			<div class="text-xs">complete 2/3</div>
			
 
				+		</ProgressLoop>
			
 
				+	</div>
			
 
				 </div>
			
 
				 
			
 
				 <div class="m-4 mt-8 font-bold text-lg">Transition effect</div>
			
 
				 <div class="flex flex-grow gap-2 m-4">
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop {percent} />
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop {percent} butt />
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop {percent} strokeWidth={4} />
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop {percent} reverse />
			
 
				-    </div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop {percent} />
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop {percent} butt />
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop {percent} strokeWidth={4} />
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop {percent} reverse />
			
 
				+	</div>
			
 
				 </div>
			
 
				 <div class="flex flex-grow gap-2 m-4">
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop {percent} duration="150" />
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop {percent} duration="500" />
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop {percent} duration="1000" />
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <ProgressLoop {percent} gradient={['#CE9FFC', '#7367F0']} />
			
 
				-    </div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop {percent} duration="150" />
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop {percent} duration="500" />
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop {percent} duration="1000" />
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<ProgressLoop {percent} gradient={['#CE9FFC', '#7367F0']} />
			
 
				+	</div>
			
 
				 </div>
			
 
				 <div class="mx-4 pb-8">
			
 
				-    <Button heightIn="0" group size="full">
			
 
				-        <div class="flex">
			
 
				-            <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-            <div class="flex-1 border-r py-2 active:opacity-80" on:click={() => changePercentFun('-10')}>progress -10</div>
			
 
				-            <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-            <div class="flex-1 border-r py-2 active:opacity-80" on:click={() => changePercentFun('+10')}>progress +10</div>
			
 
				-            <!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				-            <div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>reset</div>
			
 
				-        </div>
			
 
				-    </Button>
			
 
				+	<Button heightIn="0" group size="full">
			
 
				+		<div class="flex">
			
 
				+			<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+			<!-- svelte-ignore a11y-no-static-element-interactions -->
			
 
				+			<div class="flex-1 border-r py-2 active:opacity-80" on:click={() => changePercentFun('-10')}>progress -10</div>
			
 
				+			<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+			<!-- svelte-ignore a11y-no-static-element-interactions -->
			
 
				+			<div class="flex-1 border-r py-2 active:opacity-80" on:click={() => changePercentFun('+10')}>progress +10</div>
			
 
				+			<!-- svelte-ignore a11y-click-events-have-key-events -->
			
 
				+			<!-- svelte-ignore a11y-no-static-element-interactions -->
			
 
				+			<div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>reset</div>
			
 
				+		</div>
			
 
				+	</Button>
			
 
				 </div>
			
--- a/demo/src/pages/radio/RadioDemo.svelte
+++ b/demo/src/pages/radio/RadioDemo.svelte
@@ -1,160 +1,155 @@
 
				 <!-- Radio Demo -->
			
 
				 <script>
			
 
				-    import { RadioGroup, Radio, Divider, Button } from 'stdf';
			
 
				+	import { RadioGroup, Radio, Divider, Button } from 'stdf';
			
 
				 
			
 
				-    const dota = [
			
 
				-        { label: '主宰', name: '奶棒人', desc: '主宰是一个近战敏捷英雄，他能够迅速切入战斗。' },
			
 
				-        { label: '白牛', name: '令狐冲', desc: '巴拉森，裂魂人是一个强大的 Gank 型的力量型近战英雄。' },
			
 
				-        { label: '光法', name: '光之守卫', desc: '伊扎洛，光之守卫，他是一个著名的辅助性智力英雄。' },
			
 
				-        { label: '猛犸', name: '马格纳斯', desc: '猛犸？为什么不 BAN 猛犸？为什么不 BAN 猛犸？' },
			
 
				-    ];
			
 
				-    let value = dota[0].name;
			
 
				-    const dotaFun = e => {
			
 
				-        value = e.detail;
			
 
				-    };
			
 
				-    const dotaImgs = ['火女', '小牛', '水人', '火枪', '斯温'];
			
 
				-    let imgValue = dotaImgs[3];
			
 
				-    const dotaImgsFun = e => {
			
 
				-        imgValue = e.detail;
			
 
				-    };
			
 
				-    const dotaVoices = [
			
 
				-        { label: '祈求者', name: '祈求者', voices: ['“来自于伟大的奥秘。”'] },
			
 
				-        { label: '风暴之灵', name: '风暴之灵', voices: ['“喂~快醒醒，快喝点咖啡，我方上塔正遭受攻击。”'] },
			
 
				-        {
			
 
				-            label: '蝙蝠骑士',
			
 
				-            name: '蝙蝠骑士',
			
 
				-            voices: ['“哦，莉娜，当我的压寨夫人怎么样？”', '“哦，风行者，见着我你不用跑。”', '“水晶室女，你就像一个装满冰水的高脚杯。”'],
			
 
				-        },
			
 
				-        { label: '潮汐猎人', name: '潮汐猎人', voices: ['“我还能吃下一根海藻。”'] },
			
 
				-    ];
			
 
				-    let voiceValue = dotaVoices[0].name;
			
 
				-    const dotaVoicesFun = e => {
			
 
				-        voiceValue = e.detail;
			
 
				-    };
			
 
				+	const dota = [
			
 
				+		{ label: '主宰', name: '奶棒人', desc: '主宰是一个近战敏捷英雄，他能够迅速切入战斗。' },
			
 
				+		{ label: '白牛', name: '令狐冲', desc: '巴拉森，裂魂人是一个强大的 Gank 型的力量型近战英雄。' },
			
 
				+		{ label: '光法', name: '光之守卫', desc: '伊扎洛，光之守卫，他是一个著名的辅助性智力英雄。' },
			
 
				+		{ label: '猛犸', name: '马格纳斯', desc: '猛犸？为什么不 BAN 猛犸？为什么不 BAN 猛犸？' },
			
 
				+	];
			
 
				+	let value = dota[0].name;
			
 
				+	const dotaFun = e => {
			
 
				+		value = e.detail;
			
 
				+	};
			
 
				+	const dotaImgs = ['火女', '小牛', '水人', '火枪', '斯温'];
			
 
				+	let imgValue = dotaImgs[3];
			
 
				+	const dotaImgsFun = e => {
			
 
				+		imgValue = e.detail;
			
 
				+	};
			
 
				+	const dotaVoices = [
			
 
				+		{ label: '祈求者', name: '祈求者', voices: ['“来自于伟大的奥秘。”'] },
			
 
				+		{ label: '风暴之灵', name: '风暴之灵', voices: ['“喂~快醒醒，快喝点咖啡，我方上塔正遭受攻击。”'] },
			
 
				+		{
			
 
				+			label: '蝙蝠骑士',
			
 
				+			name: '蝙蝠骑士',
			
 
				+			voices: ['“哦，莉娜，当我的压寨夫人怎么样？”', '“哦，风行者，见着我你不用跑。”', '“水晶室女，你就像一个装满冰水的高脚杯。”'],
			
 
				+		},
			
 
				+		{ label: '潮汐猎人', name: '潮汐猎人', voices: ['“我还能吃下一根海藻。”'] },
			
 
				+	];
			
 
				+	let voiceValue = dotaVoices[0].name;
			
 
				+	const dotaVoicesFun = e => {
			
 
				+		voiceValue = e.detail;
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="px-4">
			
 
				-    <div class="mt-8 mb-4 font-bold text-2xl">横向排列</div>
			
 
				-    <div class="mt-6 mb-4 font-bold text-lg">简单用法</div>
			
 
				-    <RadioGroup {value} horizontal>
			
 
				-        {#each dota as item}
			
 
				-            <Radio name={item.name}>{item.label}</Radio>
			
 
				-        {/each}
			
 
				-    </RadioGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-2xl">横向排列</div>
			
 
				+	<div class="mt-6 mb-4 font-bold text-lg">简单用法</div>
			
 
				+	<RadioGroup {value} horizontal>
			
 
				+		{#each dota as item}
			
 
				+			<Radio name={item.name}>{item.label}</Radio>
			
 
				+		{/each}
			
 
				+	</RadioGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">文字在不同位置</div>
			
 
				-    <RadioGroup {value} horizontal>
			
 
				-        {#each dota as item}
			
 
				-            <Radio name={item.name} textPosition="l">{item.label}</Radio>
			
 
				-        {/each}
			
 
				-    </RadioGroup>
			
 
				-    <Divider />
			
 
				-    <RadioGroup {value} horizontal>
			
 
				-        {#each dota as item}
			
 
				-            <Radio name={item.name} textPosition="b">{item.label}</Radio>
			
 
				-        {/each}
			
 
				-    </RadioGroup>
			
 
				-    <Divider />
			
 
				-    <RadioGroup {value} horizontal>
			
 
				-        {#each dota as item}
			
 
				-            <Radio name={item.name} textPosition="t">{item.label}</Radio>
			
 
				-        {/each}
			
 
				-    </RadioGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">文字在不同位置</div>
			
 
				+	<RadioGroup {value} horizontal>
			
 
				+		{#each dota as item}
			
 
				+			<Radio name={item.name} textPosition="l">{item.label}</Radio>
			
 
				+		{/each}
			
 
				+	</RadioGroup>
			
 
				+	<Divider />
			
 
				+	<RadioGroup {value} horizontal>
			
 
				+		{#each dota as item}
			
 
				+			<Radio name={item.name} textPosition="b">{item.label}</Radio>
			
 
				+		{/each}
			
 
				+	</RadioGroup>
			
 
				+	<Divider />
			
 
				+	<RadioGroup {value} horizontal>
			
 
				+		{#each dota as item}
			
 
				+			<Radio name={item.name} textPosition="t">{item.label}</Radio>
			
 
				+		{/each}
			
 
				+	</RadioGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">自定义图标</div>
			
 
				-    <RadioGroup value="奶棒人" horizontal>
			
 
				-        <Radio icon={{ name: 'ri-checkbox-line' }} iconChecked={{ name: 'ri-checkbox-fill' }} name="奶棒人">主宰</Radio>
			
 
				-        <Radio icon={{ name: 'ri-checkbox-circle-line' }} iconChecked={{ name: 'ri-checkbox-circle-fill' }} name="令狐冲">白牛</Radio>
			
 
				-        <Radio icon={{ name: 'ri-checkbox-multiple-line' }} iconChecked={{ name: 'ri-checkbox-multiple-fill' }} name="光之守卫">光法</Radio>
			
 
				-        <Radio icon={{ name: 'ri-check-line' }} iconChecked={{ name: 'ri-check-fill' }} name="马格纳斯">猛犸</Radio>
			
 
				-    </RadioGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">自定义图标</div>
			
 
				+	<RadioGroup value="奶棒人" horizontal>
			
 
				+		<Radio icon={{ name: 'ri-checkbox-line' }} iconChecked={{ name: 'ri-checkbox-fill' }} name="奶棒人">主宰</Radio>
			
 
				+		<Radio icon={{ name: 'ri-checkbox-circle-line' }} iconChecked={{ name: 'ri-checkbox-circle-fill' }} name="令狐冲">白牛</Radio>
			
 
				+		<Radio icon={{ name: 'ri-checkbox-multiple-line' }} iconChecked={{ name: 'ri-checkbox-multiple-fill' }} name="光之守卫">光法</Radio>
			
 
				+		<Radio icon={{ name: 'ri-check-line' }} iconChecked={{ name: 'ri-check-fill' }} name="马格纳斯">猛犸</Radio>
			
 
				+	</RadioGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">图片选项</div>
			
 
				-    <RadioGroup value={imgValue} horizontal on:change={dotaImgsFun}>
			
 
				-        {#each dotaImgs as dota}
			
 
				-            <Radio
			
 
				-                name={dota}
			
 
				-                textPosition="t"
			
 
				-                icon={{ name: 'ri-arrow-up-s-line' }}
			
 
				-                iconChecked={{ name: 'ri-arrow-up-s-fill', size: 30 }}
			
 
				-            >
			
 
				-                <div class={`w-12 h-12 mb-1 rounded overflow-hidden ${imgValue === dota && 'ring-2 ring-primary dark:ring-dark'}`}>
			
 
				-                    <img class="w-full h-full object-cover" src={`./assets/images/dota_${dota}.png`} alt="" />
			
 
				-                </div>
			
 
				-            </Radio>
			
 
				-        {/each}
			
 
				-    </RadioGroup>
			
 
				-    <div class="text-sm">什么，你又要选 <span class="text-[red] font-bold text-lg">{imgValue}！！</span></div>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">图片选项</div>
			
 
				+	<RadioGroup value={imgValue} horizontal on:change={dotaImgsFun}>
			
 
				+		{#each dotaImgs as dota}
			
 
				+			<Radio name={dota} textPosition="t" icon={{ name: 'ri-arrow-up-s-line' }} iconChecked={{ name: 'ri-arrow-up-s-fill', size: 30 }}>
			
 
				+				<div class={`w-12 h-12 mb-1 rounded overflow-hidden ${imgValue === dota && 'ring-2 ring-primary dark:ring-dark'}`}>
			
 
				+					<img class="w-full h-full object-cover" src={`./assets/images/dota_${dota}.png`} alt="" />
			
 
				+				</div>
			
 
				+			</Radio>
			
 
				+		{/each}
			
 
				+	</RadioGroup>
			
 
				+	<div class="text-sm">什么，你又要选 <span class="text-[red] font-bold text-lg">{imgValue}！！</span></div>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">不用图标 && 使用 Button</div>
			
 
				-    <RadioGroup {value} horizontal on:change={dotaFun}>
			
 
				-        {#each dota as item}
			
 
				-            <Radio name={item.name} icon="none" iconChecked="none">
			
 
				-                <Button fill={value === item.name ? 'base' : 'lineLight'} heightIn="0">{item.label}</Button>
			
 
				-            </Radio>
			
 
				-        {/each}
			
 
				-    </RadioGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">不用图标 && 使用 Button</div>
			
 
				+	<RadioGroup {value} horizontal on:change={dotaFun}>
			
 
				+		{#each dota as item}
			
 
				+			<Radio name={item.name} icon="none" iconChecked="none">
			
 
				+				<Button fill={value === item.name ? 'base' : 'lineLight'} heightIn="0">{item.label}</Button>
			
 
				+			</Radio>
			
 
				+		{/each}
			
 
				+	</RadioGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">不用图标 && 自定义选中效果</div>
			
 
				-    <RadioGroup {value} horizontal on:change={dotaFun}>
			
 
				-        {#each dota as item}
			
 
				-            <Radio name={item.name} icon="none" iconChecked="none">
			
 
				-                <div
			
 
				-                    class={`border py-0.5 px-5 text-sm rounded ${
			
 
				-                        value === item.name
			
 
				-                            ? 'text-primary dark:text-dark bg-primary/10 dark:bg-dark/10'
			
 
				-                            : 'bg-gray9 dark:bg-gray4 border-gray8 dark:border-gray5 text-gray6'
			
 
				-                    }`}
			
 
				-                >
			
 
				-                    {item.label}
			
 
				-                </div>
			
 
				-            </Radio>
			
 
				-        {/each}
			
 
				-    </RadioGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">不用图标 && 自定义选中效果</div>
			
 
				+	<RadioGroup {value} horizontal on:change={dotaFun}>
			
 
				+		{#each dota as item}
			
 
				+			<Radio name={item.name} icon="none" iconChecked="none">
			
 
				+				<div
			
 
				+					class={`border py-0.5 px-5 text-sm rounded ${
			
 
				+						value === item.name
			
 
				+							? 'text-primary dark:text-dark bg-primary/10 dark:bg-dark/10'
			
 
				+							: 'bg-gray9 dark:bg-gray4 border-gray8 dark:border-gray5 text-gray6'
			
 
				+					}`}
			
 
				+				>
			
 
				+					{item.label}
			
 
				+				</div>
			
 
				+			</Radio>
			
 
				+		{/each}
			
 
				+	</RadioGroup>
			
 
				 </div>
			
 
				 <Divider />
			
 
				 <div class="px-4 pb-8">
			
 
				-    <div class="mb-4 font-bold text-2xl">纵向排列</div>
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">基础用法</div>
			
 
				-    <RadioGroup {value}>
			
 
				-        {#each dota as item}
			
 
				-            <Radio name={item.name}>{item.label}</Radio>
			
 
				-        {/each}
			
 
				-    </RadioGroup>
			
 
				+	<div class="mb-4 font-bold text-2xl">纵向排列</div>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">基础用法</div>
			
 
				+	<RadioGroup {value}>
			
 
				+		{#each dota as item}
			
 
				+			<Radio name={item.name}>{item.label}</Radio>
			
 
				+		{/each}
			
 
				+	</RadioGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">长文字选项</div>
			
 
				-    <RadioGroup {value}>
			
 
				-        {#each dota as item}
			
 
				-            <Radio name={item.name}>{item.desc}</Radio>
			
 
				-        {/each}
			
 
				-    </RadioGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">长文字选项</div>
			
 
				+	<RadioGroup {value}>
			
 
				+		{#each dota as item}
			
 
				+			<Radio name={item.name}>{item.desc}</Radio>
			
 
				+		{/each}
			
 
				+	</RadioGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">文字靠左</div>
			
 
				-    <RadioGroup {value}>
			
 
				-        {#each dota as item, i}
			
 
				-            <Radio name={item.name} textPosition="l">
			
 
				-                {item.label}
			
 
				-                {#if i !== dota.length - 1}
			
 
				-                    <div class="h-px mt-1 bg-gray8 dark:bg-gray5" />
			
 
				-                {/if}
			
 
				-            </Radio>
			
 
				-        {/each}
			
 
				-    </RadioGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">文字靠左</div>
			
 
				+	<RadioGroup {value}>
			
 
				+		{#each dota as item, i}
			
 
				+			<Radio name={item.name} textPosition="l">
			
 
				+				{item.label}
			
 
				+				{#if i !== dota.length - 1}
			
 
				+					<div class="h-px mt-1 bg-gray8 dark:bg-gray5" />
			
 
				+				{/if}
			
 
				+			</Radio>
			
 
				+		{/each}
			
 
				+	</RadioGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">复杂选项 && 自定义选中效果</div>
			
 
				-    <RadioGroup value={voiceValue} on:change={dotaVoicesFun}>
			
 
				-        {#each dotaVoices as item, i}
			
 
				-            <Radio name={item.name}>
			
 
				-                <div class={`ml-2 ${voiceValue === item.name ? 'text-primary dark:text-dark' : ''}`}>
			
 
				-                    {item.label}
			
 
				-                    {#each item.voices as voice}
			
 
				-                        <div class="text-xs">{voice}</div>
			
 
				-                    {/each}
			
 
				-                    {#if i !== dotaVoices.length - 1}
			
 
				-                        <div class="h-px mt-1 bg-gray8 dark:bg-gray5" />
			
 
				-                    {/if}
			
 
				-                </div>
			
 
				-            </Radio>
			
 
				-        {/each}
			
 
				-    </RadioGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">复杂选项 && 自定义选中效果</div>
			
 
				+	<RadioGroup value={voiceValue} on:change={dotaVoicesFun}>
			
 
				+		{#each dotaVoices as item, i}
			
 
				+			<Radio name={item.name}>
			
 
				+				<div class={`ml-2 ${voiceValue === item.name ? 'text-primary dark:text-dark' : ''}`}>
			
 
				+					{item.label}
			
 
				+					{#each item.voices as voice}
			
 
				+						<div class="text-xs">{voice}</div>
			
 
				+					{/each}
			
 
				+					{#if i !== dotaVoices.length - 1}
			
 
				+						<div class="h-px mt-1 bg-gray8 dark:bg-gray5" />
			
 
				+					{/if}
			
 
				+				</div>
			
 
				+			</Radio>
			
 
				+		{/each}
			
 
				+	</RadioGroup>
			
 
				 </div>
			
--- a/demo/src/pages/radio/RadioDemo_en.svelte
+++ b/demo/src/pages/radio/RadioDemo_en.svelte
@@ -1,167 +1,162 @@
 
				 <!-- Radio Demo -->
			
 
				 <script>
			
 
				-    import { RadioGroup, Radio, Divider, Button } from 'stdf';
			
 
				+	import { RadioGroup, Radio, Divider, Button } from 'stdf';
			
 
				 
			
 
				-    const dota = [
			
 
				-        { label: 'Jugg', name: 'Juggernaut', desc: 'The master is a melee agile hero, and he can quickly cut into the battle.' },
			
 
				-        { label: 'SB', name: 'Spirit Breaker', desc: 'Barlason, the soul -cracked man is a powerful Gank -type melee hero.' },
			
 
				-        { label: 'Kotl', name: 'Keeper of the Light', desc: 'Izalo, Guardian of Light, he is a famous auxiliary intellectual hero.' },
			
 
				-        { label: 'Mag', name: 'Magnus', desc: 'Mighty? Why not BAN mighty? Why not BAN mighty?' },
			
 
				-    ];
			
 
				-    let value = dota[0].name;
			
 
				-    const dotaFun = e => {
			
 
				-        value = e.detail;
			
 
				-    };
			
 
				-    const dotaImgs = ['Lina', 'ES', 'Mor', 'Sni', 'SV'];
			
 
				-    const dotaForImgs = ['火女', '小牛', '水人', '火枪', '斯温'];
			
 
				-    let imgValue = dotaImgs[3];
			
 
				-    const dotaImgsFun = e => {
			
 
				-        imgValue = e.detail;
			
 
				-    };
			
 
				-    const dotaVoices = [
			
 
				-        { label: 'karl', name: 'karl', voices: ['"From the great mystery."'] },
			
 
				-        { label: 'Storm', name: 'Storm', voices: ['"Hey ~ Quickly wake up, drink coffee, we are attacked on the tower."'] },
			
 
				-        {
			
 
				-            label: 'Bat',
			
 
				-            name: 'Bat',
			
 
				-            voices: [
			
 
				-                '"Oh, Lina, what about Mrs. My Village?"',
			
 
				-                "'Oh, popular, you don't have to run when you see me.'",
			
 
				-                '"Crystal room woman, you are like a tall cup full of ice water."',
			
 
				-            ],
			
 
				-        },
			
 
				-        { label: 'Tide', name: 'Tide', voices: ['"I can still eat a seaweed."'] },
			
 
				-    ];
			
 
				-    let voiceValue = dotaVoices[0].name;
			
 
				-    const dotaVoicesFun = e => {
			
 
				-        voiceValue = e.detail;
			
 
				-    };
			
 
				+	const dota = [
			
 
				+		{ label: 'Jugg', name: 'Juggernaut', desc: 'The master is a melee agile hero, and he can quickly cut into the battle.' },
			
 
				+		{ label: 'SB', name: 'Spirit Breaker', desc: 'Barlason, the soul -cracked man is a powerful Gank -type melee hero.' },
			
 
				+		{ label: 'Kotl', name: 'Keeper of the Light', desc: 'Izalo, Guardian of Light, he is a famous auxiliary intellectual hero.' },
			
 
				+		{ label: 'Mag', name: 'Magnus', desc: 'Mighty? Why not BAN mighty? Why not BAN mighty?' },
			
 
				+	];
			
 
				+	let value = dota[0].name;
			
 
				+	const dotaFun = e => {
			
 
				+		value = e.detail;
			
 
				+	};
			
 
				+	const dotaImgs = ['Lina', 'ES', 'Mor', 'Sni', 'SV'];
			
 
				+	const dotaForImgs = ['火女', '小牛', '水人', '火枪', '斯温'];
			
 
				+	let imgValue = dotaImgs[3];
			
 
				+	const dotaImgsFun = e => {
			
 
				+		imgValue = e.detail;
			
 
				+	};
			
 
				+	const dotaVoices = [
			
 
				+		{ label: 'karl', name: 'karl', voices: ['"From the great mystery."'] },
			
 
				+		{ label: 'Storm', name: 'Storm', voices: ['"Hey ~ Quickly wake up, drink coffee, we are attacked on the tower."'] },
			
 
				+		{
			
 
				+			label: 'Bat',
			
 
				+			name: 'Bat',
			
 
				+			voices: [
			
 
				+				'"Oh, Lina, what about Mrs. My Village?"',
			
 
				+				"'Oh, popular, you don't have to run when you see me.'",
			
 
				+				'"Crystal room woman, you are like a tall cup full of ice water."',
			
 
				+			],
			
 
				+		},
			
 
				+		{ label: 'Tide', name: 'Tide', voices: ['"I can still eat a seaweed."'] },
			
 
				+	];
			
 
				+	let voiceValue = dotaVoices[0].name;
			
 
				+	const dotaVoicesFun = e => {
			
 
				+		voiceValue = e.detail;
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="px-4">
			
 
				-    <div class="mt-8 mb-4 font-bold text-2xl">Horizontal arrangement</div>
			
 
				-    <div class="mt-6 mb-4 font-bold text-lg">Simple usage</div>
			
 
				-    <RadioGroup {value} horizontal>
			
 
				-        {#each dota as item}
			
 
				-            <Radio name={item.name}>{item.label}</Radio>
			
 
				-        {/each}
			
 
				-    </RadioGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-2xl">Horizontal arrangement</div>
			
 
				+	<div class="mt-6 mb-4 font-bold text-lg">Simple usage</div>
			
 
				+	<RadioGroup {value} horizontal>
			
 
				+		{#each dota as item}
			
 
				+			<Radio name={item.name}>{item.label}</Radio>
			
 
				+		{/each}
			
 
				+	</RadioGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">The text is in different places</div>
			
 
				-    <RadioGroup {value} horizontal>
			
 
				-        {#each dota as item}
			
 
				-            <Radio name={item.name} textPosition="l">{item.label}</Radio>
			
 
				-        {/each}
			
 
				-    </RadioGroup>
			
 
				-    <Divider />
			
 
				-    <RadioGroup {value} horizontal>
			
 
				-        {#each dota as item}
			
 
				-            <Radio name={item.name} textPosition="b">{item.label}</Radio>
			
 
				-        {/each}
			
 
				-    </RadioGroup>
			
 
				-    <Divider />
			
 
				-    <RadioGroup {value} horizontal>
			
 
				-        {#each dota as item}
			
 
				-            <Radio name={item.name} textPosition="t">{item.label}</Radio>
			
 
				-        {/each}
			
 
				-    </RadioGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">The text is in different places</div>
			
 
				+	<RadioGroup {value} horizontal>
			
 
				+		{#each dota as item}
			
 
				+			<Radio name={item.name} textPosition="l">{item.label}</Radio>
			
 
				+		{/each}
			
 
				+	</RadioGroup>
			
 
				+	<Divider />
			
 
				+	<RadioGroup {value} horizontal>
			
 
				+		{#each dota as item}
			
 
				+			<Radio name={item.name} textPosition="b">{item.label}</Radio>
			
 
				+		{/each}
			
 
				+	</RadioGroup>
			
 
				+	<Divider />
			
 
				+	<RadioGroup {value} horizontal>
			
 
				+		{#each dota as item}
			
 
				+			<Radio name={item.name} textPosition="t">{item.label}</Radio>
			
 
				+		{/each}
			
 
				+	</RadioGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">Custom icon</div>
			
 
				-    <RadioGroup value="Juggernaut" horizontal>
			
 
				-        <Radio icon={{ name: 'ri-checkbox-line' }} iconChecked={{ name: 'ri-checkbox-fill' }} name="Juggernaut">Jugg</Radio>
			
 
				-        <Radio icon={{ name: 'ri-checkbox-circle-line' }} iconChecked={{ name: 'ri-checkbox-circle-fill' }} name="Spirit Breaker">SB</Radio>
			
 
				-        <Radio icon={{ name: 'ri-checkbox-multiple-line' }} iconChecked={{ name: 'ri-checkbox-multiple-fill' }} name="Keeper of the Light"
			
 
				-            >Kotl</Radio
			
 
				-        >
			
 
				-        <Radio icon={{ name: 'ri-check-line' }} iconChecked={{ name: 'ri-check-fill' }} name="Magnus">Mag</Radio>
			
 
				-    </RadioGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">Custom icon</div>
			
 
				+	<RadioGroup value="Juggernaut" horizontal>
			
 
				+		<Radio icon={{ name: 'ri-checkbox-line' }} iconChecked={{ name: 'ri-checkbox-fill' }} name="Juggernaut">Jugg</Radio>
			
 
				+		<Radio icon={{ name: 'ri-checkbox-circle-line' }} iconChecked={{ name: 'ri-checkbox-circle-fill' }} name="Spirit Breaker">SB</Radio>
			
 
				+		<Radio icon={{ name: 'ri-checkbox-multiple-line' }} iconChecked={{ name: 'ri-checkbox-multiple-fill' }} name="Keeper of the Light"
			
 
				+			>Kotl</Radio
			
 
				+		>
			
 
				+		<Radio icon={{ name: 'ri-check-line' }} iconChecked={{ name: 'ri-check-fill' }} name="Magnus">Mag</Radio>
			
 
				+	</RadioGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">Picture option</div>
			
 
				-    <RadioGroup value={imgValue} horizontal on:change={dotaImgsFun}>
			
 
				-        {#each dotaImgs as dota, i}
			
 
				-            <Radio
			
 
				-                name={dota}
			
 
				-                textPosition="t"
			
 
				-                icon={{ name: 'ri-arrow-up-s-line' }}
			
 
				-                iconChecked={{ name: 'ri-arrow-up-s-fill', size: 30 }}
			
 
				-            >
			
 
				-                <div class={`w-12 h-12 mb-1 rounded overflow-hidden ${imgValue === dota && 'ring-2 ring-primary dark:ring-dark'}`}>
			
 
				-                    <img class="w-full h-full object-cover" src={`./assets/images/dota_${dotaForImgs[i]}.png`} alt="" />
			
 
				-                </div>
			
 
				-            </Radio>
			
 
				-        {/each}
			
 
				-    </RadioGroup>
			
 
				-    <div class="text-sm">What, are you choosing again <span class="text-[red] font-bold text-lg">{imgValue}！！</span></div>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">Picture option</div>
			
 
				+	<RadioGroup value={imgValue} horizontal on:change={dotaImgsFun}>
			
 
				+		{#each dotaImgs as dota, i}
			
 
				+			<Radio name={dota} textPosition="t" icon={{ name: 'ri-arrow-up-s-line' }} iconChecked={{ name: 'ri-arrow-up-s-fill', size: 30 }}>
			
 
				+				<div class={`w-12 h-12 mb-1 rounded overflow-hidden ${imgValue === dota && 'ring-2 ring-primary dark:ring-dark'}`}>
			
 
				+					<img class="w-full h-full object-cover" src={`./assets/images/dota_${dotaForImgs[i]}.png`} alt="" />
			
 
				+				</div>
			
 
				+			</Radio>
			
 
				+		{/each}
			
 
				+	</RadioGroup>
			
 
				+	<div class="text-sm">What, are you choosing again <span class="text-[red] font-bold text-lg">{imgValue}！！</span></div>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">No icon && use Button</div>
			
 
				-    <RadioGroup {value} horizontal on:change={dotaFun}>
			
 
				-        {#each dota as item}
			
 
				-            <Radio name={item.name} icon="none" iconChecked="none">
			
 
				-                <Button fill={value === item.name ? 'base' : 'lineLight'} heightIn="0">{item.label}</Button>
			
 
				-            </Radio>
			
 
				-        {/each}
			
 
				-    </RadioGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">No icon && use Button</div>
			
 
				+	<RadioGroup {value} horizontal on:change={dotaFun}>
			
 
				+		{#each dota as item}
			
 
				+			<Radio name={item.name} icon="none" iconChecked="none">
			
 
				+				<Button fill={value === item.name ? 'base' : 'lineLight'} heightIn="0">{item.label}</Button>
			
 
				+			</Radio>
			
 
				+		{/each}
			
 
				+	</RadioGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">No icon && Customize the selection effect</div>
			
 
				-    <RadioGroup {value} horizontal on:change={dotaFun}>
			
 
				-        {#each dota as item}
			
 
				-            <Radio name={item.name} icon="none" iconChecked="none">
			
 
				-                <div
			
 
				-                    class={`border py-0.5 px-5 text-sm rounded ${
			
 
				-                        value === item.name
			
 
				-                            ? 'text-primary dark:text-dark bg-primary/10 dark:bg-dark/10'
			
 
				-                            : 'bg-gray9 dark:bg-gray4 border-gray8 dark:border-gray5 text-gray6'
			
 
				-                    }`}
			
 
				-                >
			
 
				-                    {item.label}
			
 
				-                </div>
			
 
				-            </Radio>
			
 
				-        {/each}
			
 
				-    </RadioGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">No icon && Customize the selection effect</div>
			
 
				+	<RadioGroup {value} horizontal on:change={dotaFun}>
			
 
				+		{#each dota as item}
			
 
				+			<Radio name={item.name} icon="none" iconChecked="none">
			
 
				+				<div
			
 
				+					class={`border py-0.5 px-5 text-sm rounded ${
			
 
				+						value === item.name
			
 
				+							? 'text-primary dark:text-dark bg-primary/10 dark:bg-dark/10'
			
 
				+							: 'bg-gray9 dark:bg-gray4 border-gray8 dark:border-gray5 text-gray6'
			
 
				+					}`}
			
 
				+				>
			
 
				+					{item.label}
			
 
				+				</div>
			
 
				+			</Radio>
			
 
				+		{/each}
			
 
				+	</RadioGroup>
			
 
				 </div>
			
 
				 <Divider />
			
 
				 <div class="px-4 pb-8">
			
 
				-    <div class="mb-4 font-bold text-2xl">Longitudinal arrangement</div>
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">Basic usage</div>
			
 
				-    <RadioGroup {value}>
			
 
				-        {#each dota as item}
			
 
				-            <Radio name={item.name}>{item.label}</Radio>
			
 
				-        {/each}
			
 
				-    </RadioGroup>
			
 
				+	<div class="mb-4 font-bold text-2xl">Longitudinal arrangement</div>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">Basic usage</div>
			
 
				+	<RadioGroup {value}>
			
 
				+		{#each dota as item}
			
 
				+			<Radio name={item.name}>{item.label}</Radio>
			
 
				+		{/each}
			
 
				+	</RadioGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">Long text option</div>
			
 
				-    <RadioGroup {value}>
			
 
				-        {#each dota as item}
			
 
				-            <Radio name={item.name}>{item.desc}</Radio>
			
 
				-        {/each}
			
 
				-    </RadioGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">Long text option</div>
			
 
				+	<RadioGroup {value}>
			
 
				+		{#each dota as item}
			
 
				+			<Radio name={item.name}>{item.desc}</Radio>
			
 
				+		{/each}
			
 
				+	</RadioGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">Text to the left</div>
			
 
				-    <RadioGroup {value}>
			
 
				-        {#each dota as item, i}
			
 
				-            <Radio name={item.name} textPosition="l">
			
 
				-                {item.label}
			
 
				-                {#if i !== dota.length - 1}
			
 
				-                    <div class="h-px mt-1 bg-gray8 dark:bg-gray5" />
			
 
				-                {/if}
			
 
				-            </Radio>
			
 
				-        {/each}
			
 
				-    </RadioGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">Text to the left</div>
			
 
				+	<RadioGroup {value}>
			
 
				+		{#each dota as item, i}
			
 
				+			<Radio name={item.name} textPosition="l">
			
 
				+				{item.label}
			
 
				+				{#if i !== dota.length - 1}
			
 
				+					<div class="h-px mt-1 bg-gray8 dark:bg-gray5" />
			
 
				+				{/if}
			
 
				+			</Radio>
			
 
				+		{/each}
			
 
				+	</RadioGroup>
			
 
				 
			
 
				-    <div class="mt-8 mb-4 font-bold text-lg">Complex option && Customize the selection effect</div>
			
 
				-    <RadioGroup value={voiceValue} on:change={dotaVoicesFun}>
			
 
				-        {#each dotaVoices as item, i}
			
 
				-            <Radio name={item.name}>
			
 
				-                <div class={`ml-2 ${voiceValue === item.name ? 'text-primary dark:text-dark' : ''}`}>
			
 
				-                    {item.label}
			
 
				-                    {#each item.voices as voice}
			
 
				-                        <div class="text-xs">{voice}</div>
			
 
				-                    {/each}
			
 
				-                    {#if i !== dotaVoices.length - 1}
			
 
				-                        <div class="h-px mt-1 bg-gray8 dark:bg-gray5" />
			
 
				-                    {/if}
			
 
				-                </div>
			
 
				-            </Radio>
			
 
				-        {/each}
			
 
				-    </RadioGroup>
			
 
				+	<div class="mt-8 mb-4 font-bold text-lg">Complex option && Customize the selection effect</div>
			
 
				+	<RadioGroup value={voiceValue} on:change={dotaVoicesFun}>
			
 
				+		{#each dotaVoices as item, i}
			
 
				+			<Radio name={item.name}>
			
 
				+				<div class={`ml-2 ${voiceValue === item.name ? 'text-primary dark:text-dark' : ''}`}>
			
 
				+					{item.label}
			
 
				+					{#each item.voices as voice}
			
 
				+						<div class="text-xs">{voice}</div>
			
 
				+					{/each}
			
 
				+					{#if i !== dotaVoices.length - 1}
			
 
				+						<div class="h-px mt-1 bg-gray8 dark:bg-gray5" />
			
 
				+					{/if}
			
 
				+				</div>
			
 
				+			</Radio>
			
 
				+		{/each}
			
 
				+	</RadioGroup>
			
 
				 </div>
			
--- a/demo/src/pages/rate/RateDemo.svelte
+++ b/demo/src/pages/rate/RateDemo.svelte
@@ -1,109 +1,110 @@
 
				 <!-- Rate Demo -->
			
 
				 <script>
			
 
				-    import {Rate, Icon} from 'stdf';
			
 
				+	import { Rate, Icon } from 'stdf';
			
 
				 
			
 
				-    let value = 2.5;
			
 
				-    const getValueFun = e => {
			
 
				-        value = e.detail;
			
 
				-    };
			
 
				+	let value = 2.5;
			
 
				+	const getValueFun = e => {
			
 
				+		value = e.detail;
			
 
				+	};
			
 
				 </script>
			
 
				+
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">基础用法</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate/>
			
 
				+	<Rate />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">设置初始分数</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate value={1}/>
			
 
				+	<Rate value={1} />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">允许零分</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate zero/>
			
 
				+	<Rate zero />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">自定义总分</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate total={8}/>
			
 
				+	<Rate total={8} />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">设置未选中透明度</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate opacity={0.8}/>
			
 
				+	<Rate opacity={0.8} />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">允许半选</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate half/>
			
 
				+	<Rate half />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">竖向半选</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate half vertical/>
			
 
				+	<Rate half vertical />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">半选允许零分</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate half zero/>
			
 
				+	<Rate half zero />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">加大间距</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate space="8"/>
			
 
				+	<Rate space="8" />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">禁用</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate disabled/>
			
 
				+	<Rate disabled />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">只读</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate readonly/>
			
 
				+	<Rate readonly />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">不同大小</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate width={20} height={20}/>
			
 
				+	<Rate width={20} height={20} />
			
 
				 </div>
			
 
				 <div class="p-4">
			
 
				-    <Rate width={28} height={28}/>
			
 
				+	<Rate width={28} height={28} />
			
 
				 </div>
			
 
				 <div class="p-4">
			
 
				-    <Rate width={36} height={36}/>
			
 
				+	<Rate width={36} height={36} />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">自定义</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate custom opacity={0.6}>
			
 
				-        <Icon name="ri-star-fill" injClass="text-[#f5b53f]"/>
			
 
				-    </Rate>
			
 
				+	<Rate custom opacity={0.6}>
			
 
				+		<Icon name="ri-star-fill" injClass="text-[#f5b53f]" />
			
 
				+	</Rate>
			
 
				 </div>
			
 
				 <div class="p-4">
			
 
				-    <Rate custom>
			
 
				-        <Icon name="ri-heart-3-fill" injClass="text-[red]"/>
			
 
				-    </Rate>
			
 
				+	<Rate custom>
			
 
				+		<Icon name="ri-heart-3-fill" injClass="text-[red]" />
			
 
				+	</Rate>
			
 
				 </div>
			
 
				 <div class="p-4">
			
 
				-    <Rate half custom>
			
 
				-        <Icon name="ri-heart-3-fill" injClass="text-[red]"/>
			
 
				-    </Rate>
			
 
				+	<Rate half custom>
			
 
				+		<Icon name="ri-heart-3-fill" injClass="text-[red]" />
			
 
				+	</Rate>
			
 
				 </div>
			
 
				 <div class="p-4">
			
 
				-    <Rate half opacity={0.5} width={30} height={36} custom>
			
 
				-        <div class="text-3xl">👍</div>
			
 
				-    </Rate>
			
 
				+	<Rate half opacity={0.5} width={30} height={36} custom>
			
 
				+		<div class="text-3xl">👍</div>
			
 
				+	</Rate>
			
 
				 </div>
			
 
				 <div class="p-4">
			
 
				-    <Rate half opacity={0.5} width={30} height={36} vertical custom>
			
 
				-        <div class="text-3xl">🍺</div>
			
 
				-    </Rate>
			
 
				+	<Rate half opacity={0.5} width={30} height={36} vertical custom>
			
 
				+		<div class="text-3xl">🍺</div>
			
 
				+	</Rate>
			
 
				 </div>
			
 
				 <div class="p-4">
			
 
				-    <Rate half opacity={0.5} width={30} height={36} custom>
			
 
				-        <div class="text-3xl text-primary dark:text-dark">富</div>
			
 
				-    </Rate>
			
 
				+	<Rate half opacity={0.5} width={30} height={36} custom>
			
 
				+		<div class="text-3xl text-primary dark:text-dark">富</div>
			
 
				+	</Rate>
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">监听事件</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate half {value} on:click={getValueFun}/>
			
 
				-    <p class="mt-2">评分：{value} 星 </p>
			
 
				+	<Rate half {value} on:click={getValueFun} />
			
 
				+	<p class="mt-2">评分：{value} 星</p>
			
 
				 </div>
			
 
				 
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">所有激活图标都有点击动画</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate animation='active'/>
			
 
				+	<Rate animation="active" />
			
 
				 </div>
			
 
				 
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">关闭点击动画</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate animation='none'/>
			
 
				+	<Rate animation="none" />
			
 
				 </div>
			
--- a/demo/src/pages/rate/RateDemo_en.svelte
+++ b/demo/src/pages/rate/RateDemo_en.svelte
@@ -1,109 +1,110 @@
 
				 <!-- Rate Demo -->
			
 
				 <script>
			
 
				-    import {Rate, Icon} from 'stdf';
			
 
				+	import { Rate, Icon } from 'stdf';
			
 
				 
			
 
				-    let value = 2.5;
			
 
				-    const getValueFun = e => {
			
 
				-        value = e.detail;
			
 
				-    };
			
 
				+	let value = 2.5;
			
 
				+	const getValueFun = e => {
			
 
				+		value = e.detail;
			
 
				+	};
			
 
				 </script>
			
 
				+
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">Basic usage</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate/>
			
 
				+	<Rate />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">Set initial score</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate value={1}/>
			
 
				+	<Rate value={1} />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">Zero points allowed</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate zero/>
			
 
				+	<Rate zero />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">Custom score</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate total={8}/>
			
 
				+	<Rate total={8} />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">Set unselected transparency</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate opacity={0.8}/>
			
 
				+	<Rate opacity={0.8} />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">Allow semi-selection</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate half/>
			
 
				+	<Rate half />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">Vertical semi-selection</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate half vertical/>
			
 
				+	<Rate half vertical />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">Half option allows zero points</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate half zero/>
			
 
				+	<Rate half zero />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">Increase spacing</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate space="8"/>
			
 
				+	<Rate space="8" />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">disable</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate disabled/>
			
 
				+	<Rate disabled />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">Read only</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate readonly/>
			
 
				+	<Rate readonly />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">Different size</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate width={20} height={20}/>
			
 
				+	<Rate width={20} height={20} />
			
 
				 </div>
			
 
				 <div class="p-4">
			
 
				-    <Rate width={28} height={28}/>
			
 
				+	<Rate width={28} height={28} />
			
 
				 </div>
			
 
				 <div class="p-4">
			
 
				-    <Rate width={36} height={36}/>
			
 
				+	<Rate width={36} height={36} />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">customize</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate custom opacity={0.6}>
			
 
				-        <Icon name="ri-star-fill" injClass="text-[#f5b53f]"/>
			
 
				-    </Rate>
			
 
				+	<Rate custom opacity={0.6}>
			
 
				+		<Icon name="ri-star-fill" injClass="text-[#f5b53f]" />
			
 
				+	</Rate>
			
 
				 </div>
			
 
				 <div class="p-4">
			
 
				-    <Rate custom>
			
 
				-        <Icon name="ri-heart-3-fill" injClass="text-[red]"/>
			
 
				-    </Rate>
			
 
				+	<Rate custom>
			
 
				+		<Icon name="ri-heart-3-fill" injClass="text-[red]" />
			
 
				+	</Rate>
			
 
				 </div>
			
 
				 <div class="p-4">
			
 
				-    <Rate half custom>
			
 
				-        <Icon name="ri-heart-3-fill" injClass="text-[red]"/>
			
 
				-    </Rate>
			
 
				+	<Rate half custom>
			
 
				+		<Icon name="ri-heart-3-fill" injClass="text-[red]" />
			
 
				+	</Rate>
			
 
				 </div>
			
 
				 <div class="p-4">
			
 
				-    <Rate half opacity={0.5} width={30} height={36} custom>
			
 
				-        <div class="text-3xl">👍</div>
			
 
				-    </Rate>
			
 
				+	<Rate half opacity={0.5} width={30} height={36} custom>
			
 
				+		<div class="text-3xl">👍</div>
			
 
				+	</Rate>
			
 
				 </div>
			
 
				 <div class="p-4">
			
 
				-    <Rate half opacity={0.5} width={30} height={36} vertical custom>
			
 
				-        <div class="text-3xl">🍺</div>
			
 
				-    </Rate>
			
 
				+	<Rate half opacity={0.5} width={30} height={36} vertical custom>
			
 
				+		<div class="text-3xl">🍺</div>
			
 
				+	</Rate>
			
 
				 </div>
			
 
				 <div class="p-4">
			
 
				-    <Rate half opacity={0.5} width={30} height={36} custom>
			
 
				-        <div class="text-3xl text-primary dark:text-dark">M</div>
			
 
				-    </Rate>
			
 
				+	<Rate half opacity={0.5} width={30} height={36} custom>
			
 
				+		<div class="text-3xl text-primary dark:text-dark">M</div>
			
 
				+	</Rate>
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">Listening event</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate half {value} on:click={getValueFun}/>
			
 
				-    <p class="mt-2">Score:{value} star </p>
			
 
				+	<Rate half {value} on:click={getValueFun} />
			
 
				+	<p class="mt-2">Score:{value} star</p>
			
 
				 </div>
			
 
				 
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">All activation ICONS have click animations</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate animation='active'/>
			
 
				+	<Rate animation="active" />
			
 
				 </div>
			
 
				 
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">Close click animation</div>
			
 
				 <div class="p-4">
			
 
				-    <Rate animation='none'/>
			
 
				+	<Rate animation="none" />
			
 
				 </div>
			
--- a/demo/src/pages/skeleton/SkeletonDemo.svelte
+++ b/demo/src/pages/skeleton/SkeletonDemo.svelte
@@ -1,67 +1,68 @@
 
				 <!-- Skeleton Demo -->
			
 
				 <script>
			
 
				-    import { Skeleton } from 'stdf';
			
 
				+	import { Skeleton } from 'stdf';
			
 
				 </script>
			
 
				 
			
 
				 <div class="p-2">
			
 
				-    <div class="m-4 font-bold text-lg">示例 1</div>
			
 
				-    <div class="flex">
			
 
				-        <Skeleton width="16" height="16" radius="full" />
			
 
				-        <div class="grow">
			
 
				-            <Skeleton width="32" height="8" />
			
 
				-            <Skeleton type="p" />
			
 
				-        </div>
			
 
				-    </div>
			
 
				+	<div class="m-4 font-bold text-lg">示例 1</div>
			
 
				+	<div class="flex">
			
 
				+		<Skeleton width="16" height="16" radius="full" />
			
 
				+		<div class="grow">
			
 
				+			<Skeleton width="32" height="8" />
			
 
				+			<Skeleton type="p" />
			
 
				+		</div>
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="m-4 font-bold text-lg">示例 2</div>
			
 
				-    <div class="flex justify-between">
			
 
				-        <Skeleton width="16" height="16" />
			
 
				-        <Skeleton width="16" height="16" />
			
 
				-        <Skeleton width="16" height="16" />
			
 
				-        <Skeleton width="16" height="16" />
			
 
				-    </div>
			
 
				-    <Skeleton width="32" height="8" />
			
 
				-    <Skeleton type="p" lines={5} />
			
 
				+	<div class="m-4 font-bold text-lg">示例 2</div>
			
 
				+	<div class="flex justify-between">
			
 
				+		<Skeleton width="16" height="16" />
			
 
				+		<Skeleton width="16" height="16" />
			
 
				+		<Skeleton width="16" height="16" />
			
 
				+		<Skeleton width="16" height="16" />
			
 
				+	</div>
			
 
				+	<Skeleton width="32" height="8" />
			
 
				+	<Skeleton type="p" lines={5} />
			
 
				 
			
 
				-    <div class="m-4 font-bold text-lg">示例 3</div>
			
 
				-    <div class="flex">
			
 
				-        <Skeleton type="img" width="24" height="24" />
			
 
				-        <div class="grow">
			
 
				-            <Skeleton type="p" />
			
 
				-        </div>
			
 
				-    </div>
			
 
				+	<div class="m-4 font-bold text-lg">示例 3</div>
			
 
				+	<div class="flex">
			
 
				+		<Skeleton type="img" width="24" height="24" />
			
 
				+		<div class="grow">
			
 
				+			<Skeleton type="p" />
			
 
				+		</div>
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="m-4 font-bold text-lg">示例 4</div>
			
 
				-    <div class="flex">
			
 
				-        <div class="grow">
			
 
				-            <Skeleton width="32" height="8" />
			
 
				-            <Skeleton type="p" />
			
 
				-        </div>
			
 
				-        <Skeleton type="video" width="32" height="32" />
			
 
				-    </div>
			
 
				+	<div class="m-4 font-bold text-lg">示例 4</div>
			
 
				+	<div class="flex">
			
 
				+		<div class="grow">
			
 
				+			<Skeleton width="32" height="8" />
			
 
				+			<Skeleton type="p" />
			
 
				+		</div>
			
 
				+		<Skeleton type="video" width="32" height="32" />
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="m-4 font-bold text-lg">示例 5</div>
			
 
				-    <div class="flex flex-col items-center">
			
 
				-        <Skeleton width="24" height="24" radius="full" />
			
 
				-        <Skeleton width="16" height="6" />
			
 
				-        <Skeleton width="32" height="4" />
			
 
				-        <Skeleton type="qrcode" width="64" height="64" />
			
 
				-    </div>
			
 
				+	<div class="m-4 font-bold text-lg">示例 5</div>
			
 
				+	<div class="flex flex-col items-center">
			
 
				+		<Skeleton width="24" height="24" radius="full" />
			
 
				+		<Skeleton width="16" height="6" />
			
 
				+		<Skeleton width="32" height="4" />
			
 
				+		<Skeleton type="qrcode" width="64" height="64" />
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="m-4 font-bold text-lg">示例 6</div>
			
 
				-    {#each [1, 1, 1] as item}
			
 
				-        <div class="flex justify-between items-center">
			
 
				-            <div class="flex">
			
 
				-                <div class="flex">
			
 
				-                    <Skeleton width="12" height="12" radius="full" />
			
 
				-                    <div class="flex flex-col justify-between">
			
 
				-                        <Skeleton width="16" height="6" />
			
 
				-                        <Skeleton width="32" height="4" />
			
 
				-                    </div>
			
 
				-                </div>
			
 
				-            </div>
			
 
				-            <Skeleton width="16" height="8" radius="full" />
			
 
				-        </div>
			
 
				-        <Skeleton width="full" height="1" />
			
 
				-    {/each}
			
 
				+	<div class="m-4 font-bold text-lg">示例 6</div>
			
 
				+	<!-- eslint-disable-next-line no-unused-vars -->
			
 
				+	{#each [1, 1, 1] as item}
			
 
				+		<div class="flex justify-between items-center">
			
 
				+			<div class="flex">
			
 
				+				<div class="flex">
			
 
				+					<Skeleton width="12" height="12" radius="full" />
			
 
				+					<div class="flex flex-col justify-between">
			
 
				+						<Skeleton width="16" height="6" />
			
 
				+						<Skeleton width="32" height="4" />
			
 
				+					</div>
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<Skeleton width="16" height="8" radius="full" />
			
 
				+		</div>
			
 
				+		<Skeleton width="full" height="1" />
			
 
				+	{/each}
			
 
				 </div>
			
--- a/demo/src/pages/skeleton/SkeletonDemo_en.svelte
+++ b/demo/src/pages/skeleton/SkeletonDemo_en.svelte
@@ -1,67 +1,68 @@
 
				 <!-- Skeleton Demo -->
			
 
				 <script>
			
 
				-    import { Skeleton } from 'stdf';
			
 
				+	import { Skeleton } from 'stdf';
			
 
				 </script>
			
 
				 
			
 
				 <div class="p-2">
			
 
				-    <div class="m-4 font-bold text-lg">example 1</div>
			
 
				-    <div class="flex">
			
 
				-        <Skeleton width="16" height="16" radius="full" />
			
 
				-        <div class="grow">
			
 
				-            <Skeleton width="32" height="8" />
			
 
				-            <Skeleton type="p" />
			
 
				-        </div>
			
 
				-    </div>
			
 
				+	<div class="m-4 font-bold text-lg">example 1</div>
			
 
				+	<div class="flex">
			
 
				+		<Skeleton width="16" height="16" radius="full" />
			
 
				+		<div class="grow">
			
 
				+			<Skeleton width="32" height="8" />
			
 
				+			<Skeleton type="p" />
			
 
				+		</div>
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="m-4 font-bold text-lg">example 2</div>
			
 
				-    <div class="flex justify-between">
			
 
				-        <Skeleton width="16" height="16" />
			
 
				-        <Skeleton width="16" height="16" />
			
 
				-        <Skeleton width="16" height="16" />
			
 
				-        <Skeleton width="16" height="16" />
			
 
				-    </div>
			
 
				-    <Skeleton width="32" height="8" />
			
 
				-    <Skeleton type="p" lines={5} />
			
 
				+	<div class="m-4 font-bold text-lg">example 2</div>
			
 
				+	<div class="flex justify-between">
			
 
				+		<Skeleton width="16" height="16" />
			
 
				+		<Skeleton width="16" height="16" />
			
 
				+		<Skeleton width="16" height="16" />
			
 
				+		<Skeleton width="16" height="16" />
			
 
				+	</div>
			
 
				+	<Skeleton width="32" height="8" />
			
 
				+	<Skeleton type="p" lines={5} />
			
 
				 
			
 
				-    <div class="m-4 font-bold text-lg">example 3</div>
			
 
				-    <div class="flex">
			
 
				-        <Skeleton type="img" width="24" height="24" />
			
 
				-        <div class="grow">
			
 
				-            <Skeleton type="p" />
			
 
				-        </div>
			
 
				-    </div>
			
 
				+	<div class="m-4 font-bold text-lg">example 3</div>
			
 
				+	<div class="flex">
			
 
				+		<Skeleton type="img" width="24" height="24" />
			
 
				+		<div class="grow">
			
 
				+			<Skeleton type="p" />
			
 
				+		</div>
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="m-4 font-bold text-lg">example 4</div>
			
 
				-    <div class="flex">
			
 
				-        <div class="grow">
			
 
				-            <Skeleton width="32" height="8" />
			
 
				-            <Skeleton type="p" />
			
 
				-        </div>
			
 
				-        <Skeleton type="video" width="32" height="32" />
			
 
				-    </div>
			
 
				+	<div class="m-4 font-bold text-lg">example 4</div>
			
 
				+	<div class="flex">
			
 
				+		<div class="grow">
			
 
				+			<Skeleton width="32" height="8" />
			
 
				+			<Skeleton type="p" />
			
 
				+		</div>
			
 
				+		<Skeleton type="video" width="32" height="32" />
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="m-4 font-bold text-lg">example 5</div>
			
 
				-    <div class="flex flex-col items-center">
			
 
				-        <Skeleton width="24" height="24" radius="full" />
			
 
				-        <Skeleton width="16" height="6" />
			
 
				-        <Skeleton width="32" height="4" />
			
 
				-        <Skeleton type="qrcode" width="64" height="64" />
			
 
				-    </div>
			
 
				+	<div class="m-4 font-bold text-lg">example 5</div>
			
 
				+	<div class="flex flex-col items-center">
			
 
				+		<Skeleton width="24" height="24" radius="full" />
			
 
				+		<Skeleton width="16" height="6" />
			
 
				+		<Skeleton width="32" height="4" />
			
 
				+		<Skeleton type="qrcode" width="64" height="64" />
			
 
				+	</div>
			
 
				 
			
 
				-    <div class="m-4 font-bold text-lg">example 6</div>
			
 
				-    {#each [1, 1, 1] as item}
			
 
				-        <div class="flex justify-between items-center">
			
 
				-            <div class="flex">
			
 
				-                <div class="flex">
			
 
				-                    <Skeleton width="12" height="12" radius="full" />
			
 
				-                    <div class="flex flex-col justify-between">
			
 
				-                        <Skeleton width="16" height="6" />
			
 
				-                        <Skeleton width="32" height="4" />
			
 
				-                    </div>
			
 
				-                </div>
			
 
				-            </div>
			
 
				-            <Skeleton width="16" height="8" radius="full" />
			
 
				-        </div>
			
 
				-        <Skeleton width="full" height="1" />
			
 
				-    {/each}
			
 
				+	<div class="m-4 font-bold text-lg">example 6</div>
			
 
				+	<!-- eslint-disable-next-line no-unused-vars -->
			
 
				+	{#each [1, 1, 1] as item}
			
 
				+		<div class="flex justify-between items-center">
			
 
				+			<div class="flex">
			
 
				+				<div class="flex">
			
 
				+					<Skeleton width="12" height="12" radius="full" />
			
 
				+					<div class="flex flex-col justify-between">
			
 
				+						<Skeleton width="16" height="6" />
			
 
				+						<Skeleton width="32" height="4" />
			
 
				+					</div>
			
 
				+				</div>
			
 
				+			</div>
			
 
				+			<Skeleton width="16" height="8" radius="full" />
			
 
				+		</div>
			
 
				+		<Skeleton width="full" height="1" />
			
 
				+	{/each}
			
 
				 </div>
			
--- a/demo/src/pages/slider/SliderDemo.svelte
+++ b/demo/src/pages/slider/SliderDemo.svelte
@@ -1,125 +1,125 @@
 
				 <!-- Slider Demo -->
			
 
				 <script>
			
 
				-    import { Slider, Icon } from 'stdf';
			
 
				+	import { Slider, Icon } from 'stdf';
			
 
				 
			
 
				-    let value = 20;
			
 
				-    const onChangeFun = e => {
			
 
				-        value = e.detail;
			
 
				-    };
			
 
				-    let valueRange = [50, 60];
			
 
				-    const onChangeRangeFun = e => {
			
 
				-        valueRange = e.detail;
			
 
				-    };
			
 
				-    //生成指定数字之间的随机数组成的数组
			
 
				-    const randomArray = (min, max, length) => {
			
 
				-        let arr = [];
			
 
				-        for (let i = 0; i < length; i++) {
			
 
				-            arr.push(Math.floor(Math.random() * (max - min + 1) + min));
			
 
				-        }
			
 
				-        return arr;
			
 
				-    };
			
 
				-    //将数组递增或递减排序
			
 
				-    const sortArray = (arr, isAsc) => {
			
 
				-        return arr.sort((a, b) => (isAsc ? a - b : b - a));
			
 
				-    };
			
 
				-    const barList1 = sortArray(randomArray(2, 60, 20), true);
			
 
				-    const barList2 = sortArray(randomArray(2, 60, 20), false);
			
 
				-    const barList = [...barList1, ...barList2];
			
 
				-    let valueBar = 70;
			
 
				-    const onChangeBarFun = e => {
			
 
				-        valueBar = e.detail;
			
 
				-    };
			
 
				+	let value = 20;
			
 
				+	const onChangeFun = e => {
			
 
				+		value = e.detail;
			
 
				+	};
			
 
				+	let valueRange = [50, 60];
			
 
				+	const onChangeRangeFun = e => {
			
 
				+		valueRange = e.detail;
			
 
				+	};
			
 
				+	//生成指定数字之间的随机数组成的数组
			
 
				+	const randomArray = (min, max, length) => {
			
 
				+		let arr = [];
			
 
				+		for (let i = 0; i < length; i++) {
			
 
				+			arr.push(Math.floor(Math.random() * (max - min + 1) + min));
			
 
				+		}
			
 
				+		return arr;
			
 
				+	};
			
 
				+	//将数组递增或递减排序
			
 
				+	const sortArray = (arr, isAsc) => {
			
 
				+		return arr.sort((a, b) => (isAsc ? a - b : b - a));
			
 
				+	};
			
 
				+	const barList1 = sortArray(randomArray(2, 60, 20), true);
			
 
				+	const barList2 = sortArray(randomArray(2, 60, 20), false);
			
 
				+	const barList = [...barList1, ...barList2];
			
 
				+	let valueBar = 70;
			
 
				+	const onChangeBarFun = e => {
			
 
				+		valueBar = e.detail;
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">基础用法</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider />
			
 
				+	<Slider />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">监听 value</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider on:change={onChangeFun} {value} />
			
 
				-    当前值：{value}
			
 
				+	<Slider on:change={onChangeFun} {value} />
			
 
				+	当前值：{value}
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">步长为 5</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider step={5} />
			
 
				+	<Slider step={5} />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">步长为 0.1</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider step={0.1} value={0.2} minRange={0} maxRange={1} />
			
 
				+	<Slider step={0.1} value={0.2} minRange={0} maxRange={1} />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">设定可选范围（60-80）</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider value={68} minRange={60} maxRange={80} />
			
 
				+	<Slider value={68} minRange={60} maxRange={80} />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">区间选择</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider isRange />
			
 
				+	<Slider isRange />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">区间设定可选范围（40-80）</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider isRange minRange={40} maxRange={80} startValue={valueRange[0]} endValue={valueRange[1]} on:change={onChangeRangeFun} />
			
 
				-    当前区间：{valueRange[0]} - {valueRange[1]}
			
 
				+	<Slider isRange minRange={40} maxRange={80} startValue={valueRange[0]} endValue={valueRange[1]} on:change={onChangeRangeFun} />
			
 
				+	当前区间：{valueRange[0]} - {valueRange[1]}
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">不同圆角</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider radius="base" />
			
 
				+	<Slider radius="base" />
			
 
				 </div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider radius="none" />
			
 
				+	<Slider radius="none" />
			
 
				 </div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider radius="base" isRange />
			
 
				+	<Slider radius="base" isRange />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">线框滑块</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider lineBlock radius="base" />
			
 
				+	<Slider lineBlock radius="base" />
			
 
				 </div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider lineBlock isRange />
			
 
				+	<Slider lineBlock isRange />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">一直显示 Tip</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider showTip="always" />
			
 
				+	<Slider showTip="always" />
			
 
				 </div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider showTip="always" isRange />
			
 
				+	<Slider showTip="always" isRange />
			
 
				 </div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider showTip="always" radius="none" />
			
 
				+	<Slider showTip="always" radius="none" />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">不显示 Tip</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider showTip="never" />
			
 
				+	<Slider showTip="never" />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">组合布局</div>
			
 
				 <div class="flex space-x-3 p-4">
			
 
				-    <Icon name="ri-volume-mute-line" />
			
 
				-    <div class="grow">
			
 
				-        <Slider />
			
 
				-    </div>
			
 
				-    <Icon name="ri-volume-up-line" />
			
 
				+	<Icon name="ri-volume-mute-line" />
			
 
				+	<div class="grow">
			
 
				+		<Slider />
			
 
				+	</div>
			
 
				+	<Icon name="ri-volume-up-line" />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">使用 Slot</div>
			
 
				 <div class="px-6 pt-16">
			
 
				-    <Slider lineBlock showTip="never" useSlot value={valueBar} on:change={onChangeBarFun}>
			
 
				-        <div class="grow relative items-end">
			
 
				-            <div class="flex justify-between items-end overflow-hidden" style="transform: translateY(-30px);">
			
 
				-                {#each barList as item, i}
			
 
				-                    <div
			
 
				-                        class={`w-1 rounded-full${i / 40 < valueBar / 100 ? ' bg-primary dark:bg-dark' : ' bg-gray8 dark:bg-gray6'}`}
			
 
				-                        style="height: {item}px"
			
 
				-                    />
			
 
				-                {/each}
			
 
				-            </div>
			
 
				-        </div>
			
 
				-    </Slider>
			
 
				+	<Slider lineBlock showTip="never" useSlot value={valueBar} on:change={onChangeBarFun}>
			
 
				+		<div class="grow relative items-end">
			
 
				+			<div class="flex justify-between items-end overflow-hidden" style="transform: translateY(-30px);">
			
 
				+				{#each barList as item, i}
			
 
				+					<div
			
 
				+						class={`w-1 rounded-full${i / 40 < valueBar / 100 ? ' bg-primary dark:bg-dark' : ' bg-gray8 dark:bg-gray6'}`}
			
 
				+						style="height: {item}px"
			
 
				+					/>
			
 
				+				{/each}
			
 
				+			</div>
			
 
				+		</div>
			
 
				+	</Slider>
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">禁用</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider disabled />
			
 
				+	<Slider disabled />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">只读</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider readonly />
			
 
				+	<Slider readonly />
			
 
				 </div>
			
--- a/demo/src/pages/slider/SliderDemo_en.svelte
+++ b/demo/src/pages/slider/SliderDemo_en.svelte
@@ -1,125 +1,125 @@
 
				 <!-- Slider Demo -->
			
 
				 <script>
			
 
				-    import { Slider, Icon } from 'stdf';
			
 
				+	import { Slider, Icon } from 'stdf';
			
 
				 
			
 
				-    let value = 20;
			
 
				-    const onChangeFun = e => {
			
 
				-        value = e.detail;
			
 
				-    };
			
 
				-    let valueRange = [50, 60];
			
 
				-    const onChangeRangeFun = e => {
			
 
				-        valueRange = e.detail;
			
 
				-    };
			
 
				-    //Generates an array of random numbers between the specified numbers
			
 
				-    const randomArray = (min, max, length) => {
			
 
				-        let arr = [];
			
 
				-        for (let i = 0; i < length; i++) {
			
 
				-            arr.push(Math.floor(Math.random() * (max - min + 1) + min));
			
 
				-        }
			
 
				-        return arr;
			
 
				-    };
			
 
				-    //Sort an array incrementally or decently
			
 
				-    const sortArray = (arr, isAsc) => {
			
 
				-        return arr.sort((a, b) => (isAsc ? a - b : b - a));
			
 
				-    };
			
 
				-    const barList1 = sortArray(randomArray(2, 60, 20), true);
			
 
				-    const barList2 = sortArray(randomArray(2, 60, 20), false);
			
 
				-    const barList = [...barList1, ...barList2];
			
 
				-    let valueBar = 70;
			
 
				-    const onChangeBarFun = e => {
			
 
				-        valueBar = e.detail;
			
 
				-    };
			
 
				+	let value = 20;
			
 
				+	const onChangeFun = e => {
			
 
				+		value = e.detail;
			
 
				+	};
			
 
				+	let valueRange = [50, 60];
			
 
				+	const onChangeRangeFun = e => {
			
 
				+		valueRange = e.detail;
			
 
				+	};
			
 
				+	//Generates an array of random numbers between the specified numbers
			
 
				+	const randomArray = (min, max, length) => {
			
 
				+		let arr = [];
			
 
				+		for (let i = 0; i < length; i++) {
			
 
				+			arr.push(Math.floor(Math.random() * (max - min + 1) + min));
			
 
				+		}
			
 
				+		return arr;
			
 
				+	};
			
 
				+	//Sort an array incrementally or decently
			
 
				+	const sortArray = (arr, isAsc) => {
			
 
				+		return arr.sort((a, b) => (isAsc ? a - b : b - a));
			
 
				+	};
			
 
				+	const barList1 = sortArray(randomArray(2, 60, 20), true);
			
 
				+	const barList2 = sortArray(randomArray(2, 60, 20), false);
			
 
				+	const barList = [...barList1, ...barList2];
			
 
				+	let valueBar = 70;
			
 
				+	const onChangeBarFun = e => {
			
 
				+		valueBar = e.detail;
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">Basic usage</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider />
			
 
				+	<Slider />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">monitor value</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider on:change={onChangeFun} {value} />
			
 
				-    Current value:{value}
			
 
				+	<Slider on:change={onChangeFun} {value} />
			
 
				+	Current value:{value}
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">Step size is 5</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider step={5} />
			
 
				+	<Slider step={5} />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">Step size is 0.1</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider step={0.1} value={0.2} minRange={0} maxRange={1} />
			
 
				+	<Slider step={0.1} value={0.2} minRange={0} maxRange={1} />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">Set optional range (60-80)</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider value={68} minRange={60} maxRange={80} />
			
 
				+	<Slider value={68} minRange={60} maxRange={80} />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">Interval selection</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider isRange />
			
 
				+	<Slider isRange />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">Range setting Optional range (40-80)</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider isRange minRange={40} maxRange={80} startValue={valueRange[0]} endValue={valueRange[1]} on:change={onChangeRangeFun} />
			
 
				-    Current interval:{valueRange[0]} - {valueRange[1]}
			
 
				+	<Slider isRange minRange={40} maxRange={80} startValue={valueRange[0]} endValue={valueRange[1]} on:change={onChangeRangeFun} />
			
 
				+	Current interval:{valueRange[0]} - {valueRange[1]}
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">Different fillet</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider radius="base" />
			
 
				+	<Slider radius="base" />
			
 
				 </div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider radius="none" />
			
 
				+	<Slider radius="none" />
			
 
				 </div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider radius="base" isRange />
			
 
				+	<Slider radius="base" isRange />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">Wire frame slider</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider lineBlock radius="base" />
			
 
				+	<Slider lineBlock radius="base" />
			
 
				 </div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider lineBlock isRange />
			
 
				+	<Slider lineBlock isRange />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">Always show Tip</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider showTip="always" />
			
 
				+	<Slider showTip="always" />
			
 
				 </div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider showTip="always" isRange />
			
 
				+	<Slider showTip="always" isRange />
			
 
				 </div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider showTip="always" radius="none" />
			
 
				+	<Slider showTip="always" radius="none" />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">Do not display Tip</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider showTip="never" />
			
 
				+	<Slider showTip="never" />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">Composite layout</div>
			
 
				 <div class="flex space-x-3 p-4">
			
 
				-    <Icon name="ri-volume-mute-line" />
			
 
				-    <div class="grow">
			
 
				-        <Slider />
			
 
				-    </div>
			
 
				-    <Icon name="ri-volume-up-line" />
			
 
				+	<Icon name="ri-volume-mute-line" />
			
 
				+	<div class="grow">
			
 
				+		<Slider />
			
 
				+	</div>
			
 
				+	<Icon name="ri-volume-up-line" />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">use Slot</div>
			
 
				 <div class="px-6 pt-16">
			
 
				-    <Slider lineBlock showTip="never" useSlot value={valueBar} on:change={onChangeBarFun}>
			
 
				-        <div class="grow relative items-end">
			
 
				-            <div class="flex justify-between items-end overflow-hidden" style="transform: translateY(-30px);">
			
 
				-                {#each barList as item, i}
			
 
				-                    <div
			
 
				-                        class={`w-1 rounded-full${i / 40 < valueBar / 100 ? ' bg-primary dark:bg-dark' : ' bg-gray8 dark:bg-gray6'}`}
			
 
				-                        style="height: {item}px"
			
 
				-                    />
			
 
				-                {/each}
			
 
				-            </div>
			
 
				-        </div>
			
 
				-    </Slider>
			
 
				+	<Slider lineBlock showTip="never" useSlot value={valueBar} on:change={onChangeBarFun}>
			
 
				+		<div class="grow relative items-end">
			
 
				+			<div class="flex justify-between items-end overflow-hidden" style="transform: translateY(-30px);">
			
 
				+				{#each barList as item, i}
			
 
				+					<div
			
 
				+						class={`w-1 rounded-full${i / 40 < valueBar / 100 ? ' bg-primary dark:bg-dark' : ' bg-gray8 dark:bg-gray6'}`}
			
 
				+						style="height: {item}px"
			
 
				+					/>
			
 
				+				{/each}
			
 
				+			</div>
			
 
				+		</div>
			
 
				+	</Slider>
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">disable</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider disabled />
			
 
				+	<Slider disabled />
			
 
				 </div>
			
 
				 <div class="mx-4 mt-8 font-bold text-lg">Read only</div>
			
 
				 <div class="px-6 py-4">
			
 
				-    <Slider readonly />
			
 
				+	<Slider readonly />
			
 
				 </div>
			
--- a/demo/src/pages/steps/StepsDemo.svelte
+++ b/demo/src/pages/steps/StepsDemo.svelte
@@ -1,182 +1,182 @@
 
				 <!--Steps Demo -->
			
 
				 <script>
			
 
				-    import { Steps, Button, Divider } from 'stdf';
			
 
				-    import injCom1 from './injCom1.svelte';
			
 
				-    import injCom2 from './injCom2.svelte';
			
 
				+	import { Steps, Button, Divider } from 'stdf';
			
 
				+	import injCom1 from './injCom1.svelte';
			
 
				+	import injCom2 from './injCom2.svelte';
			
 
				 
			
 
				-    const steps = [
			
 
				-        { step: { title: '起床' } },
			
 
				-        { step: { title: '吃饭' } },
			
 
				-        { step: { title: '喝水' } },
			
 
				-        { step: { title: '打豆豆' } },
			
 
				-        { step: { title: '睡觉' } },
			
 
				-    ];
			
 
				-    const steps1 = [
			
 
				-        { step: { title: '起床', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } } },
			
 
				-        { step: { title: '吃饭', bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } } } },
			
 
				-        { step: { title: '喝水', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } } },
			
 
				-        { step: { title: '打豆豆', bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } } } },
			
 
				-        { step: { title: '睡觉', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } } },
			
 
				-    ];
			
 
				-    const steps2 = [
			
 
				-        { step: { title: '起床' }, finishStep: { title: '已起床' } },
			
 
				-        { step: { title: '吃饭' }, finishStep: { title: '吃饱了' } },
			
 
				-        { step: { title: '喝水' }, finishStep: { title: '喝足了' } },
			
 
				-        { step: { title: '打豆豆' }, finishStep: { title: '打爽了' } },
			
 
				-        { step: { title: '睡觉' }, finishStep: { title: '睡着了' } },
			
 
				-    ];
			
 
				-    const steps3 = [
			
 
				-        {
			
 
				-            step: { title: '起床', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } },
			
 
				-            finishStep: { title: '已起床', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-fill' } } },
			
 
				-        },
			
 
				-        {
			
 
				-            step: { title: '吃饭', bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } } },
			
 
				-            finishStep: { title: '吃饱了', bar: { type: 'icon', icon: { name: 'ri-restaurant-2-fill' } } },
			
 
				-        },
			
 
				-        {
			
 
				-            step: { title: '喝水', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } },
			
 
				-            finishStep: { title: '喝足了', bar: { type: 'icon', icon: { name: 'ri-cup-fill' } } },
			
 
				-        },
			
 
				-        {
			
 
				-            step: { title: '打豆豆', bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } } },
			
 
				-            finishStep: { title: '打爽了', bar: { type: 'icon', icon: { name: 'ri-emotion-sad-fill' } } },
			
 
				-        },
			
 
				-        {
			
 
				-            step: { title: '睡觉', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } },
			
 
				-            finishStep: { title: '睡着了', bar: { type: 'icon', icon: { name: 'ri-zzz-fill' } } },
			
 
				-        },
			
 
				-    ];
			
 
				-    const steps4 = [
			
 
				-        { step: { title: '起床', desc: '起床搬砖了！' } },
			
 
				-        { step: { title: '吃饭', desc: '吃吃吃，肥死你。' } },
			
 
				-        { step: { title: '喝水', desc: '慢慢走路，多多喝水。' } },
			
 
				-        {
			
 
				-            step: {
			
 
				-                title: '打豆豆',
			
 
				-                desc: '吃饭睡觉，打豆豆很爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽。顺便验证进度条高度自适应步骤文字高度。',
			
 
				-            },
			
 
				-        },
			
 
				-        { step: { title: '睡觉', desc: '吃太饱，睡不着。' } },
			
 
				-    ];
			
 
				-    const steps5 = [
			
 
				-        { step: { title: '起床', desc: '起床搬砖了！', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } } },
			
 
				-        {
			
 
				-            step: {
			
 
				-                title: '吃饭',
			
 
				-                desc: '吃吃吃，肥死你。',
			
 
				-                bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } },
			
 
				-            },
			
 
				-        },
			
 
				-        { step: { title: '喝水', desc: '慢慢走路，多多喝水。', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } } },
			
 
				-        {
			
 
				-            step: {
			
 
				-                title: '打豆豆',
			
 
				-                desc: '吃饭睡觉，打豆豆很爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽。顺便验证进度条高度自适应步骤文字高度。',
			
 
				-                bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } },
			
 
				-            },
			
 
				-        },
			
 
				-        { step: { title: '睡觉', desc: '吃太饱，睡不着。', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } } },
			
 
				-    ];
			
 
				-    const steps6 = [
			
 
				-        {
			
 
				-            step: { title: '起床', desc: '起床搬砖了！', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } },
			
 
				-            finishStep: {
			
 
				-                title: '已起床',
			
 
				-                desc: '砖已经搬完了！',
			
 
				-                bar: { type: 'icon', icon: { name: 'ri-hotel-bed-fill' } },
			
 
				-            },
			
 
				-        },
			
 
				-        {
			
 
				-            step: {
			
 
				-                title: '吃饭',
			
 
				-                desc: '吃吃吃，肥死你。',
			
 
				-                bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } },
			
 
				-            },
			
 
				-            finishStep: {
			
 
				-                title: '吃饱了',
			
 
				-                desc: '饭已经全部被吃完了！',
			
 
				-                bar: { type: 'icon', icon: { name: 'ri-restaurant-2-fill' } },
			
 
				-            },
			
 
				-        },
			
 
				-        {
			
 
				-            step: { title: '喝水', desc: '慢慢走路，多多喝水。', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } },
			
 
				-            finishStep: {
			
 
				-                title: '喝足了',
			
 
				-                desc: '水喝太多，从眼睛里溢出来了！',
			
 
				-                bar: { type: 'icon', icon: { name: 'ri-cup-fill' } },
			
 
				-            },
			
 
				-        },
			
 
				-        {
			
 
				-            step: {
			
 
				-                title: '打豆豆',
			
 
				-                desc: '吃饭睡觉，打豆豆。',
			
 
				-                bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } },
			
 
				-            },
			
 
				-            finishStep: {
			
 
				-                title: '打爽了',
			
 
				-                desc: '豆豆已经被打趴下了。',
			
 
				-                bar: { type: 'icon', icon: { name: 'ri-emotion-sad-fill' } },
			
 
				-            },
			
 
				-        },
			
 
				-        {
			
 
				-            step: { title: '睡觉', desc: '吃太饱，睡不着。', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } },
			
 
				-            finishStep: {
			
 
				-                title: '睡着了',
			
 
				-                desc: '睡着了正在做梦呢！',
			
 
				-                bar: { type: 'icon', icon: { name: 'ri-zzz-fill' } },
			
 
				-            },
			
 
				-        },
			
 
				-    ];
			
 
				-    const steps7 = [
			
 
				-        { step: { title: '起床', desc: '起床搬砖了！', bar: '1' } },
			
 
				-        { step: { title: '吃饭', desc: '吃吃吃，肥死你。', bar: '吃' } },
			
 
				-        { step: { title: '喝水', desc: '慢慢走路，多多喝水。', bar: '3' } },
			
 
				-        {
			
 
				-            step: {
			
 
				-                title: '打豆豆',
			
 
				-                desc: '吃饭睡觉，打豆豆。',
			
 
				-                bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } },
			
 
				-            },
			
 
				-        },
			
 
				-        { step: { title: '睡觉', desc: '吃太饱，睡不着。', bar: '😴' } },
			
 
				-    ];
			
 
				-    const steps8 = [
			
 
				-        { step: { title: '起床', bar: { type: 'image', image: './assets/images/avatar_2.png' } } },
			
 
				-        { step: { title: '吃饭', bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } } } },
			
 
				-        { step: { title: '喝水', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } } },
			
 
				-        { step: { title: '打豆豆', bar: { type: 'image', image: './assets/images/avatar_1.jpg' } } },
			
 
				-        { step: { title: '睡觉', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } } },
			
 
				-    ];
			
 
				-    const steps9 = [
			
 
				-        { step: { title: '起床', desc: '起床搬砖了！', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } } },
			
 
				-        {
			
 
				-            step: {
			
 
				-                title: '吃饭',
			
 
				-                desc: '吃吃吃，肥死你。',
			
 
				-                bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } },
			
 
				-                injComponent: injCom1,
			
 
				-            },
			
 
				-        },
			
 
				-        { step: { title: '喝水', desc: '慢慢走路，多多喝水。', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } } },
			
 
				-        {
			
 
				-            step: {
			
 
				-                title: '打豆豆',
			
 
				-                desc: '吃饭睡觉，打豆豆。',
			
 
				-                bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } },
			
 
				-                injComponent: injCom2,
			
 
				-            },
			
 
				-        },
			
 
				-        { step: { title: '睡觉', desc: '吃太饱，睡不着。', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } } },
			
 
				-    ];
			
 
				+	const steps = [
			
 
				+		{ step: { title: '起床' } },
			
 
				+		{ step: { title: '吃饭' } },
			
 
				+		{ step: { title: '喝水' } },
			
 
				+		{ step: { title: '打豆豆' } },
			
 
				+		{ step: { title: '睡觉' } },
			
 
				+	];
			
 
				+	const steps1 = [
			
 
				+		{ step: { title: '起床', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } } },
			
 
				+		{ step: { title: '吃饭', bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } } } },
			
 
				+		{ step: { title: '喝水', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } } },
			
 
				+		{ step: { title: '打豆豆', bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } } } },
			
 
				+		{ step: { title: '睡觉', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } } },
			
 
				+	];
			
 
				+	const steps2 = [
			
 
				+		{ step: { title: '起床' }, finishStep: { title: '已起床' } },
			
 
				+		{ step: { title: '吃饭' }, finishStep: { title: '吃饱了' } },
			
 
				+		{ step: { title: '喝水' }, finishStep: { title: '喝足了' } },
			
 
				+		{ step: { title: '打豆豆' }, finishStep: { title: '打爽了' } },
			
 
				+		{ step: { title: '睡觉' }, finishStep: { title: '睡着了' } },
			
 
				+	];
			
 
				+	const steps3 = [
			
 
				+		{
			
 
				+			step: { title: '起床', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } },
			
 
				+			finishStep: { title: '已起床', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-fill' } } },
			
 
				+		},
			
 
				+		{
			
 
				+			step: { title: '吃饭', bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } } },
			
 
				+			finishStep: { title: '吃饱了', bar: { type: 'icon', icon: { name: 'ri-restaurant-2-fill' } } },
			
 
				+		},
			
 
				+		{
			
 
				+			step: { title: '喝水', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } },
			
 
				+			finishStep: { title: '喝足了', bar: { type: 'icon', icon: { name: 'ri-cup-fill' } } },
			
 
				+		},
			
 
				+		{
			
 
				+			step: { title: '打豆豆', bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } } },
			
 
				+			finishStep: { title: '打爽了', bar: { type: 'icon', icon: { name: 'ri-emotion-sad-fill' } } },
			
 
				+		},
			
 
				+		{
			
 
				+			step: { title: '睡觉', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } },
			
 
				+			finishStep: { title: '睡着了', bar: { type: 'icon', icon: { name: 'ri-zzz-fill' } } },
			
 
				+		},
			
 
				+	];
			
 
				+	const steps4 = [
			
 
				+		{ step: { title: '起床', desc: '起床搬砖了！' } },
			
 
				+		{ step: { title: '吃饭', desc: '吃吃吃，肥死你。' } },
			
 
				+		{ step: { title: '喝水', desc: '慢慢走路，多多喝水。' } },
			
 
				+		{
			
 
				+			step: {
			
 
				+				title: '打豆豆',
			
 
				+				desc: '吃饭睡觉，打豆豆很爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽。顺便验证进度条高度自适应步骤文字高度。',
			
 
				+			},
			
 
				+		},
			
 
				+		{ step: { title: '睡觉', desc: '吃太饱，睡不着。' } },
			
 
				+	];
			
 
				+	const steps5 = [
			
 
				+		{ step: { title: '起床', desc: '起床搬砖了！', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } } },
			
 
				+		{
			
 
				+			step: {
			
 
				+				title: '吃饭',
			
 
				+				desc: '吃吃吃，肥死你。',
			
 
				+				bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } },
			
 
				+			},
			
 
				+		},
			
 
				+		{ step: { title: '喝水', desc: '慢慢走路，多多喝水。', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } } },
			
 
				+		{
			
 
				+			step: {
			
 
				+				title: '打豆豆',
			
 
				+				desc: '吃饭睡觉，打豆豆很爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽爽。顺便验证进度条高度自适应步骤文字高度。',
			
 
				+				bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } },
			
 
				+			},
			
 
				+		},
			
 
				+		{ step: { title: '睡觉', desc: '吃太饱，睡不着。', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } } },
			
 
				+	];
			
 
				+	const steps6 = [
			
 
				+		{
			
 
				+			step: { title: '起床', desc: '起床搬砖了！', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } },
			
 
				+			finishStep: {
			
 
				+				title: '已起床',
			
 
				+				desc: '砖已经搬完了！',
			
 
				+				bar: { type: 'icon', icon: { name: 'ri-hotel-bed-fill' } },
			
 
				+			},
			
 
				+		},
			
 
				+		{
			
 
				+			step: {
			
 
				+				title: '吃饭',
			
 
				+				desc: '吃吃吃，肥死你。',
			
 
				+				bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } },
			
 
				+			},
			
 
				+			finishStep: {
			
 
				+				title: '吃饱了',
			
 
				+				desc: '饭已经全部被吃完了！',
			
 
				+				bar: { type: 'icon', icon: { name: 'ri-restaurant-2-fill' } },
			
 
				+			},
			
 
				+		},
			
 
				+		{
			
 
				+			step: { title: '喝水', desc: '慢慢走路，多多喝水。', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } },
			
 
				+			finishStep: {
			
 
				+				title: '喝足了',
			
 
				+				desc: '水喝太多，从眼睛里溢出来了！',
			
 
				+				bar: { type: 'icon', icon: { name: 'ri-cup-fill' } },
			
 
				+			},
			
 
				+		},
			
 
				+		{
			
 
				+			step: {
			
 
				+				title: '打豆豆',
			
 
				+				desc: '吃饭睡觉，打豆豆。',
			
 
				+				bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } },
			
 
				+			},
			
 
				+			finishStep: {
			
 
				+				title: '打爽了',
			
 
				+				desc: '豆豆已经被打趴下了。',
			
 
				+				bar: { type: 'icon', icon: { name: 'ri-emotion-sad-fill' } },
			
 
				+			},
			
 
				+		},
			
 
				+		{
			
 
				+			step: { title: '睡觉', desc: '吃太饱，睡不着。', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } },
			
 
				+			finishStep: {
			
 
				+				title: '睡着了',
			
 
				+				desc: '睡着了正在做梦呢！',
			
 
				+				bar: { type: 'icon', icon: { name: 'ri-zzz-fill' } },
			
 
				+			},
			
 
				+		},
			
 
				+	];
			
 
				+	const steps7 = [
			
 
				+		{ step: { title: '起床', desc: '起床搬砖了！', bar: '1' } },
			
 
				+		{ step: { title: '吃饭', desc: '吃吃吃，肥死你。', bar: '吃' } },
			
 
				+		{ step: { title: '喝水', desc: '慢慢走路，多多喝水。', bar: '3' } },
			
 
				+		{
			
 
				+			step: {
			
 
				+				title: '打豆豆',
			
 
				+				desc: '吃饭睡觉，打豆豆。',
			
 
				+				bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } },
			
 
				+			},
			
 
				+		},
			
 
				+		{ step: { title: '睡觉', desc: '吃太饱，睡不着。', bar: '😴' } },
			
 
				+	];
			
 
				+	const steps8 = [
			
 
				+		{ step: { title: '起床', bar: { type: 'image', image: './assets/images/avatar_2.png' } } },
			
 
				+		{ step: { title: '吃饭', bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } } } },
			
 
				+		{ step: { title: '喝水', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } } },
			
 
				+		{ step: { title: '打豆豆', bar: { type: 'image', image: './assets/images/avatar_1.jpg' } } },
			
 
				+		{ step: { title: '睡觉', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } } },
			
 
				+	];
			
 
				+	const steps9 = [
			
 
				+		{ step: { title: '起床', desc: '起床搬砖了！', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } } },
			
 
				+		{
			
 
				+			step: {
			
 
				+				title: '吃饭',
			
 
				+				desc: '吃吃吃，肥死你。',
			
 
				+				bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } },
			
 
				+				injComponent: injCom1,
			
 
				+			},
			
 
				+		},
			
 
				+		{ step: { title: '喝水', desc: '慢慢走路，多多喝水。', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } } },
			
 
				+		{
			
 
				+			step: {
			
 
				+				title: '打豆豆',
			
 
				+				desc: '吃饭睡觉，打豆豆。',
			
 
				+				bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } },
			
 
				+				injComponent: injCom2,
			
 
				+			},
			
 
				+		},
			
 
				+		{ step: { title: '睡觉', desc: '吃太饱，睡不着。', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } } },
			
 
				+	];
			
 
				 
			
 
				-    let current = 1;
			
 
				-    const preFun = () => {
			
 
				-        current > 1 && current--;
			
 
				-    };
			
 
				-    const nextFun = () => {
			
 
				-        current < steps.length + 1 && current++;
			
 
				-    };
			
 
				+	let current = 1;
			
 
				+	const preFun = () => {
			
 
				+		current > 1 && current--;
			
 
				+	};
			
 
				+	const nextFun = () => {
			
 
				+		current < steps.length + 1 && current++;
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="mt-8 px-4 mb-4 font-bold text-2xl">横向排列</div>
			
@@ -214,25 +214,25 @@
 
				 <div class="mt-4 px-4 mb-4 font-bold text-2xl">纵向排列</div>
			
 
				 <div class="mt-8 px-4 mb-4 font-bold text-lg">不同圆角</div>
			
 
				 <div class="flex justify-around">
			
 
				-    <Steps {steps} {current} vertical />
			
 
				-    <Steps {steps} {current} radius="none" vertical />
			
 
				-    <Steps {steps} {current} radius="full" vertical />
			
 
				+	<Steps {steps} {current} vertical />
			
 
				+	<Steps {steps} {current} radius="none" vertical />
			
 
				+	<Steps {steps} {current} radius="full" vertical />
			
 
				 </div>
			
 
				 
			
 
				 <div class="mt-8 px-4 mb-4 font-bold text-lg">图标不同边框</div>
			
 
				 <div class="flex justify-around">
			
 
				-    <Steps steps={steps1} {current} vertical />
			
 
				-    <Steps steps={steps1} {current} vertical radius="full" barBorder={false} />
			
 
				+	<Steps steps={steps1} {current} vertical />
			
 
				+	<Steps steps={steps1} {current} vertical radius="full" barBorder={false} />
			
 
				 </div>
			
 
				 <Divider px="8" />
			
 
				 <div class="flex justify-around">
			
 
				-    <Steps steps={steps1} {current} vertical barBorder={false} radius="none" />
			
 
				-    <Steps steps={steps1} {current} vertical radius="none" />
			
 
				+	<Steps steps={steps1} {current} vertical barBorder={false} radius="none" />
			
 
				+	<Steps steps={steps1} {current} vertical radius="none" />
			
 
				 </div>
			
 
				 <Divider px="8" />
			
 
				 <div class="flex justify-around">
			
 
				-    <Steps steps={steps1} {current} vertical radius="xl" />
			
 
				-    <Steps steps={steps1} {current} vertical radius="full" />
			
 
				+	<Steps steps={steps1} {current} vertical radius="xl" />
			
 
				+	<Steps steps={steps1} {current} vertical radius="full" />
			
 
				 </div>
			
 
				 
			
 
				 <div class="mt-8 px-4 mb-4 font-bold text-lg">带描述信息</div>
			
@@ -248,20 +248,20 @@
 
				 
			
 
				 <div class="mt-8 px-4 mb-4 font-bold text-lg">步骤栏区域使用图片</div>
			
 
				 <div class="flex justify-around">
			
 
				-    <Steps steps={steps8} {current} vertical />
			
 
				-    <Steps steps={steps8} {current} radius="full" vertical />
			
 
				+	<Steps steps={steps8} {current} vertical />
			
 
				+	<Steps steps={steps8} {current} radius="full" vertical />
			
 
				 </div>
			
 
				 
			
 
				 <div class="mt-8 px-4 mb-4 font-bold text-lg">内容区域注入元素</div>
			
 
				 <Steps steps={steps9} {current} vertical />
			
 
				 
			
 
				 <div class="flex sticky bottom-0 z-10 bg-white/60 dark:bg-gray1/60 backdrop-blur">
			
 
				-    <div class="flex-1">
			
 
				-        <Button fill="lineTheme" on:click={preFun}>上一步</Button>
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <Button fill="lineTheme" on:click={nextFun}>下一步</Button>
			
 
				-    </div>
			
 
				+	<div class="flex-1">
			
 
				+		<Button fill="lineTheme" on:click={preFun}>上一步</Button>
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<Button fill="lineTheme" on:click={nextFun}>下一步</Button>
			
 
				+	</div>
			
 
				 </div>
			
 
				 
			
 
				 <!-- injCom1.svelte -->
			
--- a/demo/src/pages/steps/StepsDemo_en.svelte
+++ b/demo/src/pages/steps/StepsDemo_en.svelte
@@ -1,182 +1,182 @@
 
				 <!--Steps Demo -->
			
 
				 <script>
			
 
				-    import { Steps, Button, Divider } from 'stdf';
			
 
				-    import injCom1 from './injCom1_en.svelte';
			
 
				-    import injCom2 from './injCom2_en.svelte';
			
 
				+	import { Steps, Button, Divider } from 'stdf';
			
 
				+	import injCom1 from './injCom1_en.svelte';
			
 
				+	import injCom2 from './injCom2_en.svelte';
			
 
				 
			
 
				-    const steps = [
			
 
				-        { step: { title: 'Get up' } },
			
 
				-        { step: { title: 'Eat' } },
			
 
				-        { step: { title: 'Drink' } },
			
 
				-        { step: { title: 'Beat beans' } },
			
 
				-        { step: { title: 'sleep' } },
			
 
				-    ];
			
 
				-    const steps1 = [
			
 
				-        { step: { title: 'Get up', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } } },
			
 
				-        { step: { title: 'Eat', bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } } } },
			
 
				-        { step: { title: 'Drink', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } } },
			
 
				-        { step: { title: 'Beat beans', bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } } } },
			
 
				-        { step: { title: 'sleep', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } } },
			
 
				-    ];
			
 
				-    const steps2 = [
			
 
				-        { step: { title: 'Get up' }, finishStep: { title: 'Have got up' } },
			
 
				-        { step: { title: 'Eat' }, finishStep: { title: 'Have had enough' } },
			
 
				-        { step: { title: 'Drink' }, finishStep: { title: 'Drink up' } },
			
 
				-        { step: { title: 'Beat beans' }, finishStep: { title: 'Have a good time' } },
			
 
				-        { step: { title: 'sleep' }, finishStep: { title: 'Fall asleep' } },
			
 
				-    ];
			
 
				-    const steps3 = [
			
 
				-        {
			
 
				-            step: { title: 'Get up', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } },
			
 
				-            finishStep: { title: 'Have got up', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-fill' } } },
			
 
				-        },
			
 
				-        {
			
 
				-            step: { title: 'Eat', bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } } },
			
 
				-            finishStep: { title: 'Have had enough', bar: { type: 'icon', icon: { name: 'ri-restaurant-2-fill' } } },
			
 
				-        },
			
 
				-        {
			
 
				-            step: { title: 'Drink', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } },
			
 
				-            finishStep: { title: 'Drink up', bar: { type: 'icon', icon: { name: 'ri-cup-fill' } } },
			
 
				-        },
			
 
				-        {
			
 
				-            step: { title: 'Beat beans', bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } } },
			
 
				-            finishStep: { title: 'Have a good time', bar: { type: 'icon', icon: { name: 'ri-emotion-sad-fill' } } },
			
 
				-        },
			
 
				-        {
			
 
				-            step: { title: 'sleep', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } },
			
 
				-            finishStep: { title: 'Fall asleep', bar: { type: 'icon', icon: { name: 'ri-zzz-fill' } } },
			
 
				-        },
			
 
				-    ];
			
 
				-    const steps4 = [
			
 
				-        { step: { title: 'Get up', desc: 'Get up and move bricks!' } },
			
 
				-        { step: { title: 'Eat', desc: 'Eat, eat, eat, eat, fat you.' } },
			
 
				-        { step: { title: 'Drink', desc: 'Walk slowly and drink lots of water.' } },
			
 
				-        {
			
 
				-            step: {
			
 
				-                title: 'Beat beans',
			
 
				-                desc: "Eat, sleep, play peas it's cool, it's cool, it's cool, it's cool. By the way to verify the progress bar height adaptive step text height.",
			
 
				-            },
			
 
				-        },
			
 
				-        { step: { title: 'sleep', desc: 'Too full to sleep.' } },
			
 
				-    ];
			
 
				-    const steps5 = [
			
 
				-        { step: { title: 'Get up', desc: 'Get up and move bricks!', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } } },
			
 
				-        {
			
 
				-            step: {
			
 
				-                title: 'Eat',
			
 
				-                desc: 'Eat, eat, eat, eat, fat you.',
			
 
				-                bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } },
			
 
				-            },
			
 
				-        },
			
 
				-        { step: { title: 'Drink', desc: 'Walk slowly and drink lots of water.', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } } },
			
 
				-        {
			
 
				-            step: {
			
 
				-                title: 'Beat beans',
			
 
				-                desc: "Eat, sleep, play peas It's cool, it's cool, it's cool, it's cool, it's cool. By the way to verify the progress bar height adaptive step text height.",
			
 
				-                bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } },
			
 
				-            },
			
 
				-        },
			
 
				-        { step: { title: 'sleep', desc: 'Too full to sleep.', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } } },
			
 
				-    ];
			
 
				-    const steps6 = [
			
 
				-        {
			
 
				-            step: { title: 'Get up', desc: 'Get up and move bricks!', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } },
			
 
				-            finishStep: {
			
 
				-                title: 'Have got up',
			
 
				-                desc: 'The bricks are gone!',
			
 
				-                bar: { type: 'icon', icon: { name: 'ri-hotel-bed-fill' } },
			
 
				-            },
			
 
				-        },
			
 
				-        {
			
 
				-            step: {
			
 
				-                title: 'Eat',
			
 
				-                desc: 'Eat, eat, eat, eat, fat you.',
			
 
				-                bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } },
			
 
				-            },
			
 
				-            finishStep: {
			
 
				-                title: 'Have had enough',
			
 
				-                desc: 'The meal has been eaten up!',
			
 
				-                bar: { type: 'icon', icon: { name: 'ri-restaurant-2-fill' } },
			
 
				-            },
			
 
				-        },
			
 
				-        {
			
 
				-            step: { title: 'Drink', desc: 'Walk slowly and drink lots of water.', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } },
			
 
				-            finishStep: {
			
 
				-                title: 'Drink up',
			
 
				-                desc: 'I drink too much water and it spills out of my eyes!',
			
 
				-                bar: { type: 'icon', icon: { name: 'ri-cup-fill' } },
			
 
				-            },
			
 
				-        },
			
 
				-        {
			
 
				-            step: {
			
 
				-                title: 'Beat beans',
			
 
				-                desc: 'Eat, sleep, play beans.',
			
 
				-                bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } },
			
 
				-            },
			
 
				-            finishStep: {
			
 
				-                title: 'Have a good time',
			
 
				-                desc: 'Doudou has been beaten to the ground.',
			
 
				-                bar: { type: 'icon', icon: { name: 'ri-emotion-sad-fill' } },
			
 
				-            },
			
 
				-        },
			
 
				-        {
			
 
				-            step: { title: 'sleep', desc: 'Too full to sleep.', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } },
			
 
				-            finishStep: {
			
 
				-                title: 'Fall asleep',
			
 
				-                desc: 'Asleep and dreaming!',
			
 
				-                bar: { type: 'icon', icon: { name: 'ri-zzz-fill' } },
			
 
				-            },
			
 
				-        },
			
 
				-    ];
			
 
				-    const steps7 = [
			
 
				-        { step: { title: 'Get up', desc: 'Get up and move bricks!', bar: '1' } },
			
 
				-        { step: { title: 'Eat', desc: 'Eat, eat, eat, eat, fat you.', bar: 'eat' } },
			
 
				-        { step: { title: 'Drink', desc: 'Walk slowly and drink lots of water.', bar: '3' } },
			
 
				-        {
			
 
				-            step: {
			
 
				-                title: 'Beat beans',
			
 
				-                desc: 'Eat, sleep, play beans.',
			
 
				-                bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } },
			
 
				-            },
			
 
				-        },
			
 
				-        { step: { title: 'sleep', desc: 'Too full to sleep.', bar: '😴' } },
			
 
				-    ];
			
 
				-    const steps8 = [
			
 
				-        { step: { title: 'Get up', bar: { type: 'image', image: './assets/images/avatar_2.png' } } },
			
 
				-        { step: { title: 'Eat', bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } } } },
			
 
				-        { step: { title: 'Drink', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } } },
			
 
				-        { step: { title: 'Beat beans', bar: { type: 'image', image: './assets/images/avatar_1.jpg' } } },
			
 
				-        { step: { title: 'sleep', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } } },
			
 
				-    ];
			
 
				-    const steps9 = [
			
 
				-        { step: { title: 'Get up', desc: 'Get up and move bricks!', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } } },
			
 
				-        {
			
 
				-            step: {
			
 
				-                title: 'Eat',
			
 
				-                desc: 'Eat, eat, eat, eat, fat you.',
			
 
				-                bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } },
			
 
				-                injComponent: injCom1,
			
 
				-            },
			
 
				-        },
			
 
				-        { step: { title: 'Drink', desc: 'Walk slowly and drink lots of water.', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } } },
			
 
				-        {
			
 
				-            step: {
			
 
				-                title: 'Beat beans',
			
 
				-                desc: 'Eat, sleep, play beans.',
			
 
				-                bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } },
			
 
				-                injComponent: injCom2,
			
 
				-            },
			
 
				-        },
			
 
				-        { step: { title: 'sleep', desc: 'Too full to sleep.', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } } },
			
 
				-    ];
			
 
				+	const steps = [
			
 
				+		{ step: { title: 'Get up' } },
			
 
				+		{ step: { title: 'Eat' } },
			
 
				+		{ step: { title: 'Drink' } },
			
 
				+		{ step: { title: 'Beat beans' } },
			
 
				+		{ step: { title: 'sleep' } },
			
 
				+	];
			
 
				+	const steps1 = [
			
 
				+		{ step: { title: 'Get up', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } } },
			
 
				+		{ step: { title: 'Eat', bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } } } },
			
 
				+		{ step: { title: 'Drink', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } } },
			
 
				+		{ step: { title: 'Beat beans', bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } } } },
			
 
				+		{ step: { title: 'sleep', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } } },
			
 
				+	];
			
 
				+	const steps2 = [
			
 
				+		{ step: { title: 'Get up' }, finishStep: { title: 'Have got up' } },
			
 
				+		{ step: { title: 'Eat' }, finishStep: { title: 'Have had enough' } },
			
 
				+		{ step: { title: 'Drink' }, finishStep: { title: 'Drink up' } },
			
 
				+		{ step: { title: 'Beat beans' }, finishStep: { title: 'Have a good time' } },
			
 
				+		{ step: { title: 'sleep' }, finishStep: { title: 'Fall asleep' } },
			
 
				+	];
			
 
				+	const steps3 = [
			
 
				+		{
			
 
				+			step: { title: 'Get up', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } },
			
 
				+			finishStep: { title: 'Have got up', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-fill' } } },
			
 
				+		},
			
 
				+		{
			
 
				+			step: { title: 'Eat', bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } } },
			
 
				+			finishStep: { title: 'Have had enough', bar: { type: 'icon', icon: { name: 'ri-restaurant-2-fill' } } },
			
 
				+		},
			
 
				+		{
			
 
				+			step: { title: 'Drink', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } },
			
 
				+			finishStep: { title: 'Drink up', bar: { type: 'icon', icon: { name: 'ri-cup-fill' } } },
			
 
				+		},
			
 
				+		{
			
 
				+			step: { title: 'Beat beans', bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } } },
			
 
				+			finishStep: { title: 'Have a good time', bar: { type: 'icon', icon: { name: 'ri-emotion-sad-fill' } } },
			
 
				+		},
			
 
				+		{
			
 
				+			step: { title: 'sleep', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } },
			
 
				+			finishStep: { title: 'Fall asleep', bar: { type: 'icon', icon: { name: 'ri-zzz-fill' } } },
			
 
				+		},
			
 
				+	];
			
 
				+	const steps4 = [
			
 
				+		{ step: { title: 'Get up', desc: 'Get up and move bricks!' } },
			
 
				+		{ step: { title: 'Eat', desc: 'Eat, eat, eat, eat, fat you.' } },
			
 
				+		{ step: { title: 'Drink', desc: 'Walk slowly and drink lots of water.' } },
			
 
				+		{
			
 
				+			step: {
			
 
				+				title: 'Beat beans',
			
 
				+				desc: "Eat, sleep, play peas it's cool, it's cool, it's cool, it's cool. By the way to verify the progress bar height adaptive step text height.",
			
 
				+			},
			
 
				+		},
			
 
				+		{ step: { title: 'sleep', desc: 'Too full to sleep.' } },
			
 
				+	];
			
 
				+	const steps5 = [
			
 
				+		{ step: { title: 'Get up', desc: 'Get up and move bricks!', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } } },
			
 
				+		{
			
 
				+			step: {
			
 
				+				title: 'Eat',
			
 
				+				desc: 'Eat, eat, eat, eat, fat you.',
			
 
				+				bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } },
			
 
				+			},
			
 
				+		},
			
 
				+		{ step: { title: 'Drink', desc: 'Walk slowly and drink lots of water.', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } } },
			
 
				+		{
			
 
				+			step: {
			
 
				+				title: 'Beat beans',
			
 
				+				desc: "Eat, sleep, play peas It's cool, it's cool, it's cool, it's cool, it's cool. By the way to verify the progress bar height adaptive step text height.",
			
 
				+				bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } },
			
 
				+			},
			
 
				+		},
			
 
				+		{ step: { title: 'sleep', desc: 'Too full to sleep.', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } } },
			
 
				+	];
			
 
				+	const steps6 = [
			
 
				+		{
			
 
				+			step: { title: 'Get up', desc: 'Get up and move bricks!', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } },
			
 
				+			finishStep: {
			
 
				+				title: 'Have got up',
			
 
				+				desc: 'The bricks are gone!',
			
 
				+				bar: { type: 'icon', icon: { name: 'ri-hotel-bed-fill' } },
			
 
				+			},
			
 
				+		},
			
 
				+		{
			
 
				+			step: {
			
 
				+				title: 'Eat',
			
 
				+				desc: 'Eat, eat, eat, eat, fat you.',
			
 
				+				bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } },
			
 
				+			},
			
 
				+			finishStep: {
			
 
				+				title: 'Have had enough',
			
 
				+				desc: 'The meal has been eaten up!',
			
 
				+				bar: { type: 'icon', icon: { name: 'ri-restaurant-2-fill' } },
			
 
				+			},
			
 
				+		},
			
 
				+		{
			
 
				+			step: { title: 'Drink', desc: 'Walk slowly and drink lots of water.', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } },
			
 
				+			finishStep: {
			
 
				+				title: 'Drink up',
			
 
				+				desc: 'I drink too much water and it spills out of my eyes!',
			
 
				+				bar: { type: 'icon', icon: { name: 'ri-cup-fill' } },
			
 
				+			},
			
 
				+		},
			
 
				+		{
			
 
				+			step: {
			
 
				+				title: 'Beat beans',
			
 
				+				desc: 'Eat, sleep, play beans.',
			
 
				+				bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } },
			
 
				+			},
			
 
				+			finishStep: {
			
 
				+				title: 'Have a good time',
			
 
				+				desc: 'Doudou has been beaten to the ground.',
			
 
				+				bar: { type: 'icon', icon: { name: 'ri-emotion-sad-fill' } },
			
 
				+			},
			
 
				+		},
			
 
				+		{
			
 
				+			step: { title: 'sleep', desc: 'Too full to sleep.', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } },
			
 
				+			finishStep: {
			
 
				+				title: 'Fall asleep',
			
 
				+				desc: 'Asleep and dreaming!',
			
 
				+				bar: { type: 'icon', icon: { name: 'ri-zzz-fill' } },
			
 
				+			},
			
 
				+		},
			
 
				+	];
			
 
				+	const steps7 = [
			
 
				+		{ step: { title: 'Get up', desc: 'Get up and move bricks!', bar: '1' } },
			
 
				+		{ step: { title: 'Eat', desc: 'Eat, eat, eat, eat, fat you.', bar: 'eat' } },
			
 
				+		{ step: { title: 'Drink', desc: 'Walk slowly and drink lots of water.', bar: '3' } },
			
 
				+		{
			
 
				+			step: {
			
 
				+				title: 'Beat beans',
			
 
				+				desc: 'Eat, sleep, play beans.',
			
 
				+				bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } },
			
 
				+			},
			
 
				+		},
			
 
				+		{ step: { title: 'sleep', desc: 'Too full to sleep.', bar: '😴' } },
			
 
				+	];
			
 
				+	const steps8 = [
			
 
				+		{ step: { title: 'Get up', bar: { type: 'image', image: './assets/images/avatar_2.png' } } },
			
 
				+		{ step: { title: 'Eat', bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } } } },
			
 
				+		{ step: { title: 'Drink', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } } },
			
 
				+		{ step: { title: 'Beat beans', bar: { type: 'image', image: './assets/images/avatar_1.jpg' } } },
			
 
				+		{ step: { title: 'sleep', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } } },
			
 
				+	];
			
 
				+	const steps9 = [
			
 
				+		{ step: { title: 'Get up', desc: 'Get up and move bricks!', bar: { type: 'icon', icon: { name: 'ri-hotel-bed-line' } } } },
			
 
				+		{
			
 
				+			step: {
			
 
				+				title: 'Eat',
			
 
				+				desc: 'Eat, eat, eat, eat, fat you.',
			
 
				+				bar: { type: 'icon', icon: { name: 'ri-restaurant-2-line' } },
			
 
				+				injComponent: injCom1,
			
 
				+			},
			
 
				+		},
			
 
				+		{ step: { title: 'Drink', desc: 'Walk slowly and drink lots of water.', bar: { type: 'icon', icon: { name: 'ri-cup-line' } } } },
			
 
				+		{
			
 
				+			step: {
			
 
				+				title: 'Beat beans',
			
 
				+				desc: 'Eat, sleep, play beans.',
			
 
				+				bar: { type: 'icon', icon: { name: 'ri-emotion-sad-line' } },
			
 
				+				injComponent: injCom2,
			
 
				+			},
			
 
				+		},
			
 
				+		{ step: { title: 'sleep', desc: 'Too full to sleep.', bar: { type: 'icon', icon: { name: 'ri-zzz-line' } } } },
			
 
				+	];
			
 
				 
			
 
				-    let current = 1;
			
 
				-    const preFun = () => {
			
 
				-        current > 1 && current--;
			
 
				-    };
			
 
				-    const nextFun = () => {
			
 
				-        current < steps.length + 1 && current++;
			
 
				-    };
			
 
				+	let current = 1;
			
 
				+	const preFun = () => {
			
 
				+		current > 1 && current--;
			
 
				+	};
			
 
				+	const nextFun = () => {
			
 
				+		current < steps.length + 1 && current++;
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="mt-8 px-4 mb-4 font-bold text-2xl">Horizontal arrangement</div>
			
@@ -214,25 +214,25 @@
 
				 <div class="mt-4 px-4 mb-4 font-bold text-2xl">Longitudinal arrangement</div>
			
 
				 <div class="mt-8 px-4 mb-4 font-bold text-lg">Different fillet</div>
			
 
				 <div class="flex justify-around">
			
 
				-    <Steps {steps} {current} vertical />
			
 
				-    <Steps {steps} {current} radius="none" vertical />
			
 
				-    <Steps {steps} {current} radius="full" vertical />
			
 
				+	<Steps {steps} {current} vertical />
			
 
				+	<Steps {steps} {current} radius="none" vertical />
			
 
				+	<Steps {steps} {current} radius="full" vertical />
			
 
				 </div>
			
 
				 
			
 
				 <div class="mt-8 px-4 mb-4 font-bold text-lg">Different icon border</div>
			
 
				 <div class="flex justify-around">
			
 
				-    <Steps steps={steps1} {current} vertical />
			
 
				-    <Steps steps={steps1} {current} vertical radius="full" barBorder={false} />
			
 
				+	<Steps steps={steps1} {current} vertical />
			
 
				+	<Steps steps={steps1} {current} vertical radius="full" barBorder={false} />
			
 
				 </div>
			
 
				 <Divider px="8" />
			
 
				 <div class="flex justify-around">
			
 
				-    <Steps steps={steps1} {current} vertical barBorder={false} radius="none" />
			
 
				-    <Steps steps={steps1} {current} vertical radius="none" />
			
 
				+	<Steps steps={steps1} {current} vertical barBorder={false} radius="none" />
			
 
				+	<Steps steps={steps1} {current} vertical radius="none" />
			
 
				 </div>
			
 
				 <Divider px="8" />
			
 
				 <div class="flex justify-around">
			
 
				-    <Steps steps={steps1} {current} vertical radius="xl" />
			
 
				-    <Steps steps={steps1} {current} vertical radius="full" />
			
 
				+	<Steps steps={steps1} {current} vertical radius="xl" />
			
 
				+	<Steps steps={steps1} {current} vertical radius="full" />
			
 
				 </div>
			
 
				 
			
 
				 <div class="mt-8 px-4 mb-4 font-bold text-lg">Tape description information</div>
			
@@ -248,20 +248,20 @@
 
				 
			
 
				 <div class="mt-8 px-4 mb-4 font-bold text-lg">Use images for the step bar area</div>
			
 
				 <div class="flex justify-around">
			
 
				-    <Steps steps={steps8} {current} vertical />
			
 
				-    <Steps steps={steps8} {current} radius="full" vertical />
			
 
				+	<Steps steps={steps8} {current} vertical />
			
 
				+	<Steps steps={steps8} {current} radius="full" vertical />
			
 
				 </div>
			
 
				 
			
 
				 <div class="mt-8 px-4 mb-4 font-bold text-lg">The content area injects elements</div>
			
 
				 <Steps steps={steps9} {current} vertical />
			
 
				 
			
 
				 <div class="flex sticky bottom-0 z-10 bg-white/60 dark:bg-gray1/60 backdrop-blur">
			
 
				-    <div class="flex-1">
			
 
				-        <Button fill="lineTheme" on:click={preFun}>Previous step</Button>
			
 
				-    </div>
			
 
				-    <div class="flex-1">
			
 
				-        <Button fill="lineTheme" on:click={nextFun}>Next step</Button>
			
 
				-    </div>
			
 
				+	<div class="flex-1">
			
 
				+		<Button fill="lineTheme" on:click={preFun}>Previous step</Button>
			
 
				+	</div>
			
 
				+	<div class="flex-1">
			
 
				+		<Button fill="lineTheme" on:click={nextFun}>Next step</Button>
			
 
				+	</div>
			
 
				 </div>
			
 
				 
			
 
				 <!-- injCom1.svelte -->
			
--- a/demo/src/pages/steps/injCom1.svelte
+++ b/demo/src/pages/steps/injCom1.svelte
@@ -1,6 +1,6 @@
 
				 <div class="text-primary dark:text-dark text-sm">
			
 
				-    <div>此处以组件形式注入一张图片</div>
			
 
				-    <div class="rounded-full overflow-hidden h-20 w-20">
			
 
				-        <img src="./assets/images/avatar_1.jpg" alt="" />
			
 
				-    </div>
			
 
				+	<div>此处以组件形式注入一张图片</div>
			
 
				+	<div class="rounded-full overflow-hidden h-20 w-20">
			
 
				+		<img src="./assets/images/avatar_1.jpg" alt="" />
			
 
				+	</div>
			
 
				 </div>
			
--- a/demo/src/pages/steps/injCom1_en.svelte
+++ b/demo/src/pages/steps/injCom1_en.svelte
@@ -1,6 +1,6 @@
 
				 <div class="text-primary dark:text-dark text-sm">
			
 
				-    <div>Here you inject a picture as a component</div>
			
 
				-    <div class="rounded-full overflow-hidden h-20 w-20">
			
 
				-        <img src="./assets/images/avatar_1.jpg" alt="" />
			
 
				-    </div>
			
 
				+	<div>Here you inject a picture as a component</div>
			
 
				+	<div class="rounded-full overflow-hidden h-20 w-20">
			
 
				+		<img src="./assets/images/avatar_1.jpg" alt="" />
			
 
				+	</div>
			
 
				 </div>
			
--- a/demo/src/pages/steps/injCom2.svelte
+++ b/demo/src/pages/steps/injCom2.svelte
@@ -1,11 +1,11 @@
 
				 <script>
			
 
				-    import { Button, Icon, Avatar } from 'stdf';
			
 
				+	import { Button, Icon, Avatar } from 'stdf';
			
 
				 </script>
			
 
				 
			
 
				 <div class="text-primary dark:text-dark text-sm">此处以组件形式注入一些内容</div>
			
 
				 <div class="flex items-center justify-between">
			
 
				-    <Button size="full" heightIn="2" injClass="px-4">按钮</Button>
			
 
				-    <Avatar image="./assets/images/avatar_1.jpg" size="sm" />
			
 
				-    <Icon name="ri-money-cny-circle-line" theme />
			
 
				-    <Icon name="ri-fingerprint-line" theme />
			
 
				+	<Button size="full" heightIn="2" injClass="px-4">按钮</Button>
			
 
				+	<Avatar image="./assets/images/avatar_1.jpg" size="sm" />
			
 
				+	<Icon name="ri-money-cny-circle-line" theme />
			
 
				+	<Icon name="ri-fingerprint-line" theme />
			
 
				 </div>
			
--- a/demo/src/pages/steps/injCom2_en.svelte
+++ b/demo/src/pages/steps/injCom2_en.svelte
@@ -1,11 +1,11 @@
 
				 <script>
			
 
				-    import { Button, Icon, Avatar } from 'stdf';
			
 
				+	import { Button, Icon, Avatar } from 'stdf';
			
 
				 </script>
			
 
				 
			
 
				 <div class="text-primary dark:text-dark text-sm">Here you inject something in the form of a component</div>
			
 
				 <div class="flex items-center justify-between">
			
 
				-    <Button size="full" heightIn="2" injClass="px-4">button</Button>
			
 
				-    <Avatar image="./assets/images/avatar_1.jpg" size="sm" />
			
 
				-    <Icon name="ri-money-cny-circle-line" theme />
			
 
				-    <Icon name="ri-fingerprint-line" theme />
			
 
				+	<Button size="full" heightIn="2" injClass="px-4">button</Button>
			
 
				+	<Avatar image="./assets/images/avatar_1.jpg" size="sm" />
			
 
				+	<Icon name="ri-money-cny-circle-line" theme />
			
 
				+	<Icon name="ri-fingerprint-line" theme />
			
 
				 </div>
			
--- a/demo/src/pages/swiper/Item.svelte
+++ b/demo/src/pages/swiper/Item.svelte
@@ -1,13 +1,13 @@
 
				 <script>
			
 
				-    import { Button, Avatar } from 'stdf';
			
 
				+	import { Button, Avatar } from 'stdf';
			
 
				 </script>
			
 
				 
			
 
				 <div class="flex flex-col space-y-4 items-center">
			
 
				-    <div class="text-center">此容器使用单个组件作为内容</div>
			
 
				-    <div>
			
 
				-        <Avatar />
			
 
				-    </div>
			
 
				-    <div class="w-full">
			
 
				-        <Button>按 钮</Button>
			
 
				-    </div>
			
 
				+	<div class="text-center">此容器使用单个组件作为内容</div>
			
 
				+	<div>
			
 
				+		<Avatar />
			
 
				+	</div>
			
 
				+	<div class="w-full">
			
 
				+		<Button>按 钮</Button>
			
 
				+	</div>
			
 
				 </div>
			
--- a/demo/src/pages/swiper/Item_en.svelte
+++ b/demo/src/pages/swiper/Item_en.svelte
@@ -1,13 +1,13 @@
 
				 <script>
			
 
				-    import { Button, Avatar } from 'stdf';
			
 
				+	import { Button, Avatar } from 'stdf';
			
 
				 </script>
			
 
				 
			
 
				 <div class="flex flex-col space-y-4 items-center">
			
 
				-    <div class="text-center">This container uses a single component as its content</div>
			
 
				-    <div>
			
 
				-        <Avatar />
			
 
				-    </div>
			
 
				-    <div class="w-full">
			
 
				-        <Button>button</Button>
			
 
				-    </div>
			
 
				+	<div class="text-center">This container uses a single component as its content</div>
			
 
				+	<div>
			
 
				+		<Avatar />
			
 
				+	</div>
			
 
				+	<div class="w-full">
			
 
				+		<Button>button</Button>
			
 
				+	</div>
			
 
				 </div>
			
--- a/demo/src/pages/swiper/SwiperDemo.svelte
+++ b/demo/src/pages/swiper/SwiperDemo.svelte
@@ -1,29 +1,29 @@
 
				 <!-- Swiper Demo -->
			
 
				 <script>
			
 
				-    import { Swiper } from 'stdf';
			
 
				-    import Item from './Item.svelte';
			
 
				+	import { Swiper } from 'stdf';
			
 
				+	import Item from './Item.svelte';
			
 
				 
			
 
				-    const data = [
			
 
				-        { type: 'img', url: './assets/images/wall_1.jpg' },
			
 
				-        { type: 'img', url: './assets/images/wall_2.jpg' },
			
 
				-        { type: 'img', url: './assets/images/wall_3.jpg' },
			
 
				-        { type: 'img', url: './assets/images/wall_4.jpg' },
			
 
				-    ];
			
 
				+	const data = [
			
 
				+		{ type: 'img', url: './assets/images/wall_1.jpg' },
			
 
				+		{ type: 'img', url: './assets/images/wall_2.jpg' },
			
 
				+		{ type: 'img', url: './assets/images/wall_3.jpg' },
			
 
				+		{ type: 'img', url: './assets/images/wall_4.jpg' },
			
 
				+	];
			
 
				 
			
 
				-    const componentData = [
			
 
				-        { type: 'component', component: Item },
			
 
				-        { type: 'img', url: './assets/images/wall_1.jpg' },
			
 
				-    ];
			
 
				+	const componentData = [
			
 
				+		{ type: 'component', component: Item },
			
 
				+		{ type: 'img', url: './assets/images/wall_1.jpg' },
			
 
				+	];
			
 
				 
			
 
				-    let indexClick = -1;
			
 
				-    const clickImgFun = i => {
			
 
				-        indexClick = i.detail;
			
 
				-    };
			
 
				+	let indexClick = -1;
			
 
				+	const clickImgFun = i => {
			
 
				+		indexClick = i.detail;
			
 
				+	};
			
 
				 
			
 
				-    let indexChange = 0;
			
 
				-    const changeContainerFun = i => {
			
 
				-        indexChange = i.detail;
			
 
				-    };
			
 
				+	let indexChange = 0;
			
 
				+	const changeContainerFun = i => {
			
 
				+		indexChange = i.detail;
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="font-bold text-lg mx-4 mt-10 mb-2">基础用法</div>
			
@@ -67,14 +67,14 @@
 
				 <Swiper {data} indicateStyle="point" indicateRadius={false} />
			
 
				 
			
 
				 <div class="font-bold text-lg mx-4 mt-10 mb-2">
			
 
				-    指定指示器背景色
			
 
				-    <p class="font-thin text-xs mb-2">注入 Class</p>
			
 
				+	指定指示器背景色
			
 
				+	<p class="font-thin text-xs mb-2">注入 Class</p>
			
 
				 </div>
			
 
				 <Swiper {data} indicateInjClass="from-black/0 to-purple/50" />
			
 
				 
			
 
				 <div class="font-bold text-lg mx-4 mt-10 mb-2">
			
 
				-    指定指示器颜色
			
 
				-    <p class="font-thin text-xs mb-2">同时去除背景色</p>
			
 
				+	指定指示器颜色
			
 
				+	<p class="font-thin text-xs mb-2">同时去除背景色</p>
			
 
				 </div>
			
 
				 <Swiper {data} indicateInjClass="bg-none" indicateColor="bg-orange" indicateActiveColor="bg-green" />
			
 
				 
			
@@ -82,217 +82,217 @@
 
				 <Swiper {data} aspectRatio={[4, 1]} />
			
 
				 
			
 
				 <div class="font-bold text-lg mx-4 mt-10">
			
 
				-    配置容器内边距
			
 
				-    <p class="font-thin text-xs mb-2">同时指定指示器颜色、去除指示器背景色、配置容器内部圆角</p>
			
 
				+	配置容器内边距
			
 
				+	<p class="font-thin text-xs mb-2">同时指定指示器颜色、去除指示器背景色、配置容器内部圆角</p>
			
 
				 </div>
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="6"
			
 
				-    py="6"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-black/5 dark:bg-white/10"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    radius="xl"
			
 
				-    interval={8}
			
 
				-    indicateStyle="longLine"
			
 
				+	{data}
			
 
				+	px="6"
			
 
				+	py="6"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-black/5 dark:bg-white/10"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	radius="xl"
			
 
				+	interval={8}
			
 
				+	indicateStyle="longLine"
			
 
				 />
			
 
				 <div class="mt-10" />
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="6"
			
 
				-    py="6"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    radius="full"
			
 
				-    aspectRatio={[3, 1]}
			
 
				+	{data}
			
 
				+	px="6"
			
 
				+	py="6"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	radius="full"
			
 
				+	aspectRatio={[3, 1]}
			
 
				 />
			
 
				 
			
 
				 <div class="font-bold text-lg mx-4 mt-10 mb-2">
			
 
				-    容器内部增加投影
			
 
				-    <p class="font-normal text-xs mb-2">注入 Class</p>
			
 
				+	容器内部增加投影
			
 
				+	<p class="font-normal text-xs mb-2">注入 Class</p>
			
 
				 </div>
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="6"
			
 
				-    py="6"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    radius="full"
			
 
				-    aspectRatio={[3, 1]}
			
 
				-    innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				+	{data}
			
 
				+	px="6"
			
 
				+	py="6"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	radius="full"
			
 
				+	aspectRatio={[3, 1]}
			
 
				+	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				 />
			
 
				 
			
 
				 <div class="font-bold text-lg mx-4 mt-10 mb-2">未激活容器X、Z轴偏移</div>
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="16"
			
 
				-    py="6"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    radius="xl"
			
 
				-    aspectRatio={[3, 1]}
			
 
				-    innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				-    translateX={100}
			
 
				+	{data}
			
 
				+	px="16"
			
 
				+	py="6"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	radius="xl"
			
 
				+	aspectRatio={[3, 1]}
			
 
				+	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				+	translateX={100}
			
 
				 />
			
 
				 <div class="mt-10" />
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="4"
			
 
				-    py="8"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    radius="xl"
			
 
				-    translateZ={400}
			
 
				-    translateX={-200}
			
 
				-    innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				+	{data}
			
 
				+	px="4"
			
 
				+	py="8"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	radius="xl"
			
 
				+	translateZ={400}
			
 
				+	translateX={-200}
			
 
				+	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				 />
			
 
				 <div class="mt-10" />
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="12"
			
 
				-    py="8"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    radius="xl"
			
 
				-    translateZ={600}
			
 
				-    innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				+	{data}
			
 
				+	px="12"
			
 
				+	py="8"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	radius="xl"
			
 
				+	translateZ={600}
			
 
				+	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				 />
			
 
				 
			
 
				 <div class="font-bold text-lg mx-4 mt-10 mb-2">未激活容器X、Y、Z轴旋转</div>
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="4"
			
 
				-    py="8"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    radius="xl"
			
 
				-    rotateX={90}
			
 
				-    innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				-    duration={2000}
			
 
				+	{data}
			
 
				+	px="4"
			
 
				+	py="8"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	radius="xl"
			
 
				+	rotateX={90}
			
 
				+	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				+	duration={2000}
			
 
				 />
			
 
				 <div class="mt-10" />
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="4"
			
 
				-    py="8"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    radius="xl"
			
 
				-    rotateY={90}
			
 
				-    innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				-    duration={2000}
			
 
				+	{data}
			
 
				+	px="4"
			
 
				+	py="8"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	radius="xl"
			
 
				+	rotateY={90}
			
 
				+	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				+	duration={2000}
			
 
				 />
			
 
				 <div class="mt-10" />
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="4"
			
 
				-    py="8"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    radius="xl"
			
 
				-    rotateZ={90}
			
 
				-    innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				-    duration={2000}
			
 
				+	{data}
			
 
				+	px="4"
			
 
				+	py="8"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	radius="xl"
			
 
				+	rotateZ={90}
			
 
				+	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				+	duration={2000}
			
 
				 />
			
 
				 <div class="mt-10" />
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="4"
			
 
				-    py="8"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    radius="xl"
			
 
				-    rotateX={90}
			
 
				-    rotateY={90}
			
 
				-    innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				-    duration={2000}
			
 
				+	{data}
			
 
				+	px="4"
			
 
				+	py="8"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	radius="xl"
			
 
				+	rotateX={90}
			
 
				+	rotateY={90}
			
 
				+	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				+	duration={2000}
			
 
				 />
			
 
				 <div class="mt-10" />
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="4"
			
 
				-    py="8"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    radius="xl"
			
 
				-    rotateX={90}
			
 
				-    rotateZ={90}
			
 
				-    innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				-    duration={2000}
			
 
				+	{data}
			
 
				+	px="4"
			
 
				+	py="8"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	radius="xl"
			
 
				+	rotateX={90}
			
 
				+	rotateZ={90}
			
 
				+	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				+	duration={2000}
			
 
				 />
			
 
				 <div class="mt-10" />
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="4"
			
 
				-    py="8"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    radius="xl"
			
 
				-    rotateY={90}
			
 
				-    rotateZ={90}
			
 
				-    innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				-    duration={2000}
			
 
				+	{data}
			
 
				+	px="4"
			
 
				+	py="8"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	radius="xl"
			
 
				+	rotateY={90}
			
 
				+	rotateZ={90}
			
 
				+	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				+	duration={2000}
			
 
				 />
			
 
				 
			
 
				 <div class="font-bold text-lg mx-4 mt-10 mb-2">未激活容器注入 Class</div>
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="24"
			
 
				-    py="6"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				-    radius="xl"
			
 
				-    aspectRatio={[3, 1]}
			
 
				-    translateX={160}
			
 
				-    duration={2000}
			
 
				-    notActiveInjClass="grayscale"
			
 
				+	{data}
			
 
				+	px="24"
			
 
				+	py="6"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				+	radius="xl"
			
 
				+	aspectRatio={[3, 1]}
			
 
				+	translateX={160}
			
 
				+	duration={2000}
			
 
				+	notActiveInjClass="grayscale"
			
 
				 />
			
 
				 <div class="mt-10" />
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="24"
			
 
				-    py="6"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				-    radius="xl"
			
 
				-    aspectRatio={[3, 1]}
			
 
				-    translateX={160}
			
 
				-    duration={2000}
			
 
				-    notActiveInjClass="blur"
			
 
				+	{data}
			
 
				+	px="24"
			
 
				+	py="6"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				+	radius="xl"
			
 
				+	aspectRatio={[3, 1]}
			
 
				+	translateX={160}
			
 
				+	duration={2000}
			
 
				+	notActiveInjClass="blur"
			
 
				 />
			
 
				 
			
 
				 <div class="font-bold text-lg mx-4 mt-10 mb-2">指定容器宽度</div>
			
 
				 <div class="flex justify-center">
			
 
				-    <Swiper {data} containerWidth={(document.body.clientWidth / 4) * 3} />
			
 
				+	<Swiper {data} containerWidth={(document.body.clientWidth / 4) * 3} />
			
 
				 </div>
			
 
				 
			
 
				 <div class="font-bold text-lg mx-4 mt-10 mb-2">容器内容使用组件</div>
			
 
				 <Swiper data={componentData} />
			
 
				 
			
 
				 <div class="font-bold text-lg mx-4 mt-10 mb-2">
			
 
				-    监听 change 事件
			
 
				-    <p class=" font-normal text-xs mb-2">当前激活索引值：{indexChange}</p>
			
 
				+	监听 change 事件
			
 
				+	<p class=" font-normal text-xs mb-2">当前激活索引值：{indexChange}</p>
			
 
				 </div>
			
 
				 <Swiper {data} on:change={changeContainerFun} />
			
 
				 
			
 
				 <div class="font-bold text-lg mx-4 mt-10 mb-2">
			
 
				-    监听 click 事件
			
 
				-    <p class="font-normal text-xs mb-2">点击索引值：{indexClick === -1 ? '未点击' : indexClick}</p>
			
 
				+	监听 click 事件
			
 
				+	<p class="font-normal text-xs mb-2">点击索引值：{indexClick === -1 ? '未点击' : indexClick}</p>
			
 
				 </div>
			
 
				 <Swiper {data} on:clickimg={clickImgFun} />
			
 
				 
			
--- a/demo/src/pages/swiper/SwiperDemo_en.svelte
+++ b/demo/src/pages/swiper/SwiperDemo_en.svelte
@@ -1,29 +1,29 @@
 
				 <!-- Swiper Demo -->
			
 
				 <script>
			
 
				-    import { Swiper } from 'stdf';
			
 
				-    import Item from './Item_en.svelte';
			
 
				+	import { Swiper } from 'stdf';
			
 
				+	import Item from './Item_en.svelte';
			
 
				 
			
 
				-    const data = [
			
 
				-        { type: 'img', url: './assets/images/wall_1.jpg' },
			
 
				-        { type: 'img', url: './assets/images/wall_2.jpg' },
			
 
				-        { type: 'img', url: './assets/images/wall_3.jpg' },
			
 
				-        { type: 'img', url: './assets/images/wall_4.jpg' },
			
 
				-    ];
			
 
				+	const data = [
			
 
				+		{ type: 'img', url: './assets/images/wall_1.jpg' },
			
 
				+		{ type: 'img', url: './assets/images/wall_2.jpg' },
			
 
				+		{ type: 'img', url: './assets/images/wall_3.jpg' },
			
 
				+		{ type: 'img', url: './assets/images/wall_4.jpg' },
			
 
				+	];
			
 
				 
			
 
				-    const componentData = [
			
 
				-        { type: 'component', component: Item },
			
 
				-        { type: 'img', url: './assets/images/wall_1.jpg' },
			
 
				-    ];
			
 
				+	const componentData = [
			
 
				+		{ type: 'component', component: Item },
			
 
				+		{ type: 'img', url: './assets/images/wall_1.jpg' },
			
 
				+	];
			
 
				 
			
 
				-    let indexClick = -1;
			
 
				-    const clickImgFun = i => {
			
 
				-        indexClick = i.detail;
			
 
				-    };
			
 
				+	let indexClick = -1;
			
 
				+	const clickImgFun = i => {
			
 
				+		indexClick = i.detail;
			
 
				+	};
			
 
				 
			
 
				-    let indexChange = 0;
			
 
				-    const changeContainerFun = i => {
			
 
				-        indexChange = i.detail;
			
 
				-    };
			
 
				+	let indexChange = 0;
			
 
				+	const changeContainerFun = i => {
			
 
				+		indexChange = i.detail;
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="font-bold text-lg mx-4 mt-10 mb-2">Basic usage</div>
			
@@ -67,14 +67,14 @@
 
				 <Swiper {data} indicateStyle="point" indicateRadius={false} />
			
 
				 
			
 
				 <div class="font-bold text-lg mx-4 mt-10 mb-2">
			
 
				-    Specifies the color behind the indicator
			
 
				-    <p class="font-thin text-xs mb-2">injection Class</p>
			
 
				+	Specifies the color behind the indicator
			
 
				+	<p class="font-thin text-xs mb-2">injection Class</p>
			
 
				 </div>
			
 
				 <Swiper {data} indicateInjClass="from-black/0 to-purple/50" />
			
 
				 
			
 
				 <div class="font-bold text-lg mx-4 mt-10 mb-2">
			
 
				-    Specify indicator color
			
 
				-    <p class="font-thin text-xs mb-2">Remove the background color at the same time</p>
			
 
				+	Specify indicator color
			
 
				+	<p class="font-thin text-xs mb-2">Remove the background color at the same time</p>
			
 
				 </div>
			
 
				 <Swiper {data} indicateInjClass="bg-none" indicateColor="bg-orange" indicateActiveColor="bg-green" />
			
 
				 
			
@@ -82,217 +82,217 @@
 
				 <Swiper {data} aspectRatio={[4, 1]} />
			
 
				 
			
 
				 <div class="font-bold text-lg mx-4 mt-10">
			
 
				-    Configure the inside margins of the container
			
 
				-    <p class="font-thin text-xs mb-2">Also specify indicator color, remove indicator back color, and configure container interior fillet</p>
			
 
				+	Configure the inside margins of the container
			
 
				+	<p class="font-thin text-xs mb-2">Also specify indicator color, remove indicator back color, and configure container interior fillet</p>
			
 
				 </div>
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="6"
			
 
				-    py="6"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-black/5 dark:bg-white/10"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    radius="xl"
			
 
				-    interval={8}
			
 
				-    indicateStyle="longLine"
			
 
				+	{data}
			
 
				+	px="6"
			
 
				+	py="6"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-black/5 dark:bg-white/10"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	radius="xl"
			
 
				+	interval={8}
			
 
				+	indicateStyle="longLine"
			
 
				 />
			
 
				 <div class="mt-10" />
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="6"
			
 
				-    py="6"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    radius="full"
			
 
				-    aspectRatio={[3, 1]}
			
 
				+	{data}
			
 
				+	px="6"
			
 
				+	py="6"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	radius="full"
			
 
				+	aspectRatio={[3, 1]}
			
 
				 />
			
 
				 
			
 
				 <div class="font-bold text-lg mx-4 mt-10 mb-2">
			
 
				-    Add a drop shadow inside the container
			
 
				-    <p class="font-normal text-xs mb-2">injection Class</p>
			
 
				+	Add a drop shadow inside the container
			
 
				+	<p class="font-normal text-xs mb-2">injection Class</p>
			
 
				 </div>
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="6"
			
 
				-    py="6"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    radius="full"
			
 
				-    aspectRatio={[3, 1]}
			
 
				-    innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				+	{data}
			
 
				+	px="6"
			
 
				+	py="6"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	radius="full"
			
 
				+	aspectRatio={[3, 1]}
			
 
				+	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				 />
			
 
				 
			
 
				 <div class="font-bold text-lg mx-4 mt-10 mb-2">Inactive container X and Z offsets</div>
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="16"
			
 
				-    py="6"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    radius="xl"
			
 
				-    aspectRatio={[3, 1]}
			
 
				-    innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				-    translateX={100}
			
 
				+	{data}
			
 
				+	px="16"
			
 
				+	py="6"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	radius="xl"
			
 
				+	aspectRatio={[3, 1]}
			
 
				+	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				+	translateX={100}
			
 
				 />
			
 
				 <div class="mt-10" />
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="4"
			
 
				-    py="8"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    radius="xl"
			
 
				-    translateZ={400}
			
 
				-    translateX={-200}
			
 
				-    innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				+	{data}
			
 
				+	px="4"
			
 
				+	py="8"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	radius="xl"
			
 
				+	translateZ={400}
			
 
				+	translateX={-200}
			
 
				+	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				 />
			
 
				 <div class="mt-10" />
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="12"
			
 
				-    py="8"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    radius="xl"
			
 
				-    translateZ={600}
			
 
				-    innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				+	{data}
			
 
				+	px="12"
			
 
				+	py="8"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	radius="xl"
			
 
				+	translateZ={600}
			
 
				+	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				 />
			
 
				 
			
 
				 <div class="font-bold text-lg mx-4 mt-10 mb-2">Inactive container X, Y, Z axis rotation</div>
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="4"
			
 
				-    py="8"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    radius="xl"
			
 
				-    rotateX={90}
			
 
				-    innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				-    duration={2000}
			
 
				+	{data}
			
 
				+	px="4"
			
 
				+	py="8"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	radius="xl"
			
 
				+	rotateX={90}
			
 
				+	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				+	duration={2000}
			
 
				 />
			
 
				 <div class="mt-10" />
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="4"
			
 
				-    py="8"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    radius="xl"
			
 
				-    rotateY={90}
			
 
				-    innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				-    duration={2000}
			
 
				+	{data}
			
 
				+	px="4"
			
 
				+	py="8"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	radius="xl"
			
 
				+	rotateY={90}
			
 
				+	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				+	duration={2000}
			
 
				 />
			
 
				 <div class="mt-10" />
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="4"
			
 
				-    py="8"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    radius="xl"
			
 
				-    rotateZ={90}
			
 
				-    innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				-    duration={2000}
			
 
				+	{data}
			
 
				+	px="4"
			
 
				+	py="8"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	radius="xl"
			
 
				+	rotateZ={90}
			
 
				+	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				+	duration={2000}
			
 
				 />
			
 
				 <div class="mt-10" />
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="4"
			
 
				-    py="8"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    radius="xl"
			
 
				-    rotateX={90}
			
 
				-    rotateY={90}
			
 
				-    innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				-    duration={2000}
			
 
				+	{data}
			
 
				+	px="4"
			
 
				+	py="8"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	radius="xl"
			
 
				+	rotateX={90}
			
 
				+	rotateY={90}
			
 
				+	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				+	duration={2000}
			
 
				 />
			
 
				 <div class="mt-10" />
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="4"
			
 
				-    py="8"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    radius="xl"
			
 
				-    rotateX={90}
			
 
				-    rotateZ={90}
			
 
				-    innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				-    duration={2000}
			
 
				+	{data}
			
 
				+	px="4"
			
 
				+	py="8"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	radius="xl"
			
 
				+	rotateX={90}
			
 
				+	rotateZ={90}
			
 
				+	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				+	duration={2000}
			
 
				 />
			
 
				 <div class="mt-10" />
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="4"
			
 
				-    py="8"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    radius="xl"
			
 
				-    rotateY={90}
			
 
				-    rotateZ={90}
			
 
				-    innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				-    duration={2000}
			
 
				+	{data}
			
 
				+	px="4"
			
 
				+	py="8"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	radius="xl"
			
 
				+	rotateY={90}
			
 
				+	rotateZ={90}
			
 
				+	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				+	duration={2000}
			
 
				 />
			
 
				 
			
 
				 <div class="font-bold text-lg mx-4 mt-10 mb-2">The container injection Class was not activated</div>
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="24"
			
 
				-    py="6"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				-    radius="xl"
			
 
				-    aspectRatio={[3, 1]}
			
 
				-    translateX={160}
			
 
				-    duration={2000}
			
 
				-    notActiveInjClass="grayscale"
			
 
				+	{data}
			
 
				+	px="24"
			
 
				+	py="6"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				+	radius="xl"
			
 
				+	aspectRatio={[3, 1]}
			
 
				+	translateX={160}
			
 
				+	duration={2000}
			
 
				+	notActiveInjClass="grayscale"
			
 
				 />
			
 
				 <div class="mt-10" />
			
 
				 <Swiper
			
 
				-    {data}
			
 
				-    px="24"
			
 
				-    py="6"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    indicateColor="bg-primary dark:bg-dark"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				-    radius="xl"
			
 
				-    aspectRatio={[3, 1]}
			
 
				-    translateX={160}
			
 
				-    duration={2000}
			
 
				-    notActiveInjClass="blur"
			
 
				+	{data}
			
 
				+	px="24"
			
 
				+	py="6"
			
 
				+	indicateInjClass="bg-none"
			
 
				+	indicateColor="bg-primary dark:bg-dark"
			
 
				+	indicateActiveColor="bg-primary dark:bg-dark"
			
 
				+	innerInjClass="shadow-md shadow-black/20 dark:shadow-white/20"
			
 
				+	radius="xl"
			
 
				+	aspectRatio={[3, 1]}
			
 
				+	translateX={160}
			
 
				+	duration={2000}
			
 
				+	notActiveInjClass="blur"
			
 
				 />
			
 
				 
			
 
				 <div class="font-bold text-lg mx-4 mt-10 mb-2">Specified container width</div>
			
 
				 <div class="flex justify-center">
			
 
				-    <Swiper {data} containerWidth={(document.body.clientWidth / 4) * 3} />
			
 
				+	<Swiper {data} containerWidth={(document.body.clientWidth / 4) * 3} />
			
 
				 </div>
			
 
				 
			
 
				 <div class="font-bold text-lg mx-4 mt-10 mb-2">Container content uses components</div>
			
 
				 <Swiper data={componentData} />
			
 
				 
			
 
				 <div class="font-bold text-lg mx-4 mt-10 mb-2">
			
 
				-    Listen for change events
			
 
				-    <p class=" font-normal text-xs mb-2">Currently active index values:{indexChange}</p>
			
 
				+	Listen for change events
			
 
				+	<p class=" font-normal text-xs mb-2">Currently active index values:{indexChange}</p>
			
 
				 </div>
			
 
				 <Swiper {data} on:change={changeContainerFun} />
			
 
				 
			
 
				 <div class="font-bold text-lg mx-4 mt-10 mb-2">
			
 
				-    Listen for click events
			
 
				-    <p class="font-normal text-xs mb-2">Click on the index value: {indexClick === -1 ? 'Not clicked' : indexClick}</p>
			
 
				+	Listen for click events
			
 
				+	<p class="font-normal text-xs mb-2">Click on the index value: {indexClick === -1 ? 'Not clicked' : indexClick}</p>
			
 
				 </div>
			
 
				 <Swiper {data} on:clickimg={clickImgFun} />
			
 
				 
			
--- a/demo/src/pages/switch/SwitchDemo.svelte
+++ b/demo/src/pages/switch/SwitchDemo.svelte
@@ -1,131 +1,126 @@
 
				 <!-- Switch Demo -->
			
 
				 <script>
			
 
				-    import { Switch, Icon, Cell, Dialog } from 'stdf';
			
 
				+	import { Switch, Icon, Cell, Dialog } from 'stdf';
			
 
				 
			
 
				-    let checkAsync = false;
			
 
				-    const switchClickFun = () => {
			
 
				-        setTimeout(() => {
			
 
				-            checkAsync = !checkAsync;
			
 
				-        }, 2000);
			
 
				-    };
			
 
				-    let cellCheck = false;
			
 
				-    const cellAsyncFun = () => {
			
 
				-        setTimeout(() => {
			
 
				-            cellCheck = !cellCheck;
			
 
				-        }, 2000);
			
 
				-    };
			
 
				-    let loading = false;
			
 
				-    let loadingCheck = false;
			
 
				-    const loadingFun = () => {
			
 
				-        loading = true;
			
 
				-        setTimeout(() => {
			
 
				-            loadingCheck = !loadingCheck;
			
 
				-            loading = false;
			
 
				-        }, 3000);
			
 
				-    };
			
 
				-    let cellLoading = false;
			
 
				-    let cellLoadingCheck = false;
			
 
				-    const cellLoadingFun = () => {
			
 
				-        cellLoading = true;
			
 
				-        setTimeout(() => {
			
 
				-            cellLoadingCheck = !cellLoadingCheck;
			
 
				-            cellLoading = false;
			
 
				-        }, 3000);
			
 
				-    };
			
 
				-    let visible = false;
			
 
				-    let confirmSwitcheck = false;
			
 
				-    const confirmFunc = () => {
			
 
				-        visible = false;
			
 
				-        confirmSwitcheck = !confirmSwitcheck;
			
 
				-    };
			
 
				-    const showDialogFunc = () => {
			
 
				-        visible = true;
			
 
				-    };
			
 
				+	let checkAsync = false;
			
 
				+	const switchClickFun = () => {
			
 
				+		setTimeout(() => {
			
 
				+			checkAsync = !checkAsync;
			
 
				+		}, 2000);
			
 
				+	};
			
 
				+	let cellCheck = false;
			
 
				+	const cellAsyncFun = () => {
			
 
				+		setTimeout(() => {
			
 
				+			cellCheck = !cellCheck;
			
 
				+		}, 2000);
			
 
				+	};
			
 
				+	let loading = false;
			
 
				+	let loadingCheck = false;
			
 
				+	const loadingFun = () => {
			
 
				+		loading = true;
			
 
				+		setTimeout(() => {
			
 
				+			loadingCheck = !loadingCheck;
			
 
				+			loading = false;
			
 
				+		}, 3000);
			
 
				+	};
			
 
				+	let cellLoading = false;
			
 
				+	let cellLoadingCheck = false;
			
 
				+	const cellLoadingFun = () => {
			
 
				+		cellLoading = true;
			
 
				+		setTimeout(() => {
			
 
				+			cellLoadingCheck = !cellLoadingCheck;
			
 
				+			cellLoading = false;
			
 
				+		}, 3000);
			
 
				+	};
			
 
				+	let visible = false;
			
 
				+	let confirmSwitcheck = false;
			
 
				+	const confirmFunc = () => {
			
 
				+		visible = false;
			
 
				+		confirmSwitcheck = !confirmSwitcheck;
			
 
				+	};
			
 
				+	const showDialogFunc = () => {
			
 
				+		visible = true;
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="pb-8">
			
 
				-    <div class="flex flex-col space-y-8 py-8 px-4">
			
 
				-        <div>
			
 
				-            <div class="mb-4 font-bold">不同圆角</div>
			
 
				-            <div class="flex justify-between">
			
 
				-                <Switch />
			
 
				-                <Switch radius="none" />
			
 
				-                <Switch radius="full" />
			
 
				-            </div>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="mb-4 font-bold">不同颜色</div>
			
 
				-            <div class="flex justify-between">
			
 
				-                <Switch check injClass="bg-success dark:bg-success" />
			
 
				-                <Switch check injClass="bg-error dark:bg-error" />
			
 
				-                <Switch check injClass="bg-warning dark:bg-warning" />
			
 
				-                <Switch check injClass="bg-[#DC88F5] dark:bg-[#FFCA28]" />
			
 
				-            </div>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="mb-4 font-bold">带文字 / 状态 / 图标</div>
			
 
				-            <div class="flex justify-between">
			
 
				-                <Switch inside={['关', '开']} />
			
 
				-                <Switch inside={['😭', '😄']} />
			
 
				-                <Switch inside="state" />
			
 
				-                <!-- <Switch inside="state" radius="none" /> -->
			
 
				-                <Switch inside="slot">
			
 
				-                    <div slot="false">
			
 
				-                        <Icon name="ri-moon-line" size={16} top={-1} />
			
 
				-                    </div>
			
 
				-                    <div slot="true">
			
 
				-                        <Icon name="ri-sun-line" size={16} top={-1} />
			
 
				-                    </div>
			
 
				-                </Switch>
			
 
				-            </div>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="mb-4 font-bold">禁用</div>
			
 
				-            <div class="flex justify-between">
			
 
				-                <Switch disabled />
			
 
				-                <Switch disabled check />
			
 
				-            </div>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="mb-4 font-bold">异步控制</div>
			
 
				-            <div class="flex justify-between">
			
 
				-                <div class="flex flex-col space-y-2 items-center">
			
 
				-                    <Switch async check={checkAsync} on:click={switchClickFun} />
			
 
				-                    <div class="text-sm">点击 2 秒后触发</div>
			
 
				-                </div>
			
 
				-                <div class="flex flex-col space-y-2 items-center">
			
 
				-                    <Switch async check={loadingCheck} loading={{ theme: true }} on:click={loadingFun} inside={loading ? 'loading' : ''} />
			
 
				-                    <div class="text-sm">点击 3 秒后触发</div>
			
 
				-                </div>
			
 
				-            </div>
			
 
				-        </div>
			
 
				-    </div>
			
 
				-    <!--    <div>-->
			
 
				-    <div class="mb-4 font-bold px-4">Cell 中使用</div>
			
 
				-    <Cell title="开关" detail="点击整行皆可触发开关" right={{ type: 'switch' }} />
			
 
				-    <Cell title="开关带文字" right={{ type: 'switch', switch: { inside: ['😭', '😄'] } }} switcheck />
			
 
				-    <Cell title="开关全圆角" right={{ type: 'switch', switch: { radius: 'full' } }} />
			
 
				-    <Cell
			
 
				-        title="异步控制"
			
 
				-        detail="点击 2 秒后触发开关"
			
 
				-        right={{ type: 'switch', switch: { async: true } }}
			
 
				-        switcheck={cellCheck}
			
 
				-        on:click={cellAsyncFun}
			
 
				-    />
			
 
				-    <Cell
			
 
				-        title="异步加载"
			
 
				-        detail="点击 3 秒后触发开关"
			
 
				-        right={{ type: 'switch', switch: { async: true, inside: cellLoading ? 'loading' : '' } }}
			
 
				-        switcheck={cellLoadingCheck}
			
 
				-        on:click={cellLoadingFun}
			
 
				-    />
			
 
				-    <Cell title="禁用开关" right={{ type: 'switch', switch: { disabled: true } }} switcheck />
			
 
				+	<div class="flex flex-col space-y-8 py-8 px-4">
			
 
				+		<div>
			
 
				+			<div class="mb-4 font-bold">不同圆角</div>
			
 
				+			<div class="flex justify-between">
			
 
				+				<Switch />
			
 
				+				<Switch radius="none" />
			
 
				+				<Switch radius="full" />
			
 
				+			</div>
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="mb-4 font-bold">不同颜色</div>
			
 
				+			<div class="flex justify-between">
			
 
				+				<Switch check injClass="bg-success dark:bg-success" />
			
 
				+				<Switch check injClass="bg-error dark:bg-error" />
			
 
				+				<Switch check injClass="bg-warning dark:bg-warning" />
			
 
				+				<Switch check injClass="bg-[#DC88F5] dark:bg-[#FFCA28]" />
			
 
				+			</div>
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="mb-4 font-bold">带文字 / 状态 / 图标</div>
			
 
				+			<div class="flex justify-between">
			
 
				+				<Switch inside={['关', '开']} />
			
 
				+				<Switch inside={['😭', '😄']} />
			
 
				+				<Switch inside="state" />
			
 
				+				<!-- <Switch inside="state" radius="none" /> -->
			
 
				+				<Switch inside="slot">
			
 
				+					<div slot="false">
			
 
				+						<Icon name="ri-moon-line" size={16} top={-1} />
			
 
				+					</div>
			
 
				+					<div slot="true">
			
 
				+						<Icon name="ri-sun-line" size={16} top={-1} />
			
 
				+					</div>
			
 
				+				</Switch>
			
 
				+			</div>
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="mb-4 font-bold">禁用</div>
			
 
				+			<div class="flex justify-between">
			
 
				+				<Switch disabled />
			
 
				+				<Switch disabled check />
			
 
				+			</div>
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="mb-4 font-bold">异步控制</div>
			
 
				+			<div class="flex justify-between">
			
 
				+				<div class="flex flex-col space-y-2 items-center">
			
 
				+					<Switch async check={checkAsync} on:click={switchClickFun} />
			
 
				+					<div class="text-sm">点击 2 秒后触发</div>
			
 
				+				</div>
			
 
				+				<div class="flex flex-col space-y-2 items-center">
			
 
				+					<Switch async check={loadingCheck} loading={{ theme: true }} on:click={loadingFun} inside={loading ? 'loading' : ''} />
			
 
				+					<div class="text-sm">点击 3 秒后触发</div>
			
 
				+				</div>
			
 
				+			</div>
			
 
				+		</div>
			
 
				+	</div>
			
 
				+	<!--    <div>-->
			
 
				+	<div class="mb-4 font-bold px-4">Cell 中使用</div>
			
 
				+	<Cell title="开关" detail="点击整行皆可触发开关" right={{ type: 'switch' }} />
			
 
				+	<Cell title="开关带文字" right={{ type: 'switch', switch: { inside: ['😭', '😄'] } }} switcheck />
			
 
				+	<Cell title="开关全圆角" right={{ type: 'switch', switch: { radius: 'full' } }} />
			
 
				+	<Cell
			
 
				+		title="异步控制"
			
 
				+		detail="点击 2 秒后触发开关"
			
 
				+		right={{ type: 'switch', switch: { async: true } }}
			
 
				+		switcheck={cellCheck}
			
 
				+		on:click={cellAsyncFun}
			
 
				+	/>
			
 
				+	<Cell
			
 
				+		title="异步加载"
			
 
				+		detail="点击 3 秒后触发开关"
			
 
				+		right={{ type: 'switch', switch: { async: true, inside: cellLoading ? 'loading' : '' } }}
			
 
				+		switcheck={cellLoadingCheck}
			
 
				+		on:click={cellLoadingFun}
			
 
				+	/>
			
 
				+	<Cell title="禁用开关" right={{ type: 'switch', switch: { disabled: true } }} switcheck />
			
 
				 
			
 
				-    <Cell
			
 
				-        title="二次确认"
			
 
				-        right={{ type: 'switch', switch: { async: true } }}
			
 
				-        bind:switcheck={confirmSwitcheck}
			
 
				-        on:click={showDialogFunc}
			
 
				-    />
			
 
				-    <Dialog bind:visible content={`确定${confirmSwitcheck ? '关闭' : '开启'}此开关吗？`} on:primary={confirmFunc} />
			
 
				+	<Cell title="二次确认" right={{ type: 'switch', switch: { async: true } }} bind:switcheck={confirmSwitcheck} on:click={showDialogFunc} />
			
 
				+	<Dialog bind:visible content={`确定${confirmSwitcheck ? '关闭' : '开启'}此开关吗？`} on:primary={confirmFunc} />
			
 
				 </div>
			
--- a/demo/src/pages/switch/SwitchDemo_en.svelte
+++ b/demo/src/pages/switch/SwitchDemo_en.svelte
@@ -1,131 +1,131 @@
 
				 <!-- Switch Demo -->
			
 
				 <script>
			
 
				-    import { Switch, Icon, Cell, Dialog } from 'stdf';
			
 
				+	import { Switch, Icon, Cell, Dialog } from 'stdf';
			
 
				 
			
 
				-    let checkAsync = false;
			
 
				-    const switchClickFun = () => {
			
 
				-        setTimeout(() => {
			
 
				-            checkAsync = !checkAsync;
			
 
				-        }, 2000);
			
 
				-    };
			
 
				-    let cellCheck = false;
			
 
				-    const cellAsyncFun = () => {
			
 
				-        setTimeout(() => {
			
 
				-            cellCheck = !cellCheck;
			
 
				-        }, 2000);
			
 
				-    };
			
 
				-    let loading = false;
			
 
				-    let loadingCheck = false;
			
 
				-    const loadingFun = () => {
			
 
				-        loading = true;
			
 
				-        setTimeout(() => {
			
 
				-            loadingCheck = !loadingCheck;
			
 
				-            loading = false;
			
 
				-        }, 3000);
			
 
				-    };
			
 
				-    let cellLoading = false;
			
 
				-    let cellLoadingCheck = false;
			
 
				-    const cellLoadingFun = () => {
			
 
				-        cellLoading = true;
			
 
				-        setTimeout(() => {
			
 
				-            cellLoadingCheck = !cellLoadingCheck;
			
 
				-            cellLoading = false;
			
 
				-        }, 3000);
			
 
				-    };
			
 
				-    let visible = false;
			
 
				-    let confirmSwitcheck = false;
			
 
				-    const confirmFunc = () => {
			
 
				-        visible = false;
			
 
				-        confirmSwitcheck = !confirmSwitcheck;
			
 
				-    };
			
 
				-    const showDialogFunc = () => {
			
 
				-        visible = true;
			
 
				-    };
			
 
				+	let checkAsync = false;
			
 
				+	const switchClickFun = () => {
			
 
				+		setTimeout(() => {
			
 
				+			checkAsync = !checkAsync;
			
 
				+		}, 2000);
			
 
				+	};
			
 
				+	let cellCheck = false;
			
 
				+	const cellAsyncFun = () => {
			
 
				+		setTimeout(() => {
			
 
				+			cellCheck = !cellCheck;
			
 
				+		}, 2000);
			
 
				+	};
			
 
				+	let loading = false;
			
 
				+	let loadingCheck = false;
			
 
				+	const loadingFun = () => {
			
 
				+		loading = true;
			
 
				+		setTimeout(() => {
			
 
				+			loadingCheck = !loadingCheck;
			
 
				+			loading = false;
			
 
				+		}, 3000);
			
 
				+	};
			
 
				+	let cellLoading = false;
			
 
				+	let cellLoadingCheck = false;
			
 
				+	const cellLoadingFun = () => {
			
 
				+		cellLoading = true;
			
 
				+		setTimeout(() => {
			
 
				+			cellLoadingCheck = !cellLoadingCheck;
			
 
				+			cellLoading = false;
			
 
				+		}, 3000);
			
 
				+	};
			
 
				+	let visible = false;
			
 
				+	let confirmSwitcheck = false;
			
 
				+	const confirmFunc = () => {
			
 
				+		visible = false;
			
 
				+		confirmSwitcheck = !confirmSwitcheck;
			
 
				+	};
			
 
				+	const showDialogFunc = () => {
			
 
				+		visible = true;
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="pb-8">
			
 
				-    <div class="flex flex-col space-y-8 py-8 px-4">
			
 
				-        <div>
			
 
				-            <div class="mb-4 font-bold">Different fillet</div>
			
 
				-            <div class="flex justify-between">
			
 
				-                <Switch />
			
 
				-                <Switch radius="none" />
			
 
				-                <Switch radius="full" />
			
 
				-            </div>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="mb-4 font-bold">Different colors</div>
			
 
				-            <div class="flex justify-between">
			
 
				-                <Switch check injClass="bg-success dark:bg-success" />
			
 
				-                <Switch check injClass="bg-error dark:bg-error" />
			
 
				-                <Switch check injClass="bg-warning dark:bg-warning" />
			
 
				-                <Switch check injClass="bg-[#DC88F5] dark:bg-[#FFCA28]" />
			
 
				-            </div>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="mb-4 font-bold">With text/status/icon</div>
			
 
				-            <div class="flex justify-between">
			
 
				-                <Switch inside={['OF', 'ON']} />
			
 
				-                <Switch inside={['😭', '😄']} />
			
 
				-                <Switch inside="state" />
			
 
				-                <!-- <Switch inside="state" radius="none" /> -->
			
 
				-                <Switch inside="slot">
			
 
				-                    <div slot="false">
			
 
				-                        <Icon name="ri-moon-line" size={16} top={-1} />
			
 
				-                    </div>
			
 
				-                    <div slot="true">
			
 
				-                        <Icon name="ri-sun-line" size={16} top={-1} />
			
 
				-                    </div>
			
 
				-                </Switch>
			
 
				-            </div>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="mb-4 font-bold">disable</div>
			
 
				-            <div class="flex justify-between">
			
 
				-                <Switch disabled />
			
 
				-                <Switch disabled check />
			
 
				-            </div>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="mb-4 font-bold">Asynchronous control</div>
			
 
				-            <div class="flex justify-between">
			
 
				-                <div class="flex flex-col space-y-2 items-center">
			
 
				-                    <Switch async check={checkAsync} on:click={switchClickFun} />
			
 
				-                    <div class="text-sm">Trigger after 2 seconds of clicking</div>
			
 
				-                </div>
			
 
				-                <div class="flex flex-col space-y-2 items-center">
			
 
				-                    <Switch async check={loadingCheck} loading={{ theme: true }} on:click={loadingFun} inside={loading ? 'loading' : ''} />
			
 
				-                    <div class="text-sm">Trigger after 3 seconds of clicking</div>
			
 
				-                </div>
			
 
				-            </div>
			
 
				-        </div>
			
 
				-    </div>
			
 
				-    <!--    <div>-->
			
 
				-    <div class="mb-4 font-bold px-4">Use in Cell</div>
			
 
				-    <Cell title="switch" detail="Click on the whole row to trigger the switch" right={{ type: 'switch' }} />
			
 
				-    <Cell title="Switch tape text" right={{ type: 'switch', switch: { inside: ['😭', '😄'] } }} switcheck />
			
 
				-    <Cell title="Switch with full rounded corners" right={{ type: 'switch', switch: { radius: 'full' } }} />
			
 
				-    <Cell
			
 
				-        title="Asynchronous control"
			
 
				-        detail="Click 2 seconds to trigger the switch"
			
 
				-        right={{ type: 'switch', switch: { async: true } }}
			
 
				-        switcheck={cellCheck}
			
 
				-        on:click={cellAsyncFun}
			
 
				-    />
			
 
				-    <Cell
			
 
				-        title="Asynchronous loading"
			
 
				-        detail="Click 3 seconds to trigger the switch"
			
 
				-        right={{ type: 'switch', switch: { async: true, inside: cellLoading ? 'loading' : '' } }}
			
 
				-        switcheck={cellLoadingCheck}
			
 
				-        on:click={cellLoadingFun}
			
 
				-    />
			
 
				-    <Cell title="Disable switch" right={{ type: 'switch', switch: { disabled: true } }} switcheck />
			
 
				+	<div class="flex flex-col space-y-8 py-8 px-4">
			
 
				+		<div>
			
 
				+			<div class="mb-4 font-bold">Different fillet</div>
			
 
				+			<div class="flex justify-between">
			
 
				+				<Switch />
			
 
				+				<Switch radius="none" />
			
 
				+				<Switch radius="full" />
			
 
				+			</div>
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="mb-4 font-bold">Different colors</div>
			
 
				+			<div class="flex justify-between">
			
 
				+				<Switch check injClass="bg-success dark:bg-success" />
			
 
				+				<Switch check injClass="bg-error dark:bg-error" />
			
 
				+				<Switch check injClass="bg-warning dark:bg-warning" />
			
 
				+				<Switch check injClass="bg-[#DC88F5] dark:bg-[#FFCA28]" />
			
 
				+			</div>
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="mb-4 font-bold">With text/status/icon</div>
			
 
				+			<div class="flex justify-between">
			
 
				+				<Switch inside={['OF', 'ON']} />
			
 
				+				<Switch inside={['😭', '😄']} />
			
 
				+				<Switch inside="state" />
			
 
				+				<!-- <Switch inside="state" radius="none" /> -->
			
 
				+				<Switch inside="slot">
			
 
				+					<div slot="false">
			
 
				+						<Icon name="ri-moon-line" size={16} top={-1} />
			
 
				+					</div>
			
 
				+					<div slot="true">
			
 
				+						<Icon name="ri-sun-line" size={16} top={-1} />
			
 
				+					</div>
			
 
				+				</Switch>
			
 
				+			</div>
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="mb-4 font-bold">disable</div>
			
 
				+			<div class="flex justify-between">
			
 
				+				<Switch disabled />
			
 
				+				<Switch disabled check />
			
 
				+			</div>
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="mb-4 font-bold">Asynchronous control</div>
			
 
				+			<div class="flex justify-between">
			
 
				+				<div class="flex flex-col space-y-2 items-center">
			
 
				+					<Switch async check={checkAsync} on:click={switchClickFun} />
			
 
				+					<div class="text-sm">Trigger after 2 seconds of clicking</div>
			
 
				+				</div>
			
 
				+				<div class="flex flex-col space-y-2 items-center">
			
 
				+					<Switch async check={loadingCheck} loading={{ theme: true }} on:click={loadingFun} inside={loading ? 'loading' : ''} />
			
 
				+					<div class="text-sm">Trigger after 3 seconds of clicking</div>
			
 
				+				</div>
			
 
				+			</div>
			
 
				+		</div>
			
 
				+	</div>
			
 
				+	<!--    <div>-->
			
 
				+	<div class="mb-4 font-bold px-4">Use in Cell</div>
			
 
				+	<Cell title="switch" detail="Click on the whole row to trigger the switch" right={{ type: 'switch' }} />
			
 
				+	<Cell title="Switch tape text" right={{ type: 'switch', switch: { inside: ['😭', '😄'] } }} switcheck />
			
 
				+	<Cell title="Switch with full rounded corners" right={{ type: 'switch', switch: { radius: 'full' } }} />
			
 
				+	<Cell
			
 
				+		title="Asynchronous control"
			
 
				+		detail="Click 2 seconds to trigger the switch"
			
 
				+		right={{ type: 'switch', switch: { async: true } }}
			
 
				+		switcheck={cellCheck}
			
 
				+		on:click={cellAsyncFun}
			
 
				+	/>
			
 
				+	<Cell
			
 
				+		title="Asynchronous loading"
			
 
				+		detail="Click 3 seconds to trigger the switch"
			
 
				+		right={{ type: 'switch', switch: { async: true, inside: cellLoading ? 'loading' : '' } }}
			
 
				+		switcheck={cellLoadingCheck}
			
 
				+		on:click={cellLoadingFun}
			
 
				+	/>
			
 
				+	<Cell title="Disable switch" right={{ type: 'switch', switch: { disabled: true } }} switcheck />
			
 
				 
			
 
				-    <Cell
			
 
				-        title="Secondary confirmation"
			
 
				-        right={{ type: 'switch', switch: { async: true } }}
			
 
				-        bind:switcheck={confirmSwitcheck}
			
 
				-        on:click={showDialogFunc}
			
 
				-    />
			
 
				-    <Dialog bind:visible content={`determine ${confirmSwitcheck ? 'Shut down' : 'open'} this switch?`} on:primary={confirmFunc} />
			
 
				+	<Cell
			
 
				+		title="Secondary confirmation"
			
 
				+		right={{ type: 'switch', switch: { async: true } }}
			
 
				+		bind:switcheck={confirmSwitcheck}
			
 
				+		on:click={showDialogFunc}
			
 
				+	/>
			
 
				+	<Dialog bind:visible content={`determine ${confirmSwitcheck ? 'Shut down' : 'open'} this switch?`} on:primary={confirmFunc} />
			
 
				 </div>
			
--- a/demo/src/pages/tabBar/TabBarDemo.svelte
+++ b/demo/src/pages/tabBar/TabBarDemo.svelte
@@ -1,115 +1,115 @@
 
				 <!-- TabBar Demo -->
			
 
				 <script>
			
 
				-    import {TabBar} from 'stdf';
			
 
				+	import { TabBar } from 'stdf';
			
 
				 
			
 
				-    const labels = [
			
 
				-        {text: '首页', icon: {name: 'ri-home-3-line', size: 20}, activeIcon: {name: 'ri-home-3-fill', size: 20}},
			
 
				-        {
			
 
				-            text: '发现',
			
 
				-            icon: {name: 'ri-compass-3-line', size: 20},
			
 
				-            activeIcon: {name: 'ri-compass-3-fill', size: 20},
			
 
				-        },
			
 
				-        {
			
 
				-            text: '消息',
			
 
				-            icon: {name: 'ri-discuss-line', size: 20},
			
 
				-            activeIcon: {name: 'ri-discuss-fill', size: 20},
			
 
				-        },
			
 
				-        {
			
 
				-            text: '我的',
			
 
				-            icon: {name: 'ri-account-circle-line', size: 20},
			
 
				-            activeIcon: {name: 'ri-account-circle-fill', size: 20},
			
 
				-        },
			
 
				-    ];
			
 
				-    const labels1 = [{text: '首页'}, {text: '发现'}, {text: '消息'}, {text: '我的'}];
			
 
				-    const labels2 = [
			
 
				-        {icon: {name: 'ri-home-3-line', size: 26}, activeIcon: {name: 'ri-home-3-fill', size: 26}},
			
 
				-        {icon: {name: 'ri-compass-3-line', size: 26}, activeIcon: {name: 'ri-compass-3-fill', size: 26}},
			
 
				-        {icon: {name: 'ri-discuss-line', size: 26}, activeIcon: {name: 'ri-discuss-fill', size: 26}},
			
 
				-        {
			
 
				-            icon: {name: 'ri-account-circle-line', size: 26},
			
 
				-            activeIcon: {name: 'ri-account-circle-fill', size: 26},
			
 
				-        },
			
 
				-    ];
			
 
				-    const labels3 = [
			
 
				-        {text: '首页', icon: {name: 'ri-home-3-line', size: 20}},
			
 
				-        {text: '发现', icon: {name: 'ri-compass-3-line', size: 20}},
			
 
				-        {text: '消息', icon: {name: 'ri-discuss-line', size: 20}},
			
 
				-        {text: '我的', icon: {name: 'ri-account-circle-line', size: 20}},
			
 
				-    ];
			
 
				-    const labels4 = [
			
 
				-        {text: '首页', icon: {name: 'ri-home-3-line', size: 20}, activeIcon: {name: 'ri-home-3-fill', size: 20}},
			
 
				-        {
			
 
				-            text: '消息',
			
 
				-            icon: {name: 'ri-discuss-line', size: 20},
			
 
				-            activeIcon: {name: 'ri-discuss-fill', size: 20},
			
 
				-        },
			
 
				-        {
			
 
				-            text: '我的',
			
 
				-            icon: {name: 'ri-account-circle-line', size: 20},
			
 
				-            activeIcon: {name: 'ri-account-circle-fill', size: 20},
			
 
				-        },
			
 
				-    ];
			
 
				-    let active = 0;
			
 
				-    const tabBarChangeFun = e => {
			
 
				-        active = e.detail;
			
 
				-    };
			
 
				+	const labels = [
			
 
				+		{ text: '首页', icon: { name: 'ri-home-3-line', size: 20 }, activeIcon: { name: 'ri-home-3-fill', size: 20 } },
			
 
				+		{
			
 
				+			text: '发现',
			
 
				+			icon: { name: 'ri-compass-3-line', size: 20 },
			
 
				+			activeIcon: { name: 'ri-compass-3-fill', size: 20 },
			
 
				+		},
			
 
				+		{
			
 
				+			text: '消息',
			
 
				+			icon: { name: 'ri-discuss-line', size: 20 },
			
 
				+			activeIcon: { name: 'ri-discuss-fill', size: 20 },
			
 
				+		},
			
 
				+		{
			
 
				+			text: '我的',
			
 
				+			icon: { name: 'ri-account-circle-line', size: 20 },
			
 
				+			activeIcon: { name: 'ri-account-circle-fill', size: 20 },
			
 
				+		},
			
 
				+	];
			
 
				+	const labels1 = [{ text: '首页' }, { text: '发现' }, { text: '消息' }, { text: '我的' }];
			
 
				+	const labels2 = [
			
 
				+		{ icon: { name: 'ri-home-3-line', size: 26 }, activeIcon: { name: 'ri-home-3-fill', size: 26 } },
			
 
				+		{ icon: { name: 'ri-compass-3-line', size: 26 }, activeIcon: { name: 'ri-compass-3-fill', size: 26 } },
			
 
				+		{ icon: { name: 'ri-discuss-line', size: 26 }, activeIcon: { name: 'ri-discuss-fill', size: 26 } },
			
 
				+		{
			
 
				+			icon: { name: 'ri-account-circle-line', size: 26 },
			
 
				+			activeIcon: { name: 'ri-account-circle-fill', size: 26 },
			
 
				+		},
			
 
				+	];
			
 
				+	const labels3 = [
			
 
				+		{ text: '首页', icon: { name: 'ri-home-3-line', size: 20 } },
			
 
				+		{ text: '发现', icon: { name: 'ri-compass-3-line', size: 20 } },
			
 
				+		{ text: '消息', icon: { name: 'ri-discuss-line', size: 20 } },
			
 
				+		{ text: '我的', icon: { name: 'ri-account-circle-line', size: 20 } },
			
 
				+	];
			
 
				+	const labels4 = [
			
 
				+		{ text: '首页', icon: { name: 'ri-home-3-line', size: 20 }, activeIcon: { name: 'ri-home-3-fill', size: 20 } },
			
 
				+		{
			
 
				+			text: '消息',
			
 
				+			icon: { name: 'ri-discuss-line', size: 20 },
			
 
				+			activeIcon: { name: 'ri-discuss-fill', size: 20 },
			
 
				+		},
			
 
				+		{
			
 
				+			text: '我的',
			
 
				+			icon: { name: 'ri-account-circle-line', size: 20 },
			
 
				+			activeIcon: { name: 'ri-account-circle-fill', size: 20 },
			
 
				+		},
			
 
				+	];
			
 
				+	let active = 0;
			
 
				+	const tabBarChangeFun = e => {
			
 
				+		active = e.detail;
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-8">
			
 
				-    <div class="space-y-8 my-4">
			
 
				-        <div>
			
 
				-            <div class="font-bold px-4 mb-2">基础用法</div>
			
 
				-            <TabBar {labels}/>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="font-bold px-4 mb-2">仅文字</div>
			
 
				-            <TabBar labels={labels1}/>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="font-bold px-4 mb-2">仅图标</div>
			
 
				-            <TabBar labels={labels2}/>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="font-bold px-4 mb-2">带线条</div>
			
 
				-            <TabBar {labels} line lineW={8}/>
			
 
				-            <div class="mt-2"></div>
			
 
				-            <TabBar {labels} line/>
			
 
				-            <div class="mt-2"></div>
			
 
				-            <TabBar {labels} line lineW={2}/>
			
 
				-            <div class="mt-2"></div>
			
 
				-            <TabBar {labels} line lineW={1}/>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="font-bold px-4 mb-2">图标仅换颜色</div>
			
 
				-            <TabBar labels={labels3}/>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="font-bold px-4 mb-2">自定义最外层</div>
			
 
				-            <TabBar {labels} injClass="mx-2 rounded-full shadow-md dark:shadow-white/10"/>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="font-bold px-4 mb-2">自定义 Tab</div>
			
 
				-            <TabBar {labels} tabInjClass="text-purple dark:text-orange" activeTabInjClass="!text-primary dark:!text-dark"/>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="font-bold px-4 mb-2">自定义选定 Tab</div>
			
 
				-            <TabBar {labels} activeTabInjClass="text-green dark:text-orange"/>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="font-bold px-4 mb-2">自定义线条</div>
			
 
				-            <TabBar {labels} line activeInjClass="bg-[red] dark:bg-[green]"/>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="font-bold px-4 mb-2">关爱版</div>
			
 
				-            <TabBar {labels} love/>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="font-bold px-4 mb-2">监听 change 事件</div>
			
 
				-            <TabBar {labels} on:change={tabBarChangeFun}/>
			
 
				-            <div class="m-4">当前 TabBar 激活的 active：{active}</div>
			
 
				-        </div>
			
 
				-    </div>
			
 
				+	<div class="space-y-8 my-4">
			
 
				+		<div>
			
 
				+			<div class="font-bold px-4 mb-2">基础用法</div>
			
 
				+			<TabBar {labels} />
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="font-bold px-4 mb-2">仅文字</div>
			
 
				+			<TabBar labels={labels1} />
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="font-bold px-4 mb-2">仅图标</div>
			
 
				+			<TabBar labels={labels2} />
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="font-bold px-4 mb-2">带线条</div>
			
 
				+			<TabBar {labels} line lineW={8} />
			
 
				+			<div class="mt-2"></div>
			
 
				+			<TabBar {labels} line />
			
 
				+			<div class="mt-2"></div>
			
 
				+			<TabBar {labels} line lineW={2} />
			
 
				+			<div class="mt-2"></div>
			
 
				+			<TabBar {labels} line lineW={1} />
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="font-bold px-4 mb-2">图标仅换颜色</div>
			
 
				+			<TabBar labels={labels3} />
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="font-bold px-4 mb-2">自定义最外层</div>
			
 
				+			<TabBar {labels} injClass="mx-2 rounded-full shadow-md dark:shadow-white/10" />
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="font-bold px-4 mb-2">自定义 Tab</div>
			
 
				+			<TabBar {labels} tabInjClass="text-purple dark:text-orange" activeTabInjClass="!text-primary dark:!text-dark" />
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="font-bold px-4 mb-2">自定义选定 Tab</div>
			
 
				+			<TabBar {labels} activeTabInjClass="text-green dark:text-orange" />
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="font-bold px-4 mb-2">自定义线条</div>
			
 
				+			<TabBar {labels} line activeInjClass="bg-[red] dark:bg-[green]" />
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="font-bold px-4 mb-2">关爱版</div>
			
 
				+			<TabBar {labels} love />
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="font-bold px-4 mb-2">监听 change 事件</div>
			
 
				+			<TabBar {labels} on:change={tabBarChangeFun} />
			
 
				+			<div class="m-4">当前 TabBar 激活的 active：{active}</div>
			
 
				+		</div>
			
 
				+	</div>
			
 
				 </div>
			
 
				 <div class="sticky bottom-0">
			
 
				-    <TabBar labels={labels4} injClass="bg-white/60 dark:bg-gray1/60 backdrop-blur"/>
			
 
				+	<TabBar labels={labels4} injClass="bg-white/60 dark:bg-gray1/60 backdrop-blur" />
			
 
				 </div>
			
--- a/demo/src/pages/tabBar/TabBarDemo_en.svelte
+++ b/demo/src/pages/tabBar/TabBarDemo_en.svelte
@@ -1,115 +1,115 @@
 
				 <!-- TabBar Demo -->
			
 
				 <script>
			
 
				-    import {TabBar} from 'stdf';
			
 
				+	import { TabBar } from 'stdf';
			
 
				 
			
 
				-    const labels = [
			
 
				-        {text: 'Home', icon: {name: 'ri-home-3-line', size: 20}, activeIcon: {name: 'ri-home-3-fill', size: 20}},
			
 
				-        {
			
 
				-            text: 'Discover',
			
 
				-            icon: {name: 'ri-compass-3-line', size: 20},
			
 
				-            activeIcon: {name: 'ri-compass-3-fill', size: 20},
			
 
				-        },
			
 
				-        {
			
 
				-            text: 'Message',
			
 
				-            icon: {name: 'ri-discuss-line', size: 20},
			
 
				-            activeIcon: {name: 'ri-discuss-fill', size: 20},
			
 
				-        },
			
 
				-        {
			
 
				-            text: 'Mine',
			
 
				-            icon: {name: 'ri-account-circle-line', size: 20},
			
 
				-            activeIcon: {name: 'ri-account-circle-fill', size: 20},
			
 
				-        },
			
 
				-    ];
			
 
				-    const labels1 = [{text: 'Home'}, {text: 'Discover'}, {text: 'Message'}, {text: 'Mine'}];
			
 
				-    const labels2 = [
			
 
				-        {icon: {name: 'ri-home-3-line', size: 26}, activeIcon: {name: 'ri-home-3-fill', size: 26}},
			
 
				-        {icon: {name: 'ri-compass-3-line', size: 26}, activeIcon: {name: 'ri-compass-3-fill', size: 26}},
			
 
				-        {icon: {name: 'ri-discuss-line', size: 26}, activeIcon: {name: 'ri-discuss-fill', size: 26}},
			
 
				-        {
			
 
				-            icon: {name: 'ri-account-circle-line', size: 26},
			
 
				-            activeIcon: {name: 'ri-account-circle-fill', size: 26},
			
 
				-        },
			
 
				-    ];
			
 
				-    const labels3 = [
			
 
				-        {text: 'Home', icon: {name: 'ri-home-3-line', size: 20}},
			
 
				-        {text: 'Discover', icon: {name: 'ri-compass-3-line', size: 20}},
			
 
				-        {text: 'Message', icon: {name: 'ri-discuss-line', size: 20}},
			
 
				-        {text: 'Mine', icon: {name: 'ri-account-circle-line', size: 20}},
			
 
				-    ];
			
 
				-    const labels4 = [
			
 
				-        {text: 'Home', icon: {name: 'ri-home-3-line', size: 20}, activeIcon: {name: 'ri-home-3-fill', size: 20}},
			
 
				-        {
			
 
				-            text: 'Message',
			
 
				-            icon: {name: 'ri-discuss-line', size: 20},
			
 
				-            activeIcon: {name: 'ri-discuss-fill', size: 20},
			
 
				-        },
			
 
				-        {
			
 
				-            text: 'Mine',
			
 
				-            icon: {name: 'ri-account-circle-line', size: 20},
			
 
				-            activeIcon: {name: 'ri-account-circle-fill', size: 20},
			
 
				-        },
			
 
				-    ];
			
 
				-    let active = 0;
			
 
				-    const tabBarChangeFun = e => {
			
 
				-        active = e.detail;
			
 
				-    };
			
 
				+	const labels = [
			
 
				+		{ text: 'Home', icon: { name: 'ri-home-3-line', size: 20 }, activeIcon: { name: 'ri-home-3-fill', size: 20 } },
			
 
				+		{
			
 
				+			text: 'Discover',
			
 
				+			icon: { name: 'ri-compass-3-line', size: 20 },
			
 
				+			activeIcon: { name: 'ri-compass-3-fill', size: 20 },
			
 
				+		},
			
 
				+		{
			
 
				+			text: 'Message',
			
 
				+			icon: { name: 'ri-discuss-line', size: 20 },
			
 
				+			activeIcon: { name: 'ri-discuss-fill', size: 20 },
			
 
				+		},
			
 
				+		{
			
 
				+			text: 'Mine',
			
 
				+			icon: { name: 'ri-account-circle-line', size: 20 },
			
 
				+			activeIcon: { name: 'ri-account-circle-fill', size: 20 },
			
 
				+		},
			
 
				+	];
			
 
				+	const labels1 = [{ text: 'Home' }, { text: 'Discover' }, { text: 'Message' }, { text: 'Mine' }];
			
 
				+	const labels2 = [
			
 
				+		{ icon: { name: 'ri-home-3-line', size: 26 }, activeIcon: { name: 'ri-home-3-fill', size: 26 } },
			
 
				+		{ icon: { name: 'ri-compass-3-line', size: 26 }, activeIcon: { name: 'ri-compass-3-fill', size: 26 } },
			
 
				+		{ icon: { name: 'ri-discuss-line', size: 26 }, activeIcon: { name: 'ri-discuss-fill', size: 26 } },
			
 
				+		{
			
 
				+			icon: { name: 'ri-account-circle-line', size: 26 },
			
 
				+			activeIcon: { name: 'ri-account-circle-fill', size: 26 },
			
 
				+		},
			
 
				+	];
			
 
				+	const labels3 = [
			
 
				+		{ text: 'Home', icon: { name: 'ri-home-3-line', size: 20 } },
			
 
				+		{ text: 'Discover', icon: { name: 'ri-compass-3-line', size: 20 } },
			
 
				+		{ text: 'Message', icon: { name: 'ri-discuss-line', size: 20 } },
			
 
				+		{ text: 'Mine', icon: { name: 'ri-account-circle-line', size: 20 } },
			
 
				+	];
			
 
				+	const labels4 = [
			
 
				+		{ text: 'Home', icon: { name: 'ri-home-3-line', size: 20 }, activeIcon: { name: 'ri-home-3-fill', size: 20 } },
			
 
				+		{
			
 
				+			text: 'Message',
			
 
				+			icon: { name: 'ri-discuss-line', size: 20 },
			
 
				+			activeIcon: { name: 'ri-discuss-fill', size: 20 },
			
 
				+		},
			
 
				+		{
			
 
				+			text: 'Mine',
			
 
				+			icon: { name: 'ri-account-circle-line', size: 20 },
			
 
				+			activeIcon: { name: 'ri-account-circle-fill', size: 20 },
			
 
				+		},
			
 
				+	];
			
 
				+	let active = 0;
			
 
				+	const tabBarChangeFun = e => {
			
 
				+		active = e.detail;
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-8">
			
 
				-    <div class="space-y-8 my-4">
			
 
				-        <div>
			
 
				-            <div class="font-bold px-4 mb-2">Basic usage</div>
			
 
				-            <TabBar {labels}/>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="font-bold px-4 mb-2">Text only</div>
			
 
				-            <TabBar labels={labels1}/>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="font-bold px-4 mb-2">Icon only</div>
			
 
				-            <TabBar labels={labels2}/>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="font-bold px-4 mb-2">Belt line</div>
			
 
				-            <TabBar {labels} line lineW={8}/>
			
 
				-            <div class="mt-2"></div>
			
 
				-            <TabBar {labels} line/>
			
 
				-            <div class="mt-2"></div>
			
 
				-            <TabBar {labels} line lineW={2}/>
			
 
				-            <div class="mt-2"></div>
			
 
				-            <TabBar {labels} line lineW={1}/>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="font-bold px-4 mb-2">ICONS change colors only</div>
			
 
				-            <TabBar labels={labels3}/>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="font-bold px-4 mb-2">Customize the outermost layer</div>
			
 
				-            <TabBar {labels} injClass="mx-2 rounded-full shadow-md dark:shadow-white/10"/>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="font-bold px-4 mb-2">customize Tab</div>
			
 
				-            <TabBar {labels} tabInjClass="text-purple dark:text-orange" activeTabInjClass="!text-primary dark:!text-dark"/>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="font-bold px-4 mb-2">Custom selection Tab</div>
			
 
				-            <TabBar {labels} activeTabInjClass="text-green dark:text-orange"/>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="font-bold px-4 mb-2">Custom line</div>
			
 
				-            <TabBar {labels} line activeInjClass="bg-[red] dark:bg-[green]"/>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="font-bold px-4 mb-2">Care edition</div>
			
 
				-            <TabBar {labels} love/>
			
 
				-        </div>
			
 
				-        <div>
			
 
				-            <div class="font-bold px-4 mb-2">monitor change event</div>
			
 
				-            <TabBar {labels} on:change={tabBarChangeFun}/>
			
 
				-            <div class="m-4">At present TabBar activated active：{active}</div>
			
 
				-        </div>
			
 
				-    </div>
			
 
				+	<div class="space-y-8 my-4">
			
 
				+		<div>
			
 
				+			<div class="font-bold px-4 mb-2">Basic usage</div>
			
 
				+			<TabBar {labels} />
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="font-bold px-4 mb-2">Text only</div>
			
 
				+			<TabBar labels={labels1} />
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="font-bold px-4 mb-2">Icon only</div>
			
 
				+			<TabBar labels={labels2} />
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="font-bold px-4 mb-2">Belt line</div>
			
 
				+			<TabBar {labels} line lineW={8} />
			
 
				+			<div class="mt-2"></div>
			
 
				+			<TabBar {labels} line />
			
 
				+			<div class="mt-2"></div>
			
 
				+			<TabBar {labels} line lineW={2} />
			
 
				+			<div class="mt-2"></div>
			
 
				+			<TabBar {labels} line lineW={1} />
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="font-bold px-4 mb-2">ICONS change colors only</div>
			
 
				+			<TabBar labels={labels3} />
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="font-bold px-4 mb-2">Customize the outermost layer</div>
			
 
				+			<TabBar {labels} injClass="mx-2 rounded-full shadow-md dark:shadow-white/10" />
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="font-bold px-4 mb-2">customize Tab</div>
			
 
				+			<TabBar {labels} tabInjClass="text-purple dark:text-orange" activeTabInjClass="!text-primary dark:!text-dark" />
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="font-bold px-4 mb-2">Custom selection Tab</div>
			
 
				+			<TabBar {labels} activeTabInjClass="text-green dark:text-orange" />
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="font-bold px-4 mb-2">Custom line</div>
			
 
				+			<TabBar {labels} line activeInjClass="bg-[red] dark:bg-[green]" />
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="font-bold px-4 mb-2">Care edition</div>
			
 
				+			<TabBar {labels} love />
			
 
				+		</div>
			
 
				+		<div>
			
 
				+			<div class="font-bold px-4 mb-2">monitor change event</div>
			
 
				+			<TabBar {labels} on:change={tabBarChangeFun} />
			
 
				+			<div class="m-4">At present TabBar activated active：{active}</div>
			
 
				+		</div>
			
 
				+	</div>
			
 
				 </div>
			
 
				 <div class="sticky bottom-0">
			
 
				-    <TabBar labels={labels4} injClass="bg-white/60 dark:bg-gray1/60 backdrop-blur"/>
			
 
				+	<TabBar labels={labels4} injClass="bg-white/60 dark:bg-gray1/60 backdrop-blur" />
			
 
				 </div>
			
--- a/demo/src/pages/tabs/TabsDemo.svelte
+++ b/demo/src/pages/tabs/TabsDemo.svelte
@@ -1,164 +1,164 @@
 
				 <!-- Tabs Demo -->
			
 
				 <script>
			
 
				-    import { Tabs, Tab, TabContent, Divider } from 'stdf';
			
 
				-    import { fly } from 'svelte/transition';
			
 
				-
			
 
				-    const labels = [{ text: '飞机' }, { text: '轮船' }, { text: '火车' }, { text: '汽车' }];
			
 
				-    const labels1 = [
			
 
				-        { icon: { name: 'ri-plane-line', theme: true, size: 20 } },
			
 
				-        { icon: { name: 'ri-ship-2-line', theme: true, size: 20 } },
			
 
				-        { icon: { name: 'ri-train-line', theme: true, size: 20 } },
			
 
				-        { icon: { name: 'ri-car-line', theme: true, size: 20 } },
			
 
				-    ];
			
 
				-    const labels2 = [
			
 
				-        { text: '飞机', icon: { name: 'ri-plane-line', theme: true, size: 16, top: -1 } },
			
 
				-        { text: '轮船', icon: { name: 'ri-ship-2-line', theme: true, size: 16, top: -1 } },
			
 
				-        { text: '火车', icon: { name: 'ri-train-line', theme: true, size: 16, top: -1 } },
			
 
				-        { text: '汽车', icon: { name: 'ri-car-line', theme: true, size: 16, top: -1 } },
			
 
				-    ];
			
 
				-    let width = 0;
			
 
				-    let changeActive = 0;
			
 
				-    let active = 2;
			
 
				-    const clicktabFun = e => {
			
 
				-        active = e.detail;
			
 
				-    };
			
 
				-    const tabsChangeFun = e => {
			
 
				-        changeActive = e.detail;
			
 
				-    };
			
 
				+	import { Tabs, Tab, TabContent, Divider } from 'stdf';
			
 
				+	import { fly } from 'svelte/transition';
			
 
				+
			
 
				+	const labels = [{ text: '飞机' }, { text: '轮船' }, { text: '火车' }, { text: '汽车' }];
			
 
				+	const labels1 = [
			
 
				+		{ icon: { name: 'ri-plane-line', theme: true, size: 20 } },
			
 
				+		{ icon: { name: 'ri-ship-2-line', theme: true, size: 20 } },
			
 
				+		{ icon: { name: 'ri-train-line', theme: true, size: 20 } },
			
 
				+		{ icon: { name: 'ri-car-line', theme: true, size: 20 } },
			
 
				+	];
			
 
				+	const labels2 = [
			
 
				+		{ text: '飞机', icon: { name: 'ri-plane-line', theme: true, size: 16, top: -1 } },
			
 
				+		{ text: '轮船', icon: { name: 'ri-ship-2-line', theme: true, size: 16, top: -1 } },
			
 
				+		{ text: '火车', icon: { name: 'ri-train-line', theme: true, size: 16, top: -1 } },
			
 
				+		{ text: '汽车', icon: { name: 'ri-car-line', theme: true, size: 16, top: -1 } },
			
 
				+	];
			
 
				+	let width = 0;
			
 
				+	let changeActive = 0;
			
 
				+	let active = 2;
			
 
				+	const clicktabFun = e => {
			
 
				+		active = e.detail;
			
 
				+	};
			
 
				+	const tabsChangeFun = e => {
			
 
				+		changeActive = e.detail;
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-8">
			
 
				-    <div class="font-bold text-xl px-4">使用 Tabs</div>
			
 
				-    <div class="space-y-4 my-4">
			
 
				-        <div class="font-bold px-4">基础用法</div>
			
 
				-        <Tabs tab={{ labels }}>
			
 
				-            <TabContent>我是飞机</TabContent>
			
 
				-            <TabContent>我是轮船</TabContent>
			
 
				-            <TabContent>我是火车</TabContent>
			
 
				-            <TabContent>我是汽车</TabContent>
			
 
				-        </Tabs>
			
 
				-        <Divider />
			
 
				-
			
 
				-        <div class="font-bold px-4">加快过渡</div>
			
 
				-        <Tabs duration="fast" tab={{ labels }}>
			
 
				-            <TabContent>我是飞机</TabContent>
			
 
				-            <TabContent>我是轮船</TabContent>
			
 
				-            <TabContent>我是火车</TabContent>
			
 
				-            <TabContent>我是汽车</TabContent>
			
 
				-        </Tabs>
			
 
				-        <Divider />
			
 
				-
			
 
				-        <div class="font-bold px-4">减缓过渡</div>
			
 
				-        <Tabs duration="slower" tab={{ labels }}>
			
 
				-            <TabContent>我是飞机</TabContent>
			
 
				-            <TabContent>我是轮船</TabContent>
			
 
				-            <TabContent>我是火车</TabContent>
			
 
				-            <TabContent>我是汽车</TabContent>
			
 
				-        </Tabs>
			
 
				-        <Divider />
			
 
				-
			
 
				-        <div class="font-bold px-4">使用线性风格</div>
			
 
				-        <Tabs tab={{ labels, lineType: true }}>
			
 
				-            <TabContent>我是飞机</TabContent>
			
 
				-            <TabContent>我是轮船</TabContent>
			
 
				-            <TabContent>我是火车</TabContent>
			
 
				-            <TabContent>我是汽车</TabContent>
			
 
				-        </Tabs>
			
 
				-        <Divider />
			
 
				-
			
 
				-        <div class="font-bold px-4">选项卡位于底部</div>
			
 
				-        <Tabs tab={{ labels }} placement="b">
			
 
				-            <TabContent>我是飞机</TabContent>
			
 
				-            <TabContent>我是轮船</TabContent>
			
 
				-            <TabContent>我是火车</TabContent>
			
 
				-            <TabContent>我是汽车</TabContent>
			
 
				-        </Tabs>
			
 
				-        <Divider />
			
 
				-
			
 
				-        <div class="font-bold px-4">选项卡位于左侧</div>
			
 
				-        <Tabs tab={{ labels }} placement="l" let:active>
			
 
				-            <TabContent show={active === 0}>我是飞机</TabContent>
			
 
				-            <TabContent show={active === 1}>我是轮船</TabContent>
			
 
				-            <TabContent show={active === 2}>我是火车</TabContent>
			
 
				-            <TabContent show={active === 3}>我是汽车</TabContent>
			
 
				-        </Tabs>
			
 
				-        <Divider />
			
 
				-
			
 
				-        <div class="font-bold px-4">选项卡位于右侧</div>
			
 
				-        <Tabs tab={{ labels }} placement="r" let:active>
			
 
				-            <TabContent show={active === 0}>我是飞机</TabContent>
			
 
				-            <TabContent show={active === 1}>我是轮船</TabContent>
			
 
				-            <TabContent show={active === 2}>我是火车</TabContent>
			
 
				-            <TabContent show={active === 3}>我是汽车</TabContent>
			
 
				-        </Tabs>
			
 
				-        <Divider />
			
 
				-
			
 
				-        <div class="font-bold px-4" bind:clientWidth={width}>自定义过渡</div>
			
 
				-        <Tabs tab={{ labels }} let:active transition={false}>
			
 
				-            <div class="relative py-8">
			
 
				-                {#if active === 0}
			
 
				-                    <div class="absolute" in:fly={{ y: -60, x: 0, duration: 1000 }}>我是飞机</div>
			
 
				-                {:else if active === 1}
			
 
				-                    <div class="absolute" in:fly={{ y: -60, x: width / 4, duration: 1000 }}>我是轮船</div>
			
 
				-                {:else if active === 2}
			
 
				-                    <div class="absolute" in:fly={{ y: -60, x: width / 2, duration: 1000 }}>我是火车</div>
			
 
				-                {:else if active === 3}
			
 
				-                    <div class="absolute" in:fly={{ y: -60, x: (width / 4) * 3, duration: 1000 }}>我是汽车</div>
			
 
				-                {/if}
			
 
				-            </div>
			
 
				-        </Tabs>
			
 
				-        <Divider />
			
 
				-
			
 
				-        <div class="font-bold px-4">监听 change 事件</div>
			
 
				-        <Tabs tab={{ labels }} on:change={tabsChangeFun}>
			
 
				-            <TabContent>我是飞机</TabContent>
			
 
				-            <TabContent>我是轮船</TabContent>
			
 
				-            <TabContent>我是火车</TabContent>
			
 
				-            <TabContent>我是汽车</TabContent>
			
 
				-        </Tabs>
			
 
				-        <div class="mt-4">当前 Tabs 激活的 active：{changeActive}</div>
			
 
				-    </div>
			
 
				-    <Divider />
			
 
				-
			
 
				-    <div class="font-bold mt-8 text-xl">不同的 Tab 风格</div>
			
 
				-    <div class="flex flex-col space-y-2 mt-4">
			
 
				-        <div class="font-bold px-4">不同圆角</div>
			
 
				-        <Tab {labels} radius="none" />
			
 
				-        <Tab {labels} />
			
 
				-        <Tab {labels} radius="xl" />
			
 
				-        <Tab {labels} radius="full" />
			
 
				-
			
 
				-        <div class="font-bold px-4">文字与图标搭配</div>
			
 
				-        <Tab {labels} />
			
 
				-        <Tab labels={labels1} />
			
 
				-        <Tab labels={labels2} />
			
 
				-
			
 
				-        <div class="font-bold px-4">关爱版</div>
			
 
				-        <Tab {labels} love />
			
 
				-
			
 
				-        <div class="font-bold px-4">线性风格</div>
			
 
				-        <Tab {labels} lineType />
			
 
				-        <Tab labels={labels2} lineType />
			
 
				-
			
 
				-        <div class="font-bold px-4">自定义 Tab 外层风格</div>
			
 
				-        <Tab {labels} injClass="bg-gradient-to-b from-[#e3c6ff] to-[#b6aeff]" />
			
 
				-
			
 
				-        <div class="font-bold px-4">自定义 Tab 风格</div>
			
 
				-        <Tab {labels} tabInjClass="underline text-primary decoration-primary dark:text-dark dark:decoration-dark" />
			
 
				-
			
 
				-        <div class="font-bold px-4">自定义选定 Tab 风格</div>
			
 
				-        <Tab {labels} activeTabInjClass="text-primary dark:text-dark !text-base transition-all" />
			
 
				-
			
 
				-        <div class="font-bold px-4">自定义指示器风格</div>
			
 
				-        <Tab {labels} activeInjClass="bg-gradient-to-b from-[#CE9FFC] to-[#7367F0]" activeTabInjClass="text-white" />
			
 
				-        <Tab {labels} lineType activeInjClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]" />
			
 
				-    </div>
			
 
				-    <Divider />
			
 
				-
			
 
				-    <div class="font-bold my-8 text-xl">单独使用 Tab</div>
			
 
				-    <div class="my-4">
			
 
				-        <Tab {labels} {active} on:clicktab={clicktabFun} />
			
 
				-        <div class="mt-4">当前 Tab 点击的 active：{active}</div>
			
 
				-    </div>
			
 
				-    <Divider />
			
 
				+	<div class="font-bold text-xl px-4">使用 Tabs</div>
			
 
				+	<div class="space-y-4 my-4">
			
 
				+		<div class="font-bold px-4">基础用法</div>
			
 
				+		<Tabs tab={{ labels }}>
			
 
				+			<TabContent>我是飞机</TabContent>
			
 
				+			<TabContent>我是轮船</TabContent>
			
 
				+			<TabContent>我是火车</TabContent>
			
 
				+			<TabContent>我是汽车</TabContent>
			
 
				+		</Tabs>
			
 
				+		<Divider />
			
 
				+
			
 
				+		<div class="font-bold px-4">加快过渡</div>
			
 
				+		<Tabs duration="fast" tab={{ labels }}>
			
 
				+			<TabContent>我是飞机</TabContent>
			
 
				+			<TabContent>我是轮船</TabContent>
			
 
				+			<TabContent>我是火车</TabContent>
			
 
				+			<TabContent>我是汽车</TabContent>
			
 
				+		</Tabs>
			
 
				+		<Divider />
			
 
				+
			
 
				+		<div class="font-bold px-4">减缓过渡</div>
			
 
				+		<Tabs duration="slower" tab={{ labels }}>
			
 
				+			<TabContent>我是飞机</TabContent>
			
 
				+			<TabContent>我是轮船</TabContent>
			
 
				+			<TabContent>我是火车</TabContent>
			
 
				+			<TabContent>我是汽车</TabContent>
			
 
				+		</Tabs>
			
 
				+		<Divider />
			
 
				+
			
 
				+		<div class="font-bold px-4">使用线性风格</div>
			
 
				+		<Tabs tab={{ labels, lineType: true }}>
			
 
				+			<TabContent>我是飞机</TabContent>
			
 
				+			<TabContent>我是轮船</TabContent>
			
 
				+			<TabContent>我是火车</TabContent>
			
 
				+			<TabContent>我是汽车</TabContent>
			
 
				+		</Tabs>
			
 
				+		<Divider />
			
 
				+
			
 
				+		<div class="font-bold px-4">选项卡位于底部</div>
			
 
				+		<Tabs tab={{ labels }} placement="b">
			
 
				+			<TabContent>我是飞机</TabContent>
			
 
				+			<TabContent>我是轮船</TabContent>
			
 
				+			<TabContent>我是火车</TabContent>
			
 
				+			<TabContent>我是汽车</TabContent>
			
 
				+		</Tabs>
			
 
				+		<Divider />
			
 
				+
			
 
				+		<div class="font-bold px-4">选项卡位于左侧</div>
			
 
				+		<Tabs tab={{ labels }} placement="l" let:active>
			
 
				+			<TabContent show={active === 0}>我是飞机</TabContent>
			
 
				+			<TabContent show={active === 1}>我是轮船</TabContent>
			
 
				+			<TabContent show={active === 2}>我是火车</TabContent>
			
 
				+			<TabContent show={active === 3}>我是汽车</TabContent>
			
 
				+		</Tabs>
			
 
				+		<Divider />
			
 
				+
			
 
				+		<div class="font-bold px-4">选项卡位于右侧</div>
			
 
				+		<Tabs tab={{ labels }} placement="r" let:active>
			
 
				+			<TabContent show={active === 0}>我是飞机</TabContent>
			
 
				+			<TabContent show={active === 1}>我是轮船</TabContent>
			
 
				+			<TabContent show={active === 2}>我是火车</TabContent>
			
 
				+			<TabContent show={active === 3}>我是汽车</TabContent>
			
 
				+		</Tabs>
			
 
				+		<Divider />
			
 
				+
			
 
				+		<div class="font-bold px-4" bind:clientWidth={width}>自定义过渡</div>
			
 
				+		<Tabs tab={{ labels }} let:active transition={false}>
			
 
				+			<div class="relative py-8">
			
 
				+				{#if active === 0}
			
 
				+					<div class="absolute" in:fly={{ y: -60, x: 0, duration: 1000 }}>我是飞机</div>
			
 
				+				{:else if active === 1}
			
 
				+					<div class="absolute" in:fly={{ y: -60, x: width / 4, duration: 1000 }}>我是轮船</div>
			
 
				+				{:else if active === 2}
			
 
				+					<div class="absolute" in:fly={{ y: -60, x: width / 2, duration: 1000 }}>我是火车</div>
			
 
				+				{:else if active === 3}
			
 
				+					<div class="absolute" in:fly={{ y: -60, x: (width / 4) * 3, duration: 1000 }}>我是汽车</div>
			
 
				+				{/if}
			
 
				+			</div>
			
 
				+		</Tabs>
			
 
				+		<Divider />
			
 
				+
			
 
				+		<div class="font-bold px-4">监听 change 事件</div>
			
 
				+		<Tabs tab={{ labels }} on:change={tabsChangeFun}>
			
 
				+			<TabContent>我是飞机</TabContent>
			
 
				+			<TabContent>我是轮船</TabContent>
			
 
				+			<TabContent>我是火车</TabContent>
			
 
				+			<TabContent>我是汽车</TabContent>
			
 
				+		</Tabs>
			
 
				+		<div class="mt-4">当前 Tabs 激活的 active：{changeActive}</div>
			
 
				+	</div>
			
 
				+	<Divider />
			
 
				+
			
 
				+	<div class="font-bold mt-8 text-xl">不同的 Tab 风格</div>
			
 
				+	<div class="flex flex-col space-y-2 mt-4">
			
 
				+		<div class="font-bold px-4">不同圆角</div>
			
 
				+		<Tab {labels} radius="none" />
			
 
				+		<Tab {labels} />
			
 
				+		<Tab {labels} radius="xl" />
			
 
				+		<Tab {labels} radius="full" />
			
 
				+
			
 
				+		<div class="font-bold px-4">文字与图标搭配</div>
			
 
				+		<Tab {labels} />
			
 
				+		<Tab labels={labels1} />
			
 
				+		<Tab labels={labels2} />
			
 
				+
			
 
				+		<div class="font-bold px-4">关爱版</div>
			
 
				+		<Tab {labels} love />
			
 
				+
			
 
				+		<div class="font-bold px-4">线性风格</div>
			
 
				+		<Tab {labels} lineType />
			
 
				+		<Tab labels={labels2} lineType />
			
 
				+
			
 
				+		<div class="font-bold px-4">自定义 Tab 外层风格</div>
			
 
				+		<Tab {labels} injClass="bg-gradient-to-b from-[#e3c6ff] to-[#b6aeff]" />
			
 
				+
			
 
				+		<div class="font-bold px-4">自定义 Tab 风格</div>
			
 
				+		<Tab {labels} tabInjClass="underline text-primary decoration-primary dark:text-dark dark:decoration-dark" />
			
 
				+
			
 
				+		<div class="font-bold px-4">自定义选定 Tab 风格</div>
			
 
				+		<Tab {labels} activeTabInjClass="text-primary dark:text-dark !text-base transition-all" />
			
 
				+
			
 
				+		<div class="font-bold px-4">自定义指示器风格</div>
			
 
				+		<Tab {labels} activeInjClass="bg-gradient-to-b from-[#CE9FFC] to-[#7367F0]" activeTabInjClass="text-white" />
			
 
				+		<Tab {labels} lineType activeInjClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]" />
			
 
				+	</div>
			
 
				+	<Divider />
			
 
				+
			
 
				+	<div class="font-bold my-8 text-xl">单独使用 Tab</div>
			
 
				+	<div class="my-4">
			
 
				+		<Tab {labels} {active} on:clicktab={clicktabFun} />
			
 
				+		<div class="mt-4">当前 Tab 点击的 active：{active}</div>
			
 
				+	</div>
			
 
				+	<Divider />
			
 
				 </div>
			
--- a/demo/src/pages/tabs/TabsDemo_en.svelte
+++ b/demo/src/pages/tabs/TabsDemo_en.svelte
@@ -1,164 +1,164 @@
 
				 <!-- Tabs Demo -->
			
 
				 <script>
			
 
				-    import { Tabs, Tab, TabContent, Divider } from 'stdf';
			
 
				-    import { fly } from 'svelte/transition';
			
 
				-
			
 
				-    const labels = [{ text: 'aircraft' }, { text: 'steamer' }, { text: 'train' }, { text: 'car' }];
			
 
				-    const labels1 = [
			
 
				-        { icon: { name: 'ri-plane-line', theme: true, size: 20 } },
			
 
				-        { icon: { name: 'ri-ship-2-line', theme: true, size: 20 } },
			
 
				-        { icon: { name: 'ri-train-line', theme: true, size: 20 } },
			
 
				-        { icon: { name: 'ri-car-line', theme: true, size: 20 } },
			
 
				-    ];
			
 
				-    const labels2 = [
			
 
				-        { text: 'aircraft', icon: { name: 'ri-plane-line', theme: true, size: 16, top: -1 } },
			
 
				-        { text: 'steamer', icon: { name: 'ri-ship-2-line', theme: true, size: 16, top: -1 } },
			
 
				-        { text: 'train', icon: { name: 'ri-train-line', theme: true, size: 16, top: -1 } },
			
 
				-        { text: 'car', icon: { name: 'ri-car-line', theme: true, size: 16, top: -1 } },
			
 
				-    ];
			
 
				-    let width = 0;
			
 
				-    let changeActive = 0;
			
 
				-    let active = 2;
			
 
				-    const clicktabFun = e => {
			
 
				-        active = e.detail;
			
 
				-    };
			
 
				-    const tabsChangeFun = e => {
			
 
				-        changeActive = e.detail;
			
 
				-    };
			
 
				+	import { Tabs, Tab, TabContent, Divider } from 'stdf';
			
 
				+	import { fly } from 'svelte/transition';
			
 
				+
			
 
				+	const labels = [{ text: 'aircraft' }, { text: 'steamer' }, { text: 'train' }, { text: 'car' }];
			
 
				+	const labels1 = [
			
 
				+		{ icon: { name: 'ri-plane-line', theme: true, size: 20 } },
			
 
				+		{ icon: { name: 'ri-ship-2-line', theme: true, size: 20 } },
			
 
				+		{ icon: { name: 'ri-train-line', theme: true, size: 20 } },
			
 
				+		{ icon: { name: 'ri-car-line', theme: true, size: 20 } },
			
 
				+	];
			
 
				+	const labels2 = [
			
 
				+		{ text: 'aircraft', icon: { name: 'ri-plane-line', theme: true, size: 16, top: -1 } },
			
 
				+		{ text: 'steamer', icon: { name: 'ri-ship-2-line', theme: true, size: 16, top: -1 } },
			
 
				+		{ text: 'train', icon: { name: 'ri-train-line', theme: true, size: 16, top: -1 } },
			
 
				+		{ text: 'car', icon: { name: 'ri-car-line', theme: true, size: 16, top: -1 } },
			
 
				+	];
			
 
				+	let width = 0;
			
 
				+	let changeActive = 0;
			
 
				+	let active = 2;
			
 
				+	const clicktabFun = e => {
			
 
				+		active = e.detail;
			
 
				+	};
			
 
				+	const tabsChangeFun = e => {
			
 
				+		changeActive = e.detail;
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-8">
			
 
				-    <div class="font-bold text-xl px-4">use Tabs</div>
			
 
				-    <div class="space-y-4 my-4">
			
 
				-        <div class="font-bold px-4">Basic usage</div>
			
 
				-        <Tabs tab={{ labels }}>
			
 
				-            <TabContent>I am a plane</TabContent>
			
 
				-            <TabContent>I am a ship</TabContent>
			
 
				-            <TabContent>I am a train</TabContent>
			
 
				-            <TabContent>I am a car</TabContent>
			
 
				-        </Tabs>
			
 
				-        <Divider />
			
 
				-
			
 
				-        <div class="font-bold px-4">Accelerate the transition</div>
			
 
				-        <Tabs duration="fast" tab={{ labels }}>
			
 
				-            <TabContent>I am a plane</TabContent>
			
 
				-            <TabContent>I am a ship</TabContent>
			
 
				-            <TabContent>I am a train</TabContent>
			
 
				-            <TabContent>I am a car</TabContent>
			
 
				-        </Tabs>
			
 
				-        <Divider />
			
 
				-
			
 
				-        <div class="font-bold px-4">Transition mitigation</div>
			
 
				-        <Tabs duration="slower" tab={{ labels }}>
			
 
				-            <TabContent>I am a plane</TabContent>
			
 
				-            <TabContent>I am a ship</TabContent>
			
 
				-            <TabContent>I am a train</TabContent>
			
 
				-            <TabContent>I am a car</TabContent>
			
 
				-        </Tabs>
			
 
				-        <Divider />
			
 
				-
			
 
				-        <div class="font-bold px-4">Use linear style</div>
			
 
				-        <Tabs tab={{ labels, lineType: true }}>
			
 
				-            <TabContent>I am a plane</TabContent>
			
 
				-            <TabContent>I am a ship</TabContent>
			
 
				-            <TabContent>I am a train</TabContent>
			
 
				-            <TabContent>I am a car</TabContent>
			
 
				-        </Tabs>
			
 
				-        <Divider />
			
 
				-
			
 
				-        <div class="font-bold px-4">The TAB is located at the bottom</div>
			
 
				-        <Tabs tab={{ labels }} placement="b">
			
 
				-            <TabContent>I am a plane</TabContent>
			
 
				-            <TabContent>I am a ship</TabContent>
			
 
				-            <TabContent>I am a train</TabContent>
			
 
				-            <TabContent>I am a car</TabContent>
			
 
				-        </Tabs>
			
 
				-        <Divider />
			
 
				-
			
 
				-        <div class="font-bold px-4">The TAB is located on the left</div>
			
 
				-        <Tabs tab={{ labels }} placement="l" let:active>
			
 
				-            <TabContent show={active === 0}>I am a plane</TabContent>
			
 
				-            <TabContent show={active === 1}>I am a ship</TabContent>
			
 
				-            <TabContent show={active === 2}>I am a train</TabContent>
			
 
				-            <TabContent show={active === 3}>I am a car</TabContent>
			
 
				-        </Tabs>
			
 
				-        <Divider />
			
 
				-
			
 
				-        <div class="font-bold px-4">The TAB is located on the right</div>
			
 
				-        <Tabs tab={{ labels }} placement="r" let:active>
			
 
				-            <TabContent show={active === 0}>I am a plane</TabContent>
			
 
				-            <TabContent show={active === 1}>I am a ship</TabContent>
			
 
				-            <TabContent show={active === 2}>I am a train</TabContent>
			
 
				-            <TabContent show={active === 3}>I am a car</TabContent>
			
 
				-        </Tabs>
			
 
				-        <Divider />
			
 
				-
			
 
				-        <div class="font-bold px-4" bind:clientWidth={width}>Custom transition</div>
			
 
				-        <Tabs tab={{ labels }} let:active transition={false}>
			
 
				-            <div class="relative py-8">
			
 
				-                {#if active === 0}
			
 
				-                    <div class="absolute" in:fly={{ y: -60, x: 0, duration: 1000 }}>I am a plane</div>
			
 
				-                {:else if active === 1}
			
 
				-                    <div class="absolute" in:fly={{ y: -60, x: width / 4, duration: 1000 }}>I am a ship</div>
			
 
				-                {:else if active === 2}
			
 
				-                    <div class="absolute" in:fly={{ y: -60, x: width / 2, duration: 1000 }}>I am a train</div>
			
 
				-                {:else if active === 3}
			
 
				-                    <div class="absolute" in:fly={{ y: -60, x: (width / 4) * 3, duration: 1000 }}>I am a car</div>
			
 
				-                {/if}
			
 
				-            </div>
			
 
				-        </Tabs>
			
 
				-        <Divider />
			
 
				-
			
 
				-        <div class="font-bold px-4">monitor change event</div>
			
 
				-        <Tabs tab={{ labels }} on:change={tabsChangeFun}>
			
 
				-            <TabContent>I am a plane</TabContent>
			
 
				-            <TabContent>I am a ship</TabContent>
			
 
				-            <TabContent>I am a train</TabContent>
			
 
				-            <TabContent>I am a car</TabContent>
			
 
				-        </Tabs>
			
 
				-        <div class="mt-4">At present Tabs activated active：{changeActive}</div>
			
 
				-    </div>
			
 
				-    <Divider />
			
 
				-
			
 
				-    <div class="font-bold mt-8 text-xl">different Tab style</div>
			
 
				-    <div class="flex flex-col space-y-2 mt-4">
			
 
				-        <div class="font-bold px-4">Different fillet</div>
			
 
				-        <Tab {labels} radius="none" />
			
 
				-        <Tab {labels} />
			
 
				-        <Tab {labels} radius="xl" />
			
 
				-        <Tab {labels} radius="full" />
			
 
				-
			
 
				-        <div class="font-bold px-4">Match text with ICONS</div>
			
 
				-        <Tab {labels} />
			
 
				-        <Tab labels={labels1} />
			
 
				-        <Tab labels={labels2} />
			
 
				-
			
 
				-        <div class="font-bold px-4">Care edition</div>
			
 
				-        <Tab {labels} love />
			
 
				-
			
 
				-        <div class="font-bold px-4">Linear style</div>
			
 
				-        <Tab {labels} lineType />
			
 
				-        <Tab labels={labels2} lineType />
			
 
				-
			
 
				-        <div class="font-bold px-4">customize Tab Outer style</div>
			
 
				-        <Tab {labels} injClass="bg-gradient-to-b from-[#e3c6ff] to-[#b6aeff]" />
			
 
				-
			
 
				-        <div class="font-bold px-4">customize Tab style</div>
			
 
				-        <Tab {labels} tabInjClass="underline text-primary decoration-primary dark:text-dark dark:decoration-dark" />
			
 
				-
			
 
				-        <div class="font-bold px-4">Custom selection Tab style</div>
			
 
				-        <Tab {labels} activeTabInjClass="text-primary dark:text-dark !text-base transition-all" />
			
 
				-
			
 
				-        <div class="font-bold px-4">Customize the indicator style</div>
			
 
				-        <Tab {labels} activeInjClass="bg-gradient-to-b from-[#CE9FFC] to-[#7367F0]" activeTabInjClass="text-white" />
			
 
				-        <Tab {labels} lineType activeInjClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]" />
			
 
				-    </div>
			
 
				-    <Divider />
			
 
				-
			
 
				-    <div class="font-bold my-8 text-xl">Use alone Tab</div>
			
 
				-    <div class="my-4">
			
 
				-        <Tab {labels} {active} on:clicktab={clicktabFun} />
			
 
				-        <div class="mt-4">At present Tab clickable active：{active}</div>
			
 
				-    </div>
			
 
				-    <Divider />
			
 
				+	<div class="font-bold text-xl px-4">use Tabs</div>
			
 
				+	<div class="space-y-4 my-4">
			
 
				+		<div class="font-bold px-4">Basic usage</div>
			
 
				+		<Tabs tab={{ labels }}>
			
 
				+			<TabContent>I am a plane</TabContent>
			
 
				+			<TabContent>I am a ship</TabContent>
			
 
				+			<TabContent>I am a train</TabContent>
			
 
				+			<TabContent>I am a car</TabContent>
			
 
				+		</Tabs>
			
 
				+		<Divider />
			
 
				+
			
 
				+		<div class="font-bold px-4">Accelerate the transition</div>
			
 
				+		<Tabs duration="fast" tab={{ labels }}>
			
 
				+			<TabContent>I am a plane</TabContent>
			
 
				+			<TabContent>I am a ship</TabContent>
			
 
				+			<TabContent>I am a train</TabContent>
			
 
				+			<TabContent>I am a car</TabContent>
			
 
				+		</Tabs>
			
 
				+		<Divider />
			
 
				+
			
 
				+		<div class="font-bold px-4">Transition mitigation</div>
			
 
				+		<Tabs duration="slower" tab={{ labels }}>
			
 
				+			<TabContent>I am a plane</TabContent>
			
 
				+			<TabContent>I am a ship</TabContent>
			
 
				+			<TabContent>I am a train</TabContent>
			
 
				+			<TabContent>I am a car</TabContent>
			
 
				+		</Tabs>
			
 
				+		<Divider />
			
 
				+
			
 
				+		<div class="font-bold px-4">Use linear style</div>
			
 
				+		<Tabs tab={{ labels, lineType: true }}>
			
 
				+			<TabContent>I am a plane</TabContent>
			
 
				+			<TabContent>I am a ship</TabContent>
			
 
				+			<TabContent>I am a train</TabContent>
			
 
				+			<TabContent>I am a car</TabContent>
			
 
				+		</Tabs>
			
 
				+		<Divider />
			
 
				+
			
 
				+		<div class="font-bold px-4">The TAB is located at the bottom</div>
			
 
				+		<Tabs tab={{ labels }} placement="b">
			
 
				+			<TabContent>I am a plane</TabContent>
			
 
				+			<TabContent>I am a ship</TabContent>
			
 
				+			<TabContent>I am a train</TabContent>
			
 
				+			<TabContent>I am a car</TabContent>
			
 
				+		</Tabs>
			
 
				+		<Divider />
			
 
				+
			
 
				+		<div class="font-bold px-4">The TAB is located on the left</div>
			
 
				+		<Tabs tab={{ labels }} placement="l" let:active>
			
 
				+			<TabContent show={active === 0}>I am a plane</TabContent>
			
 
				+			<TabContent show={active === 1}>I am a ship</TabContent>
			
 
				+			<TabContent show={active === 2}>I am a train</TabContent>
			
 
				+			<TabContent show={active === 3}>I am a car</TabContent>
			
 
				+		</Tabs>
			
 
				+		<Divider />
			
 
				+
			
 
				+		<div class="font-bold px-4">The TAB is located on the right</div>
			
 
				+		<Tabs tab={{ labels }} placement="r" let:active>
			
 
				+			<TabContent show={active === 0}>I am a plane</TabContent>
			
 
				+			<TabContent show={active === 1}>I am a ship</TabContent>
			
 
				+			<TabContent show={active === 2}>I am a train</TabContent>
			
 
				+			<TabContent show={active === 3}>I am a car</TabContent>
			
 
				+		</Tabs>
			
 
				+		<Divider />
			
 
				+
			
 
				+		<div class="font-bold px-4" bind:clientWidth={width}>Custom transition</div>
			
 
				+		<Tabs tab={{ labels }} let:active transition={false}>
			
 
				+			<div class="relative py-8">
			
 
				+				{#if active === 0}
			
 
				+					<div class="absolute" in:fly={{ y: -60, x: 0, duration: 1000 }}>I am a plane</div>
			
 
				+				{:else if active === 1}
			
 
				+					<div class="absolute" in:fly={{ y: -60, x: width / 4, duration: 1000 }}>I am a ship</div>
			
 
				+				{:else if active === 2}
			
 
				+					<div class="absolute" in:fly={{ y: -60, x: width / 2, duration: 1000 }}>I am a train</div>
			
 
				+				{:else if active === 3}
			
 
				+					<div class="absolute" in:fly={{ y: -60, x: (width / 4) * 3, duration: 1000 }}>I am a car</div>
			
 
				+				{/if}
			
 
				+			</div>
			
 
				+		</Tabs>
			
 
				+		<Divider />
			
 
				+
			
 
				+		<div class="font-bold px-4">monitor change event</div>
			
 
				+		<Tabs tab={{ labels }} on:change={tabsChangeFun}>
			
 
				+			<TabContent>I am a plane</TabContent>
			
 
				+			<TabContent>I am a ship</TabContent>
			
 
				+			<TabContent>I am a train</TabContent>
			
 
				+			<TabContent>I am a car</TabContent>
			
 
				+		</Tabs>
			
 
				+		<div class="mt-4">At present Tabs activated active：{changeActive}</div>
			
 
				+	</div>
			
 
				+	<Divider />
			
 
				+
			
 
				+	<div class="font-bold mt-8 text-xl">different Tab style</div>
			
 
				+	<div class="flex flex-col space-y-2 mt-4">
			
 
				+		<div class="font-bold px-4">Different fillet</div>
			
 
				+		<Tab {labels} radius="none" />
			
 
				+		<Tab {labels} />
			
 
				+		<Tab {labels} radius="xl" />
			
 
				+		<Tab {labels} radius="full" />
			
 
				+
			
 
				+		<div class="font-bold px-4">Match text with ICONS</div>
			
 
				+		<Tab {labels} />
			
 
				+		<Tab labels={labels1} />
			
 
				+		<Tab labels={labels2} />
			
 
				+
			
 
				+		<div class="font-bold px-4">Care edition</div>
			
 
				+		<Tab {labels} love />
			
 
				+
			
 
				+		<div class="font-bold px-4">Linear style</div>
			
 
				+		<Tab {labels} lineType />
			
 
				+		<Tab labels={labels2} lineType />
			
 
				+
			
 
				+		<div class="font-bold px-4">customize Tab Outer style</div>
			
 
				+		<Tab {labels} injClass="bg-gradient-to-b from-[#e3c6ff] to-[#b6aeff]" />
			
 
				+
			
 
				+		<div class="font-bold px-4">customize Tab style</div>
			
 
				+		<Tab {labels} tabInjClass="underline text-primary decoration-primary dark:text-dark dark:decoration-dark" />
			
 
				+
			
 
				+		<div class="font-bold px-4">Custom selection Tab style</div>
			
 
				+		<Tab {labels} activeTabInjClass="text-primary dark:text-dark !text-base transition-all" />
			
 
				+
			
 
				+		<div class="font-bold px-4">Customize the indicator style</div>
			
 
				+		<Tab {labels} activeInjClass="bg-gradient-to-b from-[#CE9FFC] to-[#7367F0]" activeTabInjClass="text-white" />
			
 
				+		<Tab {labels} lineType activeInjClass="bg-gradient-to-r from-[#CE9FFC] to-[#7367F0]" />
			
 
				+	</div>
			
 
				+	<Divider />
			
 
				+
			
 
				+	<div class="font-bold my-8 text-xl">Use alone Tab</div>
			
 
				+	<div class="my-4">
			
 
				+		<Tab {labels} {active} on:clicktab={clicktabFun} />
			
 
				+		<div class="mt-4">At present Tab clickable active：{active}</div>
			
 
				+	</div>
			
 
				+	<Divider />
			
 
				 </div>
			
--- a/demo/src/pages/timePicker/TimePickerDemo.svelte
+++ b/demo/src/pages/timePicker/TimePickerDemo.svelte
@@ -1,147 +1,147 @@
 
				 <!-- TimePickerDemo Demo -->
			
 
				 <script>
			
 
				-    import { Cell, TimePicker } from 'stdf';
			
 
				-
			
 
				-    let visible1 = false;
			
 
				-    let visible2 = false;
			
 
				-    let visible3 = false;
			
 
				-    let visible4 = false;
			
 
				-    let visible5 = false;
			
 
				-    let visible6 = false;
			
 
				-    let visible7 = false;
			
 
				-    let visible8 = false;
			
 
				-    let visible9 = false;
			
 
				-    let visible10 = false;
			
 
				-    let visible11 = false;
			
 
				-    let visible12 = false;
			
 
				-    let visible13 = false;
			
 
				-    let visible14 = false;
			
 
				-    let visible15 = false;
			
 
				-    let visible16 = false;
			
 
				-    let visible17 = false;
			
 
				-    let visible18 = false;
			
 
				-    let visible19 = false;
			
 
				-    let visible20 = false;
			
 
				-    let visible21 = false;
			
 
				-    let visible22 = false;
			
 
				-
			
 
				-    let defaultTimeStr = '';
			
 
				-    const getDefaultFunc = e => {
			
 
				-        defaultTimeStr = e.detail.times;
			
 
				-    };
			
 
				-    let customFormatStr = '';
			
 
				-    const customFormatFunc = e => {
			
 
				-        customFormatStr = e.detail.times;
			
 
				-    };
			
 
				-    let monthFirstStr = '';
			
 
				-    const monthFirstFunc = e => {
			
 
				-        monthFirstStr = e.detail.times;
			
 
				-    };
			
 
				-    let timeObj = {};
			
 
				-    $: timeObjStr = JSON.stringify(timeObj);
			
 
				-    const getTimeObjFunc = e => {
			
 
				-        timeObj = e.detail.times;
			
 
				-    };
			
 
				+	import { Cell, TimePicker } from 'stdf';
			
 
				+
			
 
				+	let visible1 = false;
			
 
				+	let visible2 = false;
			
 
				+	let visible3 = false;
			
 
				+	let visible4 = false;
			
 
				+	let visible5 = false;
			
 
				+	let visible6 = false;
			
 
				+	let visible7 = false;
			
 
				+	let visible8 = false;
			
 
				+	let visible9 = false;
			
 
				+	let visible10 = false;
			
 
				+	let visible11 = false;
			
 
				+	let visible12 = false;
			
 
				+	let visible13 = false;
			
 
				+	let visible14 = false;
			
 
				+	let visible15 = false;
			
 
				+	let visible16 = false;
			
 
				+	let visible17 = false;
			
 
				+	let visible18 = false;
			
 
				+	let visible19 = false;
			
 
				+	let visible20 = false;
			
 
				+	let visible21 = false;
			
 
				+	let visible22 = false;
			
 
				+
			
 
				+	let defaultTimeStr = '';
			
 
				+	const getDefaultFunc = e => {
			
 
				+		defaultTimeStr = e.detail.times;
			
 
				+	};
			
 
				+	let customFormatStr = '';
			
 
				+	const customFormatFunc = e => {
			
 
				+		customFormatStr = e.detail.times;
			
 
				+	};
			
 
				+	let monthFirstStr = '';
			
 
				+	const monthFirstFunc = e => {
			
 
				+		monthFirstStr = e.detail.times;
			
 
				+	};
			
 
				+	let timeObj = {};
			
 
				+	$: timeObjStr = JSON.stringify(timeObj);
			
 
				+	const getTimeObjFunc = e => {
			
 
				+		timeObj = e.detail.times;
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-4">
			
 
				-    <div class="px-4">
			
 
				-        {#if defaultTimeStr !== ''}
			
 
				-            当前选定了：
			
 
				-            <span class="mr-2 text-primary dark:text-dark">{defaultTimeStr}</span>
			
 
				-        {:else}
			
 
				-            <div>请选定时间</div>
			
 
				-        {/if}
			
 
				-    </div>
			
 
				-    <Cell title="基础用法" subTitle="默认选定当前时间，可选前后十年" on:click={() => (visible1 = true)} />
			
 
				-    <TimePicker bind:visible={visible1} on:confirm={getDefaultFunc} />
			
 
				-
			
 
				-    <Cell title="只用年月日" on:click={() => (visible2 = true)} />
			
 
				-    <TimePicker bind:visible={visible2} type="YMD" />
			
 
				-
			
 
				-    <Cell title="误传不支持的 type" subTitle="使用默认年月日时分秒" on:click={() => (visible7 = true)} />
			
 
				-    <TimePicker bind:visible={visible7} type="MD" />
			
 
				-
			
 
				-    <Cell title="只用时分秒" on:click={() => (visible3 = true)} />
			
 
				-    <TimePicker bind:visible={visible3} type="hms" />
			
 
				-
			
 
				-    <Cell title="只用年月日时" on:click={() => (visible4 = true)} />
			
 
				-    <TimePicker bind:visible={visible4} type="YMDh" />
			
 
				-
			
 
				-    <Cell title="不显示提示" on:click={() => (visible5 = true)} />
			
 
				-    <TimePicker bind:visible={visible5} showTips={false} />
			
 
				-
			
 
				-    <Cell title="不同列不同可见行" on:click={() => (visible6 = true)} />
			
 
				-    <TimePicker
			
 
				-        bind:visible={visible6}
			
 
				-        yearProps={{ showRow: 3 }}
			
 
				-        hourProps={{ showRow: 7 }}
			
 
				-        minuteProps={{ showRow: 7 }}
			
 
				-        secondProps={{ showRow: 7 }}
			
 
				-    />
			
 
				-
			
 
				-    <Cell title="不同列不同宽度" on:click={() => (visible8 = true)} />
			
 
				-    <TimePicker bind:visible={visible8} yearProps={{ flex: 3 }} dayProps={{ flex: 2 }} />
			
 
				-
			
 
				-    <Cell title="年数据右对齐，日数据左对齐" on:click={() => (visible22 = true)} />
			
 
				-    <TimePicker bind:visible={visible22} type="YMD" yearProps={{ align: 'right' }} dayProps={{ align: 'left' }} />
			
 
				-
			
 
				-    <Cell title="限定年份区间" on:click={() => (visible9 = true)} />
			
 
				-    <TimePicker bind:visible={visible9} yearRange={[2022, 2025]} />
			
 
				-
			
 
				-    <Cell title="限定月份区间" on:click={() => (visible10 = true)} />
			
 
				-    <TimePicker bind:visible={visible10} monthRange={[2, 5]} />
			
 
				-
			
 
				-    <Cell title="限定时分秒区间" on:click={() => (visible11 = true)} />
			
 
				-    <TimePicker bind:visible={visible11} hourRange={[2, 5]} minuteRange={[25, 45]} secondRange={[5, 10]} />
			
 
				-
			
 
				-    <Cell title="分钟步长为 5" on:click={() => (visible12 = true)} />
			
 
				-    <TimePicker bind:visible={visible12} minuteStep={5} />
			
 
				-
			
 
				-    <Cell title="秒步长为 10" on:click={() => (visible13 = true)} />
			
 
				-    <TimePicker bind:visible={visible13} secondStep={10} />
			
 
				-
			
 
				-    <div class="px-4">
			
 
				-        {#if customFormatStr !== ''}
			
 
				-            当前选定了：
			
 
				-            <span class="mr-2 text-primary dark:text-dark">{customFormatStr}</span>
			
 
				-        {:else}
			
 
				-            <div>请选定时间</div>
			
 
				-        {/if}
			
 
				-    </div>
			
 
				-    <Cell title="自定义返回时间格式" subTitle="输出格式为 Y年M月D日 h时m分s秒" on:click={() => (visible15 = true)} />
			
 
				-    <TimePicker bind:visible={visible15} outFormat="Y年M月D日 h时m分s秒" on:confirm={customFormatFunc} />
			
 
				-
			
 
				-    <div class="px-4">
			
 
				-        {#if monthFirstStr !== ''}
			
 
				-            当前选定了：
			
 
				-            <span class="mr-2 text-primary dark:text-dark">{monthFirstStr}</span>
			
 
				-        {:else}
			
 
				-            <div>请选定时间</div>
			
 
				-        {/if}
			
 
				-    </div>
			
 
				-    <Cell title="返回时间月份在前" on:click={() => (visible16 = true)} />
			
 
				-    <TimePicker bind:visible={visible16} type="YMD" outFormat="M/D/Y" on:confirm={monthFirstFunc} />
			
 
				-
			
 
				-    <div class="px-4 text-xs">
			
 
				-        当前选定了：<br />
			
 
				-        <span class="mr-2 text-primary dark:text-dark break-words">{timeObjStr}</span>
			
 
				-    </div>
			
 
				-    <Cell title="返回时间对象" on:click={() => (visible17 = true)} />
			
 
				-    <TimePicker bind:visible={visible17} outFormat="object" on:confirm={getTimeObjFunc} />
			
 
				-
			
 
				-    <Cell title="顶部来点圆角" on:click={() => (visible14 = true)} />
			
 
				-    <TimePicker bind:visible={visible14} popup={{ radius: 'xl' }} />
			
 
				-
			
 
				-    <Cell title="自定义标题" on:click={() => (visible18 = true)} />
			
 
				-    <TimePicker bind:visible={visible18} title="请选择时间" />
			
 
				-
			
 
				-    <Cell title="指定初始选定年份" on:click={() => (visible19 = true)} />
			
 
				-    <TimePicker bind:visible={visible19} initYear="2020" />
			
 
				-
			
 
				-    <Cell title="指定初始选定月份" on:click={() => (visible20 = true)} />
			
 
				-    <TimePicker bind:visible={visible20} initMonth="05" />
			
 
				-
			
 
				-    <Cell title="指定初始选定时分秒" on:click={() => (visible21 = true)} />
			
 
				-    <TimePicker bind:visible={visible21} initHour="05" initMinute="05" initSecond="05" />
			
 
				+	<div class="px-4">
			
 
				+		{#if defaultTimeStr !== ''}
			
 
				+			当前选定了：
			
 
				+			<span class="mr-2 text-primary dark:text-dark">{defaultTimeStr}</span>
			
 
				+		{:else}
			
 
				+			<div>请选定时间</div>
			
 
				+		{/if}
			
 
				+	</div>
			
 
				+	<Cell title="基础用法" subTitle="默认选定当前时间，可选前后十年" on:click={() => (visible1 = true)} />
			
 
				+	<TimePicker bind:visible={visible1} on:confirm={getDefaultFunc} />
			
 
				+
			
 
				+	<Cell title="只用年月日" on:click={() => (visible2 = true)} />
			
 
				+	<TimePicker bind:visible={visible2} type="YMD" />
			
 
				+
			
 
				+	<Cell title="误传不支持的 type" subTitle="使用默认年月日时分秒" on:click={() => (visible7 = true)} />
			
 
				+	<TimePicker bind:visible={visible7} type="MD" />
			
 
				+
			
 
				+	<Cell title="只用时分秒" on:click={() => (visible3 = true)} />
			
 
				+	<TimePicker bind:visible={visible3} type="hms" />
			
 
				+
			
 
				+	<Cell title="只用年月日时" on:click={() => (visible4 = true)} />
			
 
				+	<TimePicker bind:visible={visible4} type="YMDh" />
			
 
				+
			
 
				+	<Cell title="不显示提示" on:click={() => (visible5 = true)} />
			
 
				+	<TimePicker bind:visible={visible5} showTips={false} />
			
 
				+
			
 
				+	<Cell title="不同列不同可见行" on:click={() => (visible6 = true)} />
			
 
				+	<TimePicker
			
 
				+		bind:visible={visible6}
			
 
				+		yearProps={{ showRow: 3 }}
			
 
				+		hourProps={{ showRow: 7 }}
			
 
				+		minuteProps={{ showRow: 7 }}
			
 
				+		secondProps={{ showRow: 7 }}
			
 
				+	/>
			
 
				+
			
 
				+	<Cell title="不同列不同宽度" on:click={() => (visible8 = true)} />
			
 
				+	<TimePicker bind:visible={visible8} yearProps={{ flex: 3 }} dayProps={{ flex: 2 }} />
			
 
				+
			
 
				+	<Cell title="年数据右对齐，日数据左对齐" on:click={() => (visible22 = true)} />
			
 
				+	<TimePicker bind:visible={visible22} type="YMD" yearProps={{ align: 'right' }} dayProps={{ align: 'left' }} />
			
 
				+
			
 
				+	<Cell title="限定年份区间" on:click={() => (visible9 = true)} />
			
 
				+	<TimePicker bind:visible={visible9} yearRange={[2022, 2025]} />
			
 
				+
			
 
				+	<Cell title="限定月份区间" on:click={() => (visible10 = true)} />
			
 
				+	<TimePicker bind:visible={visible10} monthRange={[2, 5]} />
			
 
				+
			
 
				+	<Cell title="限定时分秒区间" on:click={() => (visible11 = true)} />
			
 
				+	<TimePicker bind:visible={visible11} hourRange={[2, 5]} minuteRange={[25, 45]} secondRange={[5, 10]} />
			
 
				+
			
 
				+	<Cell title="分钟步长为 5" on:click={() => (visible12 = true)} />
			
 
				+	<TimePicker bind:visible={visible12} minuteStep={5} />
			
 
				+
			
 
				+	<Cell title="秒步长为 10" on:click={() => (visible13 = true)} />
			
 
				+	<TimePicker bind:visible={visible13} secondStep={10} />
			
 
				+
			
 
				+	<div class="px-4">
			
 
				+		{#if customFormatStr !== ''}
			
 
				+			当前选定了：
			
 
				+			<span class="mr-2 text-primary dark:text-dark">{customFormatStr}</span>
			
 
				+		{:else}
			
 
				+			<div>请选定时间</div>
			
 
				+		{/if}
			
 
				+	</div>
			
 
				+	<Cell title="自定义返回时间格式" subTitle="输出格式为 Y年M月D日 h时m分s秒" on:click={() => (visible15 = true)} />
			
 
				+	<TimePicker bind:visible={visible15} outFormat="Y年M月D日 h时m分s秒" on:confirm={customFormatFunc} />
			
 
				+
			
 
				+	<div class="px-4">
			
 
				+		{#if monthFirstStr !== ''}
			
 
				+			当前选定了：
			
 
				+			<span class="mr-2 text-primary dark:text-dark">{monthFirstStr}</span>
			
 
				+		{:else}
			
 
				+			<div>请选定时间</div>
			
 
				+		{/if}
			
 
				+	</div>
			
 
				+	<Cell title="返回时间月份在前" on:click={() => (visible16 = true)} />
			
 
				+	<TimePicker bind:visible={visible16} type="YMD" outFormat="M/D/Y" on:confirm={monthFirstFunc} />
			
 
				+
			
 
				+	<div class="px-4 text-xs">
			
 
				+		当前选定了：<br />
			
 
				+		<span class="mr-2 text-primary dark:text-dark break-words">{timeObjStr}</span>
			
 
				+	</div>
			
 
				+	<Cell title="返回时间对象" on:click={() => (visible17 = true)} />
			
 
				+	<TimePicker bind:visible={visible17} outFormat="object" on:confirm={getTimeObjFunc} />
			
 
				+
			
 
				+	<Cell title="顶部来点圆角" on:click={() => (visible14 = true)} />
			
 
				+	<TimePicker bind:visible={visible14} popup={{ radius: 'xl' }} />
			
 
				+
			
 
				+	<Cell title="自定义标题" on:click={() => (visible18 = true)} />
			
 
				+	<TimePicker bind:visible={visible18} title="请选择时间" />
			
 
				+
			
 
				+	<Cell title="指定初始选定年份" on:click={() => (visible19 = true)} />
			
 
				+	<TimePicker bind:visible={visible19} initYear="2020" />
			
 
				+
			
 
				+	<Cell title="指定初始选定月份" on:click={() => (visible20 = true)} />
			
 
				+	<TimePicker bind:visible={visible20} initMonth="05" />
			
 
				+
			
 
				+	<Cell title="指定初始选定时分秒" on:click={() => (visible21 = true)} />
			
 
				+	<TimePicker bind:visible={visible21} initHour="05" initMinute="05" initSecond="05" />
			
 
				 </div>
			
--- a/demo/src/pages/timePicker/TimePickerDemo_en.svelte
+++ b/demo/src/pages/timePicker/TimePickerDemo_en.svelte
@@ -1,159 +1,155 @@
 
				 <!-- TimePickerDemo Demo -->
			
 
				 <script>
			
 
				-    import { Cell, TimePicker } from 'stdf';
			
 
				-
			
 
				-    let visible1 = false;
			
 
				-    let visible2 = false;
			
 
				-    let visible3 = false;
			
 
				-    let visible4 = false;
			
 
				-    let visible5 = false;
			
 
				-    let visible6 = false;
			
 
				-    let visible7 = false;
			
 
				-    let visible8 = false;
			
 
				-    let visible9 = false;
			
 
				-    let visible10 = false;
			
 
				-    let visible11 = false;
			
 
				-    let visible12 = false;
			
 
				-    let visible13 = false;
			
 
				-    let visible14 = false;
			
 
				-    let visible15 = false;
			
 
				-    let visible16 = false;
			
 
				-    let visible17 = false;
			
 
				-    let visible18 = false;
			
 
				-    let visible19 = false;
			
 
				-    let visible20 = false;
			
 
				-    let visible21 = false;
			
 
				-    let visible22 = false;
			
 
				-
			
 
				-    let defaultTimeStr = '';
			
 
				-    const getDefaultFunc = e => {
			
 
				-        defaultTimeStr = e.detail.times;
			
 
				-    };
			
 
				-    let customFormatStr = '';
			
 
				-    const customFormatFunc = e => {
			
 
				-        customFormatStr = e.detail.times;
			
 
				-    };
			
 
				-    let monthFirstStr = '';
			
 
				-    const monthFirstFunc = e => {
			
 
				-        monthFirstStr = e.detail.times;
			
 
				-    };
			
 
				-    let timeObj = {};
			
 
				-    $: timeObjStr = JSON.stringify(timeObj);
			
 
				-    const getTimeObjFunc = e => {
			
 
				-        timeObj = e.detail.times;
			
 
				-    };
			
 
				+	import { Cell, TimePicker } from 'stdf';
			
 
				+
			
 
				+	let visible1 = false;
			
 
				+	let visible2 = false;
			
 
				+	let visible3 = false;
			
 
				+	let visible4 = false;
			
 
				+	let visible5 = false;
			
 
				+	let visible6 = false;
			
 
				+	let visible7 = false;
			
 
				+	let visible8 = false;
			
 
				+	let visible9 = false;
			
 
				+	let visible10 = false;
			
 
				+	let visible11 = false;
			
 
				+	let visible12 = false;
			
 
				+	let visible13 = false;
			
 
				+	let visible14 = false;
			
 
				+	let visible15 = false;
			
 
				+	let visible16 = false;
			
 
				+	let visible17 = false;
			
 
				+	let visible18 = false;
			
 
				+	let visible19 = false;
			
 
				+	let visible20 = false;
			
 
				+	let visible21 = false;
			
 
				+	let visible22 = false;
			
 
				+
			
 
				+	let defaultTimeStr = '';
			
 
				+	const getDefaultFunc = e => {
			
 
				+		defaultTimeStr = e.detail.times;
			
 
				+	};
			
 
				+	let customFormatStr = '';
			
 
				+	const customFormatFunc = e => {
			
 
				+		customFormatStr = e.detail.times;
			
 
				+	};
			
 
				+	let monthFirstStr = '';
			
 
				+	const monthFirstFunc = e => {
			
 
				+		monthFirstStr = e.detail.times;
			
 
				+	};
			
 
				+	let timeObj = {};
			
 
				+	$: timeObjStr = JSON.stringify(timeObj);
			
 
				+	const getTimeObjFunc = e => {
			
 
				+		timeObj = e.detail.times;
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-4">
			
 
				-    <div class="px-4">
			
 
				-        {#if defaultTimeStr !== ''}
			
 
				-            Currently selected:
			
 
				-            <span class="mr-2 text-primary dark:text-dark">{defaultTimeStr}</span>
			
 
				-        {:else}
			
 
				-            <div>Please select the time</div>
			
 
				-        {/if}
			
 
				-    </div>
			
 
				-    <Cell
			
 
				-        title="Basic usage"
			
 
				-        subTitle="By default, the current time is selected. 10 years is optional"
			
 
				-        on:click={() => (visible1 = true)}
			
 
				-    />
			
 
				-    <TimePicker bind:visible={visible1} on:confirm={getDefaultFunc} />
			
 
				-
			
 
				-    <Cell title="Just the year, the month and the day" on:click={() => (visible2 = true)} />
			
 
				-    <TimePicker bind:visible={visible2} type="YMD" />
			
 
				-
			
 
				-    <Cell
			
 
				-        title="Misrepresentation unsupported type"
			
 
				-        subTitle="Use the default year, month, day, hour and second"
			
 
				-        on:click={() => (visible7 = true)}
			
 
				-    />
			
 
				-    <TimePicker bind:visible={visible7} type="MD" />
			
 
				-
			
 
				-    <Cell title="Just use the minutes and seconds" on:click={() => (visible3 = true)} />
			
 
				-    <TimePicker bind:visible={visible3} type="hms" />
			
 
				-
			
 
				-    <Cell title="Just the year, the month, the day" on:click={() => (visible4 = true)} />
			
 
				-    <TimePicker bind:visible={visible4} type="YMDh" />
			
 
				-
			
 
				-    <Cell title="Do not display prompt" on:click={() => (visible5 = true)} />
			
 
				-    <TimePicker bind:visible={visible5} showTips={false} />
			
 
				-
			
 
				-    <Cell title="Different columns have different visible rows" on:click={() => (visible6 = true)} />
			
 
				-    <TimePicker
			
 
				-        bind:visible={visible6}
			
 
				-        yearProps={{ showRow: 3 }}
			
 
				-        hourProps={{ showRow: 7 }}
			
 
				-        minuteProps={{ showRow: 7 }}
			
 
				-        secondProps={{ showRow: 7 }}
			
 
				-    />
			
 
				-
			
 
				-    <Cell title="Different columns have different widths" on:click={() => (visible8 = true)} />
			
 
				-    <TimePicker bind:visible={visible8} yearProps={{ flex: 3 }} dayProps={{ flex: 2 }} />
			
 
				-
			
 
				-    <Cell title="Align annual data to the right and daily data to the left" on:click={() => (visible22 = true)} />
			
 
				-    <TimePicker bind:visible={visible22} type="YMD" yearProps={{ align: 'right' }} dayProps={{ align: 'left' }} />
			
 
				-
			
 
				-    <Cell title="Limited year interval" on:click={() => (visible9 = true)} />
			
 
				-    <TimePicker bind:visible={visible9} yearRange={[2022, 2025]} />
			
 
				-
			
 
				-    <Cell title="Limited month range" on:click={() => (visible10 = true)} />
			
 
				-    <TimePicker bind:visible={visible10} monthRange={[2, 5]} />
			
 
				-
			
 
				-    <Cell title="Limited time interval" on:click={() => (visible11 = true)} />
			
 
				-    <TimePicker bind:visible={visible11} hourRange={[2, 5]} minuteRange={[25, 45]} secondRange={[5, 10]} />
			
 
				-
			
 
				-    <Cell title="The minute step length is 5" on:click={() => (visible12 = true)} />
			
 
				-    <TimePicker bind:visible={visible12} minuteStep={5} />
			
 
				-
			
 
				-    <Cell title="The second step is 10" on:click={() => (visible13 = true)} />
			
 
				-    <TimePicker bind:visible={visible13} secondStep={10} />
			
 
				-
			
 
				-    <div class="px-4">
			
 
				-        {#if customFormatStr !== ''}
			
 
				-            Currently selected:
			
 
				-            <span class="mr-2 text-primary dark:text-dark">{customFormatStr}</span>
			
 
				-        {:else}
			
 
				-            <div>Please select the time</div>
			
 
				-        {/if}
			
 
				-    </div>
			
 
				-    <Cell
			
 
				-        title="User-defined return time format"
			
 
				-        subTitle="The output format is Y year M month D day h hour m minute s second"
			
 
				-        on:click={() => (visible15 = true)}
			
 
				-    />
			
 
				-    <TimePicker bind:visible={visible15} outFormat="Y year, M month, D day, h hour, m minutes, s seconds" on:confirm={customFormatFunc} />
			
 
				-
			
 
				-    <div class="px-4">
			
 
				-        {#if monthFirstStr !== ''}
			
 
				-            Currently selected:
			
 
				-            <span class="mr-2 text-primary dark:text-dark">{monthFirstStr}</span>
			
 
				-        {:else}
			
 
				-            <div>Please select the time</div>
			
 
				-        {/if}
			
 
				-    </div>
			
 
				-    <Cell title="Return time month before" on:click={() => (visible16 = true)} />
			
 
				-    <TimePicker bind:visible={visible16} type="YMD" outFormat="M/D/Y" on:confirm={monthFirstFunc} />
			
 
				-
			
 
				-    <div class="px-4 text-xs">
			
 
				-        Currently selected:<br />
			
 
				-        <span class="mr-2 text-primary dark:text-dark break-words">{timeObjStr}</span>
			
 
				-    </div>
			
 
				-    <Cell title="Return time object" on:click={() => (visible17 = true)} />
			
 
				-    <TimePicker bind:visible={visible17} outFormat="object" on:confirm={getTimeObjFunc} />
			
 
				-
			
 
				-    <Cell title="I want some rounded corners on the top" on:click={() => (visible14 = true)} />
			
 
				-    <TimePicker bind:visible={visible14} popup={{ radius: 'xl' }} />
			
 
				-
			
 
				-    <Cell title="Custom title" on:click={() => (visible18 = true)} />
			
 
				-    <TimePicker bind:visible={visible18} title="Please select the time" />
			
 
				-
			
 
				-    <Cell title="Specifies the initial selection year" on:click={() => (visible19 = true)} />
			
 
				-    <TimePicker bind:visible={visible19} initYear="2020" />
			
 
				-
			
 
				-    <Cell title="Specifies the initial selected month" on:click={() => (visible20 = true)} />
			
 
				-    <TimePicker bind:visible={visible20} initMonth="05" />
			
 
				-
			
 
				-    <Cell title="Specifies the initial selection time" on:click={() => (visible21 = true)} />
			
 
				-    <TimePicker bind:visible={visible21} initHour="05" initMinute="05" initSecond="05" />
			
 
				+	<div class="px-4">
			
 
				+		{#if defaultTimeStr !== ''}
			
 
				+			Currently selected:
			
 
				+			<span class="mr-2 text-primary dark:text-dark">{defaultTimeStr}</span>
			
 
				+		{:else}
			
 
				+			<div>Please select the time</div>
			
 
				+		{/if}
			
 
				+	</div>
			
 
				+	<Cell title="Basic usage" subTitle="By default, the current time is selected. 10 years is optional" on:click={() => (visible1 = true)} />
			
 
				+	<TimePicker bind:visible={visible1} on:confirm={getDefaultFunc} />
			
 
				+
			
 
				+	<Cell title="Just the year, the month and the day" on:click={() => (visible2 = true)} />
			
 
				+	<TimePicker bind:visible={visible2} type="YMD" />
			
 
				+
			
 
				+	<Cell
			
 
				+		title="Misrepresentation unsupported type"
			
 
				+		subTitle="Use the default year, month, day, hour and second"
			
 
				+		on:click={() => (visible7 = true)}
			
 
				+	/>
			
 
				+	<TimePicker bind:visible={visible7} type="MD" />
			
 
				+
			
 
				+	<Cell title="Just use the minutes and seconds" on:click={() => (visible3 = true)} />
			
 
				+	<TimePicker bind:visible={visible3} type="hms" />
			
 
				+
			
 
				+	<Cell title="Just the year, the month, the day" on:click={() => (visible4 = true)} />
			
 
				+	<TimePicker bind:visible={visible4} type="YMDh" />
			
 
				+
			
 
				+	<Cell title="Do not display prompt" on:click={() => (visible5 = true)} />
			
 
				+	<TimePicker bind:visible={visible5} showTips={false} />
			
 
				+
			
 
				+	<Cell title="Different columns have different visible rows" on:click={() => (visible6 = true)} />
			
 
				+	<TimePicker
			
 
				+		bind:visible={visible6}
			
 
				+		yearProps={{ showRow: 3 }}
			
 
				+		hourProps={{ showRow: 7 }}
			
 
				+		minuteProps={{ showRow: 7 }}
			
 
				+		secondProps={{ showRow: 7 }}
			
 
				+	/>
			
 
				+
			
 
				+	<Cell title="Different columns have different widths" on:click={() => (visible8 = true)} />
			
 
				+	<TimePicker bind:visible={visible8} yearProps={{ flex: 3 }} dayProps={{ flex: 2 }} />
			
 
				+
			
 
				+	<Cell title="Align annual data to the right and daily data to the left" on:click={() => (visible22 = true)} />
			
 
				+	<TimePicker bind:visible={visible22} type="YMD" yearProps={{ align: 'right' }} dayProps={{ align: 'left' }} />
			
 
				+
			
 
				+	<Cell title="Limited year interval" on:click={() => (visible9 = true)} />
			
 
				+	<TimePicker bind:visible={visible9} yearRange={[2022, 2025]} />
			
 
				+
			
 
				+	<Cell title="Limited month range" on:click={() => (visible10 = true)} />
			
 
				+	<TimePicker bind:visible={visible10} monthRange={[2, 5]} />
			
 
				+
			
 
				+	<Cell title="Limited time interval" on:click={() => (visible11 = true)} />
			
 
				+	<TimePicker bind:visible={visible11} hourRange={[2, 5]} minuteRange={[25, 45]} secondRange={[5, 10]} />
			
 
				+
			
 
				+	<Cell title="The minute step length is 5" on:click={() => (visible12 = true)} />
			
 
				+	<TimePicker bind:visible={visible12} minuteStep={5} />
			
 
				+
			
 
				+	<Cell title="The second step is 10" on:click={() => (visible13 = true)} />
			
 
				+	<TimePicker bind:visible={visible13} secondStep={10} />
			
 
				+
			
 
				+	<div class="px-4">
			
 
				+		{#if customFormatStr !== ''}
			
 
				+			Currently selected:
			
 
				+			<span class="mr-2 text-primary dark:text-dark">{customFormatStr}</span>
			
 
				+		{:else}
			
 
				+			<div>Please select the time</div>
			
 
				+		{/if}
			
 
				+	</div>
			
 
				+	<Cell
			
 
				+		title="User-defined return time format"
			
 
				+		subTitle="The output format is Y year M month D day h hour m minute s second"
			
 
				+		on:click={() => (visible15 = true)}
			
 
				+	/>
			
 
				+	<TimePicker bind:visible={visible15} outFormat="Y year, M month, D day, h hour, m minutes, s seconds" on:confirm={customFormatFunc} />
			
 
				+
			
 
				+	<div class="px-4">
			
 
				+		{#if monthFirstStr !== ''}
			
 
				+			Currently selected:
			
 
				+			<span class="mr-2 text-primary dark:text-dark">{monthFirstStr}</span>
			
 
				+		{:else}
			
 
				+			<div>Please select the time</div>
			
 
				+		{/if}
			
 
				+	</div>
			
 
				+	<Cell title="Return time month before" on:click={() => (visible16 = true)} />
			
 
				+	<TimePicker bind:visible={visible16} type="YMD" outFormat="M/D/Y" on:confirm={monthFirstFunc} />
			
 
				+
			
 
				+	<div class="px-4 text-xs">
			
 
				+		Currently selected:<br />
			
 
				+		<span class="mr-2 text-primary dark:text-dark break-words">{timeObjStr}</span>
			
 
				+	</div>
			
 
				+	<Cell title="Return time object" on:click={() => (visible17 = true)} />
			
 
				+	<TimePicker bind:visible={visible17} outFormat="object" on:confirm={getTimeObjFunc} />
			
 
				+
			
 
				+	<Cell title="I want some rounded corners on the top" on:click={() => (visible14 = true)} />
			
 
				+	<TimePicker bind:visible={visible14} popup={{ radius: 'xl' }} />
			
 
				+
			
 
				+	<Cell title="Custom title" on:click={() => (visible18 = true)} />
			
 
				+	<TimePicker bind:visible={visible18} title="Please select the time" />
			
 
				+
			
 
				+	<Cell title="Specifies the initial selection year" on:click={() => (visible19 = true)} />
			
 
				+	<TimePicker bind:visible={visible19} initYear="2020" />
			
 
				+
			
 
				+	<Cell title="Specifies the initial selected month" on:click={() => (visible20 = true)} />
			
 
				+	<TimePicker bind:visible={visible20} initMonth="05" />
			
 
				+
			
 
				+	<Cell title="Specifies the initial selection time" on:click={() => (visible21 = true)} />
			
 
				+	<TimePicker bind:visible={visible21} initHour="05" initMinute="05" initSecond="05" />
			
 
				 </div>
			
--- a/demo/src/pages/toast/ToastDemo.svelte
+++ b/demo/src/pages/toast/ToastDemo.svelte
@@ -1,167 +1,167 @@
 
				 <!-- Toast Demo -->
			
 
				 <script>
			
 
				-    import { Toast, Cell, Button, Loading } from 'stdf';
			
 
				-
			
 
				-    let visible1 = false;
			
 
				-    let visible2 = false;
			
 
				-    let visible3 = false;
			
 
				-    let visible4 = false;
			
 
				-    let visible5 = false;
			
 
				-    let visible6 = false;
			
 
				-    let visible7 = false;
			
 
				-    let visible8 = false;
			
 
				-    let visible9 = false;
			
 
				-    let visible10 = false;
			
 
				-    let visible11 = false;
			
 
				-    let visible12 = false;
			
 
				-    let visible13 = false;
			
 
				-    let visible14 = false;
			
 
				-    let visible15 = false;
			
 
				-    let visible16 = false;
			
 
				-    let visible17 = false;
			
 
				-    let visible18 = false;
			
 
				-    let visible19 = false;
			
 
				-    let visible20 = false;
			
 
				-    let visible21 = false;
			
 
				-    let visible22 = false;
			
 
				-    let visible23 = false;
			
 
				-    let visible24 = false;
			
 
				-    let visible25 = false;
			
 
				-    let visible26 = false;
			
 
				-    let visible27 = false;
			
 
				-    let visible28 = false;
			
 
				-    let visible29 = false;
			
 
				-    let visible30 = false;
			
 
				-    let visible31 = false;
			
 
				-    let visible32 = false;
			
 
				-
			
 
				-    let time = 4;
			
 
				-    let timer = null;
			
 
				-    const useSlotFun = () => {
			
 
				-        visible25 = true;
			
 
				-        timer = setInterval(() => {
			
 
				-            time--;
			
 
				-            if (time <= 0) {
			
 
				-                clearInterval(timer);
			
 
				-                visible25 = false;
			
 
				-                time = 3;
			
 
				-            }
			
 
				-        }, 1000);
			
 
				-    };
			
 
				+	import { Toast, Cell, Button, Loading } from 'stdf';
			
 
				+
			
 
				+	let visible1 = false;
			
 
				+	let visible2 = false;
			
 
				+	let visible3 = false;
			
 
				+	let visible4 = false;
			
 
				+	let visible5 = false;
			
 
				+	let visible6 = false;
			
 
				+	let visible7 = false;
			
 
				+	let visible8 = false;
			
 
				+	let visible9 = false;
			
 
				+	let visible10 = false;
			
 
				+	let visible11 = false;
			
 
				+	let visible12 = false;
			
 
				+	let visible13 = false;
			
 
				+	let visible14 = false;
			
 
				+	let visible15 = false;
			
 
				+	let visible16 = false;
			
 
				+	let visible17 = false;
			
 
				+	let visible18 = false;
			
 
				+	let visible19 = false;
			
 
				+	let visible20 = false;
			
 
				+	let visible21 = false;
			
 
				+	let visible22 = false;
			
 
				+	let visible23 = false;
			
 
				+	let visible24 = false;
			
 
				+	let visible25 = false;
			
 
				+	let visible26 = false;
			
 
				+	let visible27 = false;
			
 
				+	let visible28 = false;
			
 
				+	let visible29 = false;
			
 
				+	let visible30 = false;
			
 
				+	let visible31 = false;
			
 
				+	let visible32 = false;
			
 
				+
			
 
				+	let time = 4;
			
 
				+	let timer = null;
			
 
				+	const useSlotFun = () => {
			
 
				+		visible25 = true;
			
 
				+		timer = setInterval(() => {
			
 
				+			time--;
			
 
				+			if (time <= 0) {
			
 
				+				clearInterval(timer);
			
 
				+				visible25 = false;
			
 
				+				time = 3;
			
 
				+			}
			
 
				+		}, 1000);
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-4">
			
 
				-    <Cell title="基础用法" on:click={() => (visible1 = true)} />
			
 
				-    <Toast bind:visible={visible1} message="轻提示" />
			
 
				+	<Cell title="基础用法" on:click={() => (visible1 = true)} />
			
 
				+	<Toast bind:visible={visible1} message="轻提示" />
			
 
				 
			
 
				-    <Cell title="长文本提示" on:click={() => (visible2 = true)} />
			
 
				-    <Toast bind:visible={visible2} message="当字符数过长时换行，一般不建议在这里显示太多的内容！" />
			
 
				+	<Cell title="长文本提示" on:click={() => (visible2 = true)} />
			
 
				+	<Toast bind:visible={visible2} message="当字符数过长时换行，一般不建议在这里显示太多的内容！" />
			
 
				 
			
 
				-    <Cell title="不阻止点击" on:click={() => (visible3 = true)} />
			
 
				-    <Toast bind:visible={visible3} clickable message="遮罩下层内容还可以点击" />
			
 
				+	<Cell title="不阻止点击" on:click={() => (visible3 = true)} />
			
 
				+	<Toast bind:visible={visible3} clickable message="遮罩下层内容还可以点击" />
			
 
				 
			
 
				-    <Cell title="固定显示时间" on:click={() => (visible4 = true)} />
			
 
				-    <Toast bind:visible={visible4} duration={6000} message="6 秒后自动关闭" />
			
 
				+	<Cell title="固定显示时间" on:click={() => (visible4 = true)} />
			
 
				+	<Toast bind:visible={visible4} duration={6000} message="6 秒后自动关闭" />
			
 
				 
			
 
				-    <Cell title="不自动关闭" on:click={() => (visible5 = true)} />
			
 
				-    <Toast bind:visible={visible5} duration={0} clickable message="此提示不会自动关闭，请点击按钮关闭" />
			
 
				+	<Cell title="不自动关闭" on:click={() => (visible5 = true)} />
			
 
				+	<Toast bind:visible={visible5} duration={0} clickable message="此提示不会自动关闭，请点击按钮关闭" />
			
 
				 
			
 
				-    <Cell title="成功提示" on:click={() => (visible6 = true)} />
			
 
				-    <Toast bind:visible={visible6} type="success" message="成功提示" />
			
 
				+	<Cell title="成功提示" on:click={() => (visible6 = true)} />
			
 
				+	<Toast bind:visible={visible6} type="success" message="成功提示" />
			
 
				 
			
 
				-    <Cell title="失败提示" on:click={() => (visible7 = true)} />
			
 
				-    <Toast bind:visible={visible7} type="error" message="失败提示" />
			
 
				+	<Cell title="失败提示" on:click={() => (visible7 = true)} />
			
 
				+	<Toast bind:visible={visible7} type="error" message="失败提示" />
			
 
				 
			
 
				-    <Cell title="警告提示" on:click={() => (visible8 = true)} />
			
 
				-    <Toast bind:visible={visible8} type="warning" message="警告提示" />
			
 
				+	<Cell title="警告提示" on:click={() => (visible8 = true)} />
			
 
				+	<Toast bind:visible={visible8} type="warning" message="警告提示" />
			
 
				 
			
 
				-    <Cell title="信息提示" on:click={() => (visible9 = true)} />
			
 
				-    <Toast bind:visible={visible9} type="info" message="信息提示" />
			
 
				+	<Cell title="信息提示" on:click={() => (visible9 = true)} />
			
 
				+	<Toast bind:visible={visible9} type="info" message="信息提示" />
			
 
				 
			
 
				-    <Cell title="加载提示" on:click={() => (visible30 = true)} />
			
 
				-    <Toast bind:visible={visible30} type="loading" message="加载中..." />
			
 
				+	<Cell title="加载提示" on:click={() => (visible30 = true)} />
			
 
				+	<Toast bind:visible={visible30} type="loading" message="加载中..." />
			
 
				 
			
 
				-    <Cell title="主题色加载提示" on:click={() => (visible31 = true)} />
			
 
				-    <Toast bind:visible={visible31} type="loading" loading={{ theme: true }} message="加载中..." />
			
 
				+	<Cell title="主题色加载提示" on:click={() => (visible31 = true)} />
			
 
				+	<Toast bind:visible={visible31} type="loading" loading={{ theme: true }} message="加载中..." />
			
 
				 
			
 
				-    <Cell title="1_3 号加载提示" on:click={() => (visible32 = true)} />
			
 
				-    <Toast bind:visible={visible32} type="loading" loading={{ type: '1_3' }} message="加载中..." />
			
 
				+	<Cell title="1_3 号加载提示" on:click={() => (visible32 = true)} />
			
 
				+	<Toast bind:visible={visible32} type="loading" loading={{ type: '1_3' }} message="加载中..." />
			
 
				 
			
 
				-    <Cell title="自定义类型" on:click={() => (visible27 = true)} />
			
 
				-    <Toast bind:visible={visible27} type="ri-thumb-up-fill" message="你真棒！" />
			
 
				+	<Cell title="自定义类型" on:click={() => (visible27 = true)} />
			
 
				+	<Toast bind:visible={visible27} type="ri-thumb-up-fill" message="你真棒！" />
			
 
				 
			
 
				-    <Cell title="遮罩不透明" on:click={() => (visible10 = true)} />
			
 
				-    <Toast bind:visible={visible10} mask={{ opacity: 0.3 }} message="遮罩透明度为 0.3" />
			
 
				+	<Cell title="遮罩不透明" on:click={() => (visible10 = true)} />
			
 
				+	<Toast bind:visible={visible10} mask={{ opacity: 0.3 }} message="遮罩透明度为 0.3" />
			
 
				 
			
 
				-    <Cell title="反色遮罩" on:click={() => (visible11 = true)} />
			
 
				-    <Toast bind:visible={visible11} mask={{ inverse: true, opacity: 0.5 }} message="反色遮罩" />
			
 
				+	<Cell title="反色遮罩" on:click={() => (visible11 = true)} />
			
 
				+	<Toast bind:visible={visible11} mask={{ inverse: true, opacity: 0.5 }} message="反色遮罩" />
			
 
				 
			
 
				-    <Cell title="遮罩模糊" on:click={() => (visible12 = true)} />
			
 
				-    <Toast bind:visible={visible12} mask={{ opacity: 0, backdropBlur: 'base' }} message="遮罩下层内容模糊" />
			
 
				+	<Cell title="遮罩模糊" on:click={() => (visible12 = true)} />
			
 
				+	<Toast bind:visible={visible12} mask={{ opacity: 0, backdropBlur: 'base' }} message="遮罩下层内容模糊" />
			
 
				 
			
 
				-    <Cell title="过渡较快" on:click={() => (visible13 = true)} />
			
 
				-    <Toast bind:visible={visible13} transitionParams={{ duration: 150 }} message="过渡时间为 150ms" />
			
 
				+	<Cell title="过渡较快" on:click={() => (visible13 = true)} />
			
 
				+	<Toast bind:visible={visible13} transitionParams={{ duration: 150 }} message="过渡时间为 150ms" />
			
 
				 
			
 
				-    <Cell title="过渡较慢" on:click={() => (visible14 = true)} />
			
 
				-    <Toast bind:visible={visible14} transitionParams={{ duration: 1000 }} message="过渡时间为 1s" />
			
 
				+	<Cell title="过渡较慢" on:click={() => (visible14 = true)} />
			
 
				+	<Toast bind:visible={visible14} transitionParams={{ duration: 1000 }} message="过渡时间为 1s" />
			
 
				 
			
 
				-    <Cell title="淡入" on:click={() => (visible15 = true)} />
			
 
				-    <Toast bind:visible={visible15} transitionType="fade" message="淡入呈现" />
			
 
				+	<Cell title="淡入" on:click={() => (visible15 = true)} />
			
 
				+	<Toast bind:visible={visible15} transitionType="fade" message="淡入呈现" />
			
 
				 
			
 
				-    <Cell title="向下移入" on:click={() => (visible16 = true)} />
			
 
				-    <Toast bind:visible={visible16} transitionType="fly" transitionParams={{ y: -150 }} message="向下移入呈现" />
			
 
				+	<Cell title="向下移入" on:click={() => (visible16 = true)} />
			
 
				+	<Toast bind:visible={visible16} transitionType="fly" transitionParams={{ y: -150 }} message="向下移入呈现" />
			
 
				 
			
 
				-    <Cell title="向右移入" on:click={() => (visible17 = true)} />
			
 
				-    <Toast bind:visible={visible17} transitionType="fly" transitionParams={{ x: -150 }} message="向右移入呈现" />
			
 
				+	<Cell title="向右移入" on:click={() => (visible17 = true)} />
			
 
				+	<Toast bind:visible={visible17} transitionType="fly" transitionParams={{ x: -150 }} message="向右移入呈现" />
			
 
				 
			
 
				-    <Cell title="展开" on:click={() => (visible18 = true)} />
			
 
				-    <Toast bind:visible={visible18} transitionType="slide" message="展开呈现" />
			
 
				+	<Cell title="展开" on:click={() => (visible18 = true)} />
			
 
				+	<Toast bind:visible={visible18} transitionType="slide" message="展开呈现" />
			
 
				 
			
 
				-    <Cell title="模糊" on:click={() => (visible19 = true)} />
			
 
				-    <Toast bind:visible={visible19} transitionType="blur" transitionParams={{ duration: 1000 }} message="模糊呈现" />
			
 
				+	<Cell title="模糊" on:click={() => (visible19 = true)} />
			
 
				+	<Toast bind:visible={visible19} transitionType="blur" transitionParams={{ duration: 1000 }} message="模糊呈现" />
			
 
				 
			
 
				-    <Cell title="无过渡" on:click={() => (visible20 = true)} />
			
 
				-    <Toast bind:visible={visible20} transitionType="none" message="无过渡直接呈现" />
			
 
				+	<Cell title="无过渡" on:click={() => (visible20 = true)} />
			
 
				+	<Toast bind:visible={visible20} transitionType="none" message="无过渡直接呈现" />
			
 
				 
			
 
				-    <Cell title="退出缩放动画" on:click={() => (visible28 = true)} />
			
 
				-    <Toast bind:visible={visible28} outDuration={300} message="退出时缩放动画时间为 300ms" />
			
 
				+	<Cell title="退出缩放动画" on:click={() => (visible28 = true)} />
			
 
				+	<Toast bind:visible={visible28} outDuration={300} message="退出时缩放动画时间为 300ms" />
			
 
				 
			
 
				-    <Cell title="退出移出动画" on:click={() => (visible29 = true)} />
			
 
				-    <Toast
			
 
				-        bind:visible={visible29}
			
 
				-        outDuration={300}
			
 
				-        transitionType="fly"
			
 
				-        transitionParams={{ y: -150 }}
			
 
				-        message="退出时移出动画时间为 300ms"
			
 
				-    />
			
 
				+	<Cell title="退出移出动画" on:click={() => (visible29 = true)} />
			
 
				+	<Toast
			
 
				+		bind:visible={visible29}
			
 
				+		outDuration={300}
			
 
				+		transitionType="fly"
			
 
				+		transitionParams={{ y: -150 }}
			
 
				+		message="退出时移出动画时间为 300ms"
			
 
				+	/>
			
 
				 
			
 
				-    <Cell title="延时出现" on:click={() => (visible21 = true)} />
			
 
				-    <Toast bind:visible={visible21} transitionParams={{ delay: 1000 }} message="点击 1s 之后呈现" />
			
 
				+	<Cell title="延时出现" on:click={() => (visible21 = true)} />
			
 
				+	<Toast bind:visible={visible21} transitionParams={{ delay: 1000 }} message="点击 1s 之后呈现" />
			
 
				 
			
 
				-    <Cell title="顶部" on:click={() => (visible22 = true)} />
			
 
				-    <Toast bind:visible={visible22} position="top" message="提示位于顶部" />
			
 
				+	<Cell title="顶部" on:click={() => (visible22 = true)} />
			
 
				+	<Toast bind:visible={visible22} position="top" message="提示位于顶部" />
			
 
				 
			
 
				-    <Cell title="底部" on:click={() => (visible23 = true)} />
			
 
				-    <Toast bind:visible={visible23} position="bottom" message="提示位于底部" />
			
 
				+	<Cell title="底部" on:click={() => (visible23 = true)} />
			
 
				+	<Toast bind:visible={visible23} position="bottom" message="提示位于底部" />
			
 
				 
			
 
				-    <Cell title="顶部增加距离" on:click={() => (visible24 = true)} />
			
 
				-    <Toast bind:visible={visible24} position="top" py="40" message="提示位于顶部且增加了距离" />
			
 
				+	<Cell title="顶部增加距离" on:click={() => (visible24 = true)} />
			
 
				+	<Toast bind:visible={visible24} position="top" py="40" message="提示位于顶部且增加了距离" />
			
 
				 
			
 
				-    <Cell title="使用 Slot" on:click={useSlotFun} />
			
 
				-    <Toast bind:visible={visible25} useSlot duration={0}>
			
 
				-        <div class="flex flex-col space-y-4">
			
 
				-            <div>自定义提示内容</div>
			
 
				-            <Loading inverse />
			
 
				-            <div>{time} 秒后关闭</div>
			
 
				-        </div>
			
 
				-    </Toast>
			
 
				+	<Cell title="使用 Slot" on:click={useSlotFun} />
			
 
				+	<Toast bind:visible={visible25} useSlot duration={0}>
			
 
				+		<div class="flex flex-col space-y-4">
			
 
				+			<div>自定义提示内容</div>
			
 
				+			<Loading inverse />
			
 
				+			<div>{time} 秒后关闭</div>
			
 
				+		</div>
			
 
				+	</Toast>
			
 
				 
			
 
				-    <Cell title="不同圆角风格" on:click={() => (visible26 = true)} />
			
 
				-    <Toast bind:visible={visible26} radius="xl" message="加大了圆角" />
			
 
				+	<Cell title="不同圆角风格" on:click={() => (visible26 = true)} />
			
 
				+	<Toast bind:visible={visible26} radius="xl" message="加大了圆角" />
			
 
				 </div>
			
 
				 
			
 
				 <div class="flex sticky bottom-0 z-10 bg-white/60 dark:bg-gray1/60 backdrop-blur">
			
 
				-    <div class="flex-1">
			
 
				-        <Button fill="lineTheme" on:click={() => (visible5 = false)}>手动关闭</Button>
			
 
				-    </div>
			
 
				+	<div class="flex-1">
			
 
				+		<Button fill="lineTheme" on:click={() => (visible5 = false)}>手动关闭</Button>
			
 
				+	</div>
			
 
				 </div>
			
--- a/demo/src/pages/toast/ToastDemo_en.svelte
+++ b/demo/src/pages/toast/ToastDemo_en.svelte
@@ -1,167 +1,175 @@
 
				 <!-- Toast Demo -->
			
 
				 <script>
			
 
				-    import { Toast, Cell, Button, Loading } from 'stdf';
			
 
				-
			
 
				-    let visible1 = false;
			
 
				-    let visible2 = false;
			
 
				-    let visible3 = false;
			
 
				-    let visible4 = false;
			
 
				-    let visible5 = false;
			
 
				-    let visible6 = false;
			
 
				-    let visible7 = false;
			
 
				-    let visible8 = false;
			
 
				-    let visible9 = false;
			
 
				-    let visible10 = false;
			
 
				-    let visible11 = false;
			
 
				-    let visible12 = false;
			
 
				-    let visible13 = false;
			
 
				-    let visible14 = false;
			
 
				-    let visible15 = false;
			
 
				-    let visible16 = false;
			
 
				-    let visible17 = false;
			
 
				-    let visible18 = false;
			
 
				-    let visible19 = false;
			
 
				-    let visible20 = false;
			
 
				-    let visible21 = false;
			
 
				-    let visible22 = false;
			
 
				-    let visible23 = false;
			
 
				-    let visible24 = false;
			
 
				-    let visible25 = false;
			
 
				-    let visible26 = false;
			
 
				-    let visible27 = false;
			
 
				-    let visible28 = false;
			
 
				-    let visible29 = false;
			
 
				-    let visible30 = false;
			
 
				-    let visible31 = false;
			
 
				-    let visible32 = false;
			
 
				-
			
 
				-    let time = 4;
			
 
				-    let timer = null;
			
 
				-    const useSlotFun = () => {
			
 
				-        visible25 = true;
			
 
				-        timer = setInterval(() => {
			
 
				-            time--;
			
 
				-            if (time <= 0) {
			
 
				-                clearInterval(timer);
			
 
				-                visible25 = false;
			
 
				-                time = 3;
			
 
				-            }
			
 
				-        }, 1000);
			
 
				-    };
			
 
				+	import { Toast, Cell, Button, Loading } from 'stdf';
			
 
				+
			
 
				+	let visible1 = false;
			
 
				+	let visible2 = false;
			
 
				+	let visible3 = false;
			
 
				+	let visible4 = false;
			
 
				+	let visible5 = false;
			
 
				+	let visible6 = false;
			
 
				+	let visible7 = false;
			
 
				+	let visible8 = false;
			
 
				+	let visible9 = false;
			
 
				+	let visible10 = false;
			
 
				+	let visible11 = false;
			
 
				+	let visible12 = false;
			
 
				+	let visible13 = false;
			
 
				+	let visible14 = false;
			
 
				+	let visible15 = false;
			
 
				+	let visible16 = false;
			
 
				+	let visible17 = false;
			
 
				+	let visible18 = false;
			
 
				+	let visible19 = false;
			
 
				+	let visible20 = false;
			
 
				+	let visible21 = false;
			
 
				+	let visible22 = false;
			
 
				+	let visible23 = false;
			
 
				+	let visible24 = false;
			
 
				+	let visible25 = false;
			
 
				+	let visible26 = false;
			
 
				+	let visible27 = false;
			
 
				+	let visible28 = false;
			
 
				+	let visible29 = false;
			
 
				+	let visible30 = false;
			
 
				+	let visible31 = false;
			
 
				+	let visible32 = false;
			
 
				+
			
 
				+	let time = 4;
			
 
				+	let timer = null;
			
 
				+	const useSlotFun = () => {
			
 
				+		visible25 = true;
			
 
				+		timer = setInterval(() => {
			
 
				+			time--;
			
 
				+			if (time <= 0) {
			
 
				+				clearInterval(timer);
			
 
				+				visible25 = false;
			
 
				+				time = 3;
			
 
				+			}
			
 
				+		}, 1000);
			
 
				+	};
			
 
				 </script>
			
 
				 
			
 
				 <div class="py-4">
			
 
				-    <Cell title="Basic usage" on:click={() => (visible1 = true)} />
			
 
				-    <Toast bind:visible={visible1} message="Light hint" />
			
 
				+	<Cell title="Basic usage" on:click={() => (visible1 = true)} />
			
 
				+	<Toast bind:visible={visible1} message="Light hint" />
			
 
				 
			
 
				-    <Cell title="Long text prompt" on:click={() => (visible2 = true)} />
			
 
				-    <Toast bind:visible={visible2} message="When the character count is too long, it is generally not recommended to display too much content here!" />
			
 
				+	<Cell title="Long text prompt" on:click={() => (visible2 = true)} />
			
 
				+	<Toast
			
 
				+		bind:visible={visible2}
			
 
				+		message="When the character count is too long, it is generally not recommended to display too much content here!"
			
 
				+	/>
			
 
				 
			
 
				-    <Cell title="Do not block clicks" on:click={() => (visible3 = true)} />
			
 
				-    <Toast bind:visible={visible3} clickable message="The content below the mask can also be clicked" />
			
 
				+	<Cell title="Do not block clicks" on:click={() => (visible3 = true)} />
			
 
				+	<Toast bind:visible={visible3} clickable message="The content below the mask can also be clicked" />
			
 
				 
			
 
				-    <Cell title="Fixed display time" on:click={() => (visible4 = true)} />
			
 
				-    <Toast bind:visible={visible4} duration={6000} message="It turns off automatically after 6 seconds" />
			
 
				+	<Cell title="Fixed display time" on:click={() => (visible4 = true)} />
			
 
				+	<Toast bind:visible={visible4} duration={6000} message="It turns off automatically after 6 seconds" />
			
 
				 
			
 
				-    <Cell title="Non-automatic closing" on:click={() => (visible5 = true)} />
			
 
				-    <Toast bind:visible={visible5} duration={0} clickable message="This prompt will not automatically close, please click the button to close" />
			
 
				+	<Cell title="Non-automatic closing" on:click={() => (visible5 = true)} />
			
 
				+	<Toast
			
 
				+		bind:visible={visible5}
			
 
				+		duration={0}
			
 
				+		clickable
			
 
				+		message="This prompt will not automatically close, please click the button to close"
			
 
				+	/>
			
 
				 
			
 
				-    <Cell title="Success message" on:click={() => (visible6 = true)} />
			
 
				-    <Toast bind:visible={visible6} type="success" message="Success message" />
			
 
				+	<Cell title="Success message" on:click={() => (visible6 = true)} />
			
 
				+	<Toast bind:visible={visible6} type="success" message="Success message" />
			
 
				 
			
 
				-    <Cell title="Failure prompt" on:click={() => (visible7 = true)} />
			
 
				-    <Toast bind:visible={visible7} type="error" message="Failure prompt" />
			
 
				+	<Cell title="Failure prompt" on:click={() => (visible7 = true)} />
			
 
				+	<Toast bind:visible={visible7} type="error" message="Failure prompt" />
			
 
				 
			
 
				-    <Cell title="Warning prompt" on:click={() => (visible8 = true)} />
			
 
				-    <Toast bind:visible={visible8} type="warning" message="Warning prompt" />
			
 
				+	<Cell title="Warning prompt" on:click={() => (visible8 = true)} />
			
 
				+	<Toast bind:visible={visible8} type="warning" message="Warning prompt" />
			
 
				 
			
 
				-    <Cell title="Information prompt" on:click={() => (visible9 = true)} />
			
 
				-    <Toast bind:visible={visible9} type="info" message="Information prompt" />
			
 
				+	<Cell title="Information prompt" on:click={() => (visible9 = true)} />
			
 
				+	<Toast bind:visible={visible9} type="info" message="Information prompt" />
			
 
				 
			
 
				-    <Cell title="Load prompt" on:click={() => (visible30 = true)} />
			
 
				-    <Toast bind:visible={visible30} type="loading" message="Under load..." />
			
 
				+	<Cell title="Load prompt" on:click={() => (visible30 = true)} />
			
 
				+	<Toast bind:visible={visible30} type="loading" message="Under load..." />
			
 
				 
			
 
				-    <Cell title="Theme color loading prompt" on:click={() => (visible31 = true)} />
			
 
				-    <Toast bind:visible={visible31} type="loading" loading={{ theme: true }} message="Under load..." />
			
 
				+	<Cell title="Theme color loading prompt" on:click={() => (visible31 = true)} />
			
 
				+	<Toast bind:visible={visible31} type="loading" loading={{ theme: true }} message="Under load..." />
			
 
				 
			
 
				-    <Cell title="Loading prompt for # 1_3" on:click={() => (visible32 = true)} />
			
 
				-    <Toast bind:visible={visible32} type="loading" loading={{ type: '1_3' }} message="Under load..." />
			
 
				+	<Cell title="Loading prompt for # 1_3" on:click={() => (visible32 = true)} />
			
 
				+	<Toast bind:visible={visible32} type="loading" loading={{ type: '1_3' }} message="Under load..." />
			
 
				 
			
 
				-    <Cell title="Custom type" on:click={() => (visible27 = true)} />
			
 
				-    <Toast bind:visible={visible27} type="ri-thumb-up-fill" message="You are so good!" />
			
 
				+	<Cell title="Custom type" on:click={() => (visible27 = true)} />
			
 
				+	<Toast bind:visible={visible27} type="ri-thumb-up-fill" message="You are so good!" />
			
 
				 
			
 
				-    <Cell title="The mask is opaque" on:click={() => (visible10 = true)} />
			
 
				-    <Toast bind:visible={visible10} mask={{ opacity: 0.3 }} message="Mask transparency is 0.3" />
			
 
				+	<Cell title="The mask is opaque" on:click={() => (visible10 = true)} />
			
 
				+	<Toast bind:visible={visible10} mask={{ opacity: 0.3 }} message="Mask transparency is 0.3" />
			
 
				 
			
 
				-    <Cell title="Reverse color mask" on:click={() => (visible11 = true)} />
			
 
				-    <Toast bind:visible={visible11} mask={{ inverse: true, opacity: 0.5 }} message="Reverse color mask" />
			
 
				+	<Cell title="Reverse color mask" on:click={() => (visible11 = true)} />
			
 
				+	<Toast bind:visible={visible11} mask={{ inverse: true, opacity: 0.5 }} message="Reverse color mask" />
			
 
				 
			
 
				-    <Cell title="Mask blur" on:click={() => (visible12 = true)} />
			
 
				-    <Toast bind:visible={visible12} mask={{ opacity: 0, backdropBlur: 'base' }} message="The content below the mask is blurry" />
			
 
				+	<Cell title="Mask blur" on:click={() => (visible12 = true)} />
			
 
				+	<Toast bind:visible={visible12} mask={{ opacity: 0, backdropBlur: 'base' }} message="The content below the mask is blurry" />
			
 
				 
			
 
				-    <Cell title="Faster transition" on:click={() => (visible13 = true)} />
			
 
				-    <Toast bind:visible={visible13} transitionParams={{ duration: 150 }} message="The transition time is 150ms" />
			
 
				+	<Cell title="Faster transition" on:click={() => (visible13 = true)} />
			
 
				+	<Toast bind:visible={visible13} transitionParams={{ duration: 150 }} message="The transition time is 150ms" />
			
 
				 
			
 
				-    <Cell title="Slow transition" on:click={() => (visible14 = true)} />
			
 
				-    <Toast bind:visible={visible14} transitionParams={{ duration: 1000 }} message="The transition time is 1s" />
			
 
				+	<Cell title="Slow transition" on:click={() => (visible14 = true)} />
			
 
				+	<Toast bind:visible={visible14} transitionParams={{ duration: 1000 }} message="The transition time is 1s" />
			
 
				 
			
 
				-    <Cell title="Fade in" on:click={() => (visible15 = true)} />
			
 
				-    <Toast bind:visible={visible15} transitionType="fade" message="Fade in presentation" />
			
 
				+	<Cell title="Fade in" on:click={() => (visible15 = true)} />
			
 
				+	<Toast bind:visible={visible15} transitionType="fade" message="Fade in presentation" />
			
 
				 
			
 
				-    <Cell title="Move down" on:click={() => (visible16 = true)} />
			
 
				-    <Toast bind:visible={visible16} transitionType="fly" transitionParams={{ y: -150 }} message="Move down into presentation" />
			
 
				+	<Cell title="Move down" on:click={() => (visible16 = true)} />
			
 
				+	<Toast bind:visible={visible16} transitionType="fly" transitionParams={{ y: -150 }} message="Move down into presentation" />
			
 
				 
			
 
				-    <Cell title="Move in to the right" on:click={() => (visible17 = true)} />
			
 
				-    <Toast bind:visible={visible17} transitionType="fly" transitionParams={{ x: -150 }} message="Move right into presentation" />
			
 
				+	<Cell title="Move in to the right" on:click={() => (visible17 = true)} />
			
 
				+	<Toast bind:visible={visible17} transitionType="fly" transitionParams={{ x: -150 }} message="Move right into presentation" />
			
 
				 
			
 
				-    <Cell title="expansion" on:click={() => (visible18 = true)} />
			
 
				-    <Toast bind:visible={visible18} transitionType="slide" message="Unfold and present" />
			
 
				+	<Cell title="expansion" on:click={() => (visible18 = true)} />
			
 
				+	<Toast bind:visible={visible18} transitionType="slide" message="Unfold and present" />
			
 
				 
			
 
				-    <Cell title="blur" on:click={() => (visible19 = true)} />
			
 
				-    <Toast bind:visible={visible19} transitionType="blur" transitionParams={{ duration: 1000 }} message="Fuzzy rendering" />
			
 
				+	<Cell title="blur" on:click={() => (visible19 = true)} />
			
 
				+	<Toast bind:visible={visible19} transitionType="blur" transitionParams={{ duration: 1000 }} message="Fuzzy rendering" />
			
 
				 
			
 
				-    <Cell title="No transition" on:click={() => (visible20 = true)} />
			
 
				-    <Toast bind:visible={visible20} transitionType="none" message="Direct presentation without transition" />
			
 
				+	<Cell title="No transition" on:click={() => (visible20 = true)} />
			
 
				+	<Toast bind:visible={visible20} transitionType="none" message="Direct presentation without transition" />
			
 
				 
			
 
				-    <Cell title="Exit zoom animation" on:click={() => (visible28 = true)} />
			
 
				-    <Toast bind:visible={visible28} outDuration={300} message="The zoom animation time on exit is 300ms" />
			
 
				+	<Cell title="Exit zoom animation" on:click={() => (visible28 = true)} />
			
 
				+	<Toast bind:visible={visible28} outDuration={300} message="The zoom animation time on exit is 300ms" />
			
 
				 
			
 
				-    <Cell title="Exit Move out animation" on:click={() => (visible29 = true)} />
			
 
				-    <Toast
			
 
				-        bind:visible={visible29}
			
 
				-        outDuration={300}
			
 
				-        transitionType="fly"
			
 
				-        transitionParams={{ y: -150 }}
			
 
				-        message="When exiting, move out animation time is 300ms"
			
 
				-    />
			
 
				+	<Cell title="Exit Move out animation" on:click={() => (visible29 = true)} />
			
 
				+	<Toast
			
 
				+		bind:visible={visible29}
			
 
				+		outDuration={300}
			
 
				+		transitionType="fly"
			
 
				+		transitionParams={{ y: -150 }}
			
 
				+		message="When exiting, move out animation time is 300ms"
			
 
				+	/>
			
 
				 
			
 
				-    <Cell title="Delayed occurrence" on:click={() => (visible21 = true)} />
			
 
				-    <Toast bind:visible={visible21} transitionParams={{ delay: 1000 }} message="Click for 1 second and then display" />
			
 
				+	<Cell title="Delayed occurrence" on:click={() => (visible21 = true)} />
			
 
				+	<Toast bind:visible={visible21} transitionParams={{ delay: 1000 }} message="Click for 1 second and then display" />
			
 
				 
			
 
				-    <Cell title="top" on:click={() => (visible22 = true)} />
			
 
				-    <Toast bind:visible={visible22} position="top" message="Tips at the top" />
			
 
				+	<Cell title="top" on:click={() => (visible22 = true)} />
			
 
				+	<Toast bind:visible={visible22} position="top" message="Tips at the top" />
			
 
				 
			
 
				-    <Cell title="bottom" on:click={() => (visible23 = true)} />
			
 
				-    <Toast bind:visible={visible23} position="bottom" message="Tips at the bottom" />
			
 
				+	<Cell title="bottom" on:click={() => (visible23 = true)} />
			
 
				+	<Toast bind:visible={visible23} position="bottom" message="Tips at the bottom" />
			
 
				 
			
 
				-    <Cell title="Top increase distance" on:click={() => (visible24 = true)} />
			
 
				-    <Toast bind:visible={visible24} position="top" py="40" message="The tip is at the top and the distance is increased" />
			
 
				+	<Cell title="Top increase distance" on:click={() => (visible24 = true)} />
			
 
				+	<Toast bind:visible={visible24} position="top" py="40" message="The tip is at the top and the distance is increased" />
			
 
				 
			
 
				-    <Cell title="use Slot" on:click={useSlotFun} />
			
 
				-    <Toast bind:visible={visible25} useSlot duration={0}>
			
 
				-        <div class="flex flex-col space-y-4">
			
 
				-            <div>Customize the prompt content</div>
			
 
				-            <Loading inverse />
			
 
				-            <div>Close in {time} seconds</div>
			
 
				-        </div>
			
 
				-    </Toast>
			
 
				+	<Cell title="use Slot" on:click={useSlotFun} />
			
 
				+	<Toast bind:visible={visible25} useSlot duration={0}>
			
 
				+		<div class="flex flex-col space-y-4">
			
 
				+			<div>Customize the prompt content</div>
			
 
				+			<Loading inverse />
			
 
				+			<div>Close in {time} seconds</div>
			
 
				+		</div>
			
 
				+	</Toast>
			
 
				 
			
 
				-    <Cell title="Different styles of rounded corners" on:click={() => (visible26 = true)} />
			
 
				-    <Toast bind:visible={visible26} radius="xl" message="Rounded corners were added" />
			
 
				+	<Cell title="Different styles of rounded corners" on:click={() => (visible26 = true)} />
			
 
				+	<Toast bind:visible={visible26} radius="xl" message="Rounded corners were added" />
			
 
				 </div>
			
 
				 
			
 
				 <div class="flex sticky bottom-0 z-10 bg-white/60 dark:bg-gray1/60 backdrop-blur">
			
 
				-    <div class="flex-1">
			
 
				-        <Button fill="lineTheme" on:click={() => (visible5 = false)}>Manual shutdown</Button>
			
 
				-    </div>
			
 
				+	<div class="flex-1">
			
 
				+		<Button fill="lineTheme" on:click={() => (visible5 = false)}>Manual shutdown</Button>
			
 
				+	</div>
			
 
				 </div>
			
--- a/demo/src/pages/z/Z
+++ b/demo/src/pages/z/Z
@@ -1,52 +0,0 @@
 
				-<script>
			
 
				-    import { Swiper, Cell, Steps } from 'stdf';
			
 
				-
			
 
				-    const imgs = [
			
 
				-        { type: 'img', url: './assets/images/wall_1.jpg' },
			
 
				-        { type: 'img', url: './assets/images/wall_2.jpg' },
			
 
				-        { type: 'img', url: './assets/images/wall_3.jpg' },
			
 
				-        { type: 'img', url: './assets/images/wall_4.jpg' },
			
 
				-    ];
			
 
				-
			
 
				-    const steps = [
			
 
				-        { step: { title: '起床', desc: '起床搬砖了！' } },
			
 
				-        { step: { title: '吃饭', desc: '吃吃吃，肥死你。' } },
			
 
				-        { step: { title: '喝水', desc: '慢慢走路，多多喝水。' } },
			
 
				-        { step: { title: '打豆豆', desc: '打豆豆很爽。' } },
			
 
				-        { step: { title: '睡觉', desc: '吃太饱，睡不着。' } },
			
 
				-    ];
			
 
				-    const steps_en = [
			
 
				-        { step: { title: 'Get up', desc: 'Get up and move bricks!' } },
			
 
				-        { step: { title: 'Eat', desc: 'Eat, eat, eat, eat, fat you.' } },
			
 
				-        { step: { title: 'Drink', desc: 'Walk slowly and drink lots of water.' } },
			
 
				-        { step: { title: 'Beat beans', desc: "Pplay peas it's cool." } },
			
 
				-        { step: { title: 'sleep', desc: 'Too full to sleep.' } },
			
 
				-    ];
			
 
				-</script>
			
 
				-
			
 
				-<div class="pt-4 pb-2 text-center text-xl font-bold">Swiper</div>
			
 
				-
			
 
				-<Swiper
			
 
				-    data={imgs}
			
 
				-    interval={100}
			
 
				-    px="6"
			
 
				-    py="6"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    radius="2xl"
			
 
				-    indicateColor="bg-black/5 dark:bg-white/10"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    indicateStyle="longLine"
			
 
				-/>
			
 
				-
			
 
				-
			
 
				-<div class="pt-4 pb-2 text-center text-xl font-bold">Cell</div>
			
 
				-
			
 
				-<!-- <Cell title="开关全圆角" right={{ type: 'switch', switch: { radius: 'full' } }}/>  -->
			
 
				-<Cell title="Witch full raduis Switch" right={{ type: 'switch', switch: { radius: 'full' } }} />
			
 
				-
			
 
				-    <!-- right={{ type: 'switch', switch: { radius: 'full' } }}  -->
			
 
				-
			
 
				-<!-- <div class="pt-4 pb-2 text-center text-xl font-bold">Steps</div> -->
			
 
				-
			
 
				-<!-- <Steps {steps} current={3} vertical /> -->
			
 
				-<!-- <Steps steps={steps_en} current={3} vertical /> -->
			
--- a/demo/src/pages/z/Z.svelte
+++ b/demo/src/pages/z/Z.svelte
@@ -1,36 +0,0 @@
 
				-<script>
			
 
				-    import { Swiper, Cell, Button, Progress, Divider } from 'stdf';
			
 
				-
			
 
				-    const imgs = [
			
 
				-        { type: 'img', url: './assets/images/wall_1.jpg' },
			
 
				-        { type: 'img', url: './assets/images/wall_2.jpg' },
			
 
				-        { type: 'img', url: './assets/images/wall_3.jpg' },
			
 
				-        { type: 'img', url: './assets/images/wall_4.jpg' },
			
 
				-    ];
			
 
				-</script>
			
 
				-
			
 
				-<div class="pt-4 pb-2 text-center text-xl font-bold">Button</div>
			
 
				-<Button radius='full'>确定</Button>
			
 
				-<Divider />
			
 
				-
			
 
				-
			
 
				-<div class="pt-4 pb-2 text-center text-xl font-bold">Cell</div>
			
 
				-<Cell title="开关全圆角" right={{ type: 'switch', switch: { radius: 'full' } }} />
			
 
				-<Divider />
			
 
				-
			
 
				-<div class="pt-4 pb-2 text-center text-xl font-bold">Swiper</div>
			
 
				-<Swiper
			
 
				-    data={imgs}
			
 
				-    interval={100}
			
 
				-    px="6"
			
 
				-    py="6"
			
 
				-    indicateInjClass="bg-none"
			
 
				-    radius="2xl"
			
 
				-    indicateColor="bg-black/5 dark:bg-white/10"
			
 
				-    indicateActiveColor="bg-primary dark:bg-dark"
			
 
				-    indicateStyle="longLine"
			
 
				-/>
			
 
				-<Divider />
			
 
				-
			
 
				-<div class="pt-4 pb-4 text-center text-xl font-bold">Progress</div>
			
 
				-<div class="px-4"><Progress radius="base" percentPosition="block" /></div>
			
--- a/demo/src/route.js
+++ b/demo/src/route.js
@@ -3,84 +3,84 @@ import { wrap } from 'svelte-spa-router/wrap';
 
				 import Home from './pages/home/Home.svelte';
			
 
				 
			
 
				 export const routes = {
			
 
				-    '/': Home,
			
 
				-    '/button': wrap({ asyncComponent: () => import('./pages/button/ButtonDemo.svelte') }),
			
 
				-    '/icon': wrap({ asyncComponent: () => import('./pages/icon/IconDemo.svelte') }),
			
 
				-    '/navBar': wrap({ asyncComponent: () => import('./pages/navBar/NavBarDemo.svelte') }),
			
 
				-    '/divider': wrap({ asyncComponent: () => import('./pages/divider/DividerDemo.svelte') }),
			
 
				-    '/cell': wrap({ asyncComponent: () => import('./pages/cell/CellDemo.svelte') }),
			
 
				-    '/switch': wrap({ asyncComponent: () => import('./pages/switch/SwitchDemo.svelte') }),
			
 
				-    '/avatar': wrap({ asyncComponent: () => import('./pages/avatar/AvatarDemo.svelte') }),
			
 
				-    '/tabs': wrap({ asyncComponent: () => import('./pages/tabs/TabsDemo.svelte') }),
			
 
				-    '/tabBar': wrap({ asyncComponent: () => import('./pages/tabBar/TabBarDemo.svelte') }),
			
 
				-    '/steps': wrap({ asyncComponent: () => import('./pages/steps/StepsDemo.svelte') }),
			
 
				-    '/indexBar': wrap({ asyncComponent: () => import('./pages/indexBar/IndexBarDemo.svelte') }),
			
 
				-    '/radio': wrap({ asyncComponent: () => import('./pages/radio/RadioDemo.svelte') }),
			
 
				-    '/checkbox': wrap({ asyncComponent: () => import('./pages/checkbox/CheckboxDemo.svelte') }),
			
 
				-    '/input': wrap({ asyncComponent: () => import('./pages/input/InputDemo.svelte') }),
			
 
				-    '/grids': wrap({ asyncComponent: () => import('./pages/grids/GridsDemo.svelte') }),
			
 
				-    '/swiper': wrap({ asyncComponent: () => import('./pages/swiper/SwiperDemo.svelte') }),
			
 
				-    '/placeholder': wrap({ asyncComponent: () => import('./pages/placeholder/PlaceholderDemo.svelte') }),
			
 
				-    '/skeleton': wrap({ asyncComponent: () => import('./pages/skeleton/SkeletonDemo.svelte') }),
			
 
				-    '/rate': wrap({ asyncComponent: () => import('./pages/rate/RateDemo.svelte') }),
			
 
				-    '/slider': wrap({ asyncComponent: () => import('./pages/slider/SliderDemo.svelte') }),
			
 
				-    '/badge': wrap({ asyncComponent: () => import('./pages/badge/BadgeDemo.svelte') }),
			
 
				-    '/noticeBar': wrap({ asyncComponent: () => import('./pages/noticeBar/NoticeBarDemo.svelte') }),
			
 
				-    '/progress': wrap({ asyncComponent: () => import('./pages/progress/ProgressDemo.svelte') }),
			
 
				-    '/progressLoop': wrap({ asyncComponent: () => import('./pages/progressLoop/ProgressLoopDemo.svelte') }),
			
 
				-    '/mask': wrap({ asyncComponent: () => import('./pages/mask/MaskDemo.svelte') }),
			
 
				-    '/toast': wrap({ asyncComponent: () => import('./pages/toast/ToastDemo.svelte') }),
			
 
				-    '/loading': wrap({ asyncComponent: () => import('./pages/loading/LoadingDemo.svelte') }),
			
 
				-    '/popup': wrap({ asyncComponent: () => import('./pages/popup/PopupDemo.svelte') }),
			
 
				-    '/bottomSheet': wrap({ asyncComponent: () => import('./pages/bottomSheet/BottomSheetDemo.svelte') }),
			
 
				-    '/modal': wrap({ asyncComponent: () => import('./pages/modal/ModalDemo.svelte') }),
			
 
				-    '/dialog': wrap({ asyncComponent: () => import('./pages/dialog/DialogDemo.svelte') }),
			
 
				-    '/actionSheet': wrap({ asyncComponent: () => import('./pages/actionSheet/ActionSheetDemo.svelte') }),
			
 
				-    '/picker': wrap({ asyncComponent: () => import('./pages/picker/PickerDemo.svelte') }),
			
 
				-    '/asyncPicker': wrap({ asyncComponent: () => import('./pages/asyncPicker/AsyncPickerDemo.svelte') }),
			
 
				-    '/timePicker': wrap({ asyncComponent: () => import('./pages/timePicker/TimePickerDemo.svelte') }),
			
 
				-    '/calendar': wrap({ asyncComponent: () => import('./pages/calendar/CalendarDemo.svelte') }),
			
 
				-    '/pagination': wrap({ asyncComponent: () => import('./pages/pagination/PaginationDemo.svelte') }),
			
 
				-    '*': Home,
			
 
				+	'/': Home,
			
 
				+	'/button': wrap({ asyncComponent: () => import('./pages/button/ButtonDemo.svelte') }),
			
 
				+	'/icon': wrap({ asyncComponent: () => import('./pages/icon/IconDemo.svelte') }),
			
 
				+	'/navBar': wrap({ asyncComponent: () => import('./pages/navBar/NavBarDemo.svelte') }),
			
 
				+	'/divider': wrap({ asyncComponent: () => import('./pages/divider/DividerDemo.svelte') }),
			
 
				+	'/cell': wrap({ asyncComponent: () => import('./pages/cell/CellDemo.svelte') }),
			
 
				+	'/switch': wrap({ asyncComponent: () => import('./pages/switch/SwitchDemo.svelte') }),
			
 
				+	'/avatar': wrap({ asyncComponent: () => import('./pages/avatar/AvatarDemo.svelte') }),
			
 
				+	'/tabs': wrap({ asyncComponent: () => import('./pages/tabs/TabsDemo.svelte') }),
			
 
				+	'/tabBar': wrap({ asyncComponent: () => import('./pages/tabBar/TabBarDemo.svelte') }),
			
 
				+	'/steps': wrap({ asyncComponent: () => import('./pages/steps/StepsDemo.svelte') }),
			
 
				+	'/indexBar': wrap({ asyncComponent: () => import('./pages/indexBar/IndexBarDemo.svelte') }),
			
 
				+	'/radio': wrap({ asyncComponent: () => import('./pages/radio/RadioDemo.svelte') }),
			
 
				+	'/checkbox': wrap({ asyncComponent: () => import('./pages/checkbox/CheckboxDemo.svelte') }),
			
 
				+	'/input': wrap({ asyncComponent: () => import('./pages/input/InputDemo.svelte') }),
			
 
				+	'/grids': wrap({ asyncComponent: () => import('./pages/grids/GridsDemo.svelte') }),
			
 
				+	'/swiper': wrap({ asyncComponent: () => import('./pages/swiper/SwiperDemo.svelte') }),
			
 
				+	'/placeholder': wrap({ asyncComponent: () => import('./pages/placeholder/PlaceholderDemo.svelte') }),
			
 
				+	'/skeleton': wrap({ asyncComponent: () => import('./pages/skeleton/SkeletonDemo.svelte') }),
			
 
				+	'/rate': wrap({ asyncComponent: () => import('./pages/rate/RateDemo.svelte') }),
			
 
				+	'/slider': wrap({ asyncComponent: () => import('./pages/slider/SliderDemo.svelte') }),
			
 
				+	'/badge': wrap({ asyncComponent: () => import('./pages/badge/BadgeDemo.svelte') }),
			
 
				+	'/noticeBar': wrap({ asyncComponent: () => import('./pages/noticeBar/NoticeBarDemo.svelte') }),
			
 
				+	'/progress': wrap({ asyncComponent: () => import('./pages/progress/ProgressDemo.svelte') }),
			
 
				+	'/progressLoop': wrap({ asyncComponent: () => import('./pages/progressLoop/ProgressLoopDemo.svelte') }),
			
 
				+	'/mask': wrap({ asyncComponent: () => import('./pages/mask/MaskDemo.svelte') }),
			
 
				+	'/toast': wrap({ asyncComponent: () => import('./pages/toast/ToastDemo.svelte') }),
			
 
				+	'/loading': wrap({ asyncComponent: () => import('./pages/loading/LoadingDemo.svelte') }),
			
 
				+	'/popup': wrap({ asyncComponent: () => import('./pages/popup/PopupDemo.svelte') }),
			
 
				+	'/bottomSheet': wrap({ asyncComponent: () => import('./pages/bottomSheet/BottomSheetDemo.svelte') }),
			
 
				+	'/modal': wrap({ asyncComponent: () => import('./pages/modal/ModalDemo.svelte') }),
			
 
				+	'/dialog': wrap({ asyncComponent: () => import('./pages/dialog/DialogDemo.svelte') }),
			
 
				+	'/actionSheet': wrap({ asyncComponent: () => import('./pages/actionSheet/ActionSheetDemo.svelte') }),
			
 
				+	'/picker': wrap({ asyncComponent: () => import('./pages/picker/PickerDemo.svelte') }),
			
 
				+	'/asyncPicker': wrap({ asyncComponent: () => import('./pages/asyncPicker/AsyncPickerDemo.svelte') }),
			
 
				+	'/timePicker': wrap({ asyncComponent: () => import('./pages/timePicker/TimePickerDemo.svelte') }),
			
 
				+	'/calendar': wrap({ asyncComponent: () => import('./pages/calendar/CalendarDemo.svelte') }),
			
 
				+	'/pagination': wrap({ asyncComponent: () => import('./pages/pagination/PaginationDemo.svelte') }),
			
 
				+	'*': Home,
			
 
				 };
			
 
				 export const routes_en = {
			
 
				-    '/': Home,
			
 
				-    '/button': wrap({ asyncComponent: () => import('./pages/button/ButtonDemo_en.svelte') }),
			
 
				-    '/icon': wrap({ asyncComponent: () => import('./pages/icon/IconDemo_en.svelte') }),
			
 
				-    '/navBar': wrap({ asyncComponent: () => import('./pages/navBar/NavBarDemo_en.svelte') }),
			
 
				-    '/divider': wrap({ asyncComponent: () => import('./pages/divider/DividerDemo_en.svelte') }),
			
 
				-    '/cell': wrap({ asyncComponent: () => import('./pages/cell/CellDemo_en.svelte') }),
			
 
				-    '/switch': wrap({ asyncComponent: () => import('./pages/switch/SwitchDemo_en.svelte') }),
			
 
				-    '/avatar': wrap({ asyncComponent: () => import('./pages/avatar/AvatarDemo_en.svelte') }),
			
 
				-    '/tabs': wrap({ asyncComponent: () => import('./pages/tabs/TabsDemo_en.svelte') }),
			
 
				-    '/tabBar': wrap({ asyncComponent: () => import('./pages/tabBar/TabBarDemo_en.svelte') }),
			
 
				-    '/steps': wrap({ asyncComponent: () => import('./pages/steps/StepsDemo_en.svelte') }),
			
 
				-    '/indexBar': wrap({ asyncComponent: () => import('./pages/indexBar/IndexBarDemo_en.svelte') }),
			
 
				-    '/radio': wrap({ asyncComponent: () => import('./pages/radio/RadioDemo_en.svelte') }),
			
 
				-    '/checkbox': wrap({ asyncComponent: () => import('./pages/checkbox/CheckboxDemo_en.svelte') }),
			
 
				-    '/input': wrap({ asyncComponent: () => import('./pages/input/InputDemo_en.svelte') }),
			
 
				-    '/grids': wrap({ asyncComponent: () => import('./pages/grids/GridsDemo_en.svelte') }),
			
 
				-    '/swiper': wrap({ asyncComponent: () => import('./pages/swiper/SwiperDemo_en.svelte') }),
			
 
				-    '/placeholder': wrap({ asyncComponent: () => import('./pages/placeholder/PlaceholderDemo_en.svelte') }),
			
 
				-    '/skeleton': wrap({ asyncComponent: () => import('./pages/skeleton/SkeletonDemo_en.svelte') }),
			
 
				-    '/rate': wrap({ asyncComponent: () => import('./pages/rate/RateDemo_en.svelte') }),
			
 
				-    '/slider': wrap({ asyncComponent: () => import('./pages/slider/SliderDemo_en.svelte') }),
			
 
				-    '/badge': wrap({ asyncComponent: () => import('./pages/badge/BadgeDemo_en.svelte') }),
			
 
				-    '/noticeBar': wrap({ asyncComponent: () => import('./pages/noticeBar/NoticeBarDemo_en.svelte') }),
			
 
				-    '/progress': wrap({ asyncComponent: () => import('./pages/progress/ProgressDemo_en.svelte') }),
			
 
				-    '/progressLoop': wrap({ asyncComponent: () => import('./pages/progressLoop/ProgressLoopDemo_en.svelte') }),
			
 
				-    '/mask': wrap({ asyncComponent: () => import('./pages/mask/MaskDemo_en.svelte') }),
			
 
				-    '/toast': wrap({ asyncComponent: () => import('./pages/toast/ToastDemo_en.svelte') }),
			
 
				-    '/loading': wrap({ asyncComponent: () => import('./pages/loading/LoadingDemo_en.svelte') }),
			
 
				-    '/popup': wrap({ asyncComponent: () => import('./pages/popup/PopupDemo_en.svelte') }),
			
 
				-    '/bottomSheet': wrap({ asyncComponent: () => import('./pages/bottomSheet/BottomSheetDemo_en.svelte') }),
			
 
				-    '/modal': wrap({ asyncComponent: () => import('./pages/modal/ModalDemo_en.svelte') }),
			
 
				-    '/dialog': wrap({ asyncComponent: () => import('./pages/dialog/DialogDemo_en.svelte') }),
			
 
				-    '/actionSheet': wrap({ asyncComponent: () => import('./pages/actionSheet/ActionSheetDemo_en.svelte') }),
			
 
				-    '/picker': wrap({ asyncComponent: () => import('./pages/picker/PickerDemo_en.svelte') }),
			
 
				-    '/asyncPicker': wrap({ asyncComponent: () => import('./pages/asyncPicker/AsyncPickerDemo_en.svelte') }),
			
 
				-    '/timePicker': wrap({ asyncComponent: () => import('./pages/timePicker/TimePickerDemo_en.svelte') }),
			
 
				-    '/calendar': wrap({ asyncComponent: () => import('./pages/calendar/CalendarDemo_en.svelte') }),
			
 
				-    '/pagination': wrap({ asyncComponent: () => import('./pages/pagination/PaginationDemo_en.svelte') }),
			
 
				-    '*': Home,
			
 
				+	'/': Home,
			
 
				+	'/button': wrap({ asyncComponent: () => import('./pages/button/ButtonDemo_en.svelte') }),
			
 
				+	'/icon': wrap({ asyncComponent: () => import('./pages/icon/IconDemo_en.svelte') }),
			
 
				+	'/navBar': wrap({ asyncComponent: () => import('./pages/navBar/NavBarDemo_en.svelte') }),
			
 
				+	'/divider': wrap({ asyncComponent: () => import('./pages/divider/DividerDemo_en.svelte') }),
			
 
				+	'/cell': wrap({ asyncComponent: () => import('./pages/cell/CellDemo_en.svelte') }),
			
 
				+	'/switch': wrap({ asyncComponent: () => import('./pages/switch/SwitchDemo_en.svelte') }),
			
 
				+	'/avatar': wrap({ asyncComponent: () => import('./pages/avatar/AvatarDemo_en.svelte') }),
			
 
				+	'/tabs': wrap({ asyncComponent: () => import('./pages/tabs/TabsDemo_en.svelte') }),
			
 
				+	'/tabBar': wrap({ asyncComponent: () => import('./pages/tabBar/TabBarDemo_en.svelte') }),
			
 
				+	'/steps': wrap({ asyncComponent: () => import('./pages/steps/StepsDemo_en.svelte') }),
			
 
				+	'/indexBar': wrap({ asyncComponent: () => import('./pages/indexBar/IndexBarDemo_en.svelte') }),
			
 
				+	'/radio': wrap({ asyncComponent: () => import('./pages/radio/RadioDemo_en.svelte') }),
			
 
				+	'/checkbox': wrap({ asyncComponent: () => import('./pages/checkbox/CheckboxDemo_en.svelte') }),
			
 
				+	'/input': wrap({ asyncComponent: () => import('./pages/input/InputDemo_en.svelte') }),
			
 
				+	'/grids': wrap({ asyncComponent: () => import('./pages/grids/GridsDemo_en.svelte') }),
			
 
				+	'/swiper': wrap({ asyncComponent: () => import('./pages/swiper/SwiperDemo_en.svelte') }),
			
 
				+	'/placeholder': wrap({ asyncComponent: () => import('./pages/placeholder/PlaceholderDemo_en.svelte') }),
			
 
				+	'/skeleton': wrap({ asyncComponent: () => import('./pages/skeleton/SkeletonDemo_en.svelte') }),
			
 
				+	'/rate': wrap({ asyncComponent: () => import('./pages/rate/RateDemo_en.svelte') }),
			
 
				+	'/slider': wrap({ asyncComponent: () => import('./pages/slider/SliderDemo_en.svelte') }),
			
 
				+	'/badge': wrap({ asyncComponent: () => import('./pages/badge/BadgeDemo_en.svelte') }),
			
 
				+	'/noticeBar': wrap({ asyncComponent: () => import('./pages/noticeBar/NoticeBarDemo_en.svelte') }),
			
 
				+	'/progress': wrap({ asyncComponent: () => import('./pages/progress/ProgressDemo_en.svelte') }),
			
 
				+	'/progressLoop': wrap({ asyncComponent: () => import('./pages/progressLoop/ProgressLoopDemo_en.svelte') }),
			
 
				+	'/mask': wrap({ asyncComponent: () => import('./pages/mask/MaskDemo_en.svelte') }),
			
 
				+	'/toast': wrap({ asyncComponent: () => import('./pages/toast/ToastDemo_en.svelte') }),
			
 
				+	'/loading': wrap({ asyncComponent: () => import('./pages/loading/LoadingDemo_en.svelte') }),
			
 
				+	'/popup': wrap({ asyncComponent: () => import('./pages/popup/PopupDemo_en.svelte') }),
			
 
				+	'/bottomSheet': wrap({ asyncComponent: () => import('./pages/bottomSheet/BottomSheetDemo_en.svelte') }),
			
 
				+	'/modal': wrap({ asyncComponent: () => import('./pages/modal/ModalDemo_en.svelte') }),
			
 
				+	'/dialog': wrap({ asyncComponent: () => import('./pages/dialog/DialogDemo_en.svelte') }),
			
 
				+	'/actionSheet': wrap({ asyncComponent: () => import('./pages/actionSheet/ActionSheetDemo_en.svelte') }),
			
 
				+	'/picker': wrap({ asyncComponent: () => import('./pages/picker/PickerDemo_en.svelte') }),
			
 
				+	'/asyncPicker': wrap({ asyncComponent: () => import('./pages/asyncPicker/AsyncPickerDemo_en.svelte') }),
			
 
				+	'/timePicker': wrap({ asyncComponent: () => import('./pages/timePicker/TimePickerDemo_en.svelte') }),
			
 
				+	'/calendar': wrap({ asyncComponent: () => import('./pages/calendar/CalendarDemo_en.svelte') }),
			
 
				+	'/pagination': wrap({ asyncComponent: () => import('./pages/pagination/PaginationDemo_en.svelte') }),
			
 
				+	'*': Home,
			
 
				 };
			
--- a/demo/tailwind.config.cjs
+++ b/demo/tailwind.config.cjs
@@ -1,69 +1,69 @@
 
				 /** @type {import('tailwindcss').Config} */
			
 
				 module.exports = {
			
 
				-    content: ['./index.html', './src/**/*.svelte', './node_modules/stdf/**/*.svelte', '../packages/stdf/components/**/*.svelte'],
			
 
				-    theme: {
			
 
				-        colors: {
			
 
				-            // 主题色
			
 
				-            // Theme Color
			
 
				-            primary: '#0B24FB',
			
 
				-            dark: '#FFC043',
			
 
				-            blue: '#0B24FB', // primary 别名 alias
			
 
				-            yellow: '#FFC043', // dark 别名 alias
			
 
				+	content: ['./index.html', './src/**/*.svelte', './node_modules/stdf/**/*.svelte', '../packages/stdf/components/**/*.svelte'],
			
 
				+	theme: {
			
 
				+		colors: {
			
 
				+			// 主题色
			
 
				+			// Theme Color
			
 
				+			primary: '#0B24FB',
			
 
				+			dark: '#FFC043',
			
 
				+			blue: '#0B24FB', // primary 别名 alias
			
 
				+			yellow: '#FFC043', // dark 别名 alias
			
 
				 
			
 
				-            // 扩展色
			
 
				-            // Extended Color
			
 
				-            purple: '#7356BF',
			
 
				-            green: '#05944F',
			
 
				-            orange: '#FF6937',
			
 
				+			// 扩展色
			
 
				+			// Extended Color
			
 
				+			purple: '#7356BF',
			
 
				+			green: '#05944F',
			
 
				+			orange: '#FF6937',
			
 
				 
			
 
				-            // 功能色
			
 
				-            // Functional Color
			
 
				-            success: '#11BB8D',
			
 
				-            warning: '#B95000',
			
 
				-            error: '#DA1414',
			
 
				-            info: '#2E5AAC',
			
 
				+			// 功能色
			
 
				+			// Functional Color
			
 
				+			success: '#11BB8D',
			
 
				+			warning: '#B95000',
			
 
				+			error: '#DA1414',
			
 
				+			info: '#2E5AAC',
			
 
				 
			
 
				-            // 中性色
			
 
				-            // Neutral Color
			
 
				-            black: '#000000',
			
 
				-            white: '#fff',
			
 
				-            gray1: '#23262B',
			
 
				-            gray2: '#2A2B2F',
			
 
				-            gray3: '#303239',
			
 
				-            gray4: '#373940',
			
 
				-            gray5: '#414249',
			
 
				-            gray6: '#747B84',
			
 
				-            gray7: '#DADEE3',
			
 
				-            gray8: '#EBEEF2',
			
 
				-            gray9: '#F4F6F9',
			
 
				-            gray10: '#FAFAFB',
			
 
				-            transparent: 'transparent',
			
 
				-        },
			
 
				-        extend: {
			
 
				-            keyframes: {
			
 
				-                wiggle: {
			
 
				-                    '0%, 100%': { transform: 'rotate(-3deg)' },
			
 
				-                    '50%': { transform: 'rotate(3deg)' },
			
 
				-                },
			
 
				-                path: {
			
 
				-                    '0%': { 'stroke-dashoffset': 400, fill: 'transparent' },
			
 
				-                    '30%': { 'stroke-dashoffset': 0, fill: 'transparent' },
			
 
				-                    '32%': { 'stroke-dashoffset': 0, fill: 'currentColor' },
			
 
				-                    '33%': { opacity: 0 },
			
 
				-                    '35%': { opacity: 1 },
			
 
				-                    '37%': { opacity: 0 },
			
 
				-                    '39%': { opacity: 1 },
			
 
				-                    '40%': { 'stroke-dashoffset': 0, fill: 'currentColor' },
			
 
				-                    '99%': { 'stroke-dashoffset': 0, fill: 'currentColor' },
			
 
				-                    '100%': { 'stroke-dashoffset': 400, fill: 'transparent' },
			
 
				-                },
			
 
				-            },
			
 
				-            animation: {
			
 
				-                wiggle: 'wiggle 1s ease-in-out infinite',
			
 
				-                path: 'path 3s linear infinite',
			
 
				-            },
			
 
				-        },
			
 
				-    },
			
 
				-    darkMode: 'class',
			
 
				-    plugins: [],
			
 
				+			// 中性色
			
 
				+			// Neutral Color
			
 
				+			black: '#000000',
			
 
				+			white: '#fff',
			
 
				+			gray1: '#23262B',
			
 
				+			gray2: '#2A2B2F',
			
 
				+			gray3: '#303239',
			
 
				+			gray4: '#373940',
			
 
				+			gray5: '#414249',
			
 
				+			gray6: '#747B84',
			
 
				+			gray7: '#DADEE3',
			
 
				+			gray8: '#EBEEF2',
			
 
				+			gray9: '#F4F6F9',
			
 
				+			gray10: '#FAFAFB',
			
 
				+			transparent: 'transparent',
			
 
				+		},
			
 
				+		extend: {
			
 
				+			keyframes: {
			
 
				+				wiggle: {
			
 
				+					'0%, 100%': { transform: 'rotate(-3deg)' },
			
 
				+					'50%': { transform: 'rotate(3deg)' },
			
 
				+				},
			
 
				+				path: {
			
 
				+					'0%': { 'stroke-dashoffset': 400, fill: 'transparent' },
			
 
				+					'30%': { 'stroke-dashoffset': 0, fill: 'transparent' },
			
 
				+					'32%': { 'stroke-dashoffset': 0, fill: 'currentColor' },
			
 
				+					'33%': { opacity: 0 },
			
 
				+					'35%': { opacity: 1 },
			
 
				+					'37%': { opacity: 0 },
			
 
				+					'39%': { opacity: 1 },
			
 
				+					'40%': { 'stroke-dashoffset': 0, fill: 'currentColor' },
			
 
				+					'99%': { 'stroke-dashoffset': 0, fill: 'currentColor' },
			
 
				+					'100%': { 'stroke-dashoffset': 400, fill: 'transparent' },
			
 
				+				},
			
 
				+			},
			
 
				+			animation: {
			
 
				+				wiggle: 'wiggle 1s ease-in-out infinite',
			
 
				+				path: 'path 3s linear infinite',
			
 
				+			},
			
 
				+		},
			
 
				+	},
			
 
				+	darkMode: 'class',
			
 
				+	plugins: [],
			
 
				 };
			
--- a/demo/vite.config.js
+++ b/demo/vite.config.js
@@ -5,26 +5,26 @@ import svgSprite from 'rollup-plugin-stdf-icon';
 
				 
			
 
				 // https://vitejs.dev/config/
			
 
				 export default defineConfig({
			
 
				-    base: './',
			
 
				-    plugins: [
			
 
				-        svelte({
			
 
				-            onwarn(warning, defaultHandler) {
			
 
				-                if (warning.code.startsWith('a11y-')) {
			
 
				-                    return;
			
 
				-                }
			
 
				+	base: './',
			
 
				+	plugins: [
			
 
				+		svelte({
			
 
				+			onwarn(warning, defaultHandler) {
			
 
				+				if (warning.code.startsWith('a11y-')) {
			
 
				+					return;
			
 
				+				}
			
 
				 
			
 
				-                // handle all other warnings normally
			
 
				-                defaultHandler(warning);
			
 
				-            },
			
 
				-        }),
			
 
				-        svgSprite([{ inFile: 'src/assets/icons', outFile: 'public/fonts', fileName: 'symbol' }]),
			
 
				-    ],
			
 
				-    css: { postcss },
			
 
				-    server: {
			
 
				-        hmr: true,
			
 
				-        host: '0.0.0.0',
			
 
				-        port: 8888,
			
 
				-        https: false,
			
 
				-    },
			
 
				-    build: { assetsDir: 'build' },
			
 
				+				// handle all other warnings normally
			
 
				+				defaultHandler(warning);
			
 
				+			},
			
 
				+		}),
			
 
				+		svgSprite([{ inFile: 'src/assets/icons', outFile: 'public/fonts', fileName: 'symbol' }]),
			
 
				+	],
			
 
				+	css: { postcss },
			
 
				+	server: {
			
 
				+		hmr: true,
			
 
				+		host: '0.0.0.0',
			
 
				+		port: 8888,
			
 
				+		https: false,
			
 
				+	},
			
 
				+	build: { assetsDir: 'build' },
			
 
				 });