纯血鸿蒙组件库AUI:导航组件(按钮导航组件、图片导航组件) 原创

鸿蒙开发之南拳北腿
发布于 2025-4-15 14:29
浏览
0收藏

摘要:
按钮导航组件(A_ButtonNav):可设置导航数据(含文本及路由),可设置按钮颜色、导航标题及导航子标题。

调用示例:

提示:按钮导航组件是App引导页专用组件,其它类型页面无法使用该组件。

1.将按钮导航组件拖拽到页面排版区
纯血鸿蒙组件库AUI:导航组件(按钮导航组件、图片导航组件)-鸿蒙开发者社区
2.点击“配置数据”,配置每个导航的文字和页面路由
纯血鸿蒙组件库AUI:导航组件(按钮导航组件、图片导航组件)-鸿蒙开发者社区
3.可选项:按钮颜色;导航标题;导航子标题
保存设置
纯血鸿蒙组件库AUI:导航组件(按钮导航组件、图片导航组件)-鸿蒙开发者社区
生成纯血鸿蒙代码:
纯血鸿蒙组件库AUI:导航组件(按钮导航组件、图片导航组件)-鸿蒙开发者社区

  A_ButtonNav({
        data: [
          { text: 'AIGC', router: 'MainTabView' },
          { text: '纯血鸿蒙', router: 'OrderList' }
        ],
        color: ColorConstants.DANGER,
        navTitle: 'AIGC低代码平台',
        navSubTitle: 'AIGC,纯血鸿蒙'
      })

以下分别为按钮导航组件在平板、折叠屏、手机,以及在浅色模式和深色模式下的表现:
纯血鸿蒙组件库AUI:导航组件(按钮导航组件、图片导航组件)-鸿蒙开发者社区
纯血鸿蒙组件库AUI:导航组件(按钮导航组件、图片导航组件)-鸿蒙开发者社区
按钮导航组件各属性字段解释如下:

/**
 * 【按钮导航】
 * 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.将图片导航组件拖拽到页面排版区左上角
纯血鸿蒙组件库AUI:导航组件(按钮导航组件、图片导航组件)-鸿蒙开发者社区

2.点击“配置数据”按钮,为每个导航项配置导航按钮文字、背景图片和页面路由
纯血鸿蒙组件库AUI:导航组件(按钮导航组件、图片导航组件)-鸿蒙开发者社区
可选属性设置:导航按钮的颜色和背景图的高度(以更好适配你的背景图片尺寸)。
可选项:按钮颜色;背景图高度
3.保存设置
纯血鸿蒙组件库AUI:导航组件(按钮导航组件、图片导航组件)-鸿蒙开发者社区
生成纯血鸿蒙代码:
纯血鸿蒙组件库AUI:导航组件(按钮导航组件、图片导航组件)-鸿蒙开发者社区

  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
      })

以下分别为图片导航组件(背景图模式)在平板、折叠屏、手机,以及在浅色模式和深色模式下的表现:
纯血鸿蒙组件库AUI:导航组件(按钮导航组件、图片导航组件)-鸿蒙开发者社区
纯血鸿蒙组件库AUI:导航组件(按钮导航组件、图片导航组件)-鸿蒙开发者社区

调用示例二:非背景图模式

1.将图片导航组件拖拽到页面排版区左上角,背景图模式:选择“否”
纯血鸿蒙组件库AUI:导航组件(按钮导航组件、图片导航组件)-鸿蒙开发者社区
配置导航数据:
2.点击“配置数据”按钮,配置每一项的文字、图片地址,路由绑定存在的页面(不能是"/home")
必填项:文字、图片地址、路由
非背景图片模式下标题和子标题字段不起作用,可以清空
纯血鸿蒙组件库AUI:导航组件(按钮导航组件、图片导航组件)-鸿蒙开发者社区

3.可根据需要设置导航标题和导航子标题,保存设置:
纯血鸿蒙组件库AUI:导航组件(按钮导航组件、图片导航组件)-鸿蒙开发者社区
生成纯血鸿蒙代码:
纯血鸿蒙组件库AUI:导航组件(按钮导航组件、图片导航组件)-鸿蒙开发者社区

 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,纯血鸿蒙'
      })

以下分别为图片导航组件(非背景图模式)在平板、折叠屏、手机,以及在浅色模式和深色模式下的表现,会根据不同设备的特点做优化显示策略:
纯血鸿蒙组件库AUI:导航组件(按钮导航组件、图片导航组件)-鸿蒙开发者社区

纯血鸿蒙组件库AUI:导航组件(按钮导航组件、图片导航组件)-鸿蒙开发者社区
图片导航组件各属性字段解释如下:

/**
 * 【图片导航】
 * 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 = ''

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2025-4-15 15:10:04修改
收藏
回复
举报
回复
    相关推荐