layout | CabinX

示例

常规用法

每个容器内部都能直接嵌套布局容器组件，CabinX中有4个布局容器组件：

<head> : 顶栏容器
<left> : 左侧边栏容器
<main> : 主要区域容器
<bottom> : 底栏容器

信息

布局容器标签无论顺序如何，嵌套格式总是如案例是固定的，复杂的页面需要开发者根据嵌套规则嵌套实现。

PCPhonePad

HTMLJAVASCRIPTCSS

<page title="Page Title">
    <head height="80px"> head </head>
    <left width="100px"> left </left>
    <main> main </main>
    <right width="100px"> right </right>
    <bottom height="100px"> bottom </bottom>
</page>

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

特性

布局容器具备容器的基础特性，如title、subtitle、width、height等属性。为了避免头部样式冲突 <head> 没有title、subtitle属性。

PCPhonePad

HTMLJAVASCRIPTCSS

<page title="Page Title">
    <head height="80px"> head </head>
    <left title="Left" subtitle="左侧边栏" width="110px"> left </left>
    <main title="Main" subtitle="主要区域"> main </main>
    <right title="Right" subtitle="右侧边栏" width="110px"> right </right>
    <bottom title="Bottom" subtitle="底栏" height="110px"> bottom </bottom>
</page>

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

嵌套

布局容器可以无限嵌套，通过嵌套实现复杂布局。

PCPhonePad

HTMLJAVASCRIPTCSS

<page title="Page Title">
    <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: {},
    show() {}
});

通过以上布局方式可以实现以下页面。

示例​

常规用法​

特性​

嵌套​

示例

常规用法

特性

嵌套