From 7f86724f958573308c380ff08b9a870cb62a5c59 Mon Sep 17 00:00:00 2001
From: handongxun <handongxun@dcloud.io>
Date: Fri, 28 Feb 2020 16:22:58 +0800
Subject: [PATCH] docs: update <page-meta>, add <navigation-bar>

---
 docs/component/_sidebar.md       |  4 ++-
 docs/component/navigation-bar.md | 54 ++++++++++++++++++++++++++++++++
 docs/component/page-meta.md      | 46 +++++++++++++--------------
 3 files changed, 79 insertions(+), 25 deletions(-)
 create mode 100644 docs/component/navigation-bar.md

diff --git a/docs/component/_sidebar.md b/docs/component/_sidebar.md
index 8d2e47eac2..121c0f78be 100644
--- a/docs/component/_sidebar.md
+++ b/docs/component/_sidebar.md
@@ -78,8 +78,10 @@
   * [SwiperDot 轮播图指示点](https://ext.dcloud.net.cn/plugin?id=284)
   * [Tag 标签](https://ext.dcloud.net.cn/plugin?id=35)
   * [更多插件市场的组件](https://ext.dcloud.net.cn/?cat1=2)
+* 导航栏
+  * [navigation-bar](component/page-meta.md)
 * 页面属性配置节点
-  * [page-meta](component/page-meta.md)
+  * [page-meta](component/navigation-bar.md)
 * [配置微信小程序插件](component/mp-weixin-plugin.md)
 * [原生组件说明](component/native-component.md)
 <div class="contact-box">
diff --git a/docs/component/navigation-bar.md b/docs/component/navigation-bar.md
new file mode 100644
index 0000000000..e84c960039
--- /dev/null
+++ b/docs/component/navigation-bar.md
@@ -0,0 +1,54 @@
+#### navigation-bar
+
+页面导航条配置节点，用于指定导航栏的一些属性。只能是 [page-meta](https://uniapp.dcloud.io/component/page-meta) 组件内的第一个节点，需要配合它一同使用。
+
+HBuilderX 2.6.3+ 支持
+
+|属性|类型|默认值|必填|说明|最低版本
+|:-|:-|:-|:-|:-|:-|
+|title|string||否|导航条标题|微信基础库 2.9.0|
+|loading|string|false|否|是否在导航条显示 loading 加载提示|微信基础库 2.9.0|
+|front-color|string||否|导航条前景颜色值，包括按钮、标题、状态栏的颜色，仅支持 #ffffff 和 #000000|微信基础库 2.9.0|
+|background-color|string||否|导航条背景颜色值，有效值为十六进制颜色|微信基础库 2.9.0|
+|color-animation-duration|number|0|否|改变导航栏颜色时的动画时长，默认为 0 （即没有动画效果）|微信基础库 2.9.0|
+|color-animation-timing-func|string|"linear"|否|改变导航栏颜色时的动画方式，支持 linear 、 easeIn 、 easeOut 和 easeInOut|微信基础库 2.9.0|
+
+**注意**
+- `<navigation-bar>` 会覆盖 page.json style 节点配置
+
+
+#### 示例代码
+
+```
+<template>
+  <page-meta>
+    <navigation-bar
+      :title="nbTitle"
+      :loading="nbLoading"
+      :front-color="nbFrontColor"
+      :background-color="nbBackgroundColor"
+      :color-animation-duration="2000"
+      color-animation-timing-func="easeIn"
+    />
+  </page-meta>
+  <view class="content">
+  </view>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        nbTitle: '标题',
+        nbLoading: false,
+        nbFrontColor: '#000000',
+        nbBackgroundColor: '#ffffff'
+      }
+    },
+    onLoad() {
+    },
+    methods: {
+    }
+  }
+</script>
+```
diff --git a/docs/component/page-meta.md b/docs/component/page-meta.md
index fa7a6fe87d..624d736e79 100644
--- a/docs/component/page-meta.md
+++ b/docs/component/page-meta.md
@@ -1,14 +1,10 @@
 #### page-meta
 
-**平台差异说明**
+页面属性配置节点，用于指定页面的一些属性、监听页面事件。只能是页面内的第一个节点。可以配合 [navigation-bar](https://uniapp.dcloud.io/component/navigation-bar) 组件一同使用。
 
-|App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序|QQ小程序|
-|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
-|√（2.6.3+）|√（2.6.3+）|√|x|x|x|x|
+HBuilderX 2.6.3+ 支持
 
 
-页面属性配置节点，用于指定页面的一些属性、监听页面事件。只能是页面内的第一个节点。可以配合 navigation-bar 组件一同使用。
-
 |属性|类型|默认值|必填|说明|最低版本
 |:-|:-|:-|:-|:-|:-|
 |background-text-style|string||否|下拉背景字体、loading 图的样式，仅支持 dark 和 light|微信基础库 2.9.0|
@@ -44,27 +40,29 @@
       :background-color="nbBackgroundColor"
     />
   </page-meta>
+  <view class="content">
+  </view>
 </template>
 
 <script>
-    export default {
-        data() {
-            return {
-                bgTextStyle: 'dark',
-                scrollTop: '200rpx',
-                bgColor: '#ff0000',
-                bgColorTop: '#00ff00',
-                bgColorBottom: '#0000ff',
-                nbTitle: '标题',
-                nbLoading: false,
-                nbFrontColor: '#000000',
-                nbBackgroundColor: '#ffffff'
-            }
-        },
-        onLoad() {
-        },
-        methods: {
-        }
+  export default {
+    data() {
+      return {
+        bgTextStyle: 'dark',
+        scrollTop: '200rpx',
+        bgColor: '#ff0000',
+        bgColorTop: '#00ff00',
+        bgColorBottom: '#0000ff',
+        nbTitle: '标题',
+        nbLoading: false,
+        nbFrontColor: '#000000',
+        nbBackgroundColor: '#ffffff'
+      }
+    },
+    onLoad() {
+    },
+    methods: {
     }
+  }
 </script>
 ```
-- 
GitLab