import { Layout, Playground, Attributes } from 'lib/components'
import { Tag, Spacer } from 'components'

export const meta = {
  title: '标签 Tag',
  group: '数据展示',
}

## Tag / 标签

标记文档的状态与功能。

<Playground
  scope={{ Tag, Spacer }}
  code={`
<>
  <Tag>状态: 不稳定的</Tag>
  <Spacer />
  <Tag>作者：佚名</Tag>
</>
`}
/>

<Playground
  title="类型"
  scope={{ Tag, Spacer }}
  code={`
<>
  <Tag type="success">成功</Tag>
  <Spacer h={.5} />
  <Tag type="warning">警告</Tag>
  <Spacer h={.5} />
  <Tag type="error">错误</Tag>
  <Spacer h={.5} />
  <Tag type="secondary">次要的</Tag>
  <Spacer h={.5} />
  <Tag type="lite">精简的</Tag>
</>
`}
/>

<Playground
  title="反转"
  desc="反转展示背景与主色。"
  scope={{ Tag, Spacer }}
  code={`
<>
  <Tag type="default" invert>默认的</Tag>
  <Spacer h={.5} />
  <Tag type="success" invert>成功</Tag>
  <Spacer h={.5} />
  <Tag type="warning" invert>警告</Tag>
  <Spacer h={.5} />
  <Tag type="error" invert>错误</Tag>
  <Spacer h={.5} />
  <Tag type="secondary" invert>次要的</Tag>
</>
`}
/>

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

| 属性       | 描述           | 类型                  | 推荐值                   | 默认      |
| ---------- | -------------- | --------------------- | ------------------------ | --------- |
| **type**   | 标签类型       | [TagTypes](#tagtypes) | -                        | `default` |
| **invert** | 反转背景与主色 | `boolean`             | -                        | `false`   |
| ...        | 原生属性       | `HTMLAttributes`      | `'id', 'className', ...` | -         |

<Attributes.Title>TagTypes</Attributes.Title>

```ts
type TagTypes =
  | 'default'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'dark'
  | 'lite'
```

</Attributes>

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