@hadss/web_adaptive_layout_ui

v1.0.0-rc.5

Published

4 months ago

Multi-device adaptation advanced component library of the HTML5 framework.

0High
0Medium
0Low

breakpoint adaptive_layout ui

web_adaptive_layout_ui

介绍

H5框架的多设备适配高阶组件库核心代码。提供高价组件的底层处理逻辑及对应标签，供不同框架调用。提供的高价组件范围参见各不同框架的介绍。

目录结构

├─web_adaptive_layout_ui // 项目名称
│  ├─src
│  │  ├─components // 组件库源码
│  │  │  └─{component-name}
│  │  │     ├─default // 组件默认属性
│  │  │     ├─index.ts // 父标签源码
│  │  │     └─item.ts // 子标签源码
│  │  ├─hooks // 公共方法
│  │  │  └─{method-name}
│  │  ├─types // 类型定义文件
│  │  │  └─{component/method name}
│  │  └─index.ts // 组件库入口文件
│  ├─LICENSE
│  ├─vite.config.ts // 打包配置文件
│  ├─tsconfig.json // typeScript配置文件

断点能力

API

| 属性 | 说明 | 参数值 | 返回值 | 默认值 | |------------------------------|---------------------------------|-------------------------------------------------------------------------------------------------------------|-----------------|------------------------------------------------| | customBreakpoints | 自定义横向断点类型和区间，实例化时传入，暂不支持自定义纵向断点 | Record<Breakpoint, number> | - | 横向断点 (xs：0，sm：320，md：600，lg：840，xl：1440) | | subscribeToBreakpoint | 订阅断点变化，传入回调函数 | callback：(widthCallback: BreakpointCallback | null , heightCallback: BreakpointCallback | null ) => void | 取消订阅的函数 | widthCallback和heightCallback为null | | useBreakpointValue | 传入不同横向断点下的属性值，根据当前断点返回对应的值 | Record<Breakpoint, any> | 当前横向断点下的属性值 | - | | useVerticalBreakpointValue | 传入不同纵向断点下的属性值，根据当前断点返回对应的值 | Record<Breakpoint, any> | 当前纵向断点下的属性值 | - | | getCurrentBreakpoint | 获取当前的横向断点值 | - | 当前的横向断点值 | - | | getCurrentVerticalBreakpoint | 获取当前的纵向断点值 | - | 当前的纵向断点值 | 纵向断点 (sm:高宽比小于0.8，md:高宽比0.8至1.2，lg:高宽比大于等于1.2) | | getBreakpoints | 获取当前的内置的横向断点类型和区间 | - | 当前的内置的横向断点类型和区间 | - | | destroy | 销毁实例，移除监听器，清空回调函数集合 | - | - | - |

使用说明

1. import断点管理类

import { BreakpointManager } from '@hadss/web_adaptive_layout_ui';

2. 原生侧定义动态断点获取逻辑 开启原生动态断点能力，需要按照如下步骤进行配置。（1）在web组件中使用registerJavaScriptProxy接口注册应用侧JavaScript对象，对象名称为systemBreakpoint，对象中的同步方法名为getWindowWidthBreakpoint和getWindowHeightBreakpoint。（2）在BreakpointClass对象中定义获取原生动态断点的方法：getWindowWidthBreakpoint和getWindowHeightBreakpoint。（3）组件销毁时，需要用deleteJavaScriptRegister接口删除通过registerJavaScriptProxy注册到window上的systemBreakpoint对象，防止内存泄漏。注意：应用侧JavaScript对象名称和对象中的同步方法名不能改动。示例代码：

import { webview } from '@kit.ArkWeb';
import { UIContext } from '@kit.ArkUI';

class BreakpointClass {
  private _uiContext: UIContext | null = null;

  constructor(uiContext: UIContext | null) {
    this._uiContext = uiContext;
  }

  getWindowWidthBreakpoint() {
    return this._uiContext?.getWindowWidthBreakpoint();
  }

  getWindowHeightBreakpoint() {
    return this._uiContext?.getWindowHeightBreakpoint();
  }
}

