提交 13858358 编写于 作者: D DCloud_LXH

chore: uni-nav-bar.md. update theme to 1.2.12

上级 96802ee4
::: tip 组件名:uni-nav-bar ::: tip 组件名:uni-nav-bar
> 代码块: `uNavBar` > 代码块: `uNavBar`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-nav-bar) [点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-nav-bar)
::: :::
导航栏组件,主要用于头部导航。 导航栏组件,主要用于头部导航。
## 介绍 ## 介绍
::: warning 注意事项 ::: warning 注意事项
> 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。 > 为了避免错误使用,给大家带来不好的开发体验,请在使用组件前仔细阅读下面的注意事项,可以帮你避免一些错误。
- 组件需要依赖 `sass` 插件 ,请根据提示自行手动安装 - 组件需要依赖 `sass` 插件 ,请根据提示自行手动安装
- 组件内部依赖 `'uni-icons'` 组件 - 组件内部依赖 `'uni-icons'` 组件
- 请勿在组件内部使用,宽度可能会发生错误 - 请勿在组件内部使用,宽度可能会发生错误
- 当前组件不支持文字大小的修改 ,如有需要请使用深度选择器覆盖样式 - 当前组件不支持文字大小的修改 ,如有需要请使用深度选择器覆盖样式
::: :::
### 基本用法 ### 基本用法
```html ```html
<uni-nav-bar title="导航栏组件"></uni-nav-bar> <uni-nav-bar title="导航栏组件"></uni-nav-bar>
``` ```
### 开启阴影 ### 开启阴影
使用 `shadow` 属性开启导航栏阴影 使用 `shadow` 属性开启导航栏阴影
Tips: Tips:
- nvue 下某些机型可能显示不正常 ,建议 nvue 下关闭阴影 - nvue 下某些机型可能显示不正常 ,建议 nvue 下关闭阴影
```html ```html
<uni-nav-bar shadow title="导航栏组件"></uni-nav-bar> <uni-nav-bar shadow title="导航栏组件"></uni-nav-bar>
``` ```
### 开启暗黑模式 ### 开启暗黑主题
使用 `dark` 属性开启导航栏的暗黑模式 使用 `dark` 属性开启导航栏的暗黑主题
Tips: Tips:
- 暗黑模式只会改变组件默认的前景色和背景色,如果设置自定义颜色,自定义颜色将优先显示 - 暗黑主题只会改变组件默认的前景色和背景色,如果设置自定义颜色,自定义颜色将优先显示
```html ```html
<uni-nav-bar dark title="导航栏组件"></uni-nav-bar> <uni-nav-bar dark title="导航栏组件"></uni-nav-bar>
``` ```
### 自定义颜色 ### 自定义颜色
使用 `color` 属性修改导航栏前景色(文字图标颜色) 使用 `color` 属性修改导航栏前景色(文字图标颜色)
使用 `background-color` 属性修改导航栏背景色 使用 `background-color` 属性修改导航栏背景色
```html ```html
<uni-nav-bar dark title="导航栏组件"></uni-nav-bar> <uni-nav-bar dark title="导航栏组件"></uni-nav-bar>
``` ```
### 带左右文字 ### 带左右文字
使用 `left-text` 属性设置导航栏左侧文字 使用 `left-text` 属性设置导航栏左侧文字
使用 `right-text` 属性设置导航栏右侧文字 使用 `right-text` 属性设置导航栏右侧文字
Tips: Tips:
- 图标依赖 `uni-icons` 组件 ,可用图标类型参考 [uni-icons 示例](https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons) - 图标依赖 `uni-icons` 组件 ,可用图标类型参考 [uni-icons 示例](https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons)
```html ```html
<uni-nav-bar left-text="返回" right-text="设置" title="标题" /> <uni-nav-bar left-text="返回" right-text="设置" title="标题" />
``` ```
### 带左右图标 ### 带左右图标
使用 `left-icon` 属性设置导航栏左侧图标 使用 `left-icon` 属性设置导航栏左侧图标
使用 `right-icon` 属性设置导航栏右侧图标 使用 `right-icon` 属性设置导航栏右侧图标
Tips: Tips:
- 图标依赖 `uni-icons` 组件 ,可用图标类型参考 [uni-icons 示例](https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons) - 图标依赖 `uni-icons` 组件 ,可用图标类型参考 [uni-icons 示例](https://hellouniapp.dcloud.net.cn/pages/extUI/icons/icons)
- **right-text 和 right-icon 属性不能同时存在,如需都使用,请使用 right 插槽自定义** - **right-text 和 right-icon 属性不能同时存在,如需都使用,请使用 right 插槽自定义**
```html ```html
<uni-nav-bar left-icon="left" right-icon="cart" title="标题" /> <uni-nav-bar left-icon="left" right-icon="cart" title="标题" />
``` ```
### 自定义高度 ### 自定义高度
使用 `height` 属性设置导航栏高度 使用 `height` 属性设置导航栏高度
Tips: Tips:
- 组件默认高度为44px - 组件默认高度为44px
- 如使用 Number 类型传值默认单位为 px,使用 String 类型传值则必须带单位,如传值无效 ,则使用默认值 - 如使用 Number 类型传值默认单位为 px,使用 String 类型传值则必须带单位,如传值无效 ,则使用默认值
```html ```html
<uni-nav-bar height="120rpx" title="自定义高度" /> <uni-nav-bar height="120rpx" title="自定义高度" />
``` ```
## API ## API
### NavBar Props ### NavBar Props
|属性名|类型|默认值 |说明| |属性名|类型|默认值 |说明|
|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|
|title|String|-|标题文字| |title|String|-|标题文字|
|leftText|String|-|左侧按钮文本| |leftText|String|-|左侧按钮文本|
|rightText|String|-|右侧按钮文本| |rightText|String|-|右侧按钮文本|
|leftIcon|String|-|左侧按钮图标(图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性) | |leftIcon|String|-|左侧按钮图标(图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性) |
|rightIcon|String |-|右侧按钮图标(图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性) | |rightIcon|String |-|右侧按钮图标(图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性) |
|color|String|#000000|图标和文字颜色| |color|String|#000000|图标和文字颜色|
|backgroundColor|String |#FFFFFF|导航栏背景颜色| |backgroundColor|String |#FFFFFF|导航栏背景颜色|
|fixed|Boolean|false|是否固定顶部| |fixed|Boolean|false|是否固定顶部|
|statusBar|Boolean|false|是否包含状态栏| |statusBar|Boolean|false|是否包含状态栏|
|shadow|Boolean|false|导航栏下是否有阴影| |shadow|Boolean|false|导航栏下是否有阴影|
|border|Boolean|true|导航栏下是否有边框| |border|Boolean|true|导航栏下是否有边框|
|height|Number/String|44|导航栏高度| |height|Number/String|44|导航栏高度|
|dark|Boolean|false|导航栏开启暗黑模式| |dark|Boolean|false|导航栏开启暗黑模式|
|leftWidth|Number/String|120rpx|导航栏左侧插槽宽度| |leftWidth|Number/String|120rpx|导航栏左侧插槽宽度|
|rightWidth|Number/String|120rpx|导航栏右侧插槽宽度| |rightWidth|Number/String|120rpx|导航栏右侧插槽宽度|
|stat|Boolean/String|120rpx|是否开启统计标题功能。**注意:只有使用title 属性 ,且开启了统计功能才生效**| |stat|Boolean/String|120rpx|是否开启统计标题功能。**注意:只有使用title 属性 ,且开启了统计功能才生效**|
**Tips** **Tips**
- `leftWidth``rightWidth` 如无必要不需要设置 - `leftWidth``rightWidth` 如无必要不需要设置
- `leftWidth``rightWidth` 如需设置 ,只有两个值相同,才能保证 `title` 居中 ,如设置值过大,需要注意到 `title` 被覆盖的可能 - `leftWidth``rightWidth` 如需设置 ,只有两个值相同,才能保证 `title` 居中 ,如设置值过大,需要注意到 `title` 被覆盖的可能
### NavBar Slots ### NavBar Slots
支持向 NavBar 里插入不同内容,以达到自定义的目的。 支持向 NavBar 里插入不同内容,以达到自定义的目的。
|slot名 |说明| |slot名 |说明|
|:-:|:-:| |:-:|:-:|
|default|向导航栏中间插入 | |default|向导航栏中间插入 |
|left|向导航栏左侧插入 | |left|向导航栏左侧插入 |
|right |向导航栏右侧插入 | |right |向导航栏右侧插入 |
```html ```html
<uni-nav-bar> <uni-nav-bar>
<view>标题栏</view> <view>标题栏</view>
<view v-slot:left>left</view> <view v-slot:left>left</view>
<view v-slot:right>right</view> <view v-slot:right>right</view>
</uni-nav-bar> </uni-nav-bar>
``` ```
### NavBar Events ### NavBar Events
|事件名|说明|返回值| |事件名|说明|返回值|
|:-:|:-:|:-:| |:-:|:-:|:-:|
|@clickLeft |左侧按钮点击时触发|-| |@clickLeft |左侧按钮点击时触发|-|
|@clickRight|右侧按钮点击时触发|-| |@clickRight|右侧按钮点击时触发|-|
## 示例 ## 示例
::: warning 注意 ::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件,直接拷贝示例代码将无法正常运行 。 示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件,直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-nav-bar) ,在页面右侧选择 `使用 HBuilderX导入示例项目` ,体验完整组件示例。 请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-nav-bar) ,在页面右侧选择 `使用 HBuilderX导入示例项目` ,体验完整组件示例。
::: :::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/nav-bar/nav-bar ::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/nav-bar/nav-bar
> Template > Template
``` html ``` html
<template> <template>
<view class="container"> <view class="container">
<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回" <uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
...@@ -239,8 +239,8 @@ Tips: ...@@ -239,8 +239,8 @@ Tips:
</view> </view>
</template> </template>
``` ```
> Script > Script
```html ```html
<script> <script>
export default { export default {
...@@ -296,8 +296,8 @@ Tips: ...@@ -296,8 +296,8 @@ Tips:
} }
} }
</script> </script>
``` ```
> Style > Style
```html ```html
<style lang="scss"> <style lang="scss">
$nav-height: 30px; $nav-height: 30px;
...@@ -348,9 +348,9 @@ Tips: ...@@ -348,9 +348,9 @@ Tips:
font-size: 12px; font-size: 12px;
background-color: #f8f8f8; background-color: #f8f8f8;
} }
</style> </style>
``` ```
::: :::
[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/nav-bar/nav-bar) [完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/nav-bar/nav-bar)
\ No newline at end of file
...@@ -31,6 +31,6 @@ ...@@ -31,6 +31,6 @@
}, },
"dependencies": { "dependencies": {
"@docsearch/js": "^3.1.0", "@docsearch/js": "^3.1.0",
"vuepress-theme-uni-app-test": "^1.2.10" "vuepress-theme-uni-app-test": "^1.2.12"
} }
} }
\ No newline at end of file
...@@ -8503,10 +8503,10 @@ vuepress-theme-uni-app-test@^1.2.0: ...@@ -8503,10 +8503,10 @@ vuepress-theme-uni-app-test@^1.2.0:
vuepress-plugin-juejin-style-copy "^1.0.4" vuepress-plugin-juejin-style-copy "^1.0.4"
vuepress-theme-uni-app-test "^1.1.9" vuepress-theme-uni-app-test "^1.1.9"
vuepress-theme-uni-app-test@^1.2.10: vuepress-theme-uni-app-test@^1.2.12:
version "1.2.10" version "1.2.12"
resolved "https://registry.npmmirror.com/vuepress-theme-uni-app-test/-/vuepress-theme-uni-app-test-1.2.10.tgz#f7a36c850ac81779557abecbadcfafe86f4c3ede" resolved "https://registry.npmmirror.com/vuepress-theme-uni-app-test/-/vuepress-theme-uni-app-test-1.2.12.tgz#7c1203afa221b1e8e2de53af1c6775a6bb39a091"
integrity sha512-/PgJbMwDWhZZSW/P6pH5MdsyJamLwDEuRxirVIEANXf8nqivbj3214clJXMDUliRovnsq02uvhVQp6HQRT8SKw== integrity sha512-WS8y406n/btkol/gu5VvNyVLl0WDkIaWD4zr2BCQ+v8abOjobRQAv9ilMfHHTDRfwynbVpX4YQd521WIsL2VWQ==
dependencies: dependencies:
"@vuepress/plugin-back-to-top" "^1.9.5" "@vuepress/plugin-back-to-top" "^1.9.5"
"@vuepress/theme-default" "^1.8.2" "@vuepress/theme-default" "^1.8.2"
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册