Sfoglia il codice sorgente

feat: add faq to tabs doc (#816)

YyumeiZhang 3 anni fa
parent
commit
932045431e
2 ha cambiato i file con 21 aggiunte e 1 eliminazioni
  1. 11 1
      content/navigation/tabs/index-en-US.md
  2. 10 0
      content/navigation/tabs/index.md

+ 11 - 1
content/navigation/tabs/index-en-US.md

@@ -308,7 +308,7 @@ class App extends React.Component {
             <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible>
             <Tabs style={{ width: '60%', margin: '20px' }} type="card" collapsible>
                 {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((item, index) => (
                 {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((item, index) => (
                     <TabPane tab={`Tab-${item}`} itemKey={`Tab-${item}`} key={item}>
                     <TabPane tab={`Tab-${item}`} itemKey={`Tab-${item}`} key={item}>
-                        Content of card tab {i}
+                        Content of card tab {index}
                     </TabPane>
                     </TabPane>
                 ))}
                 ))}
             </Tabs>
             </Tabs>
@@ -578,3 +578,13 @@ closable | whether user can close the tab **>=2.1.0** | boolean | false |
 ## Design Token
 ## Design Token
 
 
 <DesignToken/>
 <DesignToken/>
+
+## FAQ
+
+-   **Why typography with ellipses in Tabs doesn't work?**
+
+    Because when Tabs renders TabPane, the default is to render display: none. At this point these components cannot get the correct width or height values. It is recommended to enable lazyRender in version 1.x, or disable keepDOM. Version 0.x needs to use tabList notation.
+
+-   **Why are the height or width values ​​wrong when using components such as Collapse/Collapsible/Resizable Table in Tabs?**
+
+    The reason is the same as above. In addition, if the collapse does not need animation, you can also turn off the animation effect by setting motion={false}. There is no need to get the height of the component at this point。

+ 10 - 0
content/navigation/tabs/index.md

@@ -602,3 +602,13 @@ closable  | 允许关闭tab **>=2.1.0**| boolean | false |
 ## 设计变量
 ## 设计变量
 
 
 <DesignToken/>
 <DesignToken/>
+
+## FAQ
+
+-   **为什么在Tabs中使用 Typography 的省略 ellipsis 失效?**
+
+    因为Tabs渲染TabPane时,默认是全部渲染display: none。此时这些组件无法获取到正确的宽度或高度值。建议1.x的版本开启lazyRender,或者关闭keepDOM。0.x的版本需要使用tabList的写法。
+
+-   **为什么在Tabs中使用Collapse/Collapsible/Resizable Table等组件的高度或宽度值不对?**
+
+    原因同上,另外如果 collapse 不需要动画,也可以通过设置 motion={false} 来关闭动画效果。此时无需获取组件的高度。