@Entry
@Component
struct WebComponent {
  webController: webview.WebviewController = new webview.WebviewController();
  @State breakpointObj: BreakpointClass | null = null;

  aboutToAppear(): void {
    this.breakpointObj = new BreakpointClass(this.getUIContext());
  }

  aboutToDisappear(): void {
    try {
      this.webController.deleteJavaScriptRegister("systemBreakpoint");
    } catch (error) {
      console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
    }
  }

  build() {
    Column() {
      Web({ src: 'xxx', controller: this.webController })
        ...
        .onControllerAttached(() => {
          // 注册应用侧JavaScript对象
          this.webController.registerJavaScriptProxy(this.breakpointObj, "systemBreakpoint", ["getWindowWidthBreakpoint", "getWindowHeightBreakpoint"]);
        })
    }
  }
}

3. 实例化断点管理类 完成上一步的动态断点定义且未自定义断点类型和区间时，默认开启动态断点能力，否则将执行库中的断点逻辑。

const breakpointManager = new BreakpointManager();

可传入参数customBreakpoints，自定义断点类型和区间：

{
  xs: 0,
  sm: 320,
  md: 600,
  lg: 840,
  xl: 1440,
}

4. 配置全局断点区间 在工程资源目录public中添加断点配置文件adaptiveui.config.js，定义自己需要的断点区间。全局断点配置优先级低于实例化时的自定义断点配置。

window.adaptiveUiConfig = {
  breakpoint: {
    xs: 0,
    sm: 320,
    md: 600,
    lg: 840,
    xl: 1440,
  },
};

5. 在工程入口引入断点配置文件 在工程资源目录public中找到入口文件index.html，在“head”标签中通过“script”标签直接引入断点配置文件。

<head>
  <script src="./adaptiveui.config.js"></script>
</head>

6. 注册断点回调，在回调中实时获取当前断点下的属性值和断点值

const unsubscribe = breakpointManager.subscribeToBreakpoint((widthBp) => {
  // 横向断点回调，可设置为null  
  direction = breakpointManager.useBreakpointValue({
    xs: 'vertical',
    sm: 'vertical',
    md: 'horizontal',
    lg: 'horizontal',
    xl: 'horizontal',
  });
  breakpointManager.getCurrentBreakpoint();
}, (heightBp) => {
  // 纵向断点回调，可不传或设置为null
  breakpointManager.getCurrentVerticalBreakpoint();
})

如果只定义了中间连续区域的属性值，两侧的断点区间会根据最近的值进行补齐，故上面的代码可做一定的简化：

const unsubscribe = breakpointManager.subscribeToBreakpoint((bp,vbp) => {
  direction = breakpointManager.useBreakpointValue({
    sm: 'vertical',
    md: 'horizontal',
  });
  breakpointManager.getCurrentBreakpoint();
  breakpointManager.getCurrentVerticalBreakpoint();
})

7. 获取当前的内置的断点类型和区间

breakpointManager.getBreakpoints();

8. 页面销毁前取消断点订阅并销毁实例

unsubscribe();
breakpointManager.destroy();

类挪移布局组件MultiDiversion

API

父标签

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |---------------|---------|--------|----------------------------------|-----| | direction | 设置横纵向排列 | String | "horizontal"：横向排列"vertical"：纵向排列 | "xs"：vertical "sm"：vertical "md"：horizontal "lg"：horizontal "xl"：horizontal "xxl"：horizontal | | splitLine | 设置是否显示子元素分割线 | Boolean | "true"，"false" | false | | splitLineMode | 设置分割线的类型 | String | "solid"：实线 "dashed"：虚线 "dotted"：点线 | dotted |

子标签

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |----|---|---|---|---| | name | 当前子标签的唯一标识名称(必填) | String | - | - | | diversionCols | 子元素占据的栅格列数 | String / Number | - | 12 | | diversionGap | 子元素内容的左右内边距和 | String / Number | - | 0 |

页签栏组件MultiTabBar

API

