一个图标+文字的组件

图标+文字的形式是很常见的组件,如果用Jquery实现一个这样的组件可以这样

js

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

    render: function () {

        var container = $("<div class=\"plugin-icon-text\"></div>");
        var icon = $("<span class=\"plugin-icon-text-icon\"></span>");
        var text = $("<div class=\"plugin-icon-text-text\">这是一个图标+文字的组件</div>");
        container.append(icon);
        container.append(text);
        this.element.append(container);
    }
});
BI.shortcut("dec.plugin.icon_text", IconText);

css

.plugin-icon-text-icon {
  width: 24px;
  height: 24px;
  background: url("./icon/upload_success.png") center, center, no-repeat;
  background-size: contain;
}

.plugin-icon-text {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 10px;
}

981 B Raw Blame History

一个图标+文字的组件

js

css

效果预览

981 B

Raw Blame History