mirror of
https://github.com/zhigang1992/react.git
synced 2026-01-30 17:18:35 +08:00
docs(tooltip): add component docs
This commit is contained in:
unix
@@ -1,100 +1,223 @@
|
||||
import { Layout, Playground, Attributes } from 'lib/components'
|
||||
import { Avatar, Spacer } from 'components'
|
||||
import { Tooltip, Spacer, Row, Col, Button, Link, Badge, Code, Text } from 'components'
|
||||
|
||||
export const meta = {
|
||||
title: 'avatar',
|
||||
title: 'Tooltip',
|
||||
group: 'Data Display',
|
||||
}
|
||||
|
||||
## Avatar
|
||||
|
||||
Avatars represent a user or a team. Stacked avatars represent a group of people.
|
||||
## Tooltip
|
||||
|
||||
Displays additional information on hover.
|
||||
|
||||
<Playground
|
||||
desc="The `Avatar` contains circle and square."
|
||||
scope={{ Avatar, Spacer }}
|
||||
desc="Basic usage."
|
||||
scope={{ Tooltip }}
|
||||
code={`
|
||||
<Tooltip text={'Push to Git and your website is live.'}>Tooltip</Tooltip>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="Trigger"
|
||||
desc="Trigger by click."
|
||||
scope={{ Tooltip }}
|
||||
code={`
|
||||
<Tooltip text={'Push to Git and your website is live.'} trigger="click" type="dark">
|
||||
<span>Click me</span>
|
||||
</Tooltip>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="With Components"
|
||||
desc="Combined with different components."
|
||||
scope={{ Tooltip, Button, Link, Spacer, Row, Badge }}
|
||||
code={`
|
||||
<Row align="middle">
|
||||
<Tooltip text={'Push to Git and your website is live.'} type="dark">
|
||||
<Button auto size="small">Button</Button>
|
||||
</Tooltip>
|
||||
<Spacer inline x={1} />
|
||||
<Tooltip text={'Push to Git and your website is live.'} type="dark">
|
||||
<Badge>1000+</Badge>
|
||||
</Tooltip>
|
||||
<Spacer inline x={1} />
|
||||
<Tooltip text={'Push to Git and your website is live.'} type="dark">
|
||||
<Link href="#" color pure>Hyperlink</Link>
|
||||
</Tooltip>
|
||||
</Row>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="Custom Content"
|
||||
desc="You can customize the pop-up content."
|
||||
scope={{ Tooltip, Spacer, Row, Code, Text }}
|
||||
code={`
|
||||
<Row align="middle">
|
||||
<Tooltip text={<>Perfect for working with a <Code>CMS</Code>.</>}>
|
||||
<span>Top</span>
|
||||
</Tooltip>
|
||||
<Spacer inline x={2.5} />
|
||||
<Tooltip text={<><Text b>Perfect</Text> for working with a CMS.</>} placement="bottom">
|
||||
<span>Bottom</span>
|
||||
</Tooltip>
|
||||
</Row>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="Types"
|
||||
desc="Different state."
|
||||
scope={{ Tooltip, Spacer, Row, Code, Text }}
|
||||
code={`
|
||||
<Row align="middle">
|
||||
<Tooltip text="Perfect for working with a CMS." type="dark">
|
||||
<span>Dark</span>
|
||||
</Tooltip>
|
||||
<Spacer inline x={1.5} />
|
||||
<Tooltip text="Perfect for working with a CMS." type="success">
|
||||
<span>Success</span>
|
||||
</Tooltip>
|
||||
<Spacer inline x={1.5} />
|
||||
<Tooltip text="Perfect for working with a CMS." type="warning">
|
||||
<span>Warning</span>
|
||||
</Tooltip>
|
||||
<Spacer inline x={1.5} />
|
||||
<Tooltip text="Perfect for working with a CMS." type="error">
|
||||
<span>Error</span>
|
||||
</Tooltip>
|
||||
<Spacer inline x={1.5} />
|
||||
<Tooltip text="Perfect for working with a CMS." type="secondary">
|
||||
<span>Secondary</span>
|
||||
</Tooltip>
|
||||
</Row>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="Variant"
|
||||
desc="Special styles."
|
||||
scope={{ Tooltip, Spacer, Row, Code, Text }}
|
||||
code={`
|
||||
<Row align="middle">
|
||||
<Tooltip text="Push to Git and your website is live." type="lite">
|
||||
<span>Lite</span>
|
||||
</Tooltip>
|
||||
<Spacer inline x={2.5} />
|
||||
<Tooltip text="Push to Git and your website is live." hideArrow>
|
||||
<span>No Arrow</span>
|
||||
</Tooltip>
|
||||
</Row>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="Placements"
|
||||
desc="There are 12 `placement` options available."
|
||||
scope={{ Tooltip, Spacer, Row, Col }}
|
||||
code={`
|
||||
() => {
|
||||
const url = 'https://zeit.co/api/www/avatar/?u=evilrabbit&s=160'
|
||||
const text = 'The Evil Rabbit Jumped over the Fence'
|
||||
const Center = ({ children, ...props }) => (
|
||||
<Col style={{ display: 'flex', justifyContent: 'center' }} {...props}>{children}</Col>
|
||||
)
|
||||
return (
|
||||
<>
|
||||
<Avatar src={url} />
|
||||
<Avatar src={url} />
|
||||
<Avatar src={url} />
|
||||
<Avatar src={url} />
|
||||
<div style={{ width: '80%', margin: '0 auto' }}>
|
||||
<Row justify="center">
|
||||
<Center span={5}>
|
||||
<Tooltip text={text} placement="topStart" type="dark">topStart</Tooltip>
|
||||
</Center>
|
||||
<Center span={5}>
|
||||
<Tooltip text={text} placement="top" type="dark">top</Tooltip>
|
||||
</Center>
|
||||
<Center span={5}>
|
||||
<Tooltip text={text} placement="topEnd" type="dark">topEnd</Tooltip>
|
||||
</Center>
|
||||
</Row>
|
||||
<Row justify="space-between">
|
||||
<Center span={5}>
|
||||
<Tooltip text={text} placement="leftStart" type="dark">leftStart</Tooltip>
|
||||
</Center>
|
||||
<Center span={5}>
|
||||
<Tooltip text={text} placement="rightStart" type="dark">rightStart</Tooltip>
|
||||
</Center>
|
||||
</Row>
|
||||
<Spacer y={.5} />
|
||||
<Avatar src={url} isSquare />
|
||||
<Avatar src={url} isSquare />
|
||||
<Avatar src={url} isSquare />
|
||||
<Avatar src={url} isSquare />
|
||||
</>
|
||||
<Row justify="space-between">
|
||||
<Center span={5}>
|
||||
<Tooltip text={text} placement="left" type="dark">left</Tooltip>
|
||||
</Center>
|
||||
<Center span={5}>
|
||||
<Tooltip text={text} placement="right" type="dark">right</Tooltip>
|
||||
</Center>
|
||||
</Row>
|
||||
<Spacer y={.5} />
|
||||
<Row justify="space-between">
|
||||
<Center span={5}>
|
||||
<Tooltip text={text} placement="leftEnd" type="dark">leftEnd</Tooltip>
|
||||
</Center>
|
||||
<Center span={5}>
|
||||
<Tooltip text={text} placement="rightEnd" type="dark">rightEnd</Tooltip>
|
||||
</Center>
|
||||
</Row>
|
||||
<Row justify="center">
|
||||
<Center span={5}>
|
||||
<Tooltip text={text} placement="bottomStart" type="dark">bottomStart</Tooltip>
|
||||
</Center>
|
||||
<Center span={5}>
|
||||
<Tooltip text={text} placement="bottom" type="dark">bottom</Tooltip>
|
||||
</Center>
|
||||
<Center span={5}>
|
||||
<Tooltip text={text} placement="bottomEnd" type="dark">bottomEnd</Tooltip>
|
||||
</Center>
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
`} />
|
||||
|
||||
|
||||
<Playground
|
||||
title="Sizes"
|
||||
desc="You can specify different sizes of `Avatar`."
|
||||
scope={{ Avatar }}
|
||||
code={`
|
||||
() => {
|
||||
const url = 'https://zeit.co/api/www/avatar/?u=evilrabbit&s=160'
|
||||
return (
|
||||
<>
|
||||
<Avatar src={url} size="mini" />
|
||||
<Avatar src={url} size="small" />
|
||||
<Avatar src={url} size="medium" />
|
||||
<Avatar src={url} size="large" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="Text"
|
||||
desc="Display text in the avatar box."
|
||||
scope={{ Avatar }}
|
||||
code={`
|
||||
<>
|
||||
<Avatar text="W" />
|
||||
<Avatar text="A" />
|
||||
<Avatar text="W" />
|
||||
<Avatar text="Joe" />
|
||||
</>
|
||||
`} />
|
||||
|
||||
|
||||
<Playground
|
||||
title="Stacked"
|
||||
desc="Multiple avatars can overlap and stack together."
|
||||
scope={{ Avatar }}
|
||||
code={`
|
||||
() => {
|
||||
const url = 'https://zeit.co/api/www/avatar/?u=evilrabbit&s=160'
|
||||
return (
|
||||
<>
|
||||
<Avatar src={url} stacked />
|
||||
<Avatar src={url} stacked />
|
||||
<Avatar src={url} stacked />
|
||||
<Avatar src={url} stacked />
|
||||
</>
|
||||
)
|
||||
}
|
||||
`} />
|
||||
|
||||
<Attributes edit="/pages/docs/components/avatar.mdx">
|
||||
<Attributes.Title>Avatar.Props</Attributes.Title>
|
||||
<Attributes edit="/pages/docs/components/tooltip.mdx">
|
||||
<Attributes.Title>Tooltip.Props</Attributes.Title>
|
||||
|
||||
| Attribute | Description | Type | Accepted values | Default
|
||||
| ---------- | ---------- | ---- | -------------- | ------ |
|
||||
| **src** | image src | `string` | - | - |
|
||||
| **stacked** | stacked display group | `boolean` | - | `false` |
|
||||
| **text** | display text when image is missing | `string` | - | - |
|
||||
| **size** | avatar size | `string` / `number` | `'mini', 'small', 'medium', 'large', number` | `medium` |
|
||||
| **isSquare** | avatar shape | `boolean` | - | `false` |
|
||||
| ... | native props | `ImgHTMLAttributes` | `'alt', 'crossOrigin', 'className', ...` | - |
|
||||
| **text** | text of pop-up | `string` `React.ReactNode` | - | - |
|
||||
| **initialVisible** | visible on initial | `boolean` | - | `false` |
|
||||
| **hideArrow** | hide arrow icon | `boolean` | - | `false` |
|
||||
| **type** | preset style type | [TooltipTypes](#tooltiptypes) | - | `default` |
|
||||
| **placement** | position of the tooltip relative to the target | [Placement](#placement) | - | `top` |
|
||||
| **trigger** | tooltip trigger mode | `'click' / 'hover'` | - | `hover` |
|
||||
| **enterDelay**(ms) | delay before tooltip is shown | `number` | - | `100` |
|
||||
| **leaveDelay**(ms) | delay before tooltip is hidden | `number` | - | `0` |
|
||||
| **offset**(px) | distance between pop-up and target | `number` | - | `12` |
|
||||
| **portalClassName** | className of pop-up box | `string` | - | - |
|
||||
| **onVisibleChange** | call when visibility of the tooltip is changed | `(visible: boolean) => void` | - | - |
|
||||
| ... | native props | `HTMLAttributes` | `'id', 'name', 'className', ...` | - |
|
||||
|
||||
<Attributes.Title>TooltipTypes</Attributes.Title>
|
||||
|
||||
```ts
|
||||
type TooltipTypes = 'default'
|
||||
| 'secondary'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'error'
|
||||
| 'dark'
|
||||
| 'lite'
|
||||
```
|
||||
|
||||
<Attributes.Title>Placement</Attributes.Title>
|
||||
|
||||
```ts
|
||||
type Placement = 'top'
|
||||
| 'topStart',
|
||||
| 'topEnd',
|
||||
| 'left',
|
||||
| 'leftStart',
|
||||
| 'leftEnd',
|
||||
| 'bottom',
|
||||
| 'bottomStart',
|
||||
| 'bottomEnd',
|
||||
| 'right',
|
||||
| 'rightStart',
|
||||
| 'rightEnd',
|
||||
```
|
||||
|
||||
</Attributes>
|
||||
|
||||
|
||||
224
pages/zh-cn/components/tooltip.mdx
Normal file
224
pages/zh-cn/components/tooltip.mdx
Normal file
@@ -0,0 +1,224 @@
|
||||
import { Layout, Playground, Attributes } from 'lib/components'
|
||||
import { Tooltip, Spacer, Row, Col, Button, Link, Badge, Code, Text } from 'components'
|
||||
|
||||
export const meta = {
|
||||
title: '文字提示 Tooltip',
|
||||
group: '数据展示',
|
||||
}
|
||||
|
||||
## Tooltip / 文字提示
|
||||
|
||||
在悬停时显示额外的提示信息。
|
||||
|
||||
<Playground
|
||||
desc="基础示例。"
|
||||
scope={{ Tooltip }}
|
||||
code={`
|
||||
<Tooltip text={'缓存是达到高性能的重要组成部分'}>文字提示</Tooltip>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="触发方式"
|
||||
desc="使用点击触发提示框。"
|
||||
scope={{ Tooltip }}
|
||||
code={`
|
||||
<Tooltip text={'缓存是达到高性能的重要组成部分'} trigger="click" type="dark">
|
||||
<span>点击我</span>
|
||||
</Tooltip>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="组件组合"
|
||||
desc="与不同的组件组合使用。"
|
||||
scope={{ Tooltip, Button, Link, Spacer, Row, Badge }}
|
||||
code={`
|
||||
<Row align="middle">
|
||||
<Tooltip text={'缓存是达到高性能的重要组成部分'} type="dark">
|
||||
<Button auto size="small">按钮</Button>
|
||||
</Tooltip>
|
||||
<Spacer inline x={1} />
|
||||
<Tooltip text={'缓存是达到高性能的重要组成部分'} type="dark">
|
||||
<Badge>1000+</Badge>
|
||||
</Tooltip>
|
||||
<Spacer inline x={1} />
|
||||
<Tooltip text={'缓存是达到高性能的重要组成部分'} type="dark">
|
||||
<Link href="#" color pure>超链接</Link>
|
||||
</Tooltip>
|
||||
</Row>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="定制内容"
|
||||
desc="你可以自定义弹出框的内容。"
|
||||
scope={{ Tooltip, Spacer, Row, Code, Text }}
|
||||
code={`
|
||||
<Row align="middle">
|
||||
<Tooltip text={<>请求中带上 <Code>If-Modified-Since</Code> 来验证缓存。</>}>
|
||||
<span>上方</span>
|
||||
</Tooltip>
|
||||
<Spacer inline x={2.5} />
|
||||
<Tooltip text={<>请求中带上 If-Modified-Since 来<Text b>验证缓存</Text>。</>} placement="bottom">
|
||||
<span>下方</span>
|
||||
</Tooltip>
|
||||
</Row>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="类型"
|
||||
desc="我们为不同的类型预置了样式。"
|
||||
scope={{ Tooltip, Spacer, Row, Code, Text }}
|
||||
code={`
|
||||
<Row align="middle">
|
||||
<Tooltip text="缓存是达到高性能的重要组成部分" type="dark">
|
||||
<span>黑暗的</span>
|
||||
</Tooltip>
|
||||
<Spacer inline x={1.5} />
|
||||
<Tooltip text="缓存是达到高性能的重要组成部分" type="success">
|
||||
<span>成功</span>
|
||||
</Tooltip>
|
||||
<Spacer inline x={1.5} />
|
||||
<Tooltip text="缓存是达到高性能的重要组成部分" type="warning">
|
||||
<span>警告</span>
|
||||
</Tooltip>
|
||||
<Spacer inline x={1.5} />
|
||||
<Tooltip text="缓存是达到高性能的重要组成部分" type="error">
|
||||
<span>错误</span>
|
||||
</Tooltip>
|
||||
<Spacer inline x={1.5} />
|
||||
<Tooltip text="缓存是达到高性能的重要组成部分" type="secondary">
|
||||
<span>次要的</span>
|
||||
</Tooltip>
|
||||
</Row>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="变体"
|
||||
desc="特殊样式。"
|
||||
scope={{ Tooltip, Spacer, Row, Code, Text }}
|
||||
code={`
|
||||
<Row align="middle">
|
||||
<Tooltip text="缓存是达到高性能的重要组成部分" type="lite">
|
||||
<span>精简的</span>
|
||||
</Tooltip>
|
||||
<Spacer inline x={2.5} />
|
||||
<Tooltip text="缓存是达到高性能的重要组成部分" hideArrow>
|
||||
<span>无箭头</span>
|
||||
</Tooltip>
|
||||
</Row>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="对齐方式"
|
||||
desc="有 12 种对齐方式可用。"
|
||||
scope={{ Tooltip, Spacer, Row, Col }}
|
||||
code={`
|
||||
() => {
|
||||
const text = 'The Evil Rabbit Jumped over the Fence'
|
||||
const Center = ({ children, ...props }) => (
|
||||
<Col style={{ display: 'flex', justifyContent: 'center' }} {...props}>{children}</Col>
|
||||
)
|
||||
return (
|
||||
<div style={{ width: '80%', margin: '0 auto' }}>
|
||||
<Row justify="center">
|
||||
<Center span={5}>
|
||||
<Tooltip text={text} placement="topStart" type="dark">topStart</Tooltip>
|
||||
</Center>
|
||||
<Center span={5}>
|
||||
<Tooltip text={text} placement="top" type="dark">top</Tooltip>
|
||||
</Center>
|
||||
<Center span={5}>
|
||||
<Tooltip text={text} placement="topEnd" type="dark">topEnd</Tooltip>
|
||||
</Center>
|
||||
</Row>
|
||||
<Row justify="space-between">
|
||||
<Center span={5}>
|
||||
<Tooltip text={text} placement="leftStart" type="dark">leftStart</Tooltip>
|
||||
</Center>
|
||||
<Center span={5}>
|
||||
<Tooltip text={text} placement="rightStart" type="dark">rightStart</Tooltip>
|
||||
</Center>
|
||||
</Row>
|
||||
<Spacer y={.5} />
|
||||
<Row justify="space-between">
|
||||
<Center span={5}>
|
||||
<Tooltip text={text} placement="left" type="dark">left</Tooltip>
|
||||
</Center>
|
||||
<Center span={5}>
|
||||
<Tooltip text={text} placement="right" type="dark">right</Tooltip>
|
||||
</Center>
|
||||
</Row>
|
||||
<Spacer y={.5} />
|
||||
<Row justify="space-between">
|
||||
<Center span={5}>
|
||||
<Tooltip text={text} placement="leftEnd" type="dark">leftEnd</Tooltip>
|
||||
</Center>
|
||||
<Center span={5}>
|
||||
<Tooltip text={text} placement="rightEnd" type="dark">rightEnd</Tooltip>
|
||||
</Center>
|
||||
</Row>
|
||||
<Row justify="center">
|
||||
<Center span={5}>
|
||||
<Tooltip text={text} placement="bottomStart" type="dark">bottomStart</Tooltip>
|
||||
</Center>
|
||||
<Center span={5}>
|
||||
<Tooltip text={text} placement="bottom" type="dark">bottom</Tooltip>
|
||||
</Center>
|
||||
<Center span={5}>
|
||||
<Tooltip text={text} placement="bottomEnd" type="dark">bottomEnd</Tooltip>
|
||||
</Center>
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
`} />
|
||||
|
||||
<Attributes edit="/pages/docs/components/tooltip.mdx">
|
||||
<Attributes.Title>Tooltip.Props</Attributes.Title>
|
||||
|
||||
| 属性 | 描述 | 类型 | 推荐值 | 默认
|
||||
| ---------- | ---------- | ---- | -------------- | ------ |
|
||||
| **text** | 弹出框文字 | `string` `React.ReactNode` | - | - |
|
||||
| **initialVisible** | 初始是否可见 | `boolean` | - | `false` |
|
||||
| **hideArrow** | 隐藏箭头 | `boolean` | - | `false` |
|
||||
| **type** | 不同的文字提示类型 | [TooltipTypes](#tooltiptypes) | - | `default` |
|
||||
| **placement** | 提示框与目标的对齐方式 | [Placement](#placement) | - | `top` |
|
||||
| **trigger** | 触发提示框的方式 | `'click' / 'hover'` | - | `hover` |
|
||||
| **enterDelay**(ms) | 在提示显示前的延迟 | `number` | - | `100` |
|
||||
| **leaveDelay**(ms) | 关闭提示前的延迟 | `number` | - | `0` |
|
||||
| **offset**(px) | 提示框与目标之间的偏移 | `number` | - | `12` |
|
||||
| **portalClassName** | 弹出框的类名 | `string` | - | - |
|
||||
| **onVisibleChange** | 当提示框状态改变时触发 | `(visible: boolean) => void` | - | - |
|
||||
| ... | 原生属性 | `HTMLAttributes` | `'id', 'name', 'className', ...` | - |
|
||||
|
||||
<Attributes.Title>TooltipTypes</Attributes.Title>
|
||||
|
||||
```ts
|
||||
type TooltipTypes = 'default'
|
||||
| 'secondary'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'error'
|
||||
| 'dark'
|
||||
| 'lite'
|
||||
```
|
||||
|
||||
<Attributes.Title>Placement</Attributes.Title>
|
||||
|
||||
```ts
|
||||
type Placement = 'top'
|
||||
| 'topStart',
|
||||
| 'topEnd',
|
||||
| 'left',
|
||||
| 'leftStart',
|
||||
| 'leftEnd',
|
||||
| 'bottom',
|
||||
| 'bottomStart',
|
||||
| 'bottomEnd',
|
||||
| 'right',
|
||||
| 'rightStart',
|
||||
| 'rightEnd',
|
||||
```
|
||||
|
||||
</Attributes>
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>
|
||||
Reference in New Issue
Block a user