vue-color-ui 0.0.16 → 0.0.17

package/README.md

@@ -301,3 +301,105 @@ const handleItemClick = (item, index) => {
 </template>
 ```
 
+## TTopBar 组件使用文档
+
+### 属性
+
+#### `title`
+
+- 类型：`string`
+- 描述：导航栏的标题文本。
+
+#### `leftIcon`
+
+- 类型：`IconName` (可选)
+- 描述：左侧图标的名称。
+
+#### `leftIconColor`
+
+- 类型：`ColorName` (可选)
+- 默认值：`gray`
+- 描述：左侧图标的颜色。
+
+#### `leftText`
+
+- 类型：`string` (可选)
+- 描述：左侧的文本。
+
+#### `rightIcon`
+
+- 类型：`IconName` (可选)
+- 描述：右侧图标的名称。
+
+#### `rightIconColor`
+
+- 类型：`ColorName` (可选)
+- 默认值：`gray`
+- 描述：右侧图标的颜色。
+
+#### `bg`
+
+- 类型：`ColorName` (可选)
+- 默认值：`white`
+- 描述：导航栏的背景颜色。
+
+#### `avatarUrl`
+
+- 类型：`string` (可选)
+- 描述：头像的 URL。
+
+### 示例
+
+#### 示例 1：简单的操作条
+
+```vue
+<template>
+  <TTopBar
+    title="操作条"
+    leftIcon="back"
+    leftText="返回"
+    leftIconColor="gray"
+    bg="white"
+  />
+</template>
+
+<script setup lang="ts">
+import TTopBar from './components/TTopBar.vue';
+</script>
+```
+
+#### 示例 2：海蓝主题
+
+```
+<template>
+  <TTopBar
+    title="海蓝"
+    leftIcon="close"
+    leftText="关闭"
+    leftIconColor="white"
+    bg="blue"
+  />
+</template>
+
+<script setup lang="ts">
+import TTopBar from './components/TTopBar.vue';
+</script>
+```
+
+#### 示例 3：带头像和右侧图标的导航栏
+
+```vue
+<template>
+  <TTopBar
+    title="ColorUI"
+    bg="black"
+    avatarUrl="https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg"
+    rightIcon="more"
+    rightIconColor="white"
+  />
+</template>
+
+<script setup lang="ts">
+import TTopBar from './components/TTopBar.vue';
+</script>
+```