父标签TabBarContainer

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |----|---|---|---|---| | vertical | 设置是否为纵向 | Boolean | "true"：纵向tab "false"：横向tab | "xs"：false "sm"：false "md"：false "lg"：true "xl"：true "xxl"：true | | barPosition | 设置组件的位置 | String | "start"：容器左侧/顶部 "end"：容器右侧/底部 | "xs"：end "sm"：end "md"：end "lg"：start "xl"：start "xxl"：start |

页签栏标签TabBar

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |----|---|---|---|---| | value | 设置页签栏子标签默认选中项 | String / Number | 子标签设置的name属性 | - | | width | 设置组件的宽度 | String / Number | - | "xs"：100% "sm"：100% "md"：100% "lg"：58px "xl"：58px "xxl"：58px | | height | 设置组件的高度 | String / Number | - | "xs"：78px "sm"：78px "md"：78px "lg"：100% "xl"：100% "xxl"：100% | | unselectedColor | 设置子标签文本字体未选中时的颜色 | String | - | #aaacab | | selectedColor | 设置子标签文本字体选中时的颜色 | String | - | #0b59f7 | | layoutMode | 设置子标签里元素的排布方式 | String | "vertical"：子标签内容垂直排布 "horizontal"：子标签内容水平排布 | "xs"：vertical "sm"：vertical "md"：horizontal "lg"：vertical "xl"：vertical "xxl"：vertical | | verticalAlign | 设置子标签里元素垂直方向上的对齐方式 | String | "top"：顶部对齐 "center"：居中对齐 "bottom"：底部对齐 | center | | horizontalAlign | 设置子标签里元素水平方向上的对齐方式 | String | "start"：起始端对齐 "center"：居中对齐 "end"：末端对齐 | center | | bgColor | 设置子标签未选中时的背景颜色 | String | - | #ffffff | | selectedBgColor | 设置子标签选中时的背景颜色 | String | - | #f1f5ff |

子标签TabBarItem

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |----|---|---|---|---| | name | 当前子标签的唯一标识名称(必填) | String | - | - |

EVENT

| 事件名 | 说明 | 参数 | |----|---|---| | onTabItemClick | 点击页签栏子项触发的事件 | Function({index, name}) "index"：选中子项的索引值 "name"：选中子项的标识名称 |

网格组件MultiGrid

API

父标签

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |----|---|---|---|---| | columnsTemplate | 设置组件每一列的列宽 | String / Number | 1.固定单位 2.百分比 3.repeat()，接受两个参数：(1)参数1：重复的次数，参数2：需要重复的值 (2)参数1：auto-fill关键字表示自动填充，参数2：每列宽度 (3)参数1：auto-fit关键字表示自动填充，宽度不足时会调整 3.fr关键字：表示比例关系 4.minmax()：接受最小值和最大值两个参数 5.auto关键字：浏览器自己决定长度 | "xs"：1fr 1fr 1fr 1fr "sm"：1fr 1fr 1fr 1fr "md"：1fr 1fr 1fr 1fr 1fr 1fr "lg"：1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr "xl"：1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr "xxl"：1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr | | rowsTemplate | 设置组件每一行的行高 | String / Number | 同columnsTemplate | auto | | gridRowGap | 设置网格行与行的间隔 | String / Number | - | 0 | | gridColumnGap | 设置网格列与列的间隔 | String / Number | - | 0 | | justifyItems | 设置网格项内容的水平位置 | String | "stretch"：拉伸以填充网格项 "start"：网格项起点位置对齐 "end"：网格项终点位置对齐 "center"：网格项中间位置对齐 | stretch | | alignItems | 设置网格项内容的垂直位置 | String | "stretch"：拉伸以填充网格项 "start"：网格项起点位置对齐 "end"：网格项终点位置对齐 "center"：网格项中间位置对齐 | stretch | | justifyContent | 整个内容区域在容器里的水平位置 | String | "stretch"：未指定大小时拉伸填充容器 "start"：对齐容器的起始边框 "end"：对齐容器的结束边框 "center"：容器内容居中 "space-around"：子项两侧间隔相等 "space-between"：子项间间隔相等，与容器边框无间隔 "space-evenly"：子项间间隔相等 | stretch | | alignContent | 整个内容区域在容器里的垂直位置 | String | 同justifyContent | stretch |

