amis/examples/components/Horizontal.jsx

138 lines
2.7 KiB
React
Raw Normal View History

2019-04-30 11:11:25 +08:00
export default {
2019-11-07 10:41:14 +08:00
$schema: 'https://houtai.baidu.com/v2/schemas/page.json#',
title: 'HBox & Grid',
type: 'page',
body: [
{
type: 'plain',
tpl: 'Grid 请参考 bootstrap 的 grid 布局',
inline: false,
className: 'h3 m-b-xs'
},
{
type: 'grid',
columns: [
2019-04-30 11:11:25 +08:00
{
2019-11-07 10:41:14 +08:00
type: 'tpl',
tpl: 'sm-2',
sm: 2,
className: 'bg-info',
inline: false
2019-04-30 11:11:25 +08:00
},
{
2019-11-07 10:41:14 +08:00
type: 'tpl',
tpl: 'sm-4',
sm: 4,
className: 'bg-success',
inline: false
2019-04-30 11:11:25 +08:00
},
{
2019-11-07 10:41:14 +08:00
type: 'tpl',
tpl: 'sm-6',
sm: 6,
className: 'bg-primary',
inline: false
}
]
},
{
type: 'plain',
tpl: 'Hbox',
inline: false,
className: 'h3 m-t m-b-xs'
},
{
type: 'hbox',
columns: [
{
type: 'tpl',
tpl: '平均分配',
className: 'bg-info',
inline: false
},
{
type: 'tpl',
tpl: '平均分配',
className: 'bg-success',
inline: false
2019-04-30 11:11:25 +08:00
},
{
2019-11-07 10:41:14 +08:00
type: 'tpl',
tpl: '平均分配',
className: 'bg-primary',
inline: false
}
]
},
{
type: 'plain',
tpl: 'Hbox 部分定宽',
inline: false,
className: 'h3 m-t m-b-xs'
},
{
type: 'hbox',
columns: [
{
type: 'tpl',
tpl: 'w-xs',
className: 'bg-info',
inline: false,
columnClassName: 'w-xs'
2019-04-30 11:11:25 +08:00
},
{
2019-11-07 10:41:14 +08:00
type: 'tpl',
tpl: 'w-sm',
className: 'bg-info lter',
inline: false,
columnClassName: 'w-sm'
2019-04-30 11:11:25 +08:00
},
{
2019-11-07 10:41:14 +08:00
type: 'tpl',
tpl: 'w',
className: 'bg-info dk',
inline: false,
columnClassName: 'w'
2019-04-30 11:11:25 +08:00
},
{
2019-11-07 10:41:14 +08:00
type: 'tpl',
tpl: '平均分配',
className: 'bg-success',
inline: false
2019-04-30 11:11:25 +08:00
},
{
2019-11-07 10:41:14 +08:00
type: 'tpl',
tpl: '平均分配',
className: 'bg-primary',
inline: false
}
]
},
{
type: 'plain',
tpl: '示例',
inline: false,
className: 'h3 m-t m-b-xs'
},
{
type: 'grid',
columns: [
{
type: 'panel',
title: '面板1',
className: 'Panel--danger',
body: '内容',
sm: 4
2019-04-30 11:11:25 +08:00
},
2019-11-07 10:41:14 +08:00
{
type: 'panel',
title: '面板2',
className: 'Panel--primary',
body: '内容',
sm: 8
}
]
}
]
};