🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 布局控件 ## 简介 > 功能简介 > 1、`栅格布局`:将页面布局划分为等宽的列\[可修改宽度\],然后通过列数的模块化页面\[控件\]布局 > 2、`标签页`:Tab页面是类似标签页的一个界面设计,在页面的顶部互相独立的标签来展示同一个页面不同的\[控件\]内容区域。 > 3、`步骤条`:\[例如:\[1,2\]满足步骤1,才能进入步骤2的操作,保存表单:需要操作完步骤条\] > 4、`折叠面板`:对于\[控件\]过于多的内容,可以使用折叠面板来减少\[控件\]内容的占用空间 > 5、`字段分组`:主要用来对\[控件\]进行分组,以便用户识别 > 6、`卡片布局`: > 7、`分割面板`:利用分割条可以将面板板划分区域大小,可收起另外收起一半分割面板。 > 8、`表格布局`:表格布局中含有大量\[控件\],根据不同的功能\[控件\]或相似的\[控件\]将其分为不同的组,表格中的格子可以合成为一个共同的格子, ## 布局控件讲解 ## 1、栅格布局 > 栅格布局控件:将页面布局划分为等宽的列\[可修改宽度\],然后通过列数的模块化页面布局 1.1、添加栅格布局控件 > \[如下图:长按栅格布局>>左滑到设计页面>>松开左键\] ![](https://img.kancloud.cn/fb/23/fb236826ec2a2f59c9bc8062d034697d_1920x999.png) 1.2、配置栅格控件\[简述\] 1.2.1、左右间距,上下间隔,高度间隔【】 ![](https://img.kancloud.cn/33/1e/331eb607677ff256dc273919cac68388_1920x737.png) 1.2.2、列配置项 ![](https://img.kancloud.cn/d0/df/d0dfd0bb1a7dea7967432332bd5020ca_1920x647.png) 1.2.3、预览效果 ![](https://img.kancloud.cn/80/d8/80d8fbfcacef619488c1f263b173d628_1919x176.png) ## 2、标签页 > 标签页控件:Tab页面是类似标签页的一个界面设计,在页面的顶部互相独立的标签来展示同一个页面不同的控件内容区域。 2.1、添加标签页控件,`参考`:1.1、添加栅格布局控件 2.2、配置标签页控件\[简述\] ![](https://img.kancloud.cn/e5/43/e543c0b0d858fb679ae21dfec509d654_1657x793.png) 2.3、预览效果 ![](https://img.kancloud.cn/21/6a/216aeb3c5ea17e470f5282a9095f7395_1920x323.png) ## 3、步骤条 > 步骤条控件:\[例如:\[1,2\]满足步骤1,才能进入步骤2的操作,保存表单:需要操作完步骤条\] 3.1、添加步骤条控件,`参考`:1.1、添加栅格布局控件 3.2、配置步骤条控件\[简述\] ![](https://img.kancloud.cn/2c/cd/2ccdc53737a65e7200724da68c12766e_1920x954.png) 3.3、预览效果 ![](https://img.kancloud.cn/ec/28/ec2839ef48c62edd626e28ae92e9105e_1920x230.png) ## 4、折叠面板 > 折叠面板控件:对于控件过于多的内容,可以使用折叠面板来减少控件内容的占用空间 3.1、添加步骤条控件,`参考`:1.1、添加栅格布局控件 3.2、配置折叠面板控件\[简述\] ![](https://img.kancloud.cn/ff/f6/fff66fa7e7f00ebed7b1805c36702be3_1704x549.png) 3.3、预览效果 ![](https://img.kancloud.cn/76/e4/76e43bd461aedfa772b4d013678d40ed_1920x292.png) ## 5、字段分组 > 字段分组控件:主要用来对其他类型控件进行分组,以便用户识别 5.1、添加字段分组控件,`参考`:1.1、添加栅格布局控件 5.2、配置步骤条控件\[简述\] ![](https://img.kancloud.cn/d3/de/d3de7ecddebaca78f9dc00d8af8a2308_1701x581.png) 5.3、预览效果 ![](https://img.kancloud.cn/50/25/502508ec9b815c1a6546ba7abd2ab8f0_1920x606.png) ## 6、卡片布局 6.1、添加卡片布局控件,`参考`:1.1、添加栅格布局控件 6.2、配置卡片布局控件\[简述\] ![](https://img.kancloud.cn/b8/d9/b8d93c6518846230d24460901ccec921_1702x341.png) 6.3、预览效果 ![](https://img.kancloud.cn/a6/97/a6978f8f725f66cf03c4a9a25be0447b_1920x404.png) ## 7、分割面板 > 分割面板控件:利用分割条可以将面板板划分区域大小,可收起另外收起一半分割面板。 7.1、添加分割面板控件,`参考`:1.1、添加栅格布局控件 7.2、配置分割面板控件\[简述\] ![](https://img.kancloud.cn/7d/9a/7d9a4154d7c815692b3191ec929acde0_1701x665.png) 7.3.1、预览效果一 ![](https://img.kancloud.cn/b9/07/b907f05ec092614acd0d4f6eb58c23f7_1920x234.png) 7.3.2、预览效果二【收缩后】 ![](https://img.kancloud.cn/fc/fd/fcfd3c235c4b4d73be3f4d26deb206d3_1920x202.png) 7.3.3、预览效果三【滑动分割页】 ![](https://img.kancloud.cn/f1/39/f139eb8f8460521735037ad19c0330fc_1920x246.png) ## 8、表格布局 > 表格布局控件:表格布局中含有大量控件,根据不同的功能或相似的属性将其分为不同的组,表格中的格子可以合成为一个共同的格子, 8.1、添加表格布局控件,`参考`:1.1、添加栅格布局控件 8.2、配置表格布局控件\[简述\] ![](https://img.kancloud.cn/6d/0e/6d0e18d797079ab19b90dbbd5c58cfb2_1702x542.png) ![](https://img.kancloud.cn/ef/70/ef70872986731a69acf1ef341055135b_1703x285.png) 8.2.1、单元格设置 > 左插入列:在当前单元格左方插入一条行 > 右插入列:在当前单元格右方插入一条行 > 上插入行:在当前单元格上方插入一条行 > 下插入行:在当前单元格下方插入一条行 > 向右合并:向右合并\[相同高度\],最后一列,禁止合并 > 向下合并:向下合并\[相同宽度\],最后一行,禁止合并 > 拆分为行:拆分\[上下合并\]的单元格,\[只支持上下合并单元格\] > 拆分为列:拆分\[左右合并\]的单元格,\[只支持左右合并单元格\] > 删除当前列:1、删除\[单元格\]当前行,删除整行。2、删除\[合并的单元格\]单前行,删除\[合并单元格\]\[第一行\] ![](https://img.kancloud.cn/42/45/4245b825de35febdaaaf523c87cc033b_1376x457.png) 8.3、预览效果 ![](https://img.kancloud.cn/89/ec/89ec519f1b8c8d5cd645dc100ed16dbf_1920x465.png)