子标签

| 属性 | 说明 | 类型 | 可选值 | 默认值 | |----|---|---|---|---| | name | 当前子标签的唯一标识名称(必填) | String | - | - | | gridColumnStart | 设置左边框所在的起始列号 | String / Number | - | auto | | gridColumnEnd | 设置右边框所在的终点列号 | String / Number | - | auto | | gridRowStart | 设置上边框所在的起始行号 | String / Number | - | auto | | gridRowEnd | 设置下边框所在的终点行号 | String / Number | - | auto | | label | 设置网格项的文本内容(不支持断点) | String | - | - | | icon | 设置网格项的图标链接(不支持断点，只支持网络链接) | String | - | - |

EVENT

| 事件名 | 说明 | 参数 | |----|---|---| | onGridItemClick | 点击网格子项触发的事件 | Function({index, name}) "index"：选中子项的索引值 "name"：选中子项的标识名称 |

组件显隐能力

API

显隐能力管理类DisplayPriorityLayout

实例化时需传入HTML元素 | 属性 | 说明 | 参数 | 返回值 | |----|---|---|---| | initializeLayout | 初始化显隐能力 | - | - | | destroy | 销毁事件监听 | - | - |

HTML自定义属性

| 属性 | 说明 | 类型 | 默认值 | |----|---|---|---| | data-priority-status | 设置当前元素是否开启显隐控制功能 | Boolean | false | | data-display-priority | 设置当前元素在父容器中的显示优先级小数点后的数字不做优先级区分，即区间为[x, x+1)内的数字视为相同优先级。例如：1.0和1.9为同一优先级。属性值均不大于1时，优先级没有区别。属性值大于1时，值越大则优先级越高。若父容器空间不足，隐藏低优先级的子元素。若某一优先级的子元素被隐藏，则优先级更低的子元素也都被隐藏。 | Number | 1 |

显隐能力函数

| 属性 | 说明 | 参数值 | 返回值 | |----|---|---|---| | initializeDisplayPriorityLayout | 识别所有设置data-priority-status属性的元素，为其初始化显隐能力 | - | 显隐能力管理类的实例集合：DisplayPriorityLayout[]用于销毁所有元素上的监听事件，具体见使用说明。 |

使用说明

1. 导入显隐能力函数和显隐能力管理类

import { initializeDisplayPriorityLayout, DisplayPriorityLayout } from '@hadss/web_adaptive_layout_ui';

2. 在需要使用的HTML元素上增加data-priority-status自定义属性并设置为true，不使用则设置为false。子元素增加data-display-priority优先级属性。

<div ref="containerRef" data-priority-status="true">
  <div class="item" data-display-priority="5.0">Item 1</div>
  <div class="item" data-display-priority="2">Item 2</div>
  <div class="item" data-display-priority="3">Item 3</div>
  <div class="item" data-display-priority="1">Item 4</div>
  <div class="item" data-display-priority="2.0">Item 5</div>
</div>

3. 提供两种添加显隐能力的方式，需要在组件实例挂载完成后使用，组件实例卸载时需要销毁事件监听。

方式一: 调用显隐能力函数，批量添加显隐能力

 // 以vue框架为例，需要在onMounted中执行
 let layouts: DisplayPriorityLayout[] = [];
 onMounted(() => {
   layouts = initializeDisplayPriorityLayout();
 });

 // 组件实例卸载时销毁事件监听
 onUnmounted(() => {
   layouts.forEach((layout: DisplayPriorityLayout) => {
     layout.destroy();
   });
 });

方式二: 引入显隐能力管理类，为特定元素添加显隐能力

 // 以vue框架为例，需要在onMounted中执行
 let displayPriorityLayout: DisplayPriorityLayout | null = null;
 const containerRef = ref<HTMLElement>(null);
 onMounted(() => {
   displayPriorityLayout = new DisplayPriorityLayout(containerRef.value);
   displayPriorityLayout.initializeLayout();
 });

 // 组件实例卸载时销毁事件监听
 onUnmounted(() => {
   displayPriorityLayout?.destroy();
 });

