From bb5049783d8207b32b0e23e48c93c5c5c3c03299 Mon Sep 17 00:00:00 2001
From: mehaotian <490272692@qq.com>
Date: Tue, 18 Jan 2022 15:31:35 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20uni-nav-bar=20=E3=80=81uni-list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
docs/component/uniui/uni-list.md | 1 -
docs/component/uniui/uni-nav-bar.md | 92 +++++++++++++++++++++++++++--
2 files changed, 86 insertions(+), 7 deletions(-)
diff --git a/docs/component/uniui/uni-list.md b/docs/component/uniui/uni-list.md
index 5a4c0c6e4..3697a5189 100644
--- a/docs/component/uniui/uni-list.md
+++ b/docs/component/uniui/uni-list.md
@@ -38,7 +38,6 @@ uni-list不包含下拉刷新和上拉翻页。上拉翻页另见组件：[uni-l
> - 支付宝小程序平台需要在支付宝小程序开发者工具里开启 component2 编译模式，开启方式： 详情 --> 项目配置 --> 启用 component2 编译
> - 如果需要修改 `switch`、`badge` 样式，请使用插槽自定义
> - 在 `HBuilderX` 低版本中，可能会出现组件显示 `undefined` 的问题，请升级最新的 `HBuilderX` 或者 `cli`
-> - 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
### 基本用法
diff --git a/docs/component/uniui/uni-nav-bar.md b/docs/component/uniui/uni-nav-bar.md
index 2c45410f4..fcb90d07e 100644
--- a/docs/component/uniui/uni-nav-bar.md
+++ b/docs/component/uniui/uni-nav-bar.md
@@ -6,14 +6,93 @@
导航栏组件，主要用于头部导航。
-## 基本用法
+> **注意事项**
+> 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。
+> - 组件需要依赖 `sass` 插件 ，请根据提示自行手动安装
+> - 组件内部依赖 `'uni-icons'` 组件
+> - 请勿在组件内部使用，宽度可能会发生错误
+> - 当前组件不支持文字大小的修改 ，如有需要请使用深度选择器覆盖样式
-在 ``template`` 中使用组件
+### 基本用法
```html
-
+
```
+### 开启阴影
+
+使用 `shadow` 属性开启导航栏阴影
+
+Tips:
+- nvue 下某些机型可能显示不正常 ，建议 nvue 下关闭阴影
+
+```html
+
+```
+
+### 开启暗黑模式
+
+使用 `dark` 属性开启导航栏的暗黑模式
+
+Tips:
+- 暗黑模式只会改变组件默认的前景色和背景色，如果设置自定义颜色，自定义颜色将优先显示
+
+```html
+
+```
+### 自定义颜色
+
+使用 `color` 属性修改导航栏前景色（文字图标颜色）
+
+使用 `background-color` 属性修改导航栏背景色
+
+```html
+
+```
+
+### 带左右文字
+
+使用 `left-text` 属性设置导航栏左侧文字
+
+使用 `right-text` 属性设置导航栏右侧文字
+
+Tips:
+- 图标依赖 `uni-icons` 组件 ，可用图标类型参考 [uni-icons 示例](https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons)
+
+```html
+
+```
+
+
+### 带左右图标
+
+使用 `left-icon` 属性设置导航栏左侧图标
+
+使用 `right-icon` 属性设置导航栏右侧图标
+
+Tips:
+- 图标依赖 `uni-icons` 组件 ，可用图标类型参考 [uni-icons 示例](https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons)
+- **right-text 和 right-icon 属性不能同时存在，如需都使用，请使用 right 插槽自定义**
+
+```html
+
+```
+
+### 自定义高度
+
+使用 `height` 属性设置导航栏高度
+
+Tips:
+- 组件默认高度为44px
+- 如使用 Number 类型传值默认单位为 px，使用 String 类型传值则必须带单位，如传值无效 ，则使用默认值
+
+```html
+
+```
+
+
+## API
+
### NavBar Props
|属性名|类型|默认值 |说明|
@@ -29,16 +108,17 @@
|statusBar|Boolean|false|是否包含状态栏|
|shadow|Boolean|false|导航栏下是否有阴影|
|border|Boolean|true|导航栏下是否有边框|
+|height|Number/String|44|导航栏高度|
+|dark|Boolean|false|导航栏开启暗黑模式|
### NavBar Slots
-开发者使用 NavBar 时，支持向 NavBar 里插入不同内容，以达到自定义的目的。
-
+支持向 NavBar 里插入不同内容，以达到自定义的目的。
|slot名 |说明|
|:-:|:-:|
+|default|向导航栏中间插入 |
|left|向导航栏左侧插入 |
|right |向导航栏右侧插入 |
-|default|向导航栏中间插入 |
```html
--
GitLab