代码演示

上中下

<jr-container>
    <jr-header class='header' height='30'>上</jr-header>
    <jr-main >中</jr-main>
    <jr-footer height='30' class='header'>下</jr-footer>
</jr-container>
var component = new JRUI.Component({
    template: template
});

左中右

<jr-container  direction="row">
    <jr-aside class='aside' width='40'>左</jr-aside>
    <jr-main >中</jr-main>
    <jr-aside class='aside' width='40'>右</jr-aside>
</jr-container>
var component = new JRUI.Component({
    template: template
});

混搭

<jr-container >
     <jr-header height='30' class='header'>上</jr-header>
     <jr-container direction="row">
        <jr-aside class='aside' width='40'>左</jr-aside>
        <jr-main >中</jr-main>
        <jr-aside class='aside'  width='40'>右</jr-aside>
     </jr-container>
     <jr-footer height='30' class='header'>下</jr-footer>
 </jr-container>
var component = new JRUI.Component({
    template: template
});

API

Classes

JRContainer
JRHeader
JRFooter
JRASide

Constants

Component

JRContainer 布局容器

JRContainer

Kind: global class
Extend: Component

new JRContainer()

Param Type Description
[options.data] object => 绑定数据
[options.data.direction] strgin => flex布局的元素方式，默认为’column’,还可选择’row’
[options.data.class] string => 补充样式

JRHeader

Kind: global class
Extend: Component

new JRHeader()

Param Type Default Description
[options.data] object => 绑定数据
[options.data.height] number 80 => 头部高度
[options.data.class] string => 补充样式

JRFooter

Kind: global class
Extend: Component

new JRFooter()

Param Type Default Description
[options.data] object => 绑定数据
[options.data.height] number 80 => 头部高度
[options.data.class] string => 补充样式

JRASide

Kind: global class
Extend: Component

new JRASide()

Param Type Default Description
[options.data] object => 绑定数据
[options.data.width] number 120 => 宽度
[options.data.class] string => 补充样式

Component

JRContainer 布局容器

Kind: global constant

← 卡片 表格 →