使用限制

仅支持非表单、表格的块级元素和内联块级元素
容器里面的子元素不能设置绝对定位、固定定位和浮动等会导致子元素脱离文档流的样式
仅支持单行样式，如一行或一列，不支持grid布局

栅格组件

API

父组件MultiGridRow | 属性 | 说明 | 类型 | 可选值 | 默认值 | |----|---|---|---|---| | columns | 设置设置布局列数。1.取值为大于0的整数 2.object类型参数支持{xs: 8, sm: 12, md: 12, lg: 12, xl: 16}类型的参数 | Number / Object | - | 12 | | gutter | 栅格布局间距。 1. String/Number类型的值即为横纵布局间距 2. object类型参数支持{x: 12, y: {xs: 5, sm: 8, md: 10}}类型的参数 | String / Number / Object | - | 0 | | breakpoints | 设置断点值的断点数列以及基于窗口或容器尺寸的相应参照。 | Object | breakpointReference值可选“componentSize”、“windowSize”。分别代表参照组件宽度及参照窗口宽度。 | { breakpointValue: { xs: 0, sm: 320, md: 600, lg: 840 }, breakpointReference: "windowSize", } | | direction | 栅格布局排列方向 | String | row / row-reverse | row |

子组件MultiGridCol | 属性 | 说明 | 类型 | 可选值 | 默认值 | |----|---|---|---|---| | span | 栅格子组件占用栅格容器组件的列数。span为0表示该元素不参与布局计算，即不会被渲染。1.取值为大于0的整数 2.object类型参数支持{xs: 8, sm: 12, md: 12, lg: 12, xl: 16}类型的参数 | Number / Object | - | 1 | | offset | 栅格子组件相对于原本位置偏移的列数。1.取值为大于0的整数 2.object类型参数支持{xs: 8, sm: 12, md: 12, lg: 12, xl: 16}类型的参数 | Number / Object | - | 0 | | order | 元素的序号，根据栅格子组件的序号，从小到大对栅格子组件做排序。1.取值为大于0的整数 2.object类型参数支持{xs: 8, sm: 12, md: 12, lg: 12, xl: 16}类型的参数当子组件不设置order或者设置相同的order, 子组件按照代码顺序展示。当子组件部分设置order，部分不设置order时，未设置order的子组件依次排序靠前，设置了order的子组件按照数值从小到大排列。 | Number / Object | - | 0 | | label | 设置网格项的文本内容(不支持断点) | String | - | - | | icon | 设置网格项的图标链接(不支持断点，只支持网络链接) | String | - | - |

EVENT

| 事件名 | 说明 | 参数 | |----|---|---| | onGridItemClick | 点击网格子项触发的事件 | Function({index, name}) "index"：选中子项的索引值 "name"：选中子项的标识名称 | | onBreakpointChange | 断点发生变化时触发回调 | Function(breakpoint) 断点值，取值为"xs"、"sm"、"md"、"lg"、"xl"、"xxl"。 |

侧边栏组件

API

MultiSideBar | 属性 | 说明 | 类型 | 是否必填 | 默认值 | |----|---|---|---|---| | sideBarContainerType | 设置侧边栏的显示类型 | SideBarContainerType | 否 | Embed | | showSideBar | 设置是否显示侧边栏 | Boolean | 否 | true | | controlButton | 设置侧边栏控制按钮的属性 | ButtonStyle | 否 | - | | showControlButton | 设置是否显示控制按钮 | Boolean | 否 | true | | sideBarWidth | 设置侧边栏的宽度。设置为小于0的值时按默认值显示。受最小宽度和最大宽度限制，不在限制区域内取最近的点 | String / Number | 否 | 240, 单位：px | | minSideBarWidth | 设置侧边栏最小宽度。设置为小于0的值时按默认值显示。值不能超过侧边栏容器本身宽度，超过使用侧边栏容器本身宽度 | String / Number | 否 | 240, 单位：px | | maxSideBarWidth | 设置侧边栏最大宽度。设置为小于0的值时按默认值显示。值不能超过侧边栏容器本身宽度，超过使用侧边栏容器本身宽度 | String / Number | 否 | 280, 单位：px | | autoHide | 设置当侧边栏拖拽到小于最小宽度后，是否自动隐藏。受minSideBarWidth属性方法影响，minSideBarWidth属性方法未设置值使用默认值 | Boolean | 否 | true | | sideBarPosition | 设置侧边栏显示位置 | SideBarPosition | 否 | Start | | divider | 设置分割线的样式 | DividerStyle / null | 否 | - | | minContentWidth | 设置SideBarContainer组件内容区可显示的最小宽度 | String / Number | 否 | 360, 单位：px |

