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
33 lines
1.7 KiB
5 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);
|
||
|
|
```
|