跳到主要内容
容器简介（必读）

容器模型​

为了降低布局难度，经过大量调研，通过提取布局容器共有特性、统一交互，我们总结了一套CabinX通用容器模型：

容器区块构成​

我们为每个容器划分了3大内容区块：Header、Content、 Footer

区块说明​

这些区块用于承载容器，在不同区域内，空间的使用会有不同的变化

名称定义定义
Header容器主信息+容器主操作该区域默认为吸顶交互
Content该区域放置布局容器-
Content暂时只在Pop上使用-

CabinX容器模型具备头部、底部、内容区、操作区域，通常情况下容器模型头部左边展示title、标签等信息，头部右边放置当前容器操作区域，容器底部放置负责信息，不同容器相关属性或摆放区域有细微调整，如Pop操作区域在底部右边，具体可以参考每个容器文档。

容器空间​

每个容器都拥有四个空间，每个空间可相互流动

  • 每个空间在内嵌容器module的情况下, 可自定义空间数量（隐藏关系）
  • 1、2、3、4空间，哪个空间有操作，哪个空间就是层级最高的

空间构成元素​

所有空间都具备以下元素，在不同的容器会有不同规则。

空间分为：信息、动作两大类型。

权重名称根结点容器内嵌容器布局容器初始位置
1Title必填可选可选空间1
2Tag可选可选可选空间1
3Status可选可选可选空间1
4Subtitle可选可选可选空间1
5icon可选可选可选空间1

容器类型​

容器整体分为3类：根节点容器，内嵌容器，布局容器。

1. 根节点容器​

  1. 画布的有且只有一个根容器，根结点不能被嵌套在其他容器、组件中。
  2. 根结点目前有：Page、Pop、Drawer
  3. 根结点容器遵循容器本定义，继承容器分区和属性。

根节点容器不受代码位置影响，会直接在页面中形成一个新的容器区域，且这个区域内的内嵌容器样式将以当前根节点容器为起点进行计算。 现有根节点容器有： <page> <pop> <drawer>。

<page title="my page">
    <pop title="my pop"></pop>
    <other-components>
        <drawer title="my drawer"></drawer>
    </other-components>
</page>

如上述代码中 <pop> <drawer> 并不因为放置在 <page> 中而影响自身交互或样式，无论 <pop> 放置在哪个层级，调用时它始终会在页面形成一个弹层区域。

2. 内嵌容器​

内嵌容器可以嵌入到任何其他容器中，内嵌容器样式根据嵌套层级会有相应的变化，内嵌容器只有一个 <module>

module

PCPhonePad
<page title="Page">
    <module title="嵌套module" tag="level 1">
        <module title="inner-module1" tag="level 2" subtitle="当module内嵌时，框架会自动处理相关样式。" height="180px">
        </module>
        <module title="inner-module2" tag="level 2" height="240px">
            <module title="inner-inner-module1" tag="level 3"
                    subtitle="虽然技术上module可以无限嵌套，但是UI上我们进行了严格定义，二级嵌套后的module样式表现都一致" height="70px">
            </module>
            <module title="inner-inner-module1" tag="level 3"
                    subtitle="虽然技术上module可以无限嵌套，但是UI上我们进行了严格定义，二级嵌套后的module样式表现都一致" height="70px">
            </module>
        </module>
    </module>
</page>

export default XPage({
    data: {}
});


如上述代码，<module> 相互嵌套时，其边距、字体大小、缩进都有一些变化。

3. 布局容器​

  1. 布局容器是用于简化页面布局的一组容器，一共有5个组件：
  • <head> : 顶栏容器
  • <left> : 左侧栏
  • <main> : 主要区域
  • <right> : 右侧栏
  • <bottom> : 底栏
  1. 同一层级下的布局容器会忽略代码编写顺序，总是会呈现如下布局

容器中没有 <main> 时，框架会自动创建 <main> 组件：

<!-- 以下两种写法效果一样 -->
<page>
    <other-components/>
</page>

<page>
    <main>
        <other-components/>
    </main>
</page>

没有被布局容器嵌套的组件会默认放置在 <main> 中:

<!-- 以下两种写法效果一样 -->
<page>
    <left>
        <other-comonpents/>
    </left>
    <main>
        <other-components-1/>
    </main>
    <other-components-2/>
</page>

<page>
    <left>
        <other-comonpents/>
    </left>
    <main>
        <other-components-1/>
        <other-components-2/>
    </main>
</page>
  1. 布局容器遵循层次性原则，每个布局容器是既是父容器的子容器，同时又是子容器的父容器，里面可以再按规则嵌套其他容器组件：
PCPhonePad
<page title="Page">
    <left title="left" subtitle="左侧边栏" width="140px">
        left
        <bottom title="left-bottom" height="200px"> left-bottom</bottom>
    </left>
    <main title="main" subtitle="主要区域">
        <main> main</main>
        <left title="main-left">
            main-left
        </left>
    </main>
</page>

export default XPage({
    data: {}
});


栅格布局​

CabinX布局基础是12分栏，相对其它框架，CabinX栅格布局仅需在支持栅格组件的 width 属性传入小于等于12的整数，代表所占列数。

目前容器仅module支持栅格布局，具体使用方式可以查看module。

操作区域​

一个容器或一个组件中一般情况下有且仅有一组操作区域，操作区域在不同组件下位置不定，整体由框架放置，开发者仅需在标签中放入操作区域即可。容器的操作区域整体都在当前容器右上角。

<page title="page">
    <!-- 整体页面的actions -->
    <actions>
        <button text="取消"/>
        <button text="提交" status="primary"/>
    </actions>
    <left title="left">
        <!-- main容器的actions -->
        <actions>
            <button text="查看更多"/>
        </actions>
    </left>
    <main title="main">
        <!-- main容器的actions -->
        <actions>
            <button text="批量导入数据" status="primary"/>
        </actions>
    </main>
</page>