SideBarContainerType类型 | 名称 | 说明 | |----|---| | Embed | 侧边栏嵌入到组件内，和内容区并列显示。组件尺寸小于minContentWidth + minSideBarWidth,并且未设置showSideBar时，侧边栏自动隐藏。未设置minSideBarWidth或者minContentWidth采用未设置接口的默认值进行计算。组件在自动隐藏后，如果通过点击控制按钮唤出侧边栏，则侧边栏悬浮在内容区上显示。 | | Overlay | 侧边栏浮在内容区上面 | | AUTO | 组件尺寸大于等于minSideBarWidth+minContentWidth时，采用Embed模式显示。组件尺寸小于minSideBarWidth+minContentWidth时，采用Overlay模式显示。未设置minSideBarWidth或minContentWidth时，会使用未设置接口的默认值进行计算，若计算的值小于600px，则使用600px做为模式切换的断点值。 |

ButtonStyle类型 | 名称 | 类型 | 必填 | 说明 | |----|---|---|---| | left | Number | 否 | 设置侧边栏控制按钮距离容器左界限的间距。默认值：16, 单位：px | | top | Number | 否 | 设置侧边栏控制按钮距离容器上界限的间距。默认值：48, 单位：px | | width | Number | 否 | 设置侧边栏控制按钮的宽度。默认值：24, 单位：px | | height | Number | 否 | 设置侧边栏控制按钮的高度。默认值：24, 单位：px | | icons | { shown: String; hidden: String } | 否 | 设置侧边栏控制按钮的图标 shown: 设置侧边栏显示时控制按钮的图标。说明：资源获取错误时，使用默认图标。 hidden: 设置侧边栏隐藏时控制按钮的图标。图标资源需要用require进行加载和传值 |

SideBarPosition类型 | 名称 | 说明 | |----|---| | Start | 侧边栏位于容器左侧 | | End | 侧边栏位于容器右侧 |

DividerStyle类型 | 名称 | 类型 | 必填 | 说明 | |----|---|---|---| | strokeWidth | String / Number | 否 | 分割线的线宽。默认值：1, 单位：px | | color | String | 否 | 分割线的颜色。默认值：#000000，3% | | startMargin | String / Number | 否 | 分割线与侧边栏顶端的距离。默认值：0, 单位：px | | endMargin | String / Number | 否 | 分割线与侧边栏底端的距离。默认值：0, 单位：px |

EVENT

| 事件名 | 说明 | 参数 | |----|---|---| | onChangeStatus | 当侧边栏的状态在显示和隐藏之间切换时触发回调 | value：Boolean true表示显示，false表示隐藏。 |

分栏组件

API

父标签NavContainer | 属性 | 说明 | 类型 | 是否必填 | 默认值 | |----|---|---|---|---| | navBarWidth | 设置导航栏宽度。仅在Navigation组件分栏时生效。 | String / Number | 否 | 默认值：240单位：px | | navBarWidthRange | 设置导航栏最小和最大宽度（双栏模式下生效）。 | [Dimension, Dimension] | 否 | 默认值：最小默认值 240，最大默认值为组件宽度的40% ，且不大于 432，未正确设置的值按照默认值计算。单位：px | | minContentWidth | 导航栏内容区最小宽度。 | String / Number | 否 | 默认值：360单位：px | | mode | 导航栏的显示模式。 | NavigationMode | 否 | 默认值：NavigationMode.Auto自适应:基于组件宽度自适应单栏和双栏。 | | navigationPageName | 导航栏页面的路由名称，属性参考对应框架的README介绍 | String | 是 | - | | navBarPosition | 设置导航栏位置。仅在Navigation组件分栏时生效。 | NavBarPosition | 否 | NavBarPosition.Start |

