跳转到内容
Trantor 文档

布局容器

简介

布局容器其主要就是完成页面的基本布局，这些布局容器最后描述出的页面内容基本上就是静态的页面内容

特点

  • 不会涉及动态数据的交互，或者更直白可以描述为用已知的数据去描述当前页面布局
  • 布局容器内部主要是对静态数据内容的描述

与数据容器的区别

  • 数据容器内部会与数据交互，会去向服务端获取相关的数据资源(比如 table 数据)和页面描述资源(模型资源描述),这中间就涉及前后端数据交互的场景，比如删除，新增数据；布局容器只是通过已有的数据和已知的内容做前端渲染工作

  • 数据容器是模型数据展示的窗口，每个数据容器对应一个模型（自定义数据容器除外），而布局容器不会对应一个模型

基本布局容器组件

View

简介

简称根布局，是每个页面最大的父级标签，其是描述页面内容的起点，其内可以根据实际布局放置多个数据容器或者布局容器

简单例子

<View 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>

view显示示意图

Anchors

简介

锚点布局，Tab 的切换是 锚点定位 的形式。 锚点就是指在本网页内设置的一个位置，点击链接可以跳转到指定位置 对应 HTML 代码: <a href="# 锚 ">点这跳到id=锚的点</a><!-- 不一定局限在本页，href里还可能写调页的地址 -->

简单例子

<View title="Anchors 布局">
  <Anchors>  <!-- Anchors布局容器  -->
    <Anchor title="部门详情"> <!-- Anchors下对应的锚点1  -->
      <Detail key="department" model="trantor_doc_Department"> <!-- 锚点1 对应的内容 -->
        <Fields>
          <Field name="name"/>
        </Fields>
      </Detail>
    </Anchor>
    <Anchor title="部门人员列表"> <!-- Anchors下对应的锚点2  -->
      <Table model="trantor_doc_Person" lookupFrom="department.staff">  <!-- 锚点2 对应的内容 -->
        <Fields>
          <Field name="name"/>
        </Fields>
      </Table>
    </Anchor>
  </Anchors>
</View>

view显示示意图

Tabs

简介

选项卡布局，默认加载第一个选项卡中的内容，选中选项卡会重新渲染当前选项卡下的内容

简单例子

<View title="Tabs 布局">   <!-- Tabs的选项卡布局容器  -->
  <Tabs>
    <Tab title="部门详情">  <!-- Tabs的选项卡1  -->
      <Detail key="department" model="trantor_doc_Department">  <!-- 对应Tabs的选项卡1的内容  -->
        <Fields>
          <Field name="name"/>
        </Fields>
      </Detail>
    </Tab>
    <Tab title="部门人员列表">  <!-- Tabs的选项卡2  -->
      <Table model="trantor_doc_Person" lookupFrom="department.staff">  <!-- 对应Tabs的选项卡2的内容  -->
        <Fields>
          <Field name="name"/>
        </Fields>
      </Table>
    </Tab>
  </Tabs>
</View>

tabs显示示意图

LinkTabs

简介

链接选项卡布局，其实就是通过链接跳转或者说是改变页面 url 来实现页面布局的切换

简单例子

<View title="人员列表">
  <!-- LinkTabs的选项卡布局容器  -->
  <LinkTabs>
    <!-- 单个LinkTab的选项卡布 title 标题属性 show 是否显示 env 传入当前选项卡字段 通常可作为查询条件来使用  -->
    <LinkTab  title='人员列表' action='linktabs' :context="{record: {id: 1},test: '小伦叽'}"/>
    <LinkTab  title='ahh' action='linktabs' :show="console.log(getContainerByKey('person') && getContainerByKey('person').data && getContainerByKey('person').data[0].age !== 1, 'xxx')"/>
    <LinkTab  title='部门' action='linktabs' :env="{test: '小岳岳'}"/>
    <LinkTab  title='部门' action='tab1' :env="{test: '小岳岳'}"/>
  </LinkTabs>
  <Table model="trantor_doc_Person">   <!-- 通过LinkTab的选项卡来显示不同页面内容，对应不同数据内容  -->
    <Fields>
      <Field name="name" :initValue="env.test"/>
      <Field name="avatar"/>
      <Field name="age"/>
      <Field name="password"/>
      <Field name="credentials"/>
      <Field label="部门名称" name="department.name"/>
      <Field name="birthday"/>
    </Fields>
  </Table>
</View>

linkTabs显示示意图

Steps

简介

步骤条布局，一般可用于显示相关业务进度， 比如外卖下单 -> 商家接单 -> 骑手接单 -> 骑手配送 -> 完成

简单例子

<View title="人员列表">
  <Steps current="1">
    <Step
      title="外卖下单"
      description="这是外卖下单"
      key="1"
    />
    <Step
      title="商家接单"
      description="这是商家接单"
      key="2"
    />
    <Step
      title="骑手接单"
      description="这是骑手接单"
      key="3"
    />
    <Step
      title="骑手配送"
      description="这是骑手配送"
      key="4"
    />
     <Step
      title="完成"
      description="这是完成"
      key="5"
    />
  </Steps>
</View>

Steps显示示意图

Grid

简介

栅格布局

布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：

  • 通过 row 在水平方向建立一组 column（简写 col）

  • 你的内容应当放置于 col 内，并且，只有 col 可以作为 row 的直接元素

  • 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如，三个等宽的列可以使用.col-8 来创建

  • 如果一个 row 中的 col 总和超过 24，那么多余的 col 会作为一个整体另起一行排列

简单例子

<View title="Grid布局">
  <Row>
    <Detail key="department" model="trantor_doc_Department">
      <Fields>
        <Field name="id" />
        <Field name="createdAt" />
        <Field name="name" />
      </Fields>
    </Detail>
  </Row>
  <Row>
    <Col :span="8">
      <Table title="部门人员" key="main" model="trantor_doc_Person" related="department:department" singleSelection>
        <Fields>
          <Field name="name" />
          <Field name="age" />
        </Fields>
        <Actions>
          <Action multi @action="console.log" label="Action"/>
        </Actions>
      </Table>
    </Col>
    <Col :span="16">
      <!-- related：所有 trantor_doc_Person 模型的 department 属性对应 key=department -->
      <Table title="部门人员" model="trantor_doc_Person" related="department:department">
        <Fields>
          <Field name="name" />
          <Field name="age" />
        </Fields>
        <RecordActions label="操作">
          <Action @action="console.log" label="详情" openViewType="Dialog"/>
        </RecordActions>
      </Table>
    </Col>
  </Row>
</View>

Steps显示示意图

功能划分