布局容器
简介
布局容器其主要就是完成页面的基本布局，这些布局容器最后描述出的页面内容基本上就是静态的页面内容
特点
- 不会涉及动态数据的交互，或者更直白可以描述为用已知的数据去描述当前页面布局
- 布局容器内部主要是对静态数据内容的描述
与数据容器的区别
-
数据容器内部会与数据交互，会去向服务端获取相关的数据资源(比如 table 数据)和页面描述资源(模型资源描述),这中间就涉及前后端数据交互的场景，比如删除，新增数据；布局容器只是通过已有的数据和已知的内容做前端渲染工作
-
数据容器是模型数据展示的窗口，每个数据容器对应一个模型（自定义数据容器除外），而布局容器不会对应一个模型
基本布局容器组件
View
简介
简称根布局，是每个页面最大的父级标签，其是描述页面内容的起点，其内可以根据实际布局放置多个数据容器或者布局容器
简单例子
<View version="2" title="人员列表" subtitle="view 副标题"> <Table key="person" model="trantor_doc_Person"> <Fields> <Field name="name"/> <Field name="avatar"/> </Fields> </Table> <Tabs> <Tab title="部门详情"> </Tab> <Tab title="部门人员列表"> </Tab> </Tabs></View>Anchors
锚点布局，Tab 的切换是 锚点定位 的形式。
锚点就是指在本网页内设置的一个位置，点击链接可以跳转到指定位置
对应 HTML 代码:
<a href="# 锚 ">点这跳到id=锚的点</a><!-- 不一定局限在本页，href里还可能写调页的地址 -->
Tabs
选项卡布局，默认加载第一个选项卡中的内容，选中选项卡会重新渲染当前选项卡下的内容
LinkTabs
链接选项卡布局，其实就是通过链接跳转或者说是改变页面 url 来实现页面布局的切换
Steps
步骤条布局，一般可用于显示相关业务进度， 比如外卖下单 -> 商家接单 -> 骑手接单 -> 骑手配送 -> 完成
Grid
栅格布局
布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：
-
通过 row 在水平方向建立一组 column（简写 col）
-
你的内容应当放置于 col 内，并且，只有 col 可以作为 row 的直接元素
-
栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用.col-8 来创建
-
如果一个 row 中的 col 总和超过 24，那么多余的 col 会作为一个整体另起一行排列