@hadss/web_adaptive_layout_react NPM

web_adaptive_layout_react

介绍

H5框架的多设备适配高阶组件库react包装器，提供react框架的高价组件库。

目前该库提供的组件如下： 1. 断点相关组件：使用ArkUI断点能力开发的断点管理组件，能够让开发者直接使用ArkUI断点能力。 2. 自适应显隐容器：对标ArkUI的自适应显隐布局开发的容器，使开发者能够轻松的完成自适应显隐布局能力的开发。 3. 侧边栏组件：对标ArkUI的SideBarContainer组件开发的react框架侧边栏组件，使开发者能够轻松的完成侧边栏相关布局能力的开发。 4. 栅格组件：对标ArkUI的GridRow/GridCol开发的react框架栅格组件，提供基础的栅格布局能力，使开发能够直接使用ArkUI栅格布局能力。 5. 类挪移布局组件: 参考ArkUI的类挪移布局开发的容器组件，使开发者能够轻松的完成类挪移布局能力的开发。 6. 页签栏组件：参考ArkUI的Tabs组件开发的react框架页签栏组件，使开发者能够直接实现ArkUI页签栏的能力。 7. 网格组件：参考ArkUI的Grid组件开发的react框架网格组件，使开发者能够轻松的完成网格布局能力的开发。

目录结构

├─web_adaptive_layout_react // 项目名称
│  ├─src
│  │  ├─components // 组件库源码
│  │  │  ├─multiDiversion // 类挪移组件
│  │  │  │  ├─multiDiversionReact.tsx // 父组件包装器
│  │  │  │  └─diversionItemReact.tsx // 子组件包装器
│  │  │  └─...
│  │  ├─types // 类型定义文件
│  │  │  ├─multiDiversion
│  │  │  │  └─index.ts // 类挪移组件类型
│  │  │  └─...
│  │  ├─utils // 公共方法
│  │  │  ├─getBreakpoint.ts // 断点方法
│  │  │  └─...
│  │  └─index.ts // 组件库入口文件
│  ├─LICENSE
│  ├─vite.config.ts // 打包配置文件
│  ├─tsconfig.json // typeScript配置文件

使用说明

全局断点配置

1. 配置全局断点区间

在工程资源目录public中添加断点配置文件adaptiveui.config.js，定义自己需要的断点区间。

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

2. 在工程入口引入断点配置文件

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

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

MultiDiversion组件使用示例

1. 导入组件库

import { MultiDiversionReact, DiversionItemReact } from '@hadss/web_adaptive_layout_react';

2. render中渲染组件

<MultiDiversionReact direction={direction}
                     splitLine={splitLine}>
  <DiversionItemReact name="first">
    xxx内容
  </DiversionItemReact>
  <DiversionItemReact name="second">
    xxx内容
  </DiversionItemReact>
</MultiDiversionReact>

3. 设置组件属性在不同断点下的值或与断点无关的值

const [direction, setDirection] = useState({
  sm: 'vertical',
  md: 'horizontal',
});
const [splitLine, setSplitLine] = useState(false);

MultiTabBar组件使用示例

1. 导入组件库

import { TabBarContainerReact, TabBarContentReact, TabBarReact, TabBarItemReact } from '@hadss/web_adaptive_layout_react';

2. render中渲染组件

<TabBarContainerReact vertical={vertical}>
  <TabBarContentReact></TabBarContentReact>
  <TabBarReact defaultActiveKey={defaultActiveKey}
               layoutMode={layoutMode}>
    <TabBarItemReact name="first">
      xxx内容
    </TabBarItemReact>
    <TabBarItemReact name="second">
      xxx内容
    </TabBarItemReact>
  </TabBarReact>
</TabBarContainerReact>

3. 设置组件属性在不同断点下的值或与断点无关的值

const [vertical, setVertical] = useState({
  sm: true,
  md: false,
});
const [layoutMode, setLayoutMode] = useState('vertical');
const [defaultActiveKey, setDefaultActiveKey] = useState('first');

MultiGrid组件使用示例

1. 导入组件库

import { MultiGridReact, GridItemReact } from '@hadss/web_adaptive_layout_react';

2. render中渲染组件

<MultiGridReact gridRowGap={gridRowGap}
                gridColumnGap={gridColumnGap}>
  <GridItemReact name="first">
    xxx内容
  </GridItemReact>
  <GridItemReact name="second">
    xxx内容
  </GridItemReact>
</MultiGridReact>

3. 设置组件属性在不同断点下的值或与断点无关的值

const [gridRowGap, setGridRowGap] = useState({
  sm: 10,
  md: 20,
});
const [gridColumnGap, setGridColumnGap] = useState(10);

component library adaptive_layout react

@types/node @types/react @types/react-dom typescript @hadss/web_adaptive_layout_ui

4 months ago

7 months ago

7 months ago

7 months ago

7 months ago