# uni-nav-bar
自定义导航栏组件
自定义导航栏组件
在页面pages.json中关闭原生导航栏后，即使用"style": {"navigationStyle": "custom"}，可以使用本组件实现自定义导航栏。
本组件自动适配的顶部安全区。用padding-top让出顶部状态栏的高度。除去状态栏高度后，本组件的高度为44px。
本组件左右两边默认各让出了6px的边距。也可以在left-class和right-class中自定义边距。
本组件分为left、mid、right 3个区域。
- left区域默认显示一个返回箭头，大小为44*44px。可以通过属性hideDefaultBack来隐藏，也可以传入一个slot name='left'来替代。可以通过left-class来修饰样式。
- mid区域默认显示title属性设置的标题。也可以传入一个slot name='mid'来替代。其默认宽度为屏幕宽度-两边默认边距-left区域默认宽度-right区域默认宽度。可以通过mid-class来修饰样式。
- right区域默认不显示内容，可以传入一个slot name='right'来显示自定义内容。right区域默认width也是44px，可以通过right-class来修饰样式。
支持属性：
- hideDefaultBack: 隐藏返回箭头
- title: 通过属性方便设置标题。如果传入mid slot，则不生效
- navigationBarTextStyle: 返回箭头和属性设置的标题，它们的颜色均由该属性控制，可选 white|black
本组件默认没有背景色，即透明，会透显页面的背景色。开发者可通过组件的class自行设置背景色
# 兼容性
| Web | 微信小程序 | Android | iOS | HarmonyOS | HarmonyOS(Vapor) |
|---|---|---|---|---|---|
| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 | 5.08 |
# 属性
| 名称 | 类型 | 默认值 | 兼容性 | 描述 |
|---|---|---|---|---|
| hideDefaultBack | boolean | false | - | 是否隐藏默认的返回箭头。为 true 时需要通过 left 插槽自定义返回按钮 |
| title | string | "" | - | 导航栏中间显示的标题文字，若使用 mid 插槽则该属性无效 |
| navigationBarTextStyle | string as PropType<"white" | "black" | ""> | "" | - | 导航栏前景色（文字和返回箭头颜色）。非小程序端未传入时会自动读取 pageStyle 的 navigationBarTextStyle |
| leftClass | classString | - | - | - |
| midClass | classString | - | - | - |
| rightClass | classString | - | - | - |
