Browse Source

update

master
zsmj 2 years ago
parent
commit
4bcb12edc8
  1. 2
      README.md
  2. BIN
      images/26.png
  3. BIN
      images/27.png
  4. BIN
      images/28.png
  5. BIN
      images/30.png
  6. BIN
      images/31.png
  7. BIN
      images/32.png
  8. 87
      questions/28.几个常用的布局场景.md

2
README.md

@ -48,3 +48,5 @@ FineUI 100个问题题,带你走进FineUI的世界
- [25、为什么不推荐使用同步的watch]() - [25、为什么不推荐使用同步的watch]()
- [26、处理树结构的常用算法]() - [26、处理树结构的常用算法]()
- [27、组件生命周期与Model状态控制](https://code.fineres.com/projects/BUSSINESS/repos/nuclear-webui/pull-requests/9193/diff/#packages/bi-webui/src/modules/conf/pack/analysis/transfer/operator/dimension/combo/combo.tsx) - [27、组件生命周期与Model状态控制](https://code.fineres.com/projects/BUSSINESS/repos/nuclear-webui/pull-requests/9193/diff/#packages/bi-webui/src/modules/conf/pack/analysis/transfer/operator/dimension/combo/combo.tsx)
- [28、几个常用的布局场景]()
- [29、BI.Layers.create参数详解原理]()

BIN
images/26.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

BIN
images/27.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

BIN
images/28.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
images/30.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

BIN
images/31.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

BIN
images/32.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

87
questions/28.几个常用的布局场景.md

@ -0,0 +1,87 @@
# 几个常用的布局场景
## 1.上对齐的水平布局如何对齐?
举一个反面例子
![示例1](../images/26.png)
![示例2](../images/27.png)
缓存配置页面,一个水平方向布局,左侧是配置项名称,右侧是具体的配置细节. 可以很明显的看出,左右两段的水平并没有对齐
如何通过布局来实现齐平呢
一般情况下,只需要让左右两侧的元素保持相同高度即可
```js
const widget = {
type: "bi.horizontal",
verticalAlign: "top",
columnSize: [100, ""],
items: [
{
type: "bi.label",
height: 36,
text: "全局缓存策略",
}, {
type: "bi.vertical",
items: [
{
type: "bi.single_select_radio_item",
height: 36,
text: "radio1",
}, {
type: "bi.single_select_radio_item",
height: 36,
text: "radio2",
},
],
},
],
};
```
![示例3](../images/28.png)
如果是文本段落需要对齐的场景,对文本段落设置相应的行高即可.对于FineUI中label组件来说即为`textHeight`属性. FineUI中toast组件的布局方式就是如此,通过控制`textHeight`
使得icon与文字对齐
```js
const widget = {
type: "bi.horizontal",
width: 300,
scrollx: false,
verticalAlign: "top",
columnSize: [100, "fill"],
items: [
{
type: "bi.label",
height: 36,
text: "全局缓存策略",
}, {
type: "bi.vertical",
items: [
{
type: "bi.label",
whiteSpace: "normal",
textHeight: 36,
text: "S2 定位是一个轻量级的表格渲染核心,所以没有 Excel/SpreadJS 那样复杂的功能和数据模型。在大数据表格组件这个场景下,其实不需要那么重的数据模型,S2 的轻量级设计是更合适的。在性能表现上,10 个Tab 切换时,切换耗时为 80ms,是老方案的 6倍。在 5 万条数据的情况下,S2 渲染和初始化只需要 1秒。是老方案的 8 倍。\n",
},
],
},
],
};
```
![示例4](../images/30.png)
## 2. 高度自适应的tab如何使用
## 3. 让滚动条贴附在容器边缘的技巧
日常业务中会出现滚动条,如果没有贴边显示的话,视觉效果会大打折扣.直接原因是一层又一层的布局嵌套,使得当前滚动的容器自身就已经脱离了页面区域.
如何在不借助`padding`的情况下,让滚动条贴附在容器边缘呢?
![示例5](../images/31.png)
![示例6](../images/32.png)
Loading…
Cancel
Save