From 8946038420e0c043f07e7d06cd52bf9b81ef03fb Mon Sep 17 00:00:00 2001 From: dyh_a Date: Thu, 15 Jun 2023 15:35:48 +0800 Subject: [PATCH] =?UTF-8?q?docs(components/button):=20button=E6=96=87?= =?UTF-8?q?=E6=A1=A3=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .dumi/global.scss | 2 +- packages/components/src/button/demo/all.tsx | 113 ++++++++++++++++++ packages/components/src/button/demo/basic.md | 7 -- .../components/src/button/demo/disabled.tsx | 39 ++++++ packages/components/src/button/demo/plain.tsx | 32 +++++ packages/components/src/button/demo/shape.tsx | 26 ++++ packages/components/src/button/demo/size.tsx | 24 ++++ .../src/button/demo/{basic.tsx => type.tsx} | 11 +- packages/components/src/button/index.md | 89 -------------- packages/components/src/button/index.zh-CN.md | 47 ++++++++ 10 files changed, 290 insertions(+), 100 deletions(-) create mode 100644 packages/components/src/button/demo/all.tsx delete mode 100644 packages/components/src/button/demo/basic.md create mode 100644 packages/components/src/button/demo/disabled.tsx create mode 100644 packages/components/src/button/demo/plain.tsx create mode 100644 packages/components/src/button/demo/shape.tsx create mode 100644 packages/components/src/button/demo/size.tsx rename packages/components/src/button/demo/{basic.tsx => type.tsx} (50%) delete mode 100644 packages/components/src/button/index.md create mode 100644 packages/components/src/button/index.zh-CN.md diff --git a/.dumi/global.scss b/.dumi/global.scss index 246367b2..3d0ce3c4 100644 --- a/.dumi/global.scss +++ b/.dumi/global.scss @@ -1 +1 @@ -@import '../packages/react-ui/src/index.scss'; +@import '../packages/react-ui/src/index'; diff --git a/packages/components/src/button/demo/all.tsx b/packages/components/src/button/demo/all.tsx new file mode 100644 index 00000000..d967b18a --- /dev/null +++ b/packages/components/src/button/demo/all.tsx @@ -0,0 +1,113 @@ +/** + * title: 全览 + * description: 全览演示。 + */ + +import React, { useCallback, useReducer } from 'react'; +import { Button, Layout as OriginLayout } from '@tool-pack/react-ui'; + +const App: React.FC = () => { + const [times, _addTimes] = useReducer((s) => s + 1, 0); + const addTimes = useCallback(() => _addTimes(), []); + const types = [ + 'default', + 'primary', + 'success', + 'info', + 'danger', + 'warning', + ] as const; + const sizes = ['small', 'medium', 'large'] as const; + const shapes = ['none', 'default', 'round', 'circle'] as const; + const plains = [false, true, 'dashed', 'text'] as const; + return ( + + click times: {times} + + size: + {sizes.map((size) => ( + + ))} + + + type: + {types.map((type) => ( + + ))} + + + plain: + {plains.map((plain) => ( + + ({String(plain)}): + {types.map((type) => ( + + ))} + + ))} + + + disabled: + {plains.map((plain) => ( + + {types.map((type) => ( + + ))} + + ))} + + + shape: + {sizes.map((size) => + shapes.map((shape) => ( + + )), + )} + + + ); +}; + +const Layout: React.FC[0]> = React.memo( + (props) => ( + + {props.children} + + ), +); + +export default App; diff --git a/packages/components/src/button/demo/basic.md b/packages/components/src/button/demo/basic.md deleted file mode 100644 index f42f5998..00000000 --- a/packages/components/src/button/demo/basic.md +++ /dev/null @@ -1,7 +0,0 @@ -## zh-CN - -按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。 - -## en-US - -There are `primary` button, `default` button, `dashed` button, `text` button and `link` button in antd. diff --git a/packages/components/src/button/demo/disabled.tsx b/packages/components/src/button/demo/disabled.tsx new file mode 100644 index 00000000..610cefd4 --- /dev/null +++ b/packages/components/src/button/demo/disabled.tsx @@ -0,0 +1,39 @@ +/** + * title: 禁止点击 + * description: 添加 `disabled` 属性即可让按钮处于不可用状态，同时按钮样式也会改变。 + */ + +import React from 'react'; +import { Button, Layout as OriginLayout } from '@tool-pack/react-ui'; + +const App: React.FC = () => ( + + + + + + + + + + +); + +const Layout: React.FC[0]> = React.memo( + (props) => ( + + {props.children} + + ), +); + +export default App; diff --git a/packages/components/src/button/demo/plain.tsx b/packages/components/src/button/demo/plain.tsx new file mode 100644 index 00000000..b7477d6b --- /dev/null +++ b/packages/components/src/button/demo/plain.tsx @@ -0,0 +1,32 @@ +/** + * title: 按钮边框 + * description: boolean | 'dashed' | 'text'。 + */ + +import React from 'react'; +import { Button, Layout } from '@tool-pack/react-ui'; + +const App: React.FC = () => ( + + + + + + +); + +export default App; diff --git a/packages/components/src/button/demo/shape.tsx b/packages/components/src/button/demo/shape.tsx new file mode 100644 index 00000000..290e36f5 --- /dev/null +++ b/packages/components/src/button/demo/shape.tsx @@ -0,0 +1,26 @@ +/** + * title: 按钮形状 + * description: 按钮有`none` `default` `round` `circle` 4种形状。 + */ + +import React from 'react'; +import { Button, Layout } from '@tool-pack/react-ui'; + +const App: React.FC = () => ( + + + + + + +); + +export default App; diff --git a/packages/components/src/button/demo/size.tsx b/packages/components/src/button/demo/size.tsx new file mode 100644 index 00000000..756b10aa --- /dev/null +++ b/packages/components/src/button/demo/size.tsx @@ -0,0 +1,24 @@ +/** + * title: 按钮尺寸 + * description: 按钮有大、中、小三种尺寸。
通过设置 `size` 为 `large` `medium` `small` 分别把按钮设为大、中、小尺寸。若不设置 `size`，则尺寸为中。 + */ + +import React from 'react'; +import { Button, Layout } from '@tool-pack/react-ui'; + +const App: React.FC = () => ( + + + + + + +); + +export default App; diff --git a/packages/components/src/button/demo/basic.tsx b/packages/components/src/button/demo/type.tsx similarity index 50% rename from packages/components/src/button/demo/basic.tsx rename to packages/components/src/button/demo/type.tsx index 02da8a0a..2bec3410 100644 --- a/packages/components/src/button/demo/basic.tsx +++ b/packages/components/src/button/demo/type.tsx @@ -1,15 +1,20 @@ +/** + * title: 按钮类型 + * description: 按钮有六种类型：默认按钮、主按钮、成功按钮、信息按钮、警告按钮和危险按钮。主按钮在同一个操作区域最多出现一次。 + */ + import React from 'react'; -import { Button } from '@tool-pack/react-ui'; +import { Button, Layout } from '@tool-pack/react-ui'; const App: React.FC = () => ( - <> + - + ); export default App; diff --git a/packages/components/src/button/index.md b/packages/components/src/button/index.md deleted file mode 100644 index ebeefa9a..00000000 --- a/packages/components/src/button/index.md +++ /dev/null @@ -1,89 +0,0 @@ ---- -category: Components -title: Button -subtitle: 按钮 -cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*BrFMQ5s7AAQAAAAAAAAAAAAADrJ8AQ/original -coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Lp1kTYmSsgoAAAAAAAAAAAAADrJ8AQ/original -demo: - cols: 2 -group: - title: 通用 ---- - -按钮用于开始一个即时操作。 - -## 何时使用 - -标记了一个操作命令，响应用户点击行为，触发相应的业务逻辑。 - -在组件中我们提供了五种按钮。 - -- 主按钮：用于主行动点，一个操作区域只能有一个主按钮。 -- 默认按钮：用于没有主次之分的一组行动点。 -- 虚线按钮：常用于添加操作。 -- 文本按钮：用于最次级的行动点。 -- 链接按钮：一般用于链接，即导航至某位置。 - -以及四种状态属性与上面配合使用。 - -- 危险：删除/移动/修改权限等危险操作，一般需要二次确认。 -- 幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。 -- 禁用：行动点不可用的时候，一般需要文案解释。 -- 加载中：用于异步操作等待反馈的时候，也可以避免多次提交。 - -[完整设计指南](https://ant.design/docs/spec/buttons-cn) - -## 代码演示 - - - - -## API - -通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。 - -按钮的属性说明如下： - -| 属性 | 说明 | 类型 | 默认值 | 版本 | -| ---------- | ------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------- | --------- | ----- | -| classNames | 语义化结构 class | Record | - | 5.4.0 | -| danger | 设置危险按钮 | boolean | false | | -| disabled | 设置按钮失效状态 | boolean | false | | -| ghost | 幽灵属性，使按钮背景透明 | boolean | false | | -| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | | -| htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | | -| icon | 设置按钮的图标组件 | ReactNode | - | | -| loading | 设置按钮载入状态 | boolean \| { delay: number } | false | | -| shape | 设置按钮形状 | `default` \| `circle` \| `round` | `default` | | -| size | 设置按钮大小 | `large` \| `middle` \| `small` | `middle` | | -| styles | 语义化结构 style | Record | - | 5.4.0 | -| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | | -| type | 设置按钮类型 | `primary` \| `ghost` \| `dashed` \| `link` \| `text` \| `default` | `default` | | -| onClick | 点击按钮时的回调 | (event: MouseEvent) => void | - | | - -支持原生 button 的其他所有属性。 - -### `styles` 和 `classNames` 属性 - -| 名称 | 说明 | 版本 | -| ---- | ------------ | ----- | -| icon | 设置图标元素 | 5.5.0 | - -## FAQ - -### 如何移除两个汉字之间的空格？ - -根据 Ant Design 设计规范要求，我们会在按钮内(文本按钮和链接按钮除外)只有两个汉字时自动添加空格，如果你不需要这个特性，可以设置 [ConfigProvider](/components/config-provider-cn#api) 的 `autoInsertSpaceInButton` 为 `false`。 - -移除两个汉字之间的空格 - - - -## 设计指引 - -- [我的按钮究竟该放哪儿！？| Ant Design 4.0 系列分享](https://zhuanlan.zhihu.com/p/109644406) diff --git a/packages/components/src/button/index.zh-CN.md b/packages/components/src/button/index.zh-CN.md new file mode 100644 index 00000000..e90106bf --- /dev/null +++ b/packages/components/src/button/index.zh-CN.md @@ -0,0 +1,47 @@ +--- +category: Components +title: Button +subtitle: 按钮 +demo: + cols: 2 +group: + title: 通用 +--- + +按钮用于开始一个即时操作。 + +## 何时使用 + +标记了一个操作命令，响应用户点击行为，触发相应的业务逻辑。 + +## 代码演示 + + + + + + + + + + + +## API + +通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `plain` -> `disabled`。 + +按钮的属性说明如下： + +| 属性 | 说明 | 类型 | 默认值 | 版本 | +| ---------- | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------- | --------- | ---- | +| classNames | 语义化结构 class | Record | - | | +| disabled | 设置按钮失效状态 | boolean | false | | +| htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | - | | +| shape | 设置按钮形状 | `default` \| `none` \| `circle` \| `round` | `default` | | +| size | 设置按钮大小 | `large` \| `medium` \| `small` | `medium` | | +| styles | 语义化结构 style | Record | - | | +| type | 设置按钮类型 | `primary` \| `success` \| `info` \| `warning` \| `danger` \| `default` | `default` | | +| plain | 设置按钮边框类型 | boolean \| `dashed` \| `text` | false | | +| onClick | 点击按钮时的回调 | (event: MouseEvent) => void | - | | + +支持原生 button 的其他所有属性。