fineui是帆软报表和BI产品线所使用的前端框架。

139 lines
5.9 KiB

8 years ago
Demo.Label = BI.inherit(BI.Widget, {
props: {
baseCls: "demo-label"
},
render: function () {
return {
type: "bi.vertical",
items: [{
type: "bi.label",
cls: "layout-bg6",
text: "这是一个label控件,默认居中",
disabled: true,
8 years ago
textAlign: "center"
}, {
type: "bi.label",
cls: "layout-bg1",
text: "这是一个label控件, 高度为30,默认居中",
textAlign: "center",
height: 30
}, {
type: "bi.label",
cls: "layout-bg3",
text: "这是一个label控件,使用水平居左",
textAlign: "left",
height: 30
}, {
type: "bi.label",
cls: "layout-bg2",
text: "这是一个label控件,whiteSpace是normal,不设置高度,为了演示这个是真的是normal的,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数",
whiteSpace: "normal"
}, {
type: "bi.label",
cls: "layout-bg5",
text: "这是一个label控件,whiteSpace是默认的nowrap,不设置高度,为了演示这个是真的是nowrap的,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数"
}, {
type: "bi.label",
cls: "layout-bg7",
text: "这是一个label控件,whiteSpace是默认的nowrap,高度为30,为了演示这个是真的是nowrap的,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数",
height: 30
}, {
type: "bi.label",
cls: "layout-bg3",
text: "这是一个label控件,whiteSpace设置为normal,高度为60,为了演示这个是真的是normal的,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数",
whiteSpace: "normal",
height: 60
}, {
type: "bi.label",
cls: "layout-bg5",
text: "这是一个label控件,whiteSpace设置为normal,textHeight控制text的lineHeight,这样可以实现换行效果,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数",
whiteSpace: "normal",
textHeight: 30,
height: 60
}, {
type: "bi.label",
cls: "layout-bg1",
text: "这是一个label控件,whiteSpace设置为nowrap,textWidth控制text的width",
textWidth: 200,
height: 60
}, {
type: "bi.label",
cls: "layout-bg8",
text: "这是一个label控件,whiteSpace设置为normal,textWidth控制text的width,这样可以实现换行效果,我凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数,凑点字数",
whiteSpace: "normal",
textWidth: 200,
height: 60
}, {
type: "bi.label",
cls: "layout-bg7",
text: "whiteSpace为默认的nowrap,高度设置为60,宽度设置为300",
height: 60,
width: 300
}, {
type: "bi.label",
cls: "layout-bg6",
text: "设置了宽度300,高度60,whiteSpace设置为normal",
whiteSpace: "normal",
width: 300,
height: 60
}, {
type: "bi.label",
cls: "layout-bg8",
text: "textWidth设置为200,textHeight设置为30,width设置300,凑点字数看效果",
width: 300,
textWidth: 200,
textHeight: 30,
height: 60,
whiteSpace: "normal"
}, {
type: "bi.label",
cls: "layout-bg1",
text: "textWidth设置为200,width设置300,看下水平居左的换行效果",
textAlign: "left",
width: 300,
textWidth: 200,
textHeight: 30,
height: 60,
whiteSpace: "normal"
}, {
type: "bi.label",
cls: "layout-bg2",
text: "使用默认的nowrap,再去设置textHeight,只会有一行的效果",
textAlign: "left",
width: 300,
textWidth: 200,
textHeight: 30,
height: 60
}, {
type: "bi.left",
items: [{
type: "bi.label",
cls: "layout-bg3",
text: "在float布局中自适应的,不设高度和宽度,文字多长这个就有多长"
}],
height: 30
}, {
type: "bi.left",
items: [{
type: "bi.label",
cls: "layout-bg4",
text: "在float布局中自适应的,设置了宽度200,后面还有",
width: 200
}],
height: 30
}, {
type: "bi.left",
items: [{
type: "bi.label",
text: "在float布局中自适应的,设置了高度,文字多长这个就有多长",
cls: "layout-bg5",
height: 30
}],
height: 30
}],
hgap: 300,
vgap: 20
7 years ago
};
8 years ago
}
});
8 years ago
BI.shortcut("demo.label", Demo.Label);