Appearance
视图容器
x-navbar
用于替换页面最外层view的组件,包含navbar的个性化，嵌套在页面整个内容的最外层。
- 使用前当前页面的
json需更改或新增配置 "navigationStyle": "custom" - 此组件请在
app.json中全局引入
json
"usingComponents": {
"x-banner": "/cix/components/x-banner/x-banner"
}"usingComponents": {
"x-banner": "/cix/components/x-banner/x-banner"
}| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| theme | string | light | ✅ | 主题 |
| themeCustom | string | 指定主题,配置该项主页不再自动适配 | ||
| mode | string | all | ✅ | 导航栏模式, all-全部模式, back-仅显示返回按钮, status-只显示状态栏 |
| over | boolean | false | navbar是否悬浮在主内容上 | |
| backgroundColor | string | navbar背景色 | ||
| color | string | navbar前景色 | ||
| bgBlur | boolean | true | navbar背景高斯模糊 | |
| bgColorEnabled | boolean | true | 是否显示背景色,配合属性bgBlur使用 | |
| title | string | 标题 | ||
| subTitle | string | 二级标题 | ||
| back | boolean | true | 是否显示返回按钮 | |
| home | boolean | false | 是否显示主页按钮 | |
| isTab | boolean | false | 是否tab页 | |
| nickname | string | 用户昵称,用于tab页特殊显示 | ||
| nicknameEnabled | boolean | false | 是否显示用户昵称 | |
| holiday | object | {} | 节日信息,用于tab页特殊显示 | |
| hideLeft | boolean | false | 是否隐藏头部左边部分 |
示例代码
html
<x-navbar theme="{{theme}}" bgBlur="{{true}}" >
<!-- 页面代码 -->
</x-navbar><x-navbar theme="{{theme}}" bgBlur="{{true}}" >
<!-- 页面代码 -->
</x-navbar>