fineui/demo/js/base/demo.label.js

import { shortcut, Widget } from "@/core";

@shortcut()
export class Label extends Widget {
    static xtype = "demo.label";

    props = { baseCls: "demo-label" };

    render() {
        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,
                },
                {
                    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,
        };
    }
}