vue-color-ui 0.0.15 → 0.0.17

package/README.md

@@ -57,6 +57,43 @@ const navItems = [
 
 [MIT](LICENSE)
 
+## 颜色
+
+### BgColorName 背景颜色类型
+
+`BgColorName` 类型可以是以下颜色名称之一：
+
+```typescript
+type ColorName =
+  | "red"
+  | "orange"
+  | "yellow"
+  | "olive"
+  | "green"
+  | "cyan"
+  | "blue"
+  | "purple"
+  | "mauve"
+  | "pink"
+  | "brown"
+  | "grey"
+  | "gray"
+  | "black"
+  | "white";
+
+type GradientColorName =
+  | "gradual-red"
+  | "gradual-orange"
+  | "gradual-green"
+  | "gradual-purple"
+  | "gradual-pink"
+  | "gradual-blue";
+
+type BgColorName = ColorName | GradientColorName;
+```
+
+
+
 ## TNavBar组件使用文档
 
 `TNavBar` 是一个全局注册的组件，用于创建底部或顶部导航栏。该组件支持图标、图片、徽标等多种元素，并允许自定义背景颜色和文本颜色。
@@ -175,3 +212,194 @@ const handleItemClick = (item, index) => {
 | `badge` | `number` | 徽标数字（可选）     |
 | `path`  | `string` | 导航项对应的路由路径 |
 
+## TTag 组件使用文档
+
+`TTag` 是一个用于显示标签的 Vue 组件，支持多种样式和自定义内容。
+
+### 基本用法
+
+```vue
+<template>
+  <TTag>标签内容</TTag>
+</template>
+```
+
+### 属性
+
+`TTag` 组件支持以下属性：
+
+| 属性名  | 类型          | 默认值    | 描述                                              |
+| ------- | ------------- | --------- | ------------------------------------------------- |
+| `text`  | `string`      | `-`       | 标签的文本内容                                    |
+| `bg`    | `BgColorName` | `blue`    | 标签的背景颜色，支持颜色名称或渐变颜色名称        |
+| `size`  | `string`      | `default` | 标签的大小，可选值有 `default`, `small`, `large`  |
+| `shape` | `string`      | `default` | 标签的形状，可选值有 `default`, `radius`, `round` |
+| `light` | `boolean`     | `false`   | 是否使用浅色背景                                  |
+| `line`  | `boolean`     | `false`   | 是否使用线条样式                                  |
+
+
+### 示例
+
+#### 基本标签
+
+```vue
+<template>
+  <TTag text="默认标签" />
+</template>
+```
+
+#### 不同背景颜色的标签
+
+```vue
+<template>
+  <TTag text="红色标签" bg="red" />
+  <TTag text="渐变橙色标签" bg="gradual-orange" />
+</template>
+```
+
+#### 不同大小的标签
+
+```vue
+<template>
+  <TTag text="默认大小" size="default" />
+  <TTag text="小号标签" size="small" />
+  <TTag text="大号标签" size="large" />
+</template>
+```
+
+#### 不同形状的标签
+
+```vue
+<template>
+  <TTag text="默认形状" shape="default" />
+  <TTag text="圆角标签" shape="radius" />
+  <TTag text="圆形标签" shape="round" />
+</template>
+```
+
+#### 浅色背景的标签
+
+```vue
+<template>
+  <TTag text="浅色标签" light />
+</template>
+```
+
+#### 线条样式的标签
+
+```vue
+<template>
+  <TTag text="线条标签" line />
+</template>
+```
+
+#### 组合样式的标签
+
+```vue
+<template>
+  <TTag text="自定义标签" bg="purple" size="large" shape="round" light />
+</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>
+```