mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-13 00:50:40 +08:00
小莫唐尼
91 lines
2.7 KiB
Markdown
91 lines
2.7 KiB
Markdown
# uni-nav-bar
|
|
|
|
## Instructions
|
|
|
|
组件名：uni-nav-bar
|
|
|
|
代码块： uNavBar
|
|
|
|
点击下载&安装
|
|
|
|
### Syntax
|
|
|
|
- 使用 `<uni-nav-bar />`（或 `<uni-nav-bar></uni-nav-bar>`，当需要包裹子节点时）。
|
|
- 遇到平台差异时，建议使用条件编译（`#ifdef / #endif`）显式处理。
|
|
|
|
#### Properties
|
|
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|
| --- | --- | --- | --- |
|
|
| title | String | - | 标题文字 |
|
|
| leftText | String | - | 左侧按钮文本 |
|
|
| rightText | String | - | 右侧按钮文本 |
|
|
| leftIcon | String | - | 左侧按钮图标（图标类型参考 Icon 图标 type 属性） |
|
|
| rightIcon | String | - | 右侧按钮图标（图标类型参考 Icon 图标 type 属性） |
|
|
| color | String | #000000 | 图标和文字颜色 |
|
|
| backgroundColor | String | #FFFFFF | 导航栏背景颜色 |
|
|
| fixed | Boolean | false | 是否固定顶部 |
|
|
| statusBar | Boolean | false | 是否包含状态栏 |
|
|
| shadow | Boolean | false | 导航栏下是否有阴影 |
|
|
| border | Boolean | true | 导航栏下是否有边框 |
|
|
| height | Number/String | 44 | 导航栏高度 |
|
|
| dark | Boolean | false | 导航栏开启暗黑模式 |
|
|
| leftWidth | Number/String | 120rpx | 导航栏左侧插槽宽度 |
|
|
| rightWidth | Number/String | 120rpx | 导航栏右侧插槽宽度 |
|
|
| stat | Boolean | | 是否开启统计标题功能。 注意：只有使用 title 属性 ，且开启了统计功能才生效 |
|
|
| showMenuButtonWidth | Boolean | false | 微信小程序是否开启胶囊避让功能，fixed:true 下生效。 注意：开启后会导致标题不在页面水平居中，如需使用右插槽请开启，不开启下，右侧插槽或者内容会被胶囊按钮覆盖 |
|
|
|
|
#### Events
|
|
|
|
| 事件名 | 说明 | 返回值 |
|
|
| --- | --- | --- |
|
|
| @clickLeft | 左侧按钮点击时触发 | - |
|
|
| @clickRight | 右侧按钮点击时触发 | - |
|
|
|
|
#### Platform Compatibility
|
|
|
|
See official docs for platform support table: `https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html`
|
|
|
|
### Examples
|
|
|
|
### Example (Example 1)
|
|
|
|
```vue
|
|
<uni-nav-bar title="导航栏组件"></uni-nav-bar>
|
|
```
|
|
|
|
### Example (Example 2)
|
|
|
|
```html
|
|
<uni-nav-bar title="导航栏组件"></uni-nav-bar>
|
|
```
|
|
|
|
### Example (Example 3)
|
|
|
|
```vue
|
|
<uni-nav-bar shadow title="导航栏组件"></uni-nav-bar>
|
|
```
|
|
|
|
### Example (Example 4)
|
|
|
|
```html
|
|
<uni-nav-bar shadow title="导航栏组件"></uni-nav-bar>
|
|
```
|
|
|
|
### Example (Example 5)
|
|
|
|
```vue
|
|
<uni-nav-bar dark title="导航栏组件"></uni-nav-bar>
|
|
```
|
|
|
|
### Example (Example 6)
|
|
|
|
```html
|
|
<uni-nav-bar dark title="导航栏组件"></uni-nav-bar>
|
|
```
|
|
|
|
Reference:
|
|
- [Official Documentation](https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html)
|
|
- [Plugin Marketplace](https://ext.dcloud.net.cn/plugin?name=nav-bar)
|
|
- [Local Example](examples/uni-ui/uni-nav-bar.vue)
|