fineui是帆软报表和BI产品线所使用的前端框架。
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

126 lines
4.4 KiB

8 years ago
/**
* Created by User on 2017/3/21.
*/
Demo.Horizontal = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-horizontal"
},
render: function () {
return {
type: "bi.vertical",
vgap: 10,
8 years ago
items: [{
type: "bi.horizontal",
height: 150,
hgap: 10,
items: [{
type: "bi.label",
whiteSpace: "normal",
text: "因为大多数场景下都需要垂直居中,所以这个布局一般会被vertical_adapt布局设置scrollx=true取代",
cls: "layout-bg3",
width: 500,
height: 50
}, {
type: "bi.label",
text: "水平布局",
cls: "layout-bg4",
width: 300,
height: 30
}, {
type: "bi.label",
text: "水平布局",
cls: "layout-bg5",
width: 300,
height: 30
}, {
type: "bi.label",
text: "水平布局",
cls: "layout-bg6",
width: 300,
height: 30
}]
}, {
type: "bi.layout",
height: 1,
cls: "bi-border-bottom bi-high-light-border"
}, {
type: "bi.horizontal",
height: 150,
verticalAlign: BI.VerticalAlign.Middle,
horizontalAlign: BI.HorizontalAlign.Left,
vgap: 10,
items: [{
type: "bi.label",
text: "以horizontal实现的vertical_adapt垂直居中",
cls: "layout-bg1",
width: 300,
height: 30
}, {
type: "bi.label",
text: "以horizontal实现的vertical_adapt垂直居中",
cls: "layout-bg2",
width: 300,
height: 30
}]
}, {
type: "bi.layout",
height: 1,
cls: "bi-border-bottom bi-high-light-border"
}, {
type: "bi.horizontal",
height: 150,
verticalAlign: BI.VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Center,
items: [{
type: "bi.label",
text: "以horizontal代替horizontal_adapt实现的水平居中(单元素)",
cls: "layout-bg1",
width: 300,
height: 30
}]
}, {
type: "bi.layout",
height: 1,
cls: "bi-border-bottom bi-high-light-border"
}, {
type: "bi.horizontal",
height: 150,
verticalAlign: BI.VerticalAlign.Top,
horizontalAlign: BI.HorizontalAlign.Center,
columnSize: [300, "fill"],
items: [{
type: "bi.label",
text: "以horizontal代替horizontal_adapt实现的用于水平适应布局",
cls: "layout-bg1",
height: 30
}, {
type: "bi.label",
text: "以horizontal代替horizontal_adapt实现的水平自适应列",
cls: "layout-bg2",
height: 30
}]
}, {
type: "bi.layout",
height: 1,
cls: "bi-border-bottom bi-high-light-border"
}, {
type: "bi.center_adapt",
height: 150,
verticalAlign: BI.VerticalAlign.Middle,
horizontalAlign: BI.HorizontalAlign.Center,
items: [{
type: "bi.label",
text: "以horizontal代替center_adapt实现的水平垂直居中",
width: 300,
height: 100,
cls: "layout-bg1"
}]
}, {
type: "bi.layout",
height: 1,
cls: "bi-border-bottom bi-high-light-border"
7 years ago
}]
7 years ago
};
8 years ago
}
});
8 years ago
BI.shortcut("demo.horizontal", Demo.Horizontal);