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.

33 lines
1.7 KiB

6 years ago
# 一个图标+文字的组件
由[一个图标+文字的组件](../dom/一个图标_文字的组件.md)可以看到,我们手写了外层布局的样式,手动把icon和text添加到了container中.如果用FineUI提供的布局组件改怎么写呢?
通过查阅[FineUI基础教程](https://kms.finedevelop.com/pages/viewpage.action?pageId=58494116)来知悉如何创建一个组件,以及一些基础控件的使用,想象一下,我们要实现的图标+文字组件是怎样组合的:一个水平方向的布局,内部为一个图标和文字.于是我们需要用到`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);
```