mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-07 17:44:35 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

docs: perfect website (#26079)

Browse Source 
* docs: perfect website

* fix []
This commit is contained in:
xrkffgg 2020-08-07 15:50:53 +08:00 committed by GitHub
parent 6d5ccd854f
commit f0568efdf3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,29 +28,29 @@ And 4 other properties additionally.
## API
To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
Different button styles can be generated by setting Button properties. The recommended order is: `type` -> `shape` -> `size` -> `loading` -> `disabled`.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| block | Option to fit button width to its parent width | boolean | false | |
| danger | Set the danger status of button | 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 | - | |
| htmlType | Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | |
| icon | Set the icon component of button | ReactNode | - | |
| loading | Set the loading status of button | boolean \| { delay: number } | false | |
| onClick | Set the handler to handle `click` event | (event) => void | - | |
| shape | Can be set to `circle`, `round` or omitted | string | - | |
| size | Set the size of button | `large` \| `middle` \| `small` | - | |
| target | Same as target attribute of a, works when href is specified | string | - | |
| type | Can be set to `primary` `ghost` `dashed` `danger` `link` `text` `default` | string | `default` | |
| onClick | Set the handler to handle `click` event | (event) => void | - | |
| block | Option to fit button width to its parent width | boolean | false | |
| danger | Set the danger status of button | boolean | false | |
It accepts all props which native buttons support.
## FAQ
### How to remove space between 2 chinese characters
### How to remove space between 2 chinese characters?
Following the Ant Design specification, we will add one space between if Button contains two Chinese characters only. If you don't need that, you can use [ConfigProvider](/components/config-provider/#API) to set `autoInsertSpaceInButton` as `false`.

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

@ -35,19 +35,19 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
| 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
| 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 | |
| onClick | 点击按钮时的回调 | (event) => void | - | |
| shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设 | string | - | |
| size | 设置按钮大小 | `large` \| `middle` \| `small` | - | |
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
| type | 设置按钮类型 | `primary` \| `ghost` \| `dashed` \| `danger` \| `link` \| `text` \| `default` | `default` | |
| onClick | 点击按钮时的回调 | (event) => void | - | |
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
| danger | 设置危险按钮 | boolean | false | |
支持原生 button 的其他所有属性。

18
components/icon/index.en-US.md
View File

@ -26,9 +26,9 @@ ReactDOM.render(<IconDisplay />, mountNode);
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| className | The className of Icon | string | - | |
| style | The style properties of icon, like `fontSize` and `color` | CSSProperties | - | |
| spin | Rotate icon with animation | boolean | false | |
| rotate | Rotate by n degrees (not working in IE9) | number | - | |
| spin | Rotate icon with animation | boolean | false | |
| style | The style properties of icon, like `fontSize` and `color` | CSSProperties | - | |
| twoToneColor | Only supports the two-tone icon. Specify the primary color | string (hex color) | - | |
We still have three different themes for icons, icon component name is the icon name suffixed by the theme name.
@ -45,10 +45,10 @@ import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons';
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| style | The style properties of icon, like `fontSize` and `color` | CSSProperties | - | |
| spin | Rotate icon with animation | boolean | false | |
| rotate | Rotate degrees (not working in IE9) | number | - | |
| component | The component used for the root node | ComponentType<CustomIconComponentProps\> | - | |
| rotate | Rotate degrees (not working in IE9) | number | - | |
| spin | Rotate icon with animation | boolean | false | |
| style | The style properties of icon, like `fontSize` and `color` | CSSProperties | - | |
### About SVG icons
@ -112,8 +112,8 @@ The following options are available:
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| extraCommonProps | Define extra properties to the component | { \[key: string]: any } | {} | |
| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. Support `string[]` after `@ant-design/icons@4.1.0` | string \| string[] | - | |
| extraCommonProps | Define extra properties to the component | `{ [key: string]: any }` | {} | |
The property `scriptUrl` should be set to import the SVG sprite symbols.
@ -155,8 +155,8 @@ The following properties are available for the component:
| Property | Description | Type | Readonly | Version |
| --- | --- | --- | --- | --- |
| width | The width of the `svg` element | string \| number | '1em' | |
| height | The height of the `svg` element | string \| number | '1em' | |
| fill | Define the color used to paint the `svg` element | string | 'currentColor' | |
| className | The computed class name of the `svg` element | string | - | |
| fill | Define the color used to paint the `svg` element | string | `currentColor` | |
| height | The height of the `svg` element | string \| number | `1em` | |
| style | The computed style of the `svg` element | CSSProperties | - | |
| width | The width of the `svg` element | string \| number | `1em` | |

26
components/icon/index.zh-CN.md
View File

@ -33,9 +33,9 @@ ReactDOM.render(<IconDisplay />, mountNode);
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| className | 设置图标的样式名 | string | - | |
| style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - | |
| spin | 是否有旋转动画 | boolean | false | |
| rotate | 图标旋转角度（IE9 无效） | number | - | |
| spin | 是否有旋转动画 | boolean | false | |
| style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - | |
| twoToneColor | 仅适用双色图标。设置双色图标的主要颜色 | string (十六进制颜色) | - | |
其中我们提供了三种主题的图标，不同主题的 Icon 组件名为图标名加主题做为后缀。
@ -48,14 +48,14 @@ import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons';
<StarTwoTone twoToneColor="#eb2f96" />
```
### 自定义 Icon/Custom Icon
### 自定义 Icon
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - | |
| spin | 是否有旋转动画 | boolean | false | |
| component | 控制如何渲染图标，通常是一个渲染根标签为 `<svg>` 的 React 组件 | ComponentType<CustomIconComponentProps\> | - | |
| rotate | 图标旋转角度（IE9 无效） | number | - | |
| component | 控制如何渲染图标，通常是一个渲染根标签为 `<svg>` 的 `React` 组件 | ComponentType<CustomIconComponentProps\> | - | |
| spin | 是否有旋转动画 | boolean | false | |
| style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - | |
### 关于 SVG 图标
@ -103,16 +103,16 @@ ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);
其本质上是创建了一个使用 `<use>` 标签来渲染图标的组件。
`options` 的配置项如下：
options 的配置项如下：
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址，`@ant-design/icons@4.1.0` 之后支持 `string[]` 类型 | string \| string[] | - | |
| extraCommonProps | 给所有的 `svg` 图标 `<Icon />` 组件设置额外的属性 | `{ [key: string]: any }` | {} | |
| extraCommonProps | 给所有的 `svg` 图标 `<Icon />` 组件设置额外的属性 | { \[key: string]: any } | {} | |
| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 js 地址，`@ant-design/icons@4.1.0` 之后支持 `string[]` 类型 | string \| string[] | - | |
在 `scriptUrl` 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。
见 [iconfont.cn 使用帮助](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) 查看如何生成 `js` 地址。
见 [iconfont.cn 使用帮助](http://iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code) 查看如何生成 js 地址。
### 自定义 SVG 图标
@ -150,8 +150,8 @@ ReactDOM.render(<Icon component={MessageSvg} />, mountNode);
| 字段 | 说明 | 类型 | 只读值 | 版本 |
| --------- | ----------------------- | ---------------- | -------------- | ---- |
| width | `svg` 元素宽度 | string \| number | '1em' | |
| height | `svg` 元素高度 | string \| number | '1em' | |
| fill | `svg` 元素填充的颜色 | string | 'currentColor' | |
| className | 计算后的 `svg` 类名 | string | - | |
| fill | `svg` 元素填充的颜色 | string | `currentColor` | |
| height | `svg` 元素高度 | string \| number | `1em` | |
| style | 计算后的 `svg` 元素样式 | CSSProperties | - | |
| width | `svg` 元素宽度 | string \| number | `1em` | |