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.

168 lines
6.9 KiB

import { shortcut, Widget } from "@/core";
@shortcut()
export class Label extends Widget {
static xtype = "demo.label";
props = { baseCls: "demo-label" };
render() {
8 years ago
return {
type: "bi.vertical",
items: [
{
type: "bi.label",
cls: "layout-bg6",
text: "这是一个label控件,默认居中",
disabled: true,
textAlign: "center",
},
{
type: "bi.label",
cls: "layout-bg1",
text: "这是一个label控件, 高度为30,默认居中",
textAlign: "center",
height: 30,
},
{
8 years ago
type: "bi.label",
cls: "layout-bg3",
text: "这是一个label控件,使用水平居左",
textAlign: "left",
height: 30,
},
{
8 years ago
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,
},
{
8 years ago
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,
}
],
8 years ago
hgap: 300,
vgap: 20,
7 years ago
};
8 years ago
}
}