tmui-cli 2.0.1 → 2.0.3

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/257/274/350/210/252/347/273/204/344/273/266//346/220/234/347/264/242/346/240/217 xSearch.md"

@@ -0,0 +1,137 @@
+# 搜索栏 xSearch
+
+## 介绍
+
+可定制化强
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-search/x-search.uvue
+```
+
+## 使用
+
+```ts
+<x-search></x-search>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| round | `输入框圆角`<br> | `string` | `"8"` |
+| showClear | `是否显示清除图标`<br> | `boolean` | `true` |
+| modelValue | `双向绑定的输入值`<br> | `string` | `""` |
+| placeholder | `输入框提示语`<br> | `string` | `""` |
+| iconColor | `搜索图标和清除图标的颜色`<br> | `string` | `"#bfbfbf"` |
+| color | `搜索条背景`<br> | `string` | `"#ffffff"` |
+| cancelFontColor | `取消的文本色`<br> | `string` | `"#000000"` |
+| darkColor | `暗黑模式下的搜索条背景，空值取：sheetDarkColor`<br> | `string` | `""` |
+| inputBgColor | `输入框的背景`<br> | `string` | `"#f5f5f5"` |
+| fontColor | `输入框的字体颜色`<br> | `string` | `"#333333"` |
+| border | `边框style: [width, style, color]`<br> | `Array` | `(): string[] => [] as string[]` |
+| darkBorderColor | `暗黑模式下边框颜色`<br> | `string` | `""` |
+| placeholderStyle | `输入框的提示样式`<br> | `string` | `""` |
+| showCancel | `是否显示右侧取消按钮`<br> | `boolean` | `true` |
+| disabled | `禁用输入选择`<br> | `boolean` | `false` |
+| autoFocus | `自动获得焦点`<br> | `boolean` | `false` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| cancel | `-` | 取消时触发 |
+| clear | `-` | 清空时触发 |
+| rightClick | `-` | 点击右侧文本时触发 |
+| confirm | `-` | 输入法确认搜索时触发 |
+| input | `-` | 输入时触发 |
+| update:modelValue | `-` | 等同 v-model |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| left | `左插槽` | - |
+| inputLeft | `-` | - |
+| inputRight | `-` | - |
+| cancel | `-` | - |
+| right | `-` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/daohang/search
+```
+
+## 示例源码
+
+```vue
+<template>
+	<!-- #ifdef MP-WEIXIN -->
+	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
+		<navigation-bar :background-color="xThemeConfigNavBgColor"
+			:front-color="xThemeConfigNavFontColor"></navigation-bar>
+	</page-meta>
+	<!-- #endif -->
+
+	<x-sheet :round="['0']" :padding="['16','0']" :margin="['0','0','0','16']">
+		<x-search v-model="inputval"></x-search>
+		<x-text>{{inputval}}</x-text>
+	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">搜索栏 xSearch</x-text>
+		<x-text color="#999999">样式可自己完全定义。如果还不满足建议修改源码</x-text>
+	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b">复杂的布局可通过插槽自定义</x-text>
+	</x-sheet>
+	<x-sheet :round="['0']" :padding="['16','0']" :margin="['0','0','0','16']">
+		<x-search right-text="取消" round="64" :show-clear="false">
+			<template v-slot:left>
+				<view class="flex flex-row flex-row-center-center">
+					<x-text class="mr-5 text-size-m">江西省</x-text>
+					<x-icon class="mr-5" color="#bfbfbf" name="arrow-down-s-line" font-size="16"></x-icon>
+				</view>
+			</template>
+			<template v-slot:inputLeft>
+				<x-icon style="margin-left:12px;" color="primary" name="qr-scan-2-line" font-size="16"></x-icon>
+			</template>
+			<template v-slot:inputRight>
+				<x-button class="mr-2 mt-2" round="24" size="small" height="34" width="62">搜索</x-button>
+			</template>
+		</x-search>
+	</x-sheet>
+
+</template>
+
+<script setup lang="ts">
+	import { ref } from 'vue'
+	const inputval = ref("")
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/257/274/350/210/252/347/273/204/344/273/266//346/227/266/351/227/264/345/221/250 xWeekbar.md"

