diff --git a/pages/en-us/components/tooltip.mdx b/pages/en-us/components/tooltip.mdx index 9ccce7d..54fead6 100644 --- a/pages/en-us/components/tooltip.mdx +++ b/pages/en-us/components/tooltip.mdx @@ -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. Tooltip +`} /> + + + Click me + +`} /> + + + + + + + + 1000+ + + + + Hyperlink + + +`} /> + + + Perfect for working with a CMS.}> + Top + + + Perfect for working with a CMS.} placement="bottom"> + Bottom + + +`} /> + + + + Dark + + + + Success + + + + Warning + + + + Error + + + + Secondary + + +`} /> + + + + Lite + + + + No Arrow + + +`} /> + + { - 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 }) => ( + {children} + ) return ( - <> - - - - +
+ +
+ topStart +
+
+ top +
+
+ topEnd +
+ + +
+ leftStart +
+
+ rightStart +
+ - - - - - + +
+ left +
+
+ right +
+ + + +
+ leftEnd +
+
+ rightEnd +
+ + +
+ bottomStart +
+
+ bottom +
+
+ bottomEnd +
+ +
) } `} /> - - { - const url = 'https://zeit.co/api/www/avatar/?u=evilrabbit&s=160' - return ( - <> - - - - - - ) -} -`} /> - - - - - - - -`} /> - - - { - const url = 'https://zeit.co/api/www/avatar/?u=evilrabbit&s=160' - return ( - <> - - - - - - ) -} -`} /> - - -Avatar.Props + +Tooltip.Props | 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', ...` | - | + +TooltipTypes + +```ts +type TooltipTypes = 'default' + | 'secondary' + | 'success' + | 'warning' + | 'error' + | 'dark' + | 'lite' +``` + +Placement + +```ts +type Placement = 'top' + | 'topStart', + | 'topEnd', + | 'left', + | 'leftStart', + | 'leftEnd', + | 'bottom', + | 'bottomStart', + | 'bottomEnd', + | 'right', + | 'rightStart', + | 'rightEnd', +``` diff --git a/pages/zh-cn/components/tooltip.mdx b/pages/zh-cn/components/tooltip.mdx new file mode 100644 index 0000000..c18622a --- /dev/null +++ b/pages/zh-cn/components/tooltip.mdx @@ -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 / 文字提示 + +在悬停时显示额外的提示信息。 + +文字提示 +`} /> + + + 点击我 + +`} /> + + + + + + + + 1000+ + + + + 超链接 + + +`} /> + + + 请求中带上 If-Modified-Since 来验证缓存。}> + 上方 + + + 请求中带上 If-Modified-Since 来验证缓存。} placement="bottom"> + 下方 + + +`} /> + + + + 黑暗的 + + + + 成功 + + + + 警告 + + + + 错误 + + + + 次要的 + + +`} /> + + + + 精简的 + + + + 无箭头 + + +`} /> + + { + const text = 'The Evil Rabbit Jumped over the Fence' + const Center = ({ children, ...props }) => ( + {children} + ) + return ( +
+ +
+ topStart +
+
+ top +
+
+ topEnd +
+ + +
+ leftStart +
+
+ rightStart +
+ + + +
+ left +
+
+ right +
+ + + +
+ leftEnd +
+
+ rightEnd +
+ + +
+ bottomStart +
+
+ bottom +
+
+ bottomEnd +
+ +
+ ) +} +`} /> + + +Tooltip.Props + +| 属性 | 描述 | 类型 | 推荐值 | 默认 +| ---------- | ---------- | ---- | -------------- | ------ | +| **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', ...` | - | + +TooltipTypes + +```ts +type TooltipTypes = 'default' + | 'secondary' + | 'success' + | 'warning' + | 'error' + | 'dark' + | 'lite' +``` + +Placement + +```ts +type Placement = 'top' + | 'topStart', + | 'topEnd', + | 'left', + | 'leftStart', + | 'leftEnd', + | 'bottom', + | 'bottomStart', + | 'bottomEnd', + | 'right', + | 'rightStart', + | 'rightEnd', +``` + + + +export default ({ children }) => {children}