[stdf]Update NavBar compoent, demo and documents.

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

@@ -7,67 +7,61 @@
 	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 = $state(false);
+	let visible2 = $state(false);
+	let rightIndex = $state(0);
+	let visible3 = $state(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="Use Icon on the right side" rights={icons1} />
+	<NavBar title="Click on the left" onclickLeft={() => (visible1 = true)} />
+	<Toast bind:visible={visible1} message="Clicked on the left!" />
 	<NavBar
-		title="Click right"
+		title="Click on the right"
 		rights={icons2}
-		on:clickright={e => {
+		onclickRight={index => {
 			visible2 = true;
-			rightIndex = e.detail;
+			rightIndex = index;
 		}}
 	/>
-	<Toast bind:visible={visible2} message={`Click the right icon index value is ${rightIndex}。`} />
-
-	<NavBar
-		title="There is no dividing line between the left side and the bottom, and the text is too long"
-		left="none"
-		line={false}
-		rights={icons3}
-	/>
-
-	<NavBar title="Customize the background color by injClass" injClass="bg-[wheat] dark:bg-extend0" />
-
-	<NavBar titleSlot>
-		<div slot="title" class="text-[red] dark:text-extend1">Customize text colors by slot</div>
+	<Toast bind:visible={visible2} message={`The index of the clicked right icon is ${rightIndex}.`} />
+	<NavBar title="No left and bottom dividers, long text" left={null} line={false} rights={icons3} />
+	<NavBar title="Custom background color by injClass" injClass="bg-[wheat] dark:bg-extend0" />
+	<NavBar>
+		{#snippet titleChild()}
+			<div class="text-[red] dark:text-extend1">Custom text color by Snippet</div>
+		{/snippet}
 	</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>
+		{#snippet titleChild()}
+			<div class="flex flex-col justify-around text-xs h-12">
+				<div class="text-sm">title Snippet renders</div>
+				<div>right Snippet renders</div>
+			</div>
+		{/snippet}
+		{#snippet rightChild()}
+			<div>
+				<button class="h-12 w-12 text-center text-primary dark:text-dark cursor-pointer" onclick={() => (visible3 = true)}>Hello</button>
+			</div>
+		{/snippet}
 	</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>
+	<Toast bind:visible={visible3} message="Clicked on the right Snippet content!" />
+	<NavBar title="Love version" love rights={icons4} />
+	<NavBar injClass="!bg-transparent" line={false}>
+		{#snippet leftChild()}
+			<div 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>
+		{/snippet}
+		{#snippet titleChild()}
+			<div class="px-3 h-8 my-2 leading-8 text-sm bg-white dark:bg-black/50 rounded-full">custom styles by injClass and Snippet</div>
+		{/snippet}
+		{#snippet rightChild()}
+			<div 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>
+		{/snippet}
 	</NavBar>
 </div>

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

@@ -7,61 +7,61 @@
 	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 = $state(false);
+	let visible2 = $state(false);
+	let rightIndex = $state(0);
+	let visible3 = $state(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)} />
+	<NavBar title="点击左侧" onclickLeft={() => (visible1 = true)} />
 	<Toast bind:visible={visible1} message="点击了左侧！" />
-	<!-- 点击右侧 -->
 	<NavBar
 		title="点击右侧"
 		rights={icons2}
-		on:clickright={e => {
+		onclickRight={index => {
 			visible2 = true;
-			rightIndex = e.detail;
+			rightIndex = index;
 		}}
 	/>
 	<Toast bind:visible={visible2} message={`点击的右侧图标索引值是 ${rightIndex}。`} />
-	<!-- 无底部分割线，文字过长 -->
-	<NavBar title="无左侧与底分割线，文字过长长长长长长长" left="none" line={false} rights={icons3} />
-	<!-- 自定义背景颜色 -->
+	<NavBar title="无左侧与底分割线，文字过长长长长长长长" left={null} line={false} rights={icons3} />
 	<NavBar title="自定义背景颜色 by injClass" injClass="bg-[wheat] dark:bg-extend0" />
-	<!-- 自定义文字颜色 -->
-	<NavBar titleSlot>
-		<div slot="title" class="text-[red] dark:text-extend1">自定义文字颜色 by slot</div>
+	<NavBar>
+		{#snippet titleChild()}
+			<div class="text-[red] dark:text-extend1">自定义文字颜色 by Snippet</div>
+		{/snippet}
 	</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>
+		{#snippet titleChild()}
+			<div class="flex flex-col justify-around text-xs h-12">
+				<div class="text-sm">title 插槽渲染标题区域</div>
+				<div>right 插槽渲染右侧且可点击</div>
+			</div>
+		{/snippet}
+		{#snippet rightChild()}
+			<div>
+				<button class="h-12 w-12 text-center text-primary dark:text-dark cursor-pointer" onclick={() => (visible3 = true)}>Hello</button>
+			</div>
+		{/snippet}
 	</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 injClass="!bg-transparent" line={false}>
+		{#snippet leftChild()}
+			<div 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>
+		{/snippet}
+		{#snippet titleChild()}
+			<div class="px-3 h-8 my-2 leading-8 text-sm bg-white dark:bg-black/50 rounded-full">injClass 与 Snippet 结合自定义样式</div>
+		{/snippet}
+		{#snippet rightChild()}
+			<div 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>
+		{/snippet}
 	</NavBar>
 </div>

doc/components/navBar/api.md

@@ -1,29 +1,25 @@
 ## NavBar Props
 
-| 属性      | 类型    | 默认值                  | 可选值              | 必传 | 说明                                                                |
-| --------- | ------- | ----------------------- | ------------------- | ---- | ------------------------------------------------------------------- |
-| title     | String  | 当前语言的 navBar.title | -                   | N    | 标题。                                                              |
-| titleSlot | Boolean | false                   | true/false          | N    | title 是否使用插槽。                                                |
-| left      | String  | 'back'                  | 'back'/'customIcon' | N    | 左侧内容，默认为 'back' 返回图标，'customIcon' 时由 leftIcon 决定。 |
-| leftIcon  | Object  | {}                      | 参考 Icon Props     | N    | 左侧内容为 'customIcon' 时，自定义图标。                            |
-| leftSlot  | Boolean | false                   | true/false          | N    | left 是否使用插槽。                                                 |
-| rights    | Array   | []                      | Icon Props Array    | N    | 右侧内容，Icon Props 组成的数组，建议不超过三个。                   |
-| rightSlot | Boolean | false                   | true/false          | N    | rights 是否使用插槽。                                               |
-| line      | Boolean | true                    | true/false          | N    | 是否显示底部分割线。                                                |
-| injClass  | String  | ''                      | Class               | N    | 注入 CSS 名称。                                                     |
-| love      | Boolean | false                   | true/false          | N    | 是否开启关爱版。                                                    |
+| 名称     | 类型                 | 默认值                  | 必传 | 说明                                                                                                                     |
+| -------- | -------------------- | ----------------------- | ---- | ------------------------------------------------------------------------------------------------------------------------ |
+| title    | `string`             | 当前语言的 navBar.title | N    | 标题。                                                                                                                   |
+| left     | `'back'\|null\|Icon` | `'back'`                | N    | 左侧内容，`'back'` 返回图标，`null` 无内容，否则渲染图标 [Icon Props](https://stdf.design/#/components?nav=icon&tab=1)。 |
+| rights   | `Icon[]`             | `[]`                    | N    | 右侧内容，[Icon Props](https://stdf.design/#/components?nav=icon&tab=1) 组成的数组，建议不超过三个。                     |
+| line     | `boolean`            | `true`                  | N    | 是否显示底部分割线。                                                                                                     |
+| injClass | `string`             | `''`                    | N    | 注入 CSS 名称。                                                                                                          |
+| love     | `boolean`            | `false`                 | N    | 是否开启关爱版。                                                                                                         |
 
 ## NavBar Events
 
-| 事件       | 参数                                                | 说明               |
-| ---------- | --------------------------------------------------- | ------------------ |
-| clickleft  | -                                                   | 点击左侧图标触发。 |
-| clickright | event：事件对象，其中 detail 表示点击图标的索引值。 | 点击右侧图标触发。 |
+| 名称         | 类型                      | 参数                   | 说明               |
+| ------------ | ------------------------- | ---------------------- | ------------------ |
+| onclickLeft  | `() => void`              | -                      | 点击左侧图标触发。 |
+| onclickRight | `(index: number) => void` | index - 点击图标索引值 | 点击右侧图标触发。 |
 
-## NavBar Slots
+## NavBar Snippets
 
-| 名称  | 说明                               |
-| ----- | ---------------------------------- |
-| title | titleSlot 为 true 时标题区域内容。 |
-| left  | leftSlot 为 true 时左侧内容。      |
-| right | rightSlot 为 true 时右侧内容。     |
+| 名称       | 说明                 |
+| ---------- | -------------------- |
+| titleChild | 传入时渲染标题区域。 |
+| leftChild  | 传入时渲染左侧区域。 |
+| rightChild | 传入时渲染右侧区域。 |

doc/components/navBar/api_en.md

@@ -1,29 +1,25 @@
 ## NavBar Props
 
-| Prop Name | Type    | Default Value                        | Available Values    | Required | Description                                                                                          |
-| --------- | ------- | ------------------------------------ | ------------------- | -------- | ---------------------------------------------------------------------------------------------------- |
-| title     | String  | navBar.title of the current language | -                   | Y        | The page title.                                                                                      |
-| titleSlot | Boolean | false                                | true/false          | N        | Whether to use slot for the title area.                                                              |
-| left      | String  | 'back'                               | 'back'/'customIcon' | N        | The content of the left side, which is 'back' by default. Choose 'customIcon' to set leftIcon value. |
-| leftIcon  | Object  | {}                                   | Refer to Icon Props | N        | Custom icon for the left side, used when left is set to 'customIcon'.                                |
-| leftSlot  | Boolean | false                                | true/false          | N        | Whether to use slot for the left content.                                                            |
-| rights    | Array   | []                                   | Icon Props Array    | N        | The content of the right side, which is an array of Icon Props, suggested to not exceed three.       |
-| rightSlot | Boolean | false                                | true/false          | N        | Whether to use slot for the right content.                                                           |
-| line      | Boolean | true                                 | true/false          | N        | Whether to display the bottom divider.                                                               |
-| injClass  | String  | ''                                   | Class               | N        | The injected CSS class name.                                                                         |
-| love      | Boolean | false                                | true/false          | N        | Whether to enable the loving version.                                                                |
+| Name     | Type                 | Default                       | Required | Description                                                                                                                                   |
+| -------- | -------------------- | ----------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
+| title    | `string`             | Current language navBar.title | N        | Title text.                                                                                                                                   |
+| left     | `'back'\|null\|Icon` | `'back'`                      | N        | Left content, `'back'` for back icon, `null` for no content, otherwise renders [Icon Props](https://stdf.design/#/components?nav=icon&tab=1). |
+| rights   | `Icon[]`             | `[]`                          | N        | Right content array of [Icon Props](https://stdf.design/#/components?nav=icon&tab=1), recommend no more than 3 icons.                         |
+| line     | `boolean`            | `true`                        | N        | Whether to show bottom divider line.                                                                                                          |
+| injClass | `string`             | `''`                          | N        | Inject CSS class name.                                                                                                                        |
+| love     | `boolean`            | `false`                       | N        | Whether to enable care version.                                                                                                               |
 
 ## NavBar Events
 
-| Event Name | Parameters                                                           | Description                               |
-| ---------- | -------------------------------------------------------------------- | ----------------------------------------- |
-| clickleft  | -                                                                    | Triggered when the left icon is clicked.  |
-| clickright | event: event object, detail represents the index of the clicked icon | Triggered when the right icon is clicked. |
+| Name         | Type                      | Parameters                 | Description                         |
+| ------------ | ------------------------- | -------------------------- | ----------------------------------- |
+| onclickLeft  | `() => void`              | -                          | Triggered when clicking left icon.  |
+| onclickRight | `(index: number) => void` | index - Clicked icon index | Triggered when clicking right icon. |
 
-## NavBar Slots
+## NavBar Snippets
 
-| Slot Name | Description                                                    |
-| --------- | -------------------------------------------------------------- |
-| title     | The content of the title area when titleSlot is set to 'true'. |
-| left      | The content of the left side when leftSlot is set to 'true'.   |
-| right     | The content of the right side when rightSlot is set to 'true'. |
+| Name       | Description                     |
+| ---------- | ------------------------------- |
+| titleChild | Renders title area when passed. |
+| leftChild  | Renders left area when passed.  |
+| rightChild | Renders right area when passed. |

doc/components/navBar/guide.md

@@ -6,6 +6,6 @@
 
 ## 拓展
 
-现有参数已经能满足绝大部分业务场景，比如根据页面上下滚动实时改变 NavBar 背景透明度与文字颜色这种常用场景，就可以通过 injClass 实现。如果还不满足你的需求，结合 slot 与 injClass，理论上 NavBar 可以定制为你想要的任何样式，甚至不仅仅把它作为顶部的导航栏来使用。
+现有参数已经能满足绝大部分业务场景，比如根据页面上下滚动实时改变 NavBar 背景透明度与文字颜色这种常用场景，就可以通过 injClass 实现。如果还不满足你的需求，结合 Snippet 与 injClass，理论上 NavBar 可以定制为你想要的任何样式，甚至不仅仅把它作为顶部的导航栏来使用。
 
 需要提醒的是，此处的拓展只是提供一种方法与思路，过多的自定义可能已经比自己写一个组件显得更加复杂，反而失去了使用组件库的意义。

doc/components/navBar/guide_en.md

@@ -6,6 +6,6 @@ On mobile devices, the NavBar is generally used to display the current page and
 
 ## Extension
 
-The existing parameters are sufficient to meet most business scenarios. For example, the common scene of changing the transparency of the NavBar background and text color based on the scrolling of the page can be achieved through injClass. If you are still not satisfied with your needs, combining slot and injClass, the NavBar can be customized to any style you want, not only for use as a top navigation bar.
+The existing parameters are sufficient to meet most business scenarios. For example, the common scene of changing the transparency of the NavBar background and text color based on the scrolling of the page can be achieved through injClass. If you are still not satisfied with your needs, combining Snippet and injClass, theoretically the NavBar can be customized to any style you want, not only for use as a top navigation bar.
 
 It should be noted that this extension only provides a method and idea. Too much customization may already be more complex than writing a component yourself, and may lose the meaning of using a component library.

packages/stdf/components/navBar/NavBar.svelte

@@ -30,28 +30,24 @@
 </script>
 
 <div
-	class={`h-12 w-full border-black/10 dark:border-white/10 flex justify-between leading-[3rem] ${
-		line ? 'border-b ' : ' '
-	}bg-white dark:bg-black/50${love ? ' text-xl' : ''}${injClass === '' ? '' : ' ' + injClass}`}
+	class="h-12 w-full border-black/10 dark:border-white/10 flex justify-between leading-[3rem] {line
+		? 'border-b '
+		: ' '}bg-white dark:bg-black/50{love ? ' text-xl' : ''}{injClass === '' ? '' : ' ' + injClass}"
 >
 	{#if leftChild}
 		{@render leftChild()}
 	{:else if left === 'back'}
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div class="text-center lining-nums min-w-[3rem] active:opacity-80" on:click={() => onclickLeft && onclickLeft()}>
+		<button class="text-center lining-nums min-w-[3rem] active:opacity-80" onclick={() => onclickLeft && onclickLeft()}>
 			<Icon name="ri-arrow-left-s-line" size={iconSize} top={-2} />
-		</div>
-	{:else if left === 'none'}
+		</button>
+	{:else if left === null}
 		<div class="w-4 h-full"></div>
 	{:else}
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div class="text-center lining-nums min-w-[3rem] active:opacity-80" on:click={() => onclickLeft && onclickLeft()}>
+		<button class="text-center lining-nums min-w-[3rem] active:opacity-80" onclick={() => onclickLeft && onclickLeft()}>
 			<Icon {...left} />
-		</div>
+		</button>
 	{/if}
-	<div class="flex-1 truncate" class:pl-2={left === 'none'}>
+	<div class="flex-1 truncate" class:pl-2={left === null}>
 		{#if titleChild}
 			{@render titleChild()}
 		{:else}
@@ -63,14 +59,10 @@
 			{@render rightChild()}
 		{:else if rights.length > 0}
 			{#each rights as icon, i}
-				<!-- svelte-ignore a11y_click_events_have_key_events -->
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div class="w-12 text-center active:opacity-80" on:click={() => onclickRight && onclickRight(i)}>
+				<button class="w-12 text-center active:opacity-80" onclick={() => onclickRight && onclickRight(i)}>
 					<Icon {...icon} size={iconSize} />
-				</div>
+				</button>
 			{/each}
-		{:else}
-			<!-- none -->
-		{/if}
+		{:else}{/if}
 	</div>
 </div>