@@ -0,0 +1,170 @@
+# 时间周 xWeekbar
+
+## 介绍
+
+样式丰富,非常精美,能够适应不同设计要求.
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-weekbar/x-weekbar.uvue
+```
+
+## 使用
+
+```ts
+<x-weekbar></x-weekbar>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| modelValue | `同步受控当前选中日期，空时不会自动选中。`<br> | `string` | `""` |
+| startDate | `开始的日期,提供时，请提供完整到秒的格式`<br> | `string` | `"1900-1-1 00:00:00"` |
+| endDate | `结束的日期,提供时，请提供完整到秒的格式`<br> | `string` | `"2100-1-1 59:59:59"` |
+| format | `格式展示在组件上的日期.`<br> | `string` | `"DD"` |
+| cn | `周上面显示的中文名称.'一', '二', '三', '四', '五', '六', '日'`<br>`由于有属性seekDay的原因这里的顺序你不允许自己排列，你只能按照0-6的顺序来排列。即周一至周日，内部会自动再排列以满足seekDay的值。`<br> | `string[]` | `() : string[] => [] as string[]` |
+| seekDay | `你当前的一周的第一天的索引值是几：0: 周一，1: 周二，2: 周三，3: 周四，4: 周五，5: 周六，6: 周日`<br> | `number` | `0` |
+| color | `背景`<br> | `string` | `"white"` |
+| darkColor | `暗黑时的背景,如果不提供使用sheet暗黑背景`<br> | `string` | `""` |
+| fontColor | `字号颜色`<br> | `string` | `"#333333"` |
+| fontSize | `字号颜色`<br> | `string` | `"14"` |
+| fontDarkColor | `暗黑时的字号颜色`<br> | `string` | `"#fbfbfb"` |
+| fontActiveColor | `激活时的字号颜色,不区分暗黑`<br> | `string` | `"white"` |
+| mode | `选中的样式.`<br>`rect和circular,none三种`<br> | `string` | `"rect"` |
+| rectRound | `mode为rect时的选中背景圆角`<br> | `string` | `"5"` |
+| round | `组件圆角`<br> | `string` | `"0"` |
+| activeBgColor | `激活时的背景,不区分暗黑,不填充默认是全局主题色`<br> | `string` | `""` |
+| topHeight | `上部分标题的高`<br> | `string` | `"32"` |
+| bottomHeight | `下部分日期的高.`<br> | `string` | `"42"` |
+| padding | `左右,上下的间隙`<br> | `string[]` | `() : string[] => ['4', '8'] as string[]` |
+| showAction | `显示左右按钮切换`<br> | `boolean` | `true` |
+| actionIcon | `切换按钮的图标`<br> | `string` | `'arrow-left-s-line'` |
+| actionSize | `操作栏的图标大小`<br> | `string` | `'24'` |
+| actionColor | `操作栏的图标颜色`<br> | `string` | `'#bebebe'` |
+| actionDarkColor | `操作栏的图标暗黑颜色`<br> | `string` | `'#bebebe'` |
+| emptyValueSelected | `当前modelValue为空时,这里设置为false时,默认进来`<br>`不会选中当前日期.`<br> | `boolean` | `true` |
+| dateStatus | `给日期设定状态类型为：xCalendarDateStyleStatusProps`<br> | `xCalendarDateStyleStatusType[]` | `():xCalendarDateStyleStatusType[] => [] as xCalendarDateStyleStatusType[]` |
+| disabled | `是否禁用用户左右滑动切换日期`<br> | `boolean` | `false` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| change | `date: string<br>` | 时间选中时触发 |
+| swiperChange | `dates: string[]<br>` | 时间周切换时触发，比如滑动切换，切换周时触发 |
+| update:modelValue | `date: string<br>` | 等同v-model |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| left | `左边操作栏按钮` | - |
+| right | `右边操作栏按钮` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/daohang/weekbar
+```
+
+## 示例源码
+
+```vue
+<template>
+	<!-- #ifdef MP-WEIXIN -->
+	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
+		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
+	</page-meta>
+	<!-- #endif -->
+		<x-sheet :margin="['0']" :round="['0']">
+			<x-text font-size="18" class=" text-weight-b mb-8">时间周 xWeekbar</x-text>
+			<x-text color="#999999" >
+				样式丰富,非常精美,能够适应不同设计要求.
+			</x-text>
+		</x-sheet>
+		<x-weekbar :date-status="dateStatus" :start-date="startDate" :end-date="endDate" v-model="nowDate" :seekDay="6" ></x-weekbar>
+		<x-sheet :margin="['0','8','0','0']" :round="['0']">
+			<x-text font-size="18" class=" text-weight-b ">无操作栏及圆模式</x-text>
+		</x-sheet>
+		<x-weekbar :showAction="false" mode="circular" :padding="['0','4']"></x-weekbar>
+		<x-sheet :margin="['0','8','0','0']" :round="['0']">
+			<x-text font-size="18" class=" text-weight-b ">无背景模式</x-text>
+		</x-sheet>
+		<x-weekbar :showAction="false" color="transparent" fontActiveColor="primary" mode="none" :padding="['0','0']"></x-weekbar>
+		<x-sheet :margin="['0']" :round="['0']">
+			<x-text font-size="18" class=" text-weight-b ">个性化</x-text>
+		</x-sheet>
+		<x-weekbar :showAction="false" 
+		color="#fff60a" 
+		fontDarkColor="#000000"
+		darkColor="#fff60a" activeBgColor="#000000" mode="circular" :padding="['0','4']"></x-weekbar>
+		<x-sheet :margin="['0']" :round="['0']">
+			<x-text font-size="18" class=" text-weight-b ">个性化(默认不选中)</x-text>
+		</x-sheet>
+		<x-weekbar
+		actionIcon="arrow-left-circle-line"
+		rectRound="8"
+		color="error" 
+		darkColor="error" 
+		fontColor="rgba(255,255,255,0.7)" 
+		fontDarkColor="rgba(255,255,255,0.8)" 
+		activeBgColor="#6b0902" 
+		mode="rect" 
+		actionDarkColor="rgba(255,255,255,0.4)"
+		actionColor="rgba(255,255,255,0.5)"
+		bottomHeight="50"
+		topHeight="32"
+		:padding="['4','8']"
+		:emptyValueSelected="false"
+		>
+		</x-weekbar>
+		<view style="height: 50px;"></view>
+</template>
+
+<script setup>
+	import type { xCalendarDateStyleStatusType } from "@/uni_modules/tmx-ui"
+const nowDate = ref("2025-9-24")
+const startDate = ref('2025-9-22')
+const endDate = ref('2025-9-25')
+
+const dateStatus = ref<xCalendarDateStyleStatusType[]>([{
+		between: {
+			start: "2025-9-25",
+			end: "2025-9-30",
+			color: "red",
+			notDate: ['2024-2-20'],
+		},
+		date: [
+			{ date: '2025-9-21', color: 'green' },
+		]
+	} as xCalendarDateStyleStatusType])
+
+</script>
+
+<style>
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/257/274/350/210/252/347/273/204/344/273/266//346/240/207/347/255/276/345/257/274/350/210/252 xTabs.md"

