decision-plugin-demos/layout/一个图标_文字的组件.md

一个图标+文字的组件

由一个图标+文字的组件可以看到,我们手写了外层布局的样式,手动把icon和text添加到了container中.如果用FineUI提供的布局组件改怎么写呢? 通过查阅FineUI基础教程来知悉如何创建一个组件,以及一些基础控件的使用,想象一下,我们要实现的图标+文字组件是怎样组合的:一个水平方向的布局,内部为一个图标和文字.于是我们需要用到bi.vertical_adapt布局加 bi.icon bi.label 两个控件,而图标多数情况下我们是需要水平垂直居中的,因此还需要bi.center_adapt 容纳一下.

js

    // 创建一个图标+文字的组件
    var IconText = BI.inherit(BI.Widget, {

        render: function () {
            return {
                type: "bi.vertical_adapt",  //  首先是垂直居中布局容纳两个子元素
                items: [
                    {
                        type: "bi.center_adapt",  //  水平垂直居中布局
                        cls: "setting-font",  //  图标定义的类名
                        items: [
                            {
                                type: "bi.icon"  //  图标组件,<i>
                            }
                        ],
                        width: 24,
                        height: 24
                    }, {
                        type: "bi.label",  //  label文字标签
                        height: 24,
                        text: "这是一个图标+文字的组件"
                    }
                ]
            };
        }
    });
    BI.shortcut("dec.plugin.icon_text", IconText);