1.0.6 • Published 2 years ago
@mas.io/adc-nav-bar v1.0.6
安装
tnpm install --save @alipay/adc-nav-bar组件介绍
能力中心小程序索导航栏组件，可自定义导航栏样式，满足业务需求，使用时需添加"transparentTitle": "always"。
参数说明
| 属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 |
|---|---|---|---|---|---|
| className | 否 | string | 自定义样式 | - | - |
| title | 否 | string | 导航栏标题 | - | 首页 |
| align | 否 | string | justify-content对齐方式 | flex-start | flex-end |
| fill | 否 | boolean | 是否填充头部 | true | false |
| isBack | 否 | boolean | 是否需要返回按钮 | true | false |
| useSlot | 否 | boolean | 是否自定义标题 | false | true |
| fontSize | 否 | string | 字体大小 | 32rpx | 36rpx |
| color | 否 | string | 字体颜色 | #fff | #000 |
| zIndex | 否 | string | z-index | '' | 9 |
| onCallback | 否 | Function | navbar加载完成回调，返回navbar高度 | null | (e)=>{} |
| onTitleBarTap | 否 | Function | 点击navbar | #null | (e)=>{} |
| background | 否 | string | 背景颜色 | linear-gradient(246deg, #FADC0F 0%, #FA8C12 100%, #FA8C12 100%) | #fff |
| backBtnColor | 否 | string | 设置返回按钮颜色 | '' | #fff |
在小程序中使用
{
"usingComponents": {
"mas-adc-nav-bar": "@alipay/adc-nav-bar/es/index"
}
}在 page.axml 中引用组件
<!-- 页面使用方式 -->
<adc-nav-bar title="标题" isBack="{{false}}" background="{{background}}"></adc-nav-bar>
<view>
这是文本内容....
</view>Badges