docs(tabs): add docs for hide-divider

This commit is contained in:
unix
2020-05-17 17:30:08 +08:00
parent 6e7f8c8c5c
commit 4c18d23956
2 changed files with 31 additions and 0 deletions

View File

@@ -33,6 +33,21 @@ Display tab content.
</Tabs>
`} />
<Playground
title="Hide Divider"
scope={{ Tabs }}
code={`
<Tabs initialValue="html" hideDivider>
<Tabs.Item label="HTML" value="html">
<p>HTML is the language that we use to structure the different parts of our content and define what their meaning or purpose is.</p>
</Tabs.Item>
<Tabs.Item label="CSS" value="css">
<p>CSS is the language that we can use to style and lay out our web content,
as well as adding behavior like animation.</p>
</Tabs.Item>
</Tabs>
`} />
<Playground
title="With Icon"
desc="Show icon component on label button."
@@ -101,6 +116,7 @@ Display tab content.
| ---------- | ---------- | ---- | -------------- | ------ |
| **initialValue** | initial value | `string` | - | - |
| **value** | current selected value | `string` | - | - |
| **hideDivider** | hide default divider | `boolean` | - | `false` |
| **onChange** | change event | `(val: string) => void` | - | - |
| ... | native props | `HTMLAttributes` | `'alt', 'id', 'className', ...` | - |

View File

@@ -33,6 +33,20 @@ export const meta = {
</Tabs>
`} />
<Playground
title="隐藏分割线"
scope={{ Tabs }}
code={`
<Tabs initialValue="html" hideDivider>
<Tabs.Item label="HTML" value="html">
<p>HTML 是我们用来构造网站内容的不同部分并定义它们的意义或目的的语言。</p>
</Tabs.Item>
<Tabs.Item label="CSS" value="css">
<p>我们可以使用 CSS 这个语言来设计和布局我们的 Web 内容,以及添加像动画一类的行为。</p>
</Tabs.Item>
</Tabs>
`} />
<Playground
title="图标"
desc="在选项卡的标签上显示图标组件。"
@@ -99,6 +113,7 @@ export const meta = {
| ---------- | ---------- | ---- | -------------- | ------ |
| **initialValue** | 初始值 | `string` | - | - |
| **value** | 设定当前选项 | `string` | - | - |
| **hideDivider** | 隐藏默认分割线 | `boolean` | - | `false` |
| **onChange** | 选项卡切换事件 | `(val: string) => void` | - | - |
| ... | 原生属性 | `HTMLAttributes` | `'alt', 'id', 'className', ...` | - |