
纯血鸿蒙组件库AUI:导航组件(按钮导航组件、图片导航组件) 原创
摘要:
按钮导航组件(A_ButtonNav):可设置导航数据(含文本及路由),可设置按钮颜色、导航标题及导航子标题。
调用示例:
提示:按钮导航组件是App引导页专用组件,其它类型页面无法使用该组件。
1.将按钮导航组件拖拽到页面排版区
2.点击“配置数据”,配置每个导航的文字和页面路由
3.可选项:按钮颜色;导航标题;导航子标题
保存设置
生成纯血鸿蒙代码:
A_ButtonNav({
data: [
{ text: 'AIGC', router: 'MainTabView' },
{ text: '纯血鸿蒙', router: 'OrderList' }
],
color: ColorConstants.DANGER,
navTitle: 'AIGC低代码平台',
navSubTitle: 'AIGC,纯血鸿蒙'
})
以下分别为按钮导航组件在平板、折叠屏、手机,以及在浅色模式和深色模式下的表现:
按钮导航组件各属性字段解释如下:
/**
* 【按钮导航】
* data:导航数据
* color:按钮颜色
* navTitle:导航标题
* navSubTitle:导航子标题
*/
@Component
export struct A_ButtonNav {
@Prop data: Array<ButtonModel>
@Prop color?: ResourceStr
@Prop navTitle?: string = ''
@Prop navSubTitle?: string = ''
图片导航组件
摘要:
图片导航组件(A_ImageNav):可设置图片数据源(含文本、图片地址及路由)、按钮颜色、背景图高度、背景图模式/图片模式、非背景图模式时可设置导航标题和导航子标题。
调用示例一:背景图模式
提示:图片导航组件是App引导页专用组件,其它类型页面无法使用该组件。
1.将图片导航组件拖拽到页面排版区左上角
2.点击“配置数据”按钮,为每个导航项配置导航按钮文字、背景图片和页面路由
可选属性设置:导航按钮的颜色和背景图的高度(以更好适配你的背景图片尺寸)。
可选项:按钮颜色;背景图高度
3.保存设置
生成纯血鸿蒙代码:
A_ImageNav({
data: [
{ text: '立即体验', src: 'https://cdn.aigcoder.com/sample/ImageNav/pic1.jpeg', router: 'HomeHome', title: 'AI极客', subTitle: 'AIGC赋能程序开发,降本增效,快速生成前后端全技术栈代码。' },
{ text: '设计App', src: 'https://cdn.aigcoder.com/sample/ImageNav/pic2.png', router: 'HomeDiscover', title: '纯血鸿蒙', subTitle: '纯血鸿蒙开发神器,快速开发高质量鸿蒙应用。' }
],
color: ColorConstants.DANGER
})
以下分别为图片导航组件(背景图模式)在平板、折叠屏、手机,以及在浅色模式和深色模式下的表现:
调用示例二:非背景图模式
1.将图片导航组件拖拽到页面排版区左上角,背景图模式:选择“否”
配置导航数据:
2.点击“配置数据”按钮,配置每一项的文字、图片地址,路由绑定存在的页面(不能是"/home")
必填项:文字、图片地址、路由
非背景图片模式下标题和子标题字段不起作用,可以清空
3.可根据需要设置导航标题和导航子标题,保存设置:
生成纯血鸿蒙代码:
A_ImageNav({
data: [
{ text: 'AIGC', src: 'https://cdn.aigcoder.com/sample/ImageNav/pic3.png', router: 'HomeHome' },
{ text: '纯血鸿蒙', src: 'https://cdn.aigcoder.com/sample/ImageNav/pic4.png', router: 'HomeDiscover' }
],
bgImageMode: false,
color: this.primaryColor,
navTitle: 'AIGC低代码平台',
navSubTitle: 'AIGC,纯血鸿蒙'
})
以下分别为图片导航组件(非背景图模式)在平板、折叠屏、手机,以及在浅色模式和深色模式下的表现,会根据不同设备的特点做优化显示策略:
图片导航组件各属性字段解释如下:
/**
* 【图片导航】
* data:图片数据
* color:按钮颜色
* backgroundImageHeight:背景图高度
* bgImageMode:背景图模式(默认)
* navTitle:导航标题(非背景图模式时可选)
* navSubTitle:导航子标题(非背景图模式时可选)
*/
@Component
export struct A_ImageNav {
@Prop data: Array<ImageModel>
@Prop color?: ResourceStr
@Prop backgroundImageHeight?: string = '200vp'
@Prop bgImageMode?: boolean = true
@Prop navTitle?: string = ''
@Prop navSubTitle?: string = ''
