mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 09:26:06 +08:00
docs: format api button/icon/typography (#25292)
This commit is contained in:
parent
50ae25d0c7
commit
b9cd990693
@ -32,19 +32,19 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 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 | |
|
||||
| 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` | string | - | |
|
||||
| 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 | |
|
||||
| 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 | |
|
||||
| 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` | string | - | |
|
||||
| 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.
|
||||
|
||||
|
@ -25,11 +25,11 @@ ReactDOM.render(<IconDisplay />, mountNode);
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| className | className of Icon | string | - | |
|
||||
| className | ClassName of Icon | string | - | |
|
||||
| style | 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 | - | |
|
||||
| twoToneColor | Only supports the two-tone icon. Specify the primary color. | string (hex color) | - | |
|
||||
| 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.
|
||||
|
||||
@ -48,7 +48,7 @@ import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons';
|
||||
| style | 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\> | - | |
|
||||
| component | The component used for the root node | ComponentType<CustomIconComponentProps\> | - | |
|
||||
|
||||
### About SVG icons
|
||||
|
||||
@ -112,7 +112,7 @@ The following options are available:
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. Support `string[]` after `@ant-design/icons@4.1.0`. | string \| string[] | - | |
|
||||
| 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.
|
||||
|
@ -20,10 +20,10 @@ Basic text writing, including headings, body text, lists, and more.
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| code | Code style | boolean | false | |
|
||||
| copyable | whether to be copyable, customize it via setting an object | boolean \| { text: string, onCopy: Function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | icon and tooltips: 4.4.0 |
|
||||
| copyable | Whether to be copyable, customize it via setting an object | boolean \| { text: string, onCopy: Function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | icon and tooltips: 4.4.0 |
|
||||
| delete | Deleted line style | boolean | false | |
|
||||
| disabled | Disabled content | boolean | false | |
|
||||
| editable | Editable. Can control edit state when is object | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false | |
|
||||
| editable | If editable. Can control edit state when is object | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false | |
|
||||
| ellipsis | Display ellipsis when text overflows. Should set width when ellipsis needed | boolean | false | |
|
||||
| mark | Marked style | boolean | false | |
|
||||
| keyboard | Keyboard style | boolean | false | 4.3.0 |
|
||||
@ -37,10 +37,10 @@ Basic text writing, including headings, body text, lists, and more.
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| code | Code style | boolean | false | |
|
||||
| copyable | whether to be copyable, customize it via setting an object | boolean \| { text: string, onCopy: Function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | icon and tooltips: 4.4.0 |
|
||||
| copyable | Whether to be copyable, customize it via setting an object | boolean \| { text: string, onCopy: Function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | icon and tooltips: 4.4.0 |
|
||||
| delete | Deleted line style | boolean | false | |
|
||||
| disabled | Disabled content | boolean | false | |
|
||||
| editable | Editable. Can control edit state when is object | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false | |
|
||||
| editable | If editable. Can control edit state when is object | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false | |
|
||||
| ellipsis | Display ellipsis when text overflows. Can configure rows and expandable by using object | boolean \| { rows: number, expandable: boolean, onExpand: Function(event), onEllipsis: Function(ellipsis) } | false | onEllipsis: 4.2.0 |
|
||||
| level | Set content importance. Match with `h1`, `h2`, `h3`, `h4` | number: 1, 2, 3, 4 | 1 | |
|
||||
| mark | Marked style | boolean | false | |
|
||||
@ -53,10 +53,10 @@ Basic text writing, including headings, body text, lists, and more.
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| code | Code style | boolean | false | |
|
||||
| copyable | whether to be copyable, customize it via setting an object | boolean \| { text: string, onCopy: Function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | icon and tooltips: 4.4.0 |
|
||||
| copyable | Whether to be copyable, customize it via setting an object | boolean \| { text: string, onCopy: Function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | icon and tooltips: 4.4.0 |
|
||||
| delete | Deleted line style | boolean | false | |
|
||||
| disabled | Disabled content | boolean | false | |
|
||||
| editable | Editable. Can control edit state when is object | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false | |
|
||||
| editable | If editable. Can control edit state when is object | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false | |
|
||||
| ellipsis | Display ellipsis when text overflows. Can configure rows expandable and suffix by using object | boolean \| { rows: number, expandable: boolean, suffix: string, symbol: React.ReactNode, onExpand: Function(event), onEllipsis: Function(ellipsis) } | false | onEllipsis: 4.2.0 |
|
||||
| mark | Marked style | boolean | false | |
|
||||
| underline | Underlined style | boolean | false | |
|
||||
|
@ -36,6 +36,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| code | 添加代码样式 | boolean | false | |
|
||||
| copyable | 是否可拷贝,为对象时可进行各种自定义 | boolean \| { text: string, onCopy: Function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | `icon` 和 `tooltips` 在 `4.4.0` 支持 |
|
||||
| delete | 添加删除线样式 | boolean | false | |
|
||||
| disabled | 禁用文本 | boolean | false | |
|
||||
@ -51,7 +52,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| | copyable | 是否可拷贝,为对象时可进行各种自定义 | boolean \| { text: string, onCopy: Function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | `icon` 和 `tooltips` 在 `4.4.0` 支持 |
|
||||
| code | 添加代码样式 | boolean | false | |
|
||||
| copyable | 是否可拷贝,为对象时可进行各种自定义 | boolean \| { text: string, onCopy: Function, icon: ReactNode, tooltips: \[ReactNode, ReactNode\] } | false | `icon` 和 `tooltips` 在 `4.4.0` 支持 |
|
||||
| delete | 添加删除线样式 | boolean | false | |
|
||||
| disabled | 禁用文本 | boolean | false | |
|
||||
| editable | 是否可编辑,为对象时可对编辑进行控制 | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false | |
|
||||
|
Loading…
Reference in New Issue
Block a user