@@ -0,0 +1,193 @@
+# 标签导航 xTabs
+
+## 介绍
+
+标签导航，常用于页面顶部导航时使用，角标，数字角标功能。如果使用了活动文字大小与未选中不一样的大小，那么要设定itemwidth
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-tabs/x-tabs.uvue
+```
+
+## 使用
+
+```ts
+<x-tabs></x-tabs>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| round | `圆角`<br> | `string` | `"0"` |
+| width | `宽`<br> | `string` | `"auto"` |
+| lineWidth | `指示线条的宽，单位为px，注意不是rpx单位的数字。`<br> | `number` | `18` |
+| height | `高是必填，不可为auto。`<br> | `string` | `"44"` |
+| color | `背景`<br> | `string` | `"white"` |
+| darkColor | `暗黑时的背景,如果不填写读取sheetDark`<br> | `string` | `""` |
+| activeTitleColor | `文本激活时的颜色 ，空值默认取全局主题色`<br> | `string` | `""` |
+| titleColor | `文本默认颜色`<br> | `string` | `"#888888"` |
+| darkTitleColor | `文本默认的暗黑颜色，如果不填写取白色。`<br> | `string` | `"#cacaca"` |
+| lineColor | `底部线条激活时的颜色，空值默认取全局主题色`<br> | `string` | `""` |
+| lineGradient | `渐变背景`<br>`数组格式如下`<br>`[方向:top,bottom,left,right,自定义值例:45deg,颜色1:,颜色2]`<br>`例:['left','black','white']`<br>`如提供，暗黑及主题失效。`<br> | `Array` | `():string[] => [] as string[]` |
+| lineHeight | `行高`<br> | `string` | `"2px"` |
+| lineFull | `底部的线条是与项目等宽还是固定默认的小宽度。`<br> | `boolean` | `false` |
+| showLine | `是否显示底部的线条`<br> | `boolean` | `true` |
+| list | ``<br> | `Array` | `():TABS_ITEM_INFO[] => [] as TABS_ITEM_INFO[]` |
+| modelValue | `id值，如果数据没有提供id属性`<br>`等同v-model`<br> | `union` | `"0"` |
+| fontSize | `标题字号`<br> | `string` | `"16"` |
+| activeFontSize | `激活时的标题字号`<br> | `string` | `"16"` |
+| itemWidth | `项目宽度，默认是auto，即自动根据标题内容自动撑开宽度。`<br>`如果你想均分（适合不超过一行），比如你有5个标签，那么你就可以设置为"20%"`<br> | `string` | `"auto"` |
+| titlePadding | `标题的padding是左右的间隙。`<br> | `string` | `"12px"` |
+| isItemCenter | `是否让内容居中显示,`<br>`默认为false,如果你开启了项目超过了宽出现滚动时,会自动向左对齐以便`<br>`让内容能滚动,但如果内容少于可滚动,内容会自动居中.`<br> | `boolean` | `false` |
+| itemActiveStyle | `激活时的项目自定样式`<br> | `string` | `""` |
+| itemStyle | `未激活时的项目自定样式`<br> | `string` | `""` |
+| textActiveStyle | `激活时文本样式`<br> | `string` | `""` |
+| textStyle | `未激活时的文本样式`<br> | `string` | `""` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| change | `item: TABS_ITEM<br>index: union<br>` | 单元格被点击 |
+| update:modelValue | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `tabs循环节点插槽,插件名称是tabs_+item.id,使用时请务必通过` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/daohang/tabs
+```
+
+## 示例源码
+
+```vue
+<template>
+	<!-- #ifdef MP-WEIXIN -->
+	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
+		<navigation-bar :background-color="xThemeConfigNavBgColor"
+			:front-color="xThemeConfigNavFontColor"></navigation-bar>
+	</page-meta>
+	<!-- #endif -->
+
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">标签导航 Tabs</x-text>
+		<x-text color="#999999">样式定义灵活，有效应对各种场景。</x-text>
+	</x-sheet>
+
+	<x-sheet>
+		<x-tabs item-width="33.3%" :list="list"></x-tabs>
+	</x-sheet>
+	<x-sticky>
+		<template v-slot:default="{status}">
+			<x-tabs activeFontSize="18" :is-item-center="true" v-model="activeId" width="100%" :list="list3"></x-tabs>
+		</template>
+	</x-sticky>
+	<view style="height:20px"></view>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">动态插槽定制</x-text>
+		<x-tabs item-width="33.3%" :list="list" :showLine="false" item-active-style="background-color:rgb(5, 121, 255)"
+			item-style="background-color:transparent">
+			<template v-slot:default="{item,active}">
+				<x-text :color="active?'white':'rgb(5, 121, 255)'"
+					:style="active?'font-weight:bold;':''">{{item.title}}</x-text>
+			</template>
+		</x-tabs>
+	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b">定义样式</x-text>
+	</x-sheet>
+	<x-sheet>
+		<x-tabs round="32" color="black" dark-color="black" title-color="rgba(255,255,255,0.6)"
+			active-title-color="yellow" item-width="33.3%" :list="list"></x-tabs>
+	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b">定义线条，角标等</x-text>
+	</x-sheet>
+	<x-sheet :padding="['0']" :loading="loadingData">
+		<x-tabs :line-gradient="['right','#0579ff','#7a00c6']" height="44" v-model="activeId2" :lineFull="true"
+			itemWidth="33.3%" :list="list2"></x-tabs>
+	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b">过多标签，自动排列，并位移项目</x-text>
+	</x-sheet>
+	<x-sheet>
+		<x-tabs v-model="activeId" :list="list3"></x-tabs>
+		<view style="height: 600px;" class="mt-24">
+			<x-button :block="true" @click="activeId='3'">变量控制切换{{activeId}}</x-button>
+		</view>
+	</x-sheet>
+
+</template>
+
+<script setup>
+	import type { TABS_ITEM_INFO, TABS_ITEM } from "@/uni_modules/tmx-ui"
+	const list = ref<TABS_ITEM_INFO[]>([
+		{ title: "全部" } as TABS_ITEM_INFO,
+		{ title: "已完成" } as TABS_ITEM_INFO,
+		{ title: "已删除" } as TABS_ITEM_INFO
+	])
+	const list2 = ref<TABS_ITEM_INFO[]>([])
+	const list3 = ref<TABS_ITEM_INFO[]>([
+		{ title: "全部" } as TABS_ITEM_INFO,
+		{ title: "被禁用", disabled: true } as TABS_ITEM_INFO,
+		{ title: "已删除" } as TABS_ITEM_INFO,
+		{ title: "审核中" } as TABS_ITEM_INFO,
+		{ title: "审核失败" } as TABS_ITEM_INFO,
+		{ title: "售后中" } as TABS_ITEM_INFO,
+		{ title: "已处理已处理" } as TABS_ITEM_INFO,
+		{ title: "已处理2" } as TABS_ITEM_INFO,
+		{ title: "已已处理处理3" } as TABS_ITEM_INFO,
+		{ title: "已已处理处理4" } as TABS_ITEM_INFO,
+		{ title: "已处理5" } as TABS_ITEM_INFO,
+		{ title: "已处理8" } as TABS_ITEM_INFO,
+	])
+	const activeId = ref<string>("2")
+	const activeId2 = ref<string>("-1")
+	const loadingData = ref<boolean>(true)
+
+	onReady(() => {
+		/** 下面是模拟数据异步加载。 */
+		activeId2.value = "1"
+		setTimeout(function () {
+			list2.value = [
+				{ title: "全部" } as TABS_ITEM_INFO,
+				{ title: "已完成", dotType: 'dot' } as TABS_ITEM_INFO,
+				{ title: "已删除", dotType: 'label', dotText: '36' } as TABS_ITEM_INFO,
+			] as TABS_ITEM_INFO[]
+			loadingData.value = false
+		}, 1500);
+	})
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/257/274/350/210/252/347/273/204/344/273/266//346/240/207/351/242/230/345/257/274/350/210/252 xNavbar.md"

