mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

docs: update button doc desc (#50770)

Browse Source 
Co-authored-by: ice <1597834867@qq.com>
This commit is contained in:
二货爱吃白萝卜 2024-09-09 22:30:49 +08:00 committed by GitHub
parent 9127cecc12
commit fbf8b10425
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/button/demo/basic.md
View File

@ -1,7 +1,7 @@
## zh-CN
按钮有五种类型：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。主按钮在同一个操作区域最多出现一次。
通过 `type` 语法糖，使用预设的按钮样式：主按钮、次按钮、虚线按钮、文本按钮和链接按钮。推荐主按钮在同一个操作区域最多出现一次。
## en-US
There are five type of buttons in antd, namely they are: `primary` buttons, `default` buttons, `dashed` buttons, `text` buttons, and `link` buttons.
Through the `type` syntactic sugar, use the preset button styles: `primary` buttons, `default` buttons, `dashed` buttons, `text` buttons, and `link` buttons.

8
components/button/index.en-US.md
View File

@ -33,7 +33,7 @@ And 4 other properties additionally.
## Examples
<!-- prettier-ignore -->
<code src="./demo/basic.tsx">Type</code>
<code src="./demo/basic.tsx">Syntactic sugar</code>
<code src="./demo/color-variant.tsx" version="5.21.0">Color & Variant</code>
<code src="./demo/icon.tsx">Icon</code>
<code src="./demo/icon-position.tsx" version="5.17.0">Icon Position</code>
@ -63,7 +63,7 @@ Different button styles can be generated by setting Button properties. The recom
| block | Option to fit button width to its parent width | boolean | false | |
| classNames | Semantic DOM class | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.4.0 |
| color | Set button color | `default` \| `primary` \| `danger` | - | 5.21.0 |
| danger | Set the danger status of button | boolean | false | |
| danger | Syntactic sugar. Set the danger status of button. will follow `color` if provided | boolean | false | |
| disabled | Disabled state of button | boolean | false | |
| ghost | Make background transparent and invert text and border colors | boolean | false | |
| href | Redirect url of link button | string | - | |
@ -75,7 +75,7 @@ Different button styles can be generated by setting Button properties. The recom
| size | Set the size of button | `large` \| `middle` \| `small` | `middle` | |
| styles | Semantic DOM style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.4.0 |
| target | Same as target attribute of a, works when href is specified | string | - | |
| type | Set button type | `primary` \| `dashed` \| `link` \| `text` \| `default` | `default` | |
| type | Syntactic sugar. Set button type. Will follow `variant` & `color` if provided | `primary` \| `dashed` \| `link` \| `text` \| `default` | `default` | |
| onClick | Set the handler to handle `click` event | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - | |
| variant | Set button variant | `outlined` \| `dashed` \| `solid` \| `filled` \| `text` \| `link` | - | 5.21.0 |
@ -93,7 +93,7 @@ It accepts all props which native buttons support.
### How to choose type and color & variant?
Type is essentially syntactic sugar for colors and variants. It internally provides a set of mapping relationships between colors and variants for the type. If both exist at the same time, the type will be used first.
Type is essentially syntactic sugar for colors and variants. It internally provides a set of mapping relationships between colors and variants for the type. If both exist at the same time, the colors and variants will be used first.
```jsx
<Button type="primary">click</Button>

8
components/button/index.zh-CN.md
View File

@ -36,7 +36,7 @@ group:
## 代码演示
<!-- prettier-ignore -->
<code src="./demo/basic.tsx">按钮类型</code>
<code src="./demo/basic.tsx">语法糖</code>
<code src="./demo/color-variant.tsx" version="5.21.0">颜色与变体</code>
<code src="./demo/icon.tsx">按钮图标</code>
<code src="./demo/icon-position.tsx" version="5.17.0">按钮图标位置</code>
@ -69,7 +69,7 @@ group:
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
| classNames | 语义化结构 class | [Record<SemanticDOM, string>](#semantic-dom) | - | 5.4.0 |
| color | 设置按钮的颜色 | `default` \| `primary` \| `danger` | - | 5.21.0 |
| danger | 设置危险按钮 | boolean | false | |
| danger | 语法糖，设置危险按钮。当设置 `color` 时会以后者为准 | boolean | false | |
| disabled | 设置按钮失效状态 | boolean | false | |
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
@ -81,7 +81,7 @@ group:
| size | 设置按钮大小 | `large` \| `middle` \| `small` | `middle` | |
| styles | 语义化结构 style | [Record<SemanticDOM, CSSProperties>](#semantic-dom) | - | 5.4.0 |
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
| type | 设置按钮类型 | `primary` \| `dashed` \| `link` \| `text` \| `default` | `default` | |
| type | 语法糖，设置按钮类型。当设置 `variant` 与 `color` 时以后者为准 | `primary` \| `dashed` \| `link` \| `text` \| `default` | `default` | |
| onClick | 点击按钮时的回调 | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - | |
| variant | 设置按钮的变体 | `outlined` \| `dashed` \| `solid` \| `filled` \| `text` \| `link` | - | 5.21.0 |
@ -99,7 +99,7 @@ group:
### 类型和颜色与变体如何选择？
类型本质上是颜色与变体的语法糖，内部为其提供了一组颜色与变体的映射关系。如果两者同时存在，优先使用类型。
类型本质上是颜色与变体的语法糖，内部为其提供了一组颜色与变体的映射关系。如果两者同时存在，优先使用颜色与变体。
```jsx
<Button type="primary">click</Button>