[stdf]Update Tabs compoent, demo and documents.

demo/src/routes/en_US/tabs/+page.svelte

@@ -31,14 +31,14 @@
 		{ text: 'skateboard' },
 		{ text: 'flying saucer' },
 	];
-	let width = 0;
-	let changeActive = 0;
-	let active = 2;
-	const clicktabFun = e => {
-		active = e.detail;
+	let width = $state(0);
+	let changeActive = $state(0);
+	let active = $state(2);
+	const clicktabFun = a => {
+		active = a;
 	};
-	const tabsChangeFun = e => {
-		changeActive = e.detail;
+	const tabsChangeFun = a => {
+		changeActive = a;
 	};
 </script>
 
@@ -91,41 +91,43 @@
 		<Divider />
 
 		<div class="font-bold px-4">The TAB is located on the left</div>
-		<Tabs tab={{ labels }} position="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 tab={{ labels }} position="l">
+			{#snippet children({ 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>
+			{/snippet}
 		</Tabs>
 		<Divider />
 
 		<div class="font-bold px-4">The TAB is located on the right</div>
-		<Tabs tab={{ labels }} position="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 tab={{ labels }} position="r">
+			{#snippet children({ 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>
+			{/snippet}
 		</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 tab={{ labels }} transition={false}>
+			{#snippet children({ active })}
+				<div class="relative py-8">
+					{#each labels as item, i}
+						{#if active === i}
+							<div class="absolute" in:fly={{ y: -80, x: (width / 4) * i, duration: 1000 }}>I am {item.text}</div>
+						{/if}
+					{/each}
+				</div>
+			{/snippet}
 		</Tabs>
 		<Divider />
 
 		<div class="font-bold px-4">monitor change event</div>
-		<Tabs tab={{ labels }} on:change={tabsChangeFun}>
+		<Tabs tab={{ labels }} onchange={tabsChangeFun}>
 			<TabContent>I am a plane</TabContent>
 			<TabContent>I am a ship</TabContent>
 			<TabContent>I am a train</TabContent>
@@ -156,7 +158,7 @@
 		<Divider />
 
 		<div class="font-bold px-4">Overflow mode shows 2 items</div>
-		<Tabs tab={{ labels: overflowLabels, overflow: true, showNum: 5 }}>
+		<Tabs tab={{ labels: overflowLabels, overflow: true, showNum: 2 }}>
 			{#each overflowLabels as item}
 				<TabContent>I am {item.text}</TabContent>
 			{/each}
@@ -209,7 +211,7 @@
 
 	<div class="font-bold my-8 text-xl px-4">Use alone Tab</div>
 	<div class="my-4">
-		<Tab {labels} {active} on:clicktab={clicktabFun} />
+		<Tab {labels} {active} onclickTab={clicktabFun} />
 		<div class="mt-4">At present Tab clickable active：{active}</div>
 	</div>
 	<Divider />

demo/src/routes/zh_CN/tabs/+page.svelte

@@ -31,14 +31,14 @@
 		{ text: '滑板' },
 		{ text: '飞碟' },
 	];
-	let width = 0;
-	let changeActive = 0;
-	let active = 2;
-	const clicktabFun = e => {
-		active = e.detail;
+	let width = $state(0);
+	let changeActive = $state(0);
+	let active = $state(2);
+	const clicktabFun = a => {
+		active = a;
 	};
-	const tabsChangeFun = e => {
-		changeActive = e.detail;
+	const tabsChangeFun = a => {
+		changeActive = a;
 	};
 </script>
 
@@ -91,41 +91,43 @@
 		<Divider />
 
 		<div class="font-bold px-4">选项卡位于左侧</div>
-		<Tabs tab={{ labels }} position="l" let:active>
-			<TabContent show={active === 0}>我是飞机</TabContent>
-			<TabContent show={active === 1}>我是轮船</TabContent>
-			<TabContent show={active === 2}>我是火车</TabContent>
-			<TabContent show={active === 3}>我是汽车</TabContent>
+		<Tabs tab={{ labels }} position="l">
+			{#snippet children({ active })}
+				<TabContent show={active === 0}>我是飞机</TabContent>
+				<TabContent show={active === 1}>我是轮船</TabContent>
+				<TabContent show={active === 2}>我是火车</TabContent>
+				<TabContent show={active === 3}>我是汽车</TabContent>
+			{/snippet}
 		</Tabs>
 		<Divider />
 
 		<div class="font-bold px-4">选项卡位于右侧</div>
-		<Tabs tab={{ labels }} position="r" let:active>
-			<TabContent show={active === 0}>我是飞机</TabContent>
-			<TabContent show={active === 1}>我是轮船</TabContent>
-			<TabContent show={active === 2}>我是火车</TabContent>
-			<TabContent show={active === 3}>我是汽车</TabContent>
+		<Tabs tab={{ labels }} position="r">
+			{#snippet children({ active })}
+				<TabContent show={active === 0}>我是飞机</TabContent>
+				<TabContent show={active === 1}>我是轮船</TabContent>
+				<TabContent show={active === 2}>我是火车</TabContent>
+				<TabContent show={active === 3}>我是汽车</TabContent>
+			{/snippet}
 		</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 tab={{ labels }} transition={false}>
+			{#snippet children({ active })}
+				<div class="relative py-8">
+					{#each labels as item, i}
+						{#if active === i}
+							<div class="absolute" in:fly={{ y: -80, x: (width / 4) * i, duration: 1000 }}>我是{item.text}</div>
+						{/if}
+					{/each}
+				</div>
+			{/snippet}
 		</Tabs>
 		<Divider />
 
 		<div class="font-bold px-4">监听 change 事件</div>
-		<Tabs tab={{ labels }} on:change={tabsChangeFun}>
+		<Tabs tab={{ labels }} onchange={tabsChangeFun}>
 			<TabContent>我是飞机</TabContent>
 			<TabContent>我是轮船</TabContent>
 			<TabContent>我是火车</TabContent>
@@ -209,7 +211,7 @@
 
 	<div class="font-bold my-8 text-xl px-4">单独使用 Tab</div>
 	<div class="my-4">
-		<Tab {labels} {active} on:clicktab={clicktabFun} />
+		<Tab {labels} {active} onclickTab={clicktabFun} />
 		<div class="mt-4">当前 Tab 点击的 active：{active}</div>
 	</div>
 	<Divider />

doc/components/tabs/api.md

@@ -1,59 +1,66 @@
 ## Tabs Props
 
-| 属性       | 类型    | 默认值 | 可选值                        | 必传 | 说明                                     |
-| ---------- | ------- | ------ | ----------------------------- | ---- | ---------------------------------------- |
-| tab        | Object  | {}     | Tab Props                     | Y    | 传入 Tab Props，作用于内部 Tab 组件。    |
-| active     | Number  | 0      | -                             | N    | 激活的选项卡索引值。                     |
-| duration   | String  | 'base' | 'fast'/'base'/'slow'/'slower' | N    | 过渡动画快慢。                           |
-| position   | String  | 't'    | 't'/'b'/'l'/'r'               | N    | 选项卡位置，对应 Tab Props 的 duration。 |
-| transition | Boolean | true   | true/false                    | N    | 是否使用过渡动画。                       |
+| 名称       | 类型                               | 默认值   | 必传 | 说明                 |
+| ---------- | ---------------------------------- | -------- | ---- | -------------------- |
+| tab        | `Tab`                              | `{}`     | Y    | 内部 Tab 组件。      |
+| active     | `number`                           | `0`      | N    | 激活的选项卡索引值。 |
+| duration   | `'fast'\|'base'\|'slow'\|'slower'` | `'base'` | N    | 过渡动画快慢。       |
+| position   | `'t'\|'b'\|'l'\|'r'`               | `'t'`    | N    | 选项卡位置。         |
+| transition | `boolean`                          | `true`   | N    | 是否使用过渡动画。   |
 
 ## Tabs Events
 
-| 名称   | 参数                                                  | 描述                         |
-| ------ | ----------------------------------------------------- | ---------------------------- |
-| change | event：事件对象，其中 detail 表示激活的选项卡索引值。 | 激活的选项卡发生变化时触发。 |
+| 名称     | 类型                       | 参数                        | 描述                         |
+| -------- | -------------------------- | --------------------------- | ---------------------------- |
+| onchange | `(active: number) => void` | active - 激活的选项卡索引值 | 激活的选项卡发生变化时触发。 |
 
-## Tabs Slots
+## Tabs Snippets
 
-| 名称 | 说明            |
-| ---- | --------------- |
-| -    | Tabs 主体内容。 |
+| 名称     | 类型                            | 参数                        | 说明            |
+| -------- | ------------------------------- | --------------------------- | --------------- |
+| children | `Snippet<[{ active: number }]>` | active - 激活的选项卡索引值 | Tabs 主体内容。 |
 
 ## Tab Props
 
-| 属性              | 类型    | 默认值 | 可选值                                     | 必传 | 说明                                          |
-| ----------------- | ------- | ------ | ------------------------------------------ | ---- | --------------------------------------------- |
-| labels            | Array   | []     | -                                          | Y    | 选项卡内容组，由 text 和 Icon Props 组成。    |
-| active            | Number  | 0      | -                                          | N    | 激活的选项卡索引值。                          |
-| lineType          | Boolean | false  | true/false                                 | N    | 是否使用线性风格。                            |
-| radius            | String  | 'base' | 'none'/'base'/'xl'/'full'                  | N    | 圆角风格。                                    |
-| mx                | String  | '2'    | '0'/'1'/'2'/'3'/'4'/'6'/'8'/'12'/'16'/'20' | N    | 左右间距。                                    |
-| duration          | String  | 'base' | 'fast'/'base'/'slow'/'slower'              | N    | 过渡动画快慢。                                |
-| layout            | String  | 'h'    | 'h'/'v'                                    | N    | 水平或垂直布局，对应 Tabs Props 的 position。 |
-| love              | Boolean | false  | true/false                                 | N    | 是否开启关爱版。                              |
-| injClass          | String  | ''     | -                                          | N    | Tab 外层注入 CSS。                            |
-| tabInjClass       | String  | ''     | -                                          | N    | 单项 Tab 注入 CSS。                           |
-| activeTabInjClass | String  | ''     | -                                          | N    | 激活的 Tab 注入 CSS。                         |
-| activeInjClass    | String  | ''     | -                                          | N    | 指示器注入 CSS。                              |
-| overflow          | Boolean | false  | true/false                                 | N    | 是否开启溢出模式。                            |
-| showNum           | Number  | 3      | -                                          | N    | 开启溢出模式时，完整显示 Tab 数。             |
-| autoScroll        | Boolean | false  | true/false                                 | N    | 开启溢出模式时，是否开启自动滚动。            |
+| 名称              | 类型                                                  | 默认值   | 必传 | 说明                               |
+| ----------------- | ----------------------------------------------------- | -------- | ---- | ---------------------------------- |
+| labels            | `TabLabel[]`                                          | `[]`     | Y    | 选项卡内容组。                     |
+| active            | `number`                                              | `0`      | N    | 激活的选项卡索引值。               |
+| lineType          | `boolean`                                             | `false`  | N    | 是否使用线性风格。                 |
+| radius            | `'none'\|'base'\|'xl'\|'full'`                        | `'base'` | N    | 圆角风格。                         |
+| mx                | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'\|'12'\|'16'\|'20'` | `'2'`    | N    | 左右间距。                         |
+| duration          | `'fast'\|'base'\|'slow'\|'slower'`                    | `'base'` | N    | 过渡动画快慢。                     |
+| layout            | `'h'\|'v'`                                            | `'h'`    | N    | 水平或垂直布局。                   |
+| love              | `boolean`                                             | `false`  | N    | 是否开启关爱版。                   |
+| injClass          | `string`                                              | `''`     | N    | Tab 外层注入 CSS。                 |
+| tabInjClass       | `string`                                              | `''`     | N    | 单项 Tab 注入 CSS。                |
+| activeTabInjClass | `string`                                              | `''`     | N    | 激活的 Tab 注入 CSS。              |
+| activeInjClass    | `string`                                              | `''`     | N    | 指示器注入 CSS。                   |
+| overflow          | `boolean`                                             | `false`  | N    | 是否开启溢出模式。                 |
+| showNum           | `number`                                              | `3`      | N    | 开启溢出模式时，完整显示 Tab 数。  |
+| autoScroll        | `boolean`                                             | `false`  | N    | 开启溢出模式时，是否开启自动滚动。 |
 
 ## Tab Events
 
-| 名称     | 参数                                                  | 描述               |
-| -------- | ----------------------------------------------------- | ------------------ |
-| clicktab | event：事件对象，其中 detail 表示激活的选项卡索引值。 | 点击选项卡时触发。 |
+| 名称       | 类型                       | 参数                          | 描述               |
+| ---------- | -------------------------- | ----------------------------- | ------------------ |
+| onclickTab | `(active: number) => void` | active - 激活的选项卡索引值。 | 点击选项卡时触发。 |
+
+## TabLabel Props
+
+| 名称 | 类型     | 默认值 | 必传 | 说明                                                                     |
+| ---- | -------- | ------ | ---- | ------------------------------------------------------------------------ |
+| text | `string` | `''`   | N    | 标签文本。                                                               |
+| icon | `Icon`   | `{}`   | N    | 标签图标 [Icon Props](https://stdf.design/#/components?nav=icon&tab=1)。 |
 
 ## TabContent Props
 
-| 属性 | 类型    | 默认值 | 可选值     | 必传 | 说明       |
-| ---- | ------- | ------ | ---------- | ---- | ---------- |
-| show | Boolean | true   | true/false | N    | 是否显示。 |
+| 名称 | 类型      | 默认值 | 必传 | 说明       |
+| ---- | --------- | ------ | ---- | ---------- |
+| show | `boolean` | `true` | N    | 是否显示。 |
 
-## TabContent Slots
+## TabContent Snippets
 
-| 名称 | 说明              |
-| ---- | ----------------- |
-| -    | TabContent 内容。 |
+| 名称     | 类型      | 参数 | 说明              |
+| -------- | --------- | ---- | ----------------- |
+| children | `Snippet` | -    | TabContent 内容。 |

doc/components/tabs/api_en.md

@@ -1,59 +1,66 @@
 ## Tabs Props
 
-| Prop Name  | Type    | Default | Options                       | Required | Description                                                         |
-| ---------- | ------- | ------- | ----------------------------- | -------- | ------------------------------------------------------------------- |
-| tab        | Object  | {}      | Tab Props                     | Yes      | Pass in the Tab Props, which applies to the internal Tab component. |
-| active     | Number  | 0       | -                             | No       | Index value of the active Tab.                                      |
-| duration   | String  | 'base'  | 'fast'/'base'/'slow'/'slower' | No       | Transition animation speed.                                         |
-| position   | String  | 't'     | 't'/'b'/'l'/'r'               | No       | Tab position corresponds to duration in Tab Props.                  |
-| transition | Boolean | true    | true/false                    | No       | Whether to use transition animations.                               |
+| Name       | Type                               | Default  | Required | Description                        |
+| ---------- | ---------------------------------- | -------- | -------- | ---------------------------------- |
+| tab        | `Tab`                              | `{}`     | Y        | Internal Tab component.            |
+| active     | `number`                           | `0`      | N        | Active tab index.                  |
+| duration   | `'fast'\|'base'\|'slow'\|'slower'` | `'base'` | N        | Transition animation duration.     |
+| position   | `'t'\|'b'\|'l'\|'r'`               | `'t'`    | N        | Tab position.                      |
+| transition | `boolean`                          | `true`   | N        | Whether to use transition effects. |
 
 ## Tabs Events
 
-| Name   | Parameters                                                                       | Description                            |
-| ------ | -------------------------------------------------------------------------------- | -------------------------------------- |
-| change | event: Event object, with `detail` indicating the index value of the active Tab. | Triggered when the active Tab changes. |
+| Name     | Type                       | Parameters                | Description                        |
+| -------- | -------------------------- | ------------------------- | ---------------------------------- |
+| onchange | `(active: number) => void` | active - Active tab index | Triggered when active tab changes. |
 
-## Tabs Slots
+## Tabs Snippets
 
-| Name | Description           |
-| ---- | --------------------- |
-| -    | Main content of Tabs. |
+| Name     | Type                            | Parameters                | Description        |
+| -------- | ------------------------------- | ------------------------- | ------------------ |
+| children | `Snippet<[{ active: number }]>` | active - Active tab index | Tabs main content. |
 
 ## Tab Props
 
-| Prop Name         | Type    | Default | Options                                    | Required | Description                                                             |
-| ----------------- | ------- | ------- | ------------------------------------------ | -------- | ----------------------------------------------------------------------- |
-| labels            | Array   | []      | -                                          | Yes      | An array of tab content, consisting of text and Icon Props.             |
-| active            | Number  | 0       | -                                          | No       | Index value of the active Tab.                                          |
-| lineType          | Boolean | false   | true/false                                 | No       | Whether to use linear style.                                            |
-| radius            | String  | 'base'  | 'none'/'base'/'xl'/'full'                  | No       | Corner style.                                                           |
-| mx                | String  | '2'     | '0'/'1'/'2'/'3'/'4'/'6'/'8'/'12'/'16'/'20' | No       | Horizontal margin.                                                      |
-| duration          | String  | 'base'  | 'fast'/'base'/'slow'/'slower'              | No       | Transition animation speed.                                             |
-| layout            | String  | 'h'     | 'h'/'v'                                    | No       | Horizontal or vertical layout, corresponding to position in Tabs Props. |
-| love              | Boolean | false   | true/false                                 | No       | Whether to enable Love Edition.                                         |
-| injClass          | String  | ''      | -                                          | No       | Inject CSS to wrap the Tabs.                                            |
-| tabInjClass       | String  | ''      | -                                          | No       | Inject CSS for individual Tabs.                                         |
-| activeTabInjClass | String  | ''      | -                                          | No       | Inject CSS for active Tab.                                              |
-| activeInjClass    | String  | ''      | -                                          | No       | Inject CSS for indicator.                                               |
-| overflow          | Boolean | false   | true/false                                 | No       | Whether to enable overflow mode.                                        |
-| showNum           | Number  | 3       | -                                          | No       | When overflow mode is enabled, the number of Tabs to be displayed.      |
-| autoScroll        | Boolean | false   | true/false                                 | No       | Whether to enable automatic scrolling when overflow mode is enabled.    |
+| Name              | Type                                                  | Default  | Required | Description                                      |
+| ----------------- | ----------------------------------------------------- | -------- | -------- | ------------------------------------------------ |
+| labels            | `TabLabel[]`                                          | `[]`     | Y        | Tab content group.                               |
+| active            | `number`                                              | `0`      | N        | Active tab index.                                |
+| lineType          | `boolean`                                             | `false`  | N        | Whether to use line style.                       |
+| radius            | `'none'\|'base'\|'xl'\|'full'`                        | `'base'` | N        | Border radius style.                             |
+| mx                | `'0'\|'1'\|'2'\|'3'\|'4'\|'6'\|'8'\|'12'\|'16'\|'20'` | `'2'`    | N        | Horizontal margin.                               |
+| duration          | `'fast'\|'base'\|'slow'\|'slower'`                    | `'base'` | N        | Transition animation duration.                   |
+| layout            | `'h'\|'v'`                                            | `'h'`    | N        | Horizontal or vertical layout.                   |
+| love              | `boolean`                                             | `false`  | N        | Whether to enable care version.                  |
+| injClass          | `string`                                              | `''`     | N        | Inject CSS to Tab wrapper.                       |
+| tabInjClass       | `string`                                              | `''`     | N        | Inject CSS to single Tab.                        |
+| activeTabInjClass | `string`                                              | `''`     | N        | Inject CSS to active Tab.                        |
+| activeInjClass    | `string`                                              | `''`     | N        | Inject CSS to indicator.                         |
+| overflow          | `boolean`                                             | `false`  | N        | Whether to enable overflow mode.                 |
+| showNum           | `number`                                              | `3`      | N        | Number of fully displayed tabs in overflow mode. |
+| autoScroll        | `boolean`                                             | `false`  | N        | Auto scroll in overflow mode.                    |
 
 ## Tab Events
 
-| Name     | Parameters                                                                       | Description                      |
-| -------- | -------------------------------------------------------------------------------- | -------------------------------- |
-| clicktab | event: Event object, with `detail` indicating the index value of the active Tab. | Triggered when a Tab is clicked. |
+| Name       | Type                       | Parameters                 | Description                    |
+| ---------- | -------------------------- | -------------------------- | ------------------------------ |
+| onclickTab | `(active: number) => void` | active - Active tab index. | Triggered when tab is clicked. |
+
+## TabLabel Props
+
+| Name | Type     | Default | Required | Description                                                               |
+| ---- | -------- | ------- | -------- | ------------------------------------------------------------------------- |
+| text | `string` | `''`    | N        | Label text.                                                               |
+| icon | `Icon`   | `{}`    | N        | Label icon [Icon Props](https://stdf.design/#/components?nav=icon&tab=1). |
 
 ## TabContent Props
 
-| Prop Name | Type    | Default | Options    | Required | Description              |
-| --------- | ------- | ------- | ---------- | -------- | ------------------------ |
-| show      | Boolean | true    | true/false | No       | Whether to show content. |
+| Name | Type      | Default | Required | Description              |
+| ---- | --------- | ------- | -------- | ------------------------ |
+| show | `boolean` | `true`  | N        | Whether to show content. |
 
-## TabContent Slots
+## TabContent Snippets
 
-| Name | Description                |
-| ---- | -------------------------- |
-| -    | Content of the TabContent. |
+| Name     | Type      | Parameters | Description         |
+| -------- | --------- | ---------- | ------------------- |
+| children | `Snippet` | -          | TabContent content. |

doc/components/tabs/guide.md

@@ -1,14 +1,10 @@
 ## Tabs
 
-### 说明
-
 Tabs 组件内部使用了 Tab 组件，而 Tabs Props 中的 tab 全部透传给 Tab，用于配置 Tab 不同的样式。
 
-### 插槽
-
-Tabs Props 的 transition 默认为 true，此时 Tabs 主体内容切换带有过渡效果。而当 transition 为 false，或者 position 为 'l' 或 'r' 时，Tabs 主体内容将不会有过渡效果，可以通过 Svelte 提供的插槽传值，`let:`指令将当前激活的 Tab 索引值 active 暴露给插槽内部，再结合 TabContent 的 show 控制主体内容的显示与隐藏。通过暴露出的 active，你还可以自由使用其他方式控制主体区域内容的过渡效果。示例中展示了一种方式，请结合具体业务尝试其他切换效果。
+### Snippet
 
-Svelte 插槽传值可参考 [Svelte Slot](https://svelte.dev/docs#template-syntax-slot-slot-key-value)。
+Tabs Props 的 transition 默认为 true，此时 Tabs 主体内容切换带有过渡效果。而当 transition 为 false，或者 position 为 'l' 或 'r' 时，Tabs 主体内容将不会有过渡效果，可以通过 Svelte 提供的 [{#snippet ...}](https://svelte.dev/docs/svelte/snippet) 传入，注意此时 children 需要将当前激活的 Tab 索引值 `{ active }` 传入，暴露给 Snippet 内部，再结合 TabContent 的 show 控制主体内容的显示与隐藏。通过暴露出的 active，你还可以自由使用其他方式控制主体区域内容的过渡效果。示例中展示了一种方式，请结合具体业务尝试其他切换效果。
 
 ### 选项卡位置
 
@@ -18,13 +14,11 @@ Tabs 通过 position（t：上、b：下、l：左、r：右）决定选项卡
 
 ## Tab
 
-### 说明
-
-Tab 组件可以单独使用，通过绑定的 clicktab 事件，传递出当前激活选项卡的索引值。
+Tab 组件可以单独使用，通过绑定的 onclickTab 事件，传递出当前激活选项卡的索引值。
 
 ### labels
 
-此参数决定了 Tab 内部的选项卡内容，支持图标与文字自由搭配。数据类型为对象数组，内部对象由 text 和 icon 组成，而 icon 使用 Icon 组件渲染，具体参数请参考 Icon API。
+此参数决定了 Tab 内部的选项卡内容，支持图标与文字自由搭配。数据类型为对象数组，内部对象由 text 和 icon 组成，而 icon 使用 Icon 组件渲染，具体参数请参考 [Icon Props](https://stdf.design/#/components?nav=icon&tab=1)。
 
 ### 线性风格
 

doc/components/tabs/guide_en.md

@@ -1,46 +1,39 @@
 ## Tabs
 
-### Description
+The Tabs component internally uses the Tab component, and the tab in Tabs Props is fully passed through to Tab to configure different styles of Tab.
 
-The Tabs component internally uses the Tab component, and all tab props in the Tabs props are passed through to configure different styles for the Tab.
+### Snippet
 
-### Slots
+The transition in Tabs Props defaults to true, at which point the Tabs main content switches with transition effects. When transition is false, or position is 'l' or 'r', the Tabs main content will not have transition effects. It can be passed in through Svelte's [{#snippet ...}](https://svelte.dev/docs/svelte/snippet). Note that children needs to pass in the currently active Tab index value `{ active }` to expose it to the Snippet interior, and then combine with TabContent's show to control the display and hiding of the main content. Through the exposed active, you can also freely use other ways to control the transition effects of the main area content. The example shows one way, please try other switching effects in combination with specific business needs.
 
-When the `transition` property in the Tabs props is set to `true` (which is the default value), a transition effect is added when switching between Tabs. However, when `transition` is set to false, or when `position` is set to 'l' or 'r', there will be no transition effect on the Tab contents. In this case, the Svelte slot feature can be used to expose the active Tab index value to the internal contents of the slot using the `let:` directive. You can use TabContent's `show` property to control whether the main content area is displayed or hidden.
-By using the active index value exposed through the slot, you can also freely control the transition effects of the main content area in other ways. The example below shows one way to do this, but you can try other transition effects based on your specific business requirements.
+### Tab Position
 
-For more information on how to use Svelte slots, see [Svelte Slot](https://svelte.dev/docs#template-syntax-slot-slot-key-value).
-
-### Tab position
-
-The `position` property of Tabs determines the position of the Tabs (t: top, b: bottom, l: left, r: right), which affects the layout style of the `Tab` component. Horizontal and vertical layout styles are available, depending on the value of the `layout` property.
+Tabs determines the tab position through position (t: top, b: bottom, l: left, r: right), and this parameter also determines the layout mode of Tab within it (h: horizontal, v: vertical).
 
 ---
 
 ## Tab
 
-### Description
-
-The `Tab` component can be used on its own to expose the currently active tab index value through the `clicktab` event binding.
+The Tab component can be used independently, passing out the index value of the currently active tab through the bound onclickTab event.
 
 ### labels
 
-This property determines the content of the Tabs, and supports a combination of icons and text. The data type is an array of objects, where each object contains a `text` and an `icon` property. The `icon` property uses the `Icon` component to render, its specific parameters can be found in the Icon API.
+This parameter determines the tab content inside Tab, supporting free combination of icons and text. The data type is an array of objects, with internal objects consisting of text and icon, while icon is rendered using the Icon component. For specific parameters, please refer to [Icon Props](https://stdf.design/#/components?nav=icon&tab=1).
 
-### Linear style
+### Line Style
 
-When the `lineType` property of the `Tab` component is set to `true`, a linear style is used. However, it will not work when the layout is set to 'v' (vertical).
+When lineType in Tab props is true, Tab will use line style, but if the layout mode is v (vertical), the line style will not take effect.
 
-### Overflow mode
+### Overflow Mode
 
-Due to the limited horizontal space on mobile devices, when the layout is horizontal and the number of Tabs is large or dynamic, you can enable the overflow mode. In this case, the Tabs will automatically hide the overflowed Tabs and allow you to scroll to view them. When overflow mode is enabled, you can use `showNum` to control the number of Tabs displayed, and use `autoScroll` to control whether to enable automatic scrolling.
+Due to limited horizontal space on mobile devices, when using horizontal layout and the number of Tabs is large or dynamically uncertain, overflow mode can be enabled. At this time, Tabs will automatically hide overflowing Tabs, which can be viewed by sliding. After enabling overflow mode, you can control the number of displayed Tabs through `showNum`, and control whether to enable auto-scrolling through `autoScroll`.
 
-When overflow mode is enabled, the actual number of Tabs displayed in the visible area is `showNum+0.5`. This design hides the last Tab by half at the beginning, so that users can naturally realize that a Tab is hidden without being deliberately prompted, thus generating a sliding operation.
+In overflow mode, the actual number of Tabs displayed in the visible area is `showNum+0.5`. This design will initially hide half of the last Tab, so that users can naturally realize that Tabs are hidden without deliberate prompting, thus producing sliding operations.
 
-> Tip: If the Tab content width is too large, please reduce `showNum` appropriately to avoid hiding the Tab content overflow.
+> Tip: If the Tab content width is too large, please appropriately reduce `showNum` to prevent Tab content from being hidden due to overflow.
 
-### CSS injection
+### CSS Injection
 
-The Tab structure is relatively complex. In order to support more flexible customization, four places for injecting CSS are provided internally. The `injClass` property is applied to the outermost element of the Tab. The `tabInjClass` property is applied to the internal single tab. The `activeTabInjClass` property is applied to the currently active tab. And, the `activeInjClass` property is used to apply a specific style to the Tab indicator.
+The Tab structure is relatively complex. To support more flexible custom styles, four places are supported for CSS injection internally: injClass acts on the outermost element of Tab; tabInjClass acts on the internal single tab; activeTabInjClass acts on the currently active tab; activeInjClass acts on the Tab indicator.
 
-If the injected class does not take effect, add an "!" before the class name, similar to the [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier).
+If the injected class doesn't take effect, please add "!" before the injected class name. You can refer to [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier).

packages/stdf/components/tabs/Tab.svelte

@@ -39,8 +39,6 @@
 
 	const clickTabFun = i => {
 		active = i;
-		//派发Tab点击事件，i表示点击的Tab索引值，即labels索引值
-		// dispatch Tab click event,i represents the index value of the clicked Tab, that is, the index value of labels
 		onclickTab && onclickTab(i);
 	};
 	let tabW = $state(0);
@@ -95,12 +93,10 @@
 		></div>
 		<div class="relative flex whitespace-nowrap" style="width: {itemW * labels.length + 2}px;">
 			{#each labels as label, i}
-				<!-- svelte-ignore a11y_click_events_have_key_events -->
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div
-					class="shrink-0 cursor-pointer flex justify-center py-1 font-medium overflow-hidden {love
-						? 'text-lg'
-						: 'text-sm'} leading-6 {radiusObj[radius] || radiusObj.base} {tabInjClass} {i === active ? activeTabInjClass : ''}"
+				<button
+					class="shrink-0 flex justify-center py-1 font-medium overflow-hidden {love ? 'text-lg' : 'text-sm'} leading-6 {radiusObj[
+						radius
+					] || radiusObj.base} {tabInjClass} {i === active ? activeTabInjClass : ''}"
 					style="width: {itemW}px"
 					onclick={() => clickTabFun(i)}
 				>
@@ -112,7 +108,7 @@
 					{#if label.text}
 						<div class="transition-all {durationObj[duration] || durationObj.base}">{label.text}</div>
 					{/if}
-				</div>
+				</button>
 			{/each}
 		</div>
 	</div>
@@ -137,10 +133,8 @@
 		></div>
 		<div class="relative {layout === 'h' ? 'flex justify-between' : 'px-4 whitespace-nowrap'}">
 			{#each labels as label, i}
-				<!-- svelte-ignore a11y_click_events_have_key_events -->
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div
-					class="cursor-pointer flex-1 flex justify-center {layout === 'h' ? 'py-1' : 'py-2'} font-medium overflow-hidden {love
+				<button
+					class="flex-1 flex justify-center {layout === 'h' ? 'py-1' : 'py-2'} font-medium overflow-hidden {love
 						? 'text-lg'
 						: 'text-sm'} leading-6 {radiusObj[radius] || radiusObj.base} {tabInjClass} {i === active ? activeTabInjClass : ''}"
 					onclick={() => clickTabFun(i)}
@@ -153,7 +147,7 @@
 					{#if label.text}
 						<div class="transition-all {durationObj[duration] || durationObj.base}">{label.text}</div>
 					{/if}
-				</div>
+				</button>
 			{/each}
 		</div>
 	</div>

packages/stdf/components/tabs/Tabs.svelte

@@ -3,13 +3,10 @@
 
 	/** @typedef {import('../../index.d.ts').Tabs} TabsProps */
 	/** @type {TabsProps} */
-	let { tab = {}, duration = 'base', position = 't', transition = true, active = $bindable(0), onchange, children } = $props();
-
-	const clickTabFun = e => {
-		active = e.detail;
-		// Tab 点击时派发 Tabs的change事件，active表示激活的Tab索引值，即labels索引值
-		// Click Tab to dispatch the change event of Tabs, active represents the index value of the activated Tab, that is, the index value of labels
-		onchange && onchange(active);
+	let { tab = {}, duration = 'base', position = 't', active = $bindable(0), transition = true, onchange, children } = $props();
+	const clickTabFun = a => {
+		active = a;
+		onchange && onchange(a);
 	};
 	let width = $state(window.innerWidth);
 
@@ -24,64 +21,67 @@
 				class="transition-all relative flex {durationObj[duration] || durationObj.base}"
 				style="width: {tab.labels.length * width}px;left: -{active * width}px"
 			>
-				{#if children}{@render children()}{/if}
+				{#if children}{@render children({ active })}{/if}
 			</div>
 		</div>
-	{:else if position === 'b'}
+	{/if}
+	{#if position === 'b'}
 		<div class="overflow-hidden" bind:clientWidth={width}>
 			<div
 				class="transition-all relative flex {durationObj[duration] || durationObj.base}"
-				style="width:{tab.labels.length * width}px;left:-{active * width}px"
+				style="width:{tab.labels.length * width}px;left: -{active * width}px"
 			>
-				{#if children}{@render children()}{/if}
+				{#if children}{@render children({ active })}{/if}
 			</div>
 		</div>
 		<Tab {active} {...tab} onclickTab={clickTabFun} />
-	{:else if position === 'l'}
+	{/if}
+	{#if position === 'l'}
 		<div class="flex">
 			<div>
 				<Tab {active} {...tab} onclickTab={clickTabFun} layout="v" />
 			</div>
 			<div class="grow">
-				{#if children}{@render children()}{/if}
+				{#if children}{@render children({ active })}{/if}
 			</div>
 		</div>
-	{:else if position === 'r'}
+	{/if}
+	{#if position === 'r'}
 		<div class="flex">
 			<div class="grow">
-				{#if children}{@render children()}{/if}
+				{#if children}{@render children({ active })}{/if}
 			</div>
 			<div>
 				<Tab {active} {...tab} onclickTab={clickTabFun} layout="v" />
 			</div>
 		</div>
-	{:else}
-		<div>position params error!</div>
 	{/if}
-{:else if position === 't'}
+{/if}
+{#if position === 't'}
 	<Tab {active} {duration} {...tab} onclickTab={clickTabFun} />
-	{#if children}{@render children()}{/if}
-{:else if position === 'b'}
-	{#if children}{@render children()}{/if}
+	{#if children}{@render children({ active })}{/if}
+{/if}
+{#if position === 'b'}
+	{#if children}{@render children({ active })}{/if}
 	<Tab {active} {...tab} onclickTab={clickTabFun} />
-{:else if position === 'l'}
+{/if}
+{#if position === 'l'}
 	<div class="flex">
 		<div>
 			<Tab {active} {...tab} onclickTab={clickTabFun} layout="v" />
 		</div>
 		<div class="grow">
-			{#if children}{@render children()}{/if}
+			{#if children}{@render children({ active })}{/if}
 		</div>
 	</div>
-{:else if position === 'r'}
+{/if}
+{#if position === 'r'}
 	<div class="flex">
 		<div class="grow">
-			{#if children}{@render children()}{/if}
+			{#if children}{@render children({ active })}{/if}
 		</div>
 		<div>
 			<Tab {active} {...tab} onclickTab={clickTabFun} layout="v" />
 		</div>
 	</div>
-{:else}
-	<div>position params error!</div>
 {/if}