update

README.md

@@ -48,5 +48,7 @@ FineUI 100个问题题,带你走进FineUI的世界
 - [25、为什么不推荐使用同步的watch]()
 - [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)
-- [28、几个常用的布局场景]()
+- [28、让滚动条贴附在容器边缘的实现](./questions/28.让滚动条贴附在容器边缘的实现.md)
 - [29、BI.Layers.create参数详解原理](https://code.fanruan.com/dailer/FineUI-100-Questions/src/branch/master/questions/29.BI.Layers.create参数详解原理.md)
+- [30、上对齐的横向布局](./questions/27.上对齐的横向布局.md)
+- [31、tab选项卡组件的logic属性实现动态高度](./questions/26.tab选项卡组件的logic属性实现动态高度.md)

questions/26.tab选项卡组件的logic属性实现动态高度.md

@@ -0,0 +1,65 @@
+# tab选项卡的logic属性
+
+tab常用的写法,我们大多会直接或者间接的给tab赋予固定高度,时期在固定区域内切换显示.
+如下两种示例分别对应的是直接和间接固定高度.类似的`bi.absolute` `bi.vertical_fill`等布局也可以实现间接固定高度
+在实现原理上,此时tab内部为绝对布局.所有子tab均设定了`top:0,left:0,width:100%,height:100%`
+
+```javascript
+const widget1 = {
+    type: "bi.vertical",
+    items: [
+        {
+            el: nav,
+        }, {
+            el: {
+                type: "bi.tab",
+                height: 300,
+            },
+        },
+    ],
+};
+
+const widget2 = {
+    type: "bi.vtape",
+    items: [
+        {
+            el: nav,
+            height: 30,
+        }, {
+            el: {
+                type: "bi.tab",
+            },
+        },
+    ],
+};
+```
+
+![示例1](../images/40.gif)
+
+有些业务场景,我们需要高度不固定的tab,tab实际高度由子页面内容撑起来.这里就轮到`bi.tab`的`logic:{dynamic:true}`属性发挥作用了
+这时tab的内部为`bi.vertical`布局,高度由子页面决定,
+
+```javascript
+const widget = {
+    type: "bi.vertical",
+    items: [
+        {
+            el: nav,
+        }, {
+            el: {
+                type: "bi.tab",
+                logic: {
+                    dynamic: true,
+                },
+            },
+        },
+    ],
+};
+```
+
+![示例2](../images/41.gif)
+
+最后列举一下在现有业务中的应用,用户认证配置界面
+
+![示例3](../images/42.gif)
+

questions/27.上对齐的横向布局.md

@@ -1,6 +1,4 @@
-# 几个常用的布局场景
+# 上对齐的水平布局如何对齐?
-
-## 1.上对齐的水平布局如何对齐?
 
 举一个反面例子
 
@@ -75,71 +73,3 @@ const widget = {
 ```
 
 ![示例4](../images/30.png)
-
-## 2. 高度自适应的tab如何使用
-
-## 3. 让滚动条贴附在容器边缘的技巧
-
-日常业务中会出现滚动条,如果没有贴边显示的话,视觉效果会大打折扣.直接原因是一层又一层的布局嵌套,使得当前滚动的容器自身就已经脱离了页面区域.
-如何在不借助`padding`的情况下,让滚动条贴附在容器边缘呢?
-
-![示例5](../images/31.png)
-![示例6](../images/32.png)
-
-多层级嵌套时,避免在顶层设置gap属性
-例如常用的上面导航下面tab示例,由于外层组件设置了`hgap:10`,因此即使内部`bi.vertical`组件出现滚动条,也无法贴附在容器边缘
-因此开发过程中药尽量将gap设置下沉到具体的子组件
-
-```js
-const widget = {
-    type: "bi.vtape",
-    cls: "bi.border",
-    width: 300,
-    hgap: 10,
-    items: [
-        {
-            type: "demo.nav",
-            height: 36,
-        },
-        {
-            type: "bi.tab",
-            showIndex: 1,
-            cardCreator: v => {
-                return {
-                    type: "bi.vertical",    // 假设这个布局会出现滚动条
-                };
-            },
-        },
-    ],
-};
-```
-
-进行一次额外的布局包装,多一层DOM,收获一份体验
-因为vertical2没有高度,因此其会被子节点撑起高度,而后导致vertical1发生溢出,出现滚动条
-这样既实现了滚动条贴边,又保证了每一个列表项的左右间距.
-
-```js
-const widget3 = {
-    type: "bi.vertical",    // vertical1
-    cls: "bi-border vertical1",
-    hgap: 10,
-    height: 300,
-    width: 300,
-    items: [
-        {
-            type: "bi.vertical",    // vertical2,假设这个布局会出现滚动条,
-            cls: "vertical2",
-            items: (new Array(100)).fill(0).map((v, i) => {
-                return {
-                    type: "bi.label",
-                    cls: "bi-list-item-active2",
-                    text: `第${i}项`,
-                };
-            }),
-        },
-    ],
-};
-```
-
-![示例7](../images/34.png)
-![示例8](../images/35.png)

questions/28.让滚动条贴附在容器边缘的实现.md

@@ -0,0 +1,65 @@
+# 让滚动条贴附在容器边缘的实现
+
+日常业务中会出现滚动条,如果没有贴边显示的话,视觉效果会大打折扣.直接原因是一层又一层的布局嵌套,使得当前滚动的容器自身就已经脱离了页面区域.
+如何在不借助`padding`的情况下,让滚动条贴附在容器边缘呢?
+
+![示例5](../images/31.png)
+![示例6](../images/32.png)
+
+多层级嵌套时,避免在顶层设置gap属性
+例如常用的上面导航下面tab示例,由于外层组件设置了`hgap:10`,因此即使内部`bi.vertical`组件出现滚动条,也无法贴附在容器边缘
+因此开发过程中药尽量将gap设置下沉到具体的子组件
+
+```js
+const widget = {
+    type: "bi.vtape",
+    cls: "bi.border",
+    width: 300,
+    hgap: 10,
+    items: [
+        {
+            type: "demo.nav",
+            height: 36,
+        },
+        {
+            type: "bi.tab",
+            showIndex: 1,
+            cardCreator: v => {
+                return {
+                    type: "bi.vertical",    // 假设这个布局会出现滚动条
+                };
+            },
+        },
+    ],
+};
+```
+
+进行一次额外的布局包装,多一层DOM,收获一份体验
+因为vertical2没有高度,因此其会被子节点撑起高度,而后导致vertical1发生溢出,出现滚动条
+这样既实现了滚动条贴边,又保证了每一个列表项的左右间距.
+
+```js
+const widget3 = {
+    type: "bi.vertical",    // vertical1
+    cls: "bi-border vertical1",
+    hgap: 10,
+    height: 300,
+    width: 300,
+    items: [
+        {
+            type: "bi.vertical",    // vertical2,假设这个布局会出现滚动条,
+            cls: "vertical2",
+            items: (new Array(100)).fill(0).map((v, i) => {
+                return {
+                    type: "bi.label",
+                    cls: "bi-list-item-active2",
+                    text: `第${i}项`,
+                };
+            }),
+        },
+    ],
+};
+```
+
+![示例7](../images/34.png)
+![示例8](../images/35.png)