纯血鸿蒙组件库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 = ''