@@ -0,0 +1,161 @@
+# 标题导航 xNavbar
+
+## 介绍
+
+标题导航,用途页面头部标题。可以默认透明，滚动实现背景可变的标题导航。使用时放置在页面的最顶部
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-navbar/x-navbar.uvue
+```
+
+## 使用
+
+```ts
+<x-navbar></x-navbar>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| isPlace | `是否底部占位内容，如果为false底部悬空。你的页面内容将自动压在导航栏的底部。`<br> | `boolean` | `true` |
+| bgColor | `背景颜色，注意这是静态时的背景色。`<br> | `string` | `'white'` |
+| darkBgColor | `暗黑的背景颜色。`<br> | `string` | `"#000000"` |
+| activeBgColor | `背景颜色，这是滑动时超过指定本状态栏高度时自动渐变到此颜色`<br>`如果为空时，不会有动态背景`<br>`如果提供的是白或者黑，暗黑时自动取反。`<br> | `string` | `''` |
+| backColor | `返回按钮的颜色.默认是取titleColor，如果你单独定义了`<br>`以你定义的为准`<br> | `string` | `''` |
+| title | `标题`<br> | `string` | `'标题'` |
+| titleColor | `默认标题颜色，暗黑是取白，如果有其它需求建议插槽。`<br> | `string` | `'#333333'` |
+| titleActiveColor | `动态悬浮时标题颜色,如果为暗黑时，你提供的颜色为白或者黑会反色`<br>`如果提供的是彩色自动加深或者提亮`<br> | `string` | `'#333333'` |
+| titleFontSize | `标题文字大小`<br> | `string` | `'17'` |
+| lrWidth | `右边的宽度。`<br> | `string` | `'100'` |
+| llWidth | `左边的宽度。`<br> | `string` | `'100'` |
+| zIndex | `层级。`<br> | `number` | `90` |
+| backErrorPath | `左边按钮默认点击返回上页。`<br>`但如果上页返回失败（通常见于直接程序启动本面，无法进行上页返回时）`<br>`失败后返回的页面。默认是首页。`<br> | `string` | `'/pages/index/index'` |
+| showNavBack | `是否显示返回按钮。`<br> | `boolean` | `true` |
+| linearGradient | `渐变背景，如果提供，上面的BgColor背景和暗黑背景将失效。`<br>`例：['to right','#ff667f','#ff5416']`<br> | `string[]` | `() : string[] => [] as string[]` |
+| linearActiveGradient | `动态悬浮时的渐变背景，`<br>`提供后上面的 activeBgColor的背景和暗黑背景将失效。`<br>`例：['to right','#ff667f','#ff5416']`<br> | `string[]` | `() : string[] => [] as string[]` |
+| staticTransparent | `静态在顶部时是否透明背景`<br> | `boolean` | `false` |
+| maxWidth | `某些时候你可能需要设定最大宽`<br>`任意单位;设置为none时表示不设置.`<br>`仅web生效`<br> | `string` | `'none'` |
+| height | `这个高不是最终高,它只是导航高`<br>`状态栏高是自动的不包含在这里面.`<br>`单位为像素单位,不是rpx`<br> | `number` | `50` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| fixedChange | `-` | 当滚动页面时，导航栏位置<br>与滚动之间的距离差比（0~1）<br>0表示在顶部，1表示已经超过了导航高<br>主要是用来类型滚动时设置导航顶部的一些布局变化。 |
+| init | `height: number<br>` | 初始化完成向下发送一个事件用于告知本组件实际的高 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| left | `左边插槽` | isFiexd: boolean<br> |
+| title | `标题插槽` | isFiexd: boolean<br> |
+| right | `右边插槽` | isFiexd: boolean<br> |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/daohang/navbar
+```
+
+## 示例源码
+
+```vue
+<template>
+	<!-- #ifdef MP-WEIXIN -->
+	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
+		<navigation-bar :background-color="xThemeConfigNavBgColor"
+			:front-color="xThemeConfigNavFontColor"></navigation-bar>
+	</page-meta>
+	<!-- #endif -->
+	<x-navbar :staticTransparent="staticTransparent" :linear-gradient="linear" :linearActiveGradient="bgcolor"
+		bg-color="primary" @fiexdChange="navPosChange" title-color="white" active-bg-color="#ff5416"
+		title-active-color="yellow" :isPlace="false">
+		<template v-slot:title>
+			<view class="flex flex-row flex-row-center-center relative flex-1" style="height:100%">
+				<x-input placeholder="模仿下淘宝搜索吧" icon-color="#ff5416" round="20" v-if="ratio>0" left-icon="search-2-line"
+					height="36" dark-bg-color="white" :style="{opacity:ratio,width:(ratio*100).toString()+'%'}">
+					<template v-slot:inputRight>
+						<x-button color="#ff5416" round="20" class="mr-2" height="32" width="60">搜索</x-button>
+					</template>
+				</x-input>
+				<x-text v-if="ratio<1" :style="{opacity:(1-ratio),pointerEvents:'none'}" color='white'
+					dark-color="white" class="absolute">NAVBAR 标题栏</x-text>
+			</view>
+		</template>
+		<template v-slot:right="{isFiexd}">
+			<x-icon class="mr-16" name="account-circle-line" font-size="21"
+				:color="(isFiexd as boolean)?'yellow':'white'"></x-icon>
+		</template>
+	</x-navbar>
+	<view>
+		<x-image src="https://picsum.photos/750/750"></x-image>
+	</view>
+
+	<x-sheet :margin="['16']">
+		<x-text font-size="18" class=" text-weight-b">标题导航 xNavbar</x-text>
+		<x-text class=" text-grey  line-8">可静态悬浮在顶部，也可动态悬浮顶部下拉动态改变背景</x-text>
+	</x-sheet>
+	<x-sheet height="2000">
+		<x-text font-size="18" class=" text-weight-b ">滚动本页面，查看导航效果</x-text>
+		<x-text class=" text-grey  my-20">可静态和悬浮时出现不同的渐变背景</x-text>
+		<x-button :block="true" @click="setbgcolor">切换渐变导航</x-button>
+		<x-text class=" text-grey  my-20">可静态和悬浮时出现不同的纯色背景</x-text>
+		<x-button :block="true" @click="clearBgcolor">纯色背景</x-button>
+		<x-text class=" text-grey  my-20">可静态时不透明</x-text>
+		<x-button :block="true"
+			@click="staticTransparent=!staticTransparent">{{!staticTransparent?'静态透明':'静态不透明'}}</x-button>
+	</x-sheet>
+</template>
+
+<script setup lang="ts">
+	import { ref } from 'vue'
+
+	const ratio = ref(0)
+	const bgcolor = ref<string[]>([])
+	const linear = ref<string[]>([])
+	const staticTransparent = ref(true)
+
+	const setbgcolor = () => {
+		bgcolor.value = ['to right', '#ff338f', '#6b3eff']
+		linear.value = ['to right', '#02a7ff', '#22e192']
+	}
+
+	const clearBgcolor = () => {
+		bgcolor.value = [] as string[]
+		linear.value = [] as string[]
+	}
+
+	const navPosChange = (posratio : number) => {
+		ratio.value = posratio
+	}
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)