Dimension类型 | 名称 | 说明 | |----|---| | String / Number | 默认按照像素单位进行处理，如10处理为'10px'。 | | px | 需要指定以px像素单位，如'10px'。 | | % | 需要指定以%像素单位，如'10%'。 |

NavigationMode类型 | 名称 | 说明 | |----|---| | Stack | 导航栏与内容区独立显示，相当于两个页面。 | | Split | 导航栏与内容区分两栏显示。以下navBarWidthRange的值用[minNavBarWidth,maxNavBarWidth]表示1.当navBarWidth属性的值，在navBarWidthRange属性的值范围以外时，navBarWidth按如下规则显示：navBarWidth < minNavBarWidth时，navBarWidth修正为minNavBarWidth;navBarWidth > maxNavBarWidth，且组件宽度 - minContentWidth - 分割线宽度(1) > maxNavBarWidth时，navBarWidth修正为maxNavBarWidth;navBarWidth > maxNavBarWidth，且组件宽度 - minContentWidth - 分割线宽度(1) < minNavBarWidth时，navBarWidth修正为minNavBarWidth;navBarWidth > maxNavBarWidth，且组件宽度 - minContentWidth - 分割线宽度(1)在navBarWidthRange范围内，navBarWidth修正为组件宽度 - 分割线宽度(1) - minContentWidth。2.当navBarWidth属性的值，在navBarWidthRange属性的值范围以内时，navBarWidth按如下规则显示：minNavBarWidth + minContentWidth + 分割线宽度(1) >= 组件宽度时，navBarWidth修正为minNavBarWidth；minNavBarWidth + minContentWidth + 分割线宽度(1) < 组件宽度，且navBarWidth + minContentWidth + 分割线宽度(1) >= 组件宽度时，navBarWidth修正为组件宽度 - 分割线宽度(1) - minContentWidth;minNavBarWidth + minContentWidth + 分割线宽度(1) < 组件宽度，且navBarWidth + minContentWidth + 分割线宽度(1) < 组件宽度时，navBarWidth为设置的值。3.缩小组件尺寸时，先缩小内容区的尺寸至minContentWidth，然后再缩小导航栏的尺寸至minNavBarWidth。若继续缩小，先缩小内容区，内容区消失后再缩小导航栏。4.设置导航栏为固定尺寸时，若持续缩小组件尺寸，导航栏最后压缩显示。5.若只设置了navBarWidth属性，则导航栏宽度为navBarWidth，且分割线不可拖动。 | | Auto | 窗口宽度>=600px时，采用Split模式显示；窗口宽度<600px时，采用Stack模式显示，600px等于minNavBarWidth(240px) + minContentWidth (360px)。 |

NavBarPosition类型 | 名称 | 说明 | |----|---| | Start | 双栏显示时，导航栏和内容区按照标签的放置顺序排布。 | | End | 双栏显示时，导航栏和内容区按照标签的放置顺序反方向排布。 |

EVENT

| 事件名 | 说明 | 参数 | |----|---|---| | onNavBarStateChange | 导航栏显示状态切换时触发该回调。 | isVisible为true时表示显示，为false时表示隐藏。 | | onNavigationModeChange | 当Navigation首次显示或者单双栏状态发生变化时触发该回调。 | mode为NavigationMode.Split时，当前Navigation显示为双栏；mode为NavigationMode.Stack时，当前Navigation显示为单栏。 |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

web_adaptive_layout_ui

介绍

目录结构

断点能力

API

使用说明

类挪移布局组件MultiDiversion

API

页签栏组件MultiTabBar

API

EVENT

网格组件MultiGrid

API

EVENT

组件显隐能力

API

使用说明

使用限制

栅格组件

API

EVENT

侧边栏组件

API

EVENT

分栏组件

API

EVENT