@hadss/web_adaptive_layout_react
v1.0.0-rc.5
Published
Multi-device adaptation advanced component library of the React framework.
Readme
web_adaptive_layout_react
介绍
H5框架的多设备适配高阶组件库react包装器，提供react框架的高价组件库。
目前该库提供的组件如下：
- 侧边栏组件：对标ArkUI的SideBarContainer组件开发的react框架侧边栏组件，使开发者能够轻松的完成侧边栏相关布局能力的开发。
- 栅格组件：对标ArkUI的GridRow/GridCol开发的react框架栅格组件，提供基础的栅格布局能力，使开发能够直接使用ArkUI栅格布局能力。
- 类挪移布局组件: 参考ArkUI的类挪移布局开发的容器组件，使开发者能够轻松的完成类挪移布局能力的开发。
- 页签栏组件：参考ArkUI的Tabs组件开发的react框架页签栏组件，使开发者能够直接实现ArkUI页签栏的能力。
- 网格组件：参考ArkUI的Grid组件开发的react框架网格组件，使开发者能够轻松的完成网格布局能力的开发。
- 分栏组件：参考ArkUI的Navigation组件开发的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);MultiGridRowCol栅格组件使用示例
1. 导入组件库
import { MultiGridRow, MultiGridCol } from '@hadss/web_adaptive_layout_react';2. template中渲染组件
<template>
<MultiGridRow columns={columns}
gutter={gutter}
breakpoints={breakpoints}
onBreakpointChange={breakpointChangeEvent}>
<MultiGridCol span={span}>
xxx内容
</MultiGridCol>
<MultiGridCol span="2">
xxx内容
</MultiGridCol>
</MultiGridRow>
</template>3. 设置组件属性在不同断点下的值或与断点无关的值
const [columns, setColumns] = useState({
xs: 4,
sm: 8,
md: 12,
});
const [gutter, setGutter] = useState({
x: 12,
y: {
xs: 5,
sm: 8,
md: 10,
},
});
const [span, setSpan] = useState({
xs: 1,
sm: 2,
md: 4,
});
const [breakpoints, setBreakpoints] = useState({
breakpointValue: { xs: 0, sm: 320, md: 600, lg: 840 },
breakpointReference: "windowSize",
});
const breakpointChangeEvent = (breakpoint) => {
// ...
};MultiSideBar侧边栏组件使用示例
1. 导入组件库
import { SideBarContainerReact } from '@hadss/web_adaptive_layout_react';2. template中渲染组件 通过子组件定义侧边栏和内容区，第一个子组件表示侧边栏，第二个子组件表示内容区。 1. 必须且仅包含2个子组件。 2. 3个或以上子组件，显示第一个和第二个。 3. 1个子组件，显示侧边栏，内容区为空白。
<template>
<SideBarContainerReact sideBarContainerType={sideBarContainerType}
showSideBar={showSideBar}
sideBarWidth={sideBarWidth}
minSideBarWidth={minSideBarWidth}
minContentWidth={minContentWidth}
divider={divider}
onChangeStatus={changeStatusEvent}>
<div>
侧边栏内容
</div>
<div>
内容区内容
</div>
</SideBarContainerReact>
</template>3. 设置组件属性
const [sideBarContainerType, setSideBarContainerType] = useState('AUTO');
const [showSideBar, setShowSideBar] = useState(true);
const [sideBarWidth, setSideBarWidth] = useState(400);
const [minSideBarWidth, setMinSideBarWidth] = useState(240);
const [minContentWidth, setMinContentWidth] = useState(360);
const [divider, setDivider] = useState({
strokeWidth: '3px',
color: 'rgba(0, 0, 0, 0.3)',
startMargin: '2px',
endMargin: '2px',
});
const changeStatusEvent = (value: boolean) => {
// ...
};MultiNavigation分栏组件使用示例
1. 导入组件库
import { NavigationContainerReact, NavigationBarReact, NavigationContentReact } from '@hadss/web_adaptive_layout_react';2. template中渲染组件
<template>
<NavigationContainerReact navBarWidth={navBarWidth}
navigationPageName={navigationPageName}
onNavBarStateChange={onNavBarStateChange}>
<NavigationBarReact>
导航栏页面
</NavigationBarReact>
<NavigationContentReact></NavigationContentReact>
</NavigationContainerReact>
</template>3. 在路由表中配置内容区路由信息 Navigation为导航栏页面，子标签里的路由对应内容区页面。
<Routes>
<Route path='/navigation' element={<Navigation />}>
<Route path='/pageContent1' element={<PageContent1 />}></Route>
<Route path='/pageContent2' element={<PageContent2 />}></Route>
</Route>
</Routes>4. 设置组件属性 其中navigationPageName必须传递，值为导航栏页面的路由pathname值。
const [navBarWidth, setNavBarWidth] = useState(200);
const [navigationPageName, setNavigationPageName] = useState('/navigation');
const onNavBarStateChange = (isVisible: boolean) => {
// ...
};