import { Layout, Playground, Attributes } from 'lib/components'
import { Tabs, Spacer, Link, Text, Button, Code } from 'components'
import { useState } from 'react'
import TwitterIcon from '@geist-ui/icons/twitter'
import TwitchIcon from '@geist-ui/icons/twitch'

export const meta = {
  title: '选项卡 Tabs',
  group: '导航',
}

## Tabs / 选项卡

显示选项卡的内容。

选项卡组件包含额外的 Hooks，详情请参阅 [useTabs](/zh-cn/hooks/use-tabs) 小节。

<Playground
  scope={{ Tabs }}
  desc="切换显示不同的内容。"
  code={`
<Tabs initialValue="1">
  <Tabs.Item label="二进制" value="1">二进制表示为开头是0后接大写或小写的B（0b或者0B）。</Tabs.Item>
  <Tabs.Item label="八进制" value="2">八进制表示为开头是0后接大写或小写的O（0o或0O）。</Tabs.Item>
</Tabs>
`}
/>

<Playground
  title="禁用"
  scope={{ Tabs }}
  code={`
<Tabs initialValue="1">
  <Tabs.Item label="二进制" value="1">二进制表示为开头是0后接大写或小写的B（0b或者0B）。</Tabs.Item>
  <Tabs.Item label="八进制" value="2" disabled />
</Tabs>
`}
/>

<Playground
  title="隐藏分割线"
  scope={{ Tabs, Text }}
  code={`
<Tabs initialValue="html" hideDivider>
  <Tabs.Item label="HTML" value="html">
    <Text mt={0}>HTML 是我们用来构造网站内容的不同部分并定义它们的意义或目的的语言。</Text>
  </Tabs.Item>
  <Tabs.Item label="CSS" value="css">
    <Text mt={0}>我们可以使用 CSS 这个语言来设计和布局我们的 Web 内容，以及添加像动画一类的行为。</Text>
  </Tabs.Item>
</Tabs>
`}
/>

<Playground
  title="隐藏边框"
  scope={{ Tabs, Text }}
  code={`
<Tabs initialValue="html" hideDivider hideBorder>
  <Tabs.Item label="HTML" value="html">
    <Text mt={0}>HTML 是我们用来构造网站内容的不同部分并定义它们的意义或目的的语言。</Text>
  </Tabs.Item>
  <Tabs.Item label="CSS" value="css">
    <Text mt={0}>我们可以使用 CSS 这个语言来设计和布局我们的 Web 内容，以及添加像动画一类的行为。</Text>
  </Tabs.Item>
</Tabs>
`}
/>

<Playground
  title="图标"
  desc="在选项卡的标签上显示图标组件。"
  scope={{ Tabs, TwitterIcon, TwitchIcon, Link, Text }}
  code={`
<Tabs align="center" initialValue="1">
  <Tabs.Item label={<><TwitchIcon /> Twitch TV</>} value="1">
    <Text mt={0}>你好，这是我们在 Twitch 的最新直播。</Text>
  </Tabs.Item>
  <Tabs.Item label={<><TwitterIcon /> Twitter </>} value="2">
    <Text mt={0}>这个组件看起来还不错。</Text>
  </Tabs.Item>
</Tabs>
`}
/>

<Playground
  title="命令式"
  desc="以命令式的风格控制选项卡组件。"
  scope={{ Tabs, Button, Spacer, useState }}
  code={`
() => {
  const [value, setValue] = useState('1')
  const switchHandler = () => setValue('2')
  const changeHandler = val => setValue(val)
  return (
    <>
      <Button scale={1/3} font="12px" onClick={switchHandler} auto>选择八进制</Button>
      <Spacer />
      <Tabs value={value} onChange={changeHandler}>
        <Tabs.Item label="二进制" value="1">二进制表示为开头是0后接大写或小写的B（0b或者0B）。</Tabs.Item>
        <Tabs.Item label="八进制" value="2">八进制表示为开头是0后接大写或小写的O（0o或0O）。</Tabs.Item>
      </Tabs>
    </>
  )
}
`}
/>

<Attributes edit="/pages/zh-cn/components/tabs.mdx">
<Attributes.Title>Tabs.Props</Attributes.Title>

| 属性                 | 描述                   | 类型                    | 推荐值                          | 默认    |
| -------------------- | ---------------------- | ----------------------- | ------------------------------- | ------- |
| **initialValue**     | 初始值                 | `string`                | -                               | -       |
| **value**            | 设定当前选项           | `string`                | -                               | -       |
| **hideDivider**      | 隐藏默认分割线         | `boolean`               | -                               | `false` |
| **hideBorder**       | 隐藏激活时的边框       | `boolean`               | -                               | `false` |
| **leftSpace**        | 左侧空白区域宽度       | `CSSProperties`         | -                               | `12px`  |
| **onChange**         | 选项卡切换事件         | `(val: string) => void` | -                               | -       |
| **align**            | 每个子项的横向对齐方式 | `justifyContent`        | -                               | `left`  |
| **activeClassName**  | 激活子项的类名         | `string`                | -                               | -       |
| **activeStyles**     | 激活子项的样式内容     | `object`                | -                               | -       |
| **hoverHeightRatio** | 高亮块与组件的高度比   | `number`                | -                               | 0.7     |
| **hoverWidthRatio**  | 高亮块与组件的宽度比   | `number`                | -                               | 1.15    |
| ...                  | 原生属性               | `HTMLAttributes`        | `'alt', 'id', 'className', ...` | -       |

<Attributes.Title alias="Tabs.Tab">Tabs.Item.Props</Attributes.Title>

| 属性              | 描述           | 类型      | 推荐值 | 默认    |
| ----------------- | -------------- | --------- | ------ | ------- |
| **label**(必须的) | 选项卡标签文字 | `string`  | -      | -       |
| **value**(必须的) | 唯一鉴别值     | `string`  | -      | -       |
| **disabled**      | 禁用当前选项卡 | `boolean` | -      | `false` |

</Attributes>

export default ({ children }) => <Layout meta={meta}>{children}</Layout>
