mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-30 22:39:34 +08:00
Merge branch 'master' into feature
This commit is contained in:
commit
cd9b8b20b5
@ -87,7 +87,7 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
|
|||||||
- [设计规范速查手册](https://github.com/ant-design/ant-design/wiki/Ant-Design-%E8%AE%BE%E8%AE%A1%E5%9F%BA%E7%A1%80%E7%AE%80%E7%89%88)
|
- [设计规范速查手册](https://github.com/ant-design/ant-design/wiki/Ant-Design-%E8%AE%BE%E8%AE%A1%E5%9F%BA%E7%A1%80%E7%AE%80%E7%89%88)
|
||||||
- [开发者说明](https://github.com/ant-design/ant-design/wiki/Development)
|
- [开发者说明](https://github.com/ant-design/ant-design/wiki/Development)
|
||||||
- [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
- [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
||||||
- [常见问题](https://github.com/ant-design/ant-design/wiki/FAQ)
|
- [常见问题](https://ant.design/docs/react/faq-cn)
|
||||||
- [CodeSandbox 模板](https://u.ant.design/codesandbox-repro) for bug reports
|
- [CodeSandbox 模板](https://u.ant.design/codesandbox-repro) for bug reports
|
||||||
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
|
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
|
||||||
- [定制主题](http://ant.design/docs/react/customize-theme-cn)
|
- [定制主题](http://ant.design/docs/react/customize-theme-cn)
|
||||||
|
@ -86,7 +86,7 @@ See [i18n](http://ant.design/docs/react/i18n).
|
|||||||
- [Motion](https://motion.ant.design)
|
- [Motion](https://motion.ant.design)
|
||||||
- [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
|
- [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
|
||||||
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
||||||
- [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ)
|
- [FAQ](https://ant.design/docs/react/faq)
|
||||||
- [CodeSandbox Template](https://u.ant.design/codesandbox-repro) for bug reports
|
- [CodeSandbox Template](https://u.ant.design/codesandbox-repro) for bug reports
|
||||||
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
|
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
|
||||||
- [Customize Theme](http://ant.design/docs/react/customize-theme)
|
- [Customize Theme](http://ant.design/docs/react/customize-theme)
|
||||||
|
@ -813,7 +813,7 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
|
|||||||
class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-large ant-tabs-line"
|
class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-large ant-tabs-line"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-tabs-bar ant-card-head-tabs"
|
class="ant-tabs-bar"
|
||||||
role="tablist"
|
role="tablist"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
>
|
>
|
||||||
@ -948,7 +948,7 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
|
|||||||
class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-large ant-tabs-line"
|
class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-large ant-tabs-line"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="ant-tabs-bar ant-card-head-tabs"
|
class="ant-tabs-bar"
|
||||||
role="tablist"
|
role="tablist"
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
>
|
>
|
||||||
|
@ -182,10 +182,7 @@ More option at [rc-form option](https://github.com/react-component/form#option-o
|
|||||||
|
|
||||||
### Form.Item
|
### Form.Item
|
||||||
|
|
||||||
Note:
|
Note: if Form.Item has multiple children that had been decorated by `getFieldDecorator`, `help` and `required` and `validateStatus` can't be generated automatically.
|
||||||
|
|
||||||
- If Form.Item has multiple children that had been decorated by `getFieldDecorator`, `help` and `required` and `validateStatus` can't be generated automatically.
|
|
||||||
- Before `2.2.0`, form controls must be child of Form.Item, otherwise, you need to set `help`, `required` and `validateStatus` by yourself.
|
|
||||||
|
|
||||||
| Property | Description | Type | Default Value |
|
| Property | Description | Type | Default Value |
|
||||||
| -------- | ----------- | ---- | ------------- |
|
| -------- | ----------- | ---- | ------------- |
|
||||||
|
@ -183,10 +183,7 @@ validateFields(['field1', 'field2'], options, (errors, values) => {
|
|||||||
|
|
||||||
### Form.Item
|
### Form.Item
|
||||||
|
|
||||||
注意:
|
注意:一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child,当有多个被装饰过的 child 时,`help` `required` `validateStatus` 无法自动生成。
|
||||||
|
|
||||||
- 一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child,当有多个被装饰过的 child 时,`help` `required` `validateStatus` 无法自动生成。
|
|
||||||
- `2.2.0` 之前,只有当表单域为 Form.Item 的子元素时,才会自动生成 `help` `required` `validateStatus`,嵌套情况需要自行设置。
|
|
||||||
|
|
||||||
| 参数 | 说明 | 类型 | 默认值 |
|
| 参数 | 说明 | 类型 | 默认值 |
|
||||||
| --- | --- | --- | --- |
|
| --- | --- | --- | --- |
|
||||||
|
@ -29,6 +29,19 @@ ReactDOM.render(<IconDisplay />, mountNode);
|
|||||||
| component | The component used for the root node. This will override the **`type`** property. | ComponentType<CustomIconComponentProps\> | - |
|
| component | The component used for the root node. This will override the **`type`** property. | ComponentType<CustomIconComponentProps\> | - |
|
||||||
| twoToneColor | Only support the two-tone icon. Specific the primary color. | string (hex color) | - |
|
| twoToneColor | Only support the two-tone icon. Specific the primary color. | string (hex color) | - |
|
||||||
|
|
||||||
|
### Svg icons
|
||||||
|
|
||||||
|
We introduced svg icons in `3.9.x` version replacing font icons which brings benefits below:
|
||||||
|
|
||||||
|
- Complete offline usage of icon, no dependency of alipay cdn font icon file and no more empty square during downloading than no need to deploy icon font files locally either.
|
||||||
|
- Much more display accuracy in lower-level screens.
|
||||||
|
- Support multiple colors for icon.
|
||||||
|
- No need to change built-in icons with overriding styles by providing more props in component.
|
||||||
|
|
||||||
|
More disscussion of svg icon reference to [#10353](https://github.com/ant-design/ant-design/issues/10353).
|
||||||
|
|
||||||
|
> ⚠️ About the extra bundle size brought by all svg icons we imported in antd@3.9.x, we will provide new API to allow developers importing icons as your need, you can trace [#12011](https://github.com/ant-design/ant-design/issues/12011) for further progress.
|
||||||
|
|
||||||
The properties `theme`, `component` and `twoToneColor` are added in `antd@3.9.x`. The best practice is to pass the property `theme` to every `<Icon />` components.
|
The properties `theme`, `component` and `twoToneColor` are added in `antd@3.9.x`. The best practice is to pass the property `theme` to every `<Icon />` components.
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
@ -41,6 +54,8 @@ All the icons will render to `<svg>`. You can still set `style` and `className`
|
|||||||
<Icon type="message" style={{ fontSize: '16px', color: '#08c' }} theme="outlined" />
|
<Icon type="message" style={{ fontSize: '16px', color: '#08c' }} theme="outlined" />
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Set TwoTone Color
|
||||||
|
|
||||||
When using the two-tone icons, you can use the static methods `Icon.getTwoToneColor()` and `Icon.setTwoToneColor(colorString)` to spicify the primary color.
|
When using the two-tone icons, you can use the static methods `Icon.getTwoToneColor()` and `Icon.setTwoToneColor(colorString)` to spicify the primary color.
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
@ -48,6 +63,8 @@ Icon.setTwoToneColor('#eb2f96');
|
|||||||
Icon.getTwoToneColor(); // #eb2f96
|
Icon.getTwoToneColor(); // #eb2f96
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### Custom Svg Icon
|
||||||
|
|
||||||
You can import svg icon as an react component by using `webpack` and [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack). `@svgr/webpack`'s `options` [reference](https://github.com/smooth-code/svgr#options).
|
You can import svg icon as an react component by using `webpack` and [`@svgr/webpack`](https://www.npmjs.com/package/@svgr/webpack). `@svgr/webpack`'s `options` [reference](https://github.com/smooth-code/svgr#options).
|
||||||
|
|
||||||
```js
|
```js
|
||||||
@ -89,12 +106,11 @@ The following properties are available for the component:
|
|||||||
| className | The computed class name of the `svg` element | string | - |
|
| className | The computed class name of the `svg` element | string | - |
|
||||||
| style | The computed style of the `svg` element | CSSProperties | - |
|
| style | The computed style of the `svg` element | CSSProperties | - |
|
||||||
|
|
||||||
|
### Custom Font Icon
|
||||||
|
|
||||||
### Use custom icon with iconfont.cn
|
We added a `createFromIconfontCN` function to help developer using their own icons deployed at [iconfont.cn](http://iconfont.cn/) in a convenient way.
|
||||||
|
|
||||||
#### Icon.createFromIconfontCN(options)
|
> This method is specified for [iconfont.cn](http://iconfont.cn/).
|
||||||
|
|
||||||
This method is specified for [iconfont.cn](http://iconfont.cn/).
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const MyIcon = Icon.createFromIconfontCN({
|
const MyIcon = Icon.createFromIconfontCN({
|
||||||
|
@ -16,7 +16,7 @@ toc: false
|
|||||||
|
|
||||||
> 点击图标即可复制代码。
|
> 点击图标即可复制代码。
|
||||||
|
|
||||||
双色图标可能略有缺失,我们还在持续补充中。
|
新版图标可能略有缺失,我们还在持续补充中。
|
||||||
|
|
||||||
```__react
|
```__react
|
||||||
import IconDisplay from 'site/theme/template/IconDisplay';
|
import IconDisplay from 'site/theme/template/IconDisplay';
|
||||||
@ -32,9 +32,22 @@ ReactDOM.render(<IconDisplay />, mountNode);
|
|||||||
| theme | 图标主题风格。可选实心、描线、双色等主题风格,适用于官方图标 | 'filled' \| 'outlined' \| 'twoTone' | 'outlined' |
|
| theme | 图标主题风格。可选实心、描线、双色等主题风格,适用于官方图标 | 'filled' \| 'outlined' \| 'twoTone' | 'outlined' |
|
||||||
| spin | 是否有旋转动画 | boolean | false |
|
| spin | 是否有旋转动画 | boolean | false |
|
||||||
| component | 控制如何渲染图标,通常是一个渲染根标签为 `<svg>` 的 `React` 组件,**会使 `type` 属性失效** | ComponentType<CustomIconComponentProps\> | - |
|
| component | 控制如何渲染图标,通常是一个渲染根标签为 `<svg>` 的 `React` 组件,**会使 `type` 属性失效** | ComponentType<CustomIconComponentProps\> | - |
|
||||||
| twoToneColor | 仅适用双色图标。设置双色图标的主要颜色。 | string (十六进制颜色) | - |
|
| twoToneColor | 仅适用双色图标。设置双色图标的主要颜色 | string (十六进制颜色) | - |
|
||||||
|
|
||||||
其中 `theme`, `component`, `twoToneColor` 是 `antd@3.9.x` 新增加的属性。最佳实践是给使用的 `<Icon />` 组件传入属性 `theme` 以明确图标的主题风格。例如:
|
### Svg 图标
|
||||||
|
|
||||||
|
在 `3.9.x` 版本后,我们使用了 svg 图标替换了原先的 font 图标,从而带来了以下优势:
|
||||||
|
|
||||||
|
- 完全离线化使用,不需要从支付宝 cdn 下载字体文件,图标不会因为网络问题呈现方块,也无需字体文件本地部署。
|
||||||
|
- 在低端设备上 svg 有更好的清晰度。
|
||||||
|
- 支持多色图标。
|
||||||
|
- 对于内建图标的更换可以提供更多 API,而不需要进行样式覆盖。
|
||||||
|
|
||||||
|
更多讨论可参考:[#10353](https://github.com/ant-design/ant-design/issues/10353)。
|
||||||
|
|
||||||
|
> ⚠️ 目前 3.9.x 上我们全量引入了所有图标,导致 antd 默认的包体积有一定增加,我们会在不远的未来增加新的 API 来实现图标的按需使用,更多相关讨论可关注:[#12011](https://github.com/ant-design/ant-design/issues/12011)。
|
||||||
|
|
||||||
|
其中 `theme`, `component`, `twoToneColor` 是 `3.9.x` 版本新增加的属性。最佳实践是给使用的 `<Icon />` 组件传入属性 `theme` 以明确图标的主题风格。例如:
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
<Icon type="star" theme="filled" />
|
<Icon type="star" theme="filled" />
|
||||||
@ -46,13 +59,17 @@ ReactDOM.render(<IconDisplay />, mountNode);
|
|||||||
<Icon type="message" style={{ fontSize: '16px', color: '#08c' }} />
|
<Icon type="message" style={{ fontSize: '16px', color: '#08c' }} />
|
||||||
```
|
```
|
||||||
|
|
||||||
对于双色图标,可以通过使用 `Icon.getTwoToneColor()` 和 `Icon.setTwoToneColor(colorString)` 来设置图标主色。
|
### 双色图标主色
|
||||||
|
|
||||||
|
对于双色图标,可以通过使用 `Icon.getTwoToneColor()` 和 `Icon.setTwoToneColor(colorString)` 来全局设置图标主色。
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
Icon.setTwoToneColor('#eb2f96');
|
Icon.setTwoToneColor('#eb2f96');
|
||||||
Icon.getTwoToneColor(); // #eb2f96
|
Icon.getTwoToneColor(); // #eb2f96
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### 自定义 svg 图标
|
||||||
|
|
||||||
如果使用 `webpack`,可以通过配置 [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) 来将 `svg` 图标作为 `React` 组件导入。`@svgr/webpack` 的 `options` 选项请参阅 [svgr文档](https://github.com/smooth-code/svgr#options)。
|
如果使用 `webpack`,可以通过配置 [@svgr/webpack](https://www.npmjs.com/package/@svgr/webpack) 来将 `svg` 图标作为 `React` 组件导入。`@svgr/webpack` 的 `options` 选项请参阅 [svgr文档](https://github.com/smooth-code/svgr#options)。
|
||||||
|
|
||||||
```js
|
```js
|
||||||
@ -94,11 +111,9 @@ ReactDOM.render(
|
|||||||
| className | 计算后的 `svg` 类名 | string | - |
|
| className | 计算后的 `svg` 类名 | string | - |
|
||||||
| style | 计算后的 `svg` 元素样式 | CSSProperties | - |
|
| style | 计算后的 `svg` 元素样式 | CSSProperties | - |
|
||||||
|
|
||||||
### 使用 iconfont.cn 的自定义图标
|
### 自定义 font 图标
|
||||||
|
|
||||||
#### Icon.createFromIconfontCN(options)
|
在 `3.9.x` 里,我们提供了一个 `createFromIconfontCN` 方法,方便开发者调用在 [iconfont.cn](http://iconfont.cn/) 上自行管理的图标。
|
||||||
|
|
||||||
这个方法适用于 `iconfont.cn` 的用户
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const MyIcon = Icon.createFromIconfontCN({
|
const MyIcon = Icon.createFromIconfontCN({
|
||||||
|
@ -5873,6 +5873,7 @@ exports[`Locale Provider should display the text as ar 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -10750,6 +10751,7 @@ exports[`Locale Provider should display the text as bg 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -15627,6 +15629,7 @@ exports[`Locale Provider should display the text as ca 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -20504,6 +20507,7 @@ exports[`Locale Provider should display the text as cs 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -25381,6 +25385,7 @@ exports[`Locale Provider should display the text as de 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -30258,6 +30263,7 @@ exports[`Locale Provider should display the text as el 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -35135,6 +35141,7 @@ exports[`Locale Provider should display the text as en 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -40012,6 +40019,7 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -44889,6 +44897,7 @@ exports[`Locale Provider should display the text as es 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -49766,6 +49775,7 @@ exports[`Locale Provider should display the text as et 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -54643,6 +54653,7 @@ exports[`Locale Provider should display the text as fa 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -59520,6 +59531,7 @@ exports[`Locale Provider should display the text as fi 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -64397,6 +64409,7 @@ exports[`Locale Provider should display the text as fr 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -69274,6 +69287,7 @@ exports[`Locale Provider should display the text as fr 2`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -74151,6 +74165,7 @@ exports[`Locale Provider should display the text as is 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -79028,6 +79043,7 @@ exports[`Locale Provider should display the text as it 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -83905,6 +83921,7 @@ exports[`Locale Provider should display the text as ja 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -88782,6 +88799,7 @@ exports[`Locale Provider should display the text as ko 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -93659,6 +93677,7 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -98536,6 +98555,7 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -103413,6 +103433,7 @@ exports[`Locale Provider should display the text as nb 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -108290,6 +108311,7 @@ exports[`Locale Provider should display the text as nl 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -113167,6 +113189,7 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -118044,6 +118067,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -122921,6 +122945,7 @@ exports[`Locale Provider should display the text as pt 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -127798,6 +127823,7 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -132675,6 +132701,7 @@ exports[`Locale Provider should display the text as ru 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -137552,6 +137579,7 @@ exports[`Locale Provider should display the text as sk 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -142429,6 +142457,7 @@ exports[`Locale Provider should display the text as sl 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -147306,6 +147335,7 @@ exports[`Locale Provider should display the text as sr 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -152183,6 +152213,7 @@ exports[`Locale Provider should display the text as sv 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -157060,6 +157091,7 @@ exports[`Locale Provider should display the text as th 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -161937,6 +161969,7 @@ exports[`Locale Provider should display the text as tr 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -166814,6 +166847,7 @@ exports[`Locale Provider should display the text as uk 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -171691,6 +171725,7 @@ exports[`Locale Provider should display the text as vi 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -176568,6 +176603,7 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
@ -181445,6 +181481,7 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-popover-inner"
|
class="ant-popover-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
|
@ -20,7 +20,7 @@ const openNotification = () => {
|
|||||||
notification.open({
|
notification.open({
|
||||||
message: 'Notification Title',
|
message: 'Notification Title',
|
||||||
description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
|
description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
|
||||||
icon: <Icon type="smile-circle" style={{ color: '#108ee9' }} />,
|
icon: <Icon type="smile" style={{ color: '#108ee9' }} />,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`Popconfirm should show overlay when trigger is clicked 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\"><div><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><i class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" class=\\"\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z\\"></path></svg></i><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div></div>"`;
|
exports[`Popconfirm should show overlay when trigger is clicked 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><i class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" class=\\"\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z\\"></path></svg></i><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div></div>"`;
|
||||||
|
|
||||||
exports[`Popconfirm should show overlay when trigger is clicked 2`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\"><div><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><i class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" class=\\"\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z\\"></path></svg></i><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div></div>"`;
|
exports[`Popconfirm should show overlay when trigger is clicked 2`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><i class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" class=\\"\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z\\"></path></svg></i><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div></div>"`;
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`Popover should show overlay when trigger is clicked 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\"><div><div class=\\"ant-popover-title\\">code</div><div class=\\"ant-popover-inner-content\\">console.log('hello world')</div></div></div></div>"`;
|
exports[`Popover should show overlay when trigger is clicked 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div><div class=\\"ant-popover-title\\">code</div><div class=\\"ant-popover-inner-content\\">console.log('hello world')</div></div></div></div>"`;
|
||||||
|
|
||||||
exports[`Popover should show overlay when trigger is clicked 2`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\"><div><div class=\\"ant-popover-title\\">code</div><div class=\\"ant-popover-inner-content\\">console.log('hello world')</div></div></div></div>"`;
|
exports[`Popover should show overlay when trigger is clicked 2`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div><div class=\\"ant-popover-title\\">code</div><div class=\\"ant-popover-inner-content\\">console.log('hello world')</div></div></div></div>"`;
|
||||||
|
@ -13,6 +13,7 @@ exports[`Slider should show tooltip when hovering slider handler 1`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-tooltip-inner"
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
30
|
30
|
||||||
</div>
|
</div>
|
||||||
@ -34,6 +35,7 @@ exports[`Slider should show tooltip when hovering slider handler 2`] = `
|
|||||||
/>
|
/>
|
||||||
<div
|
<div
|
||||||
class="ant-tooltip-inner"
|
class="ant-tooltip-inner"
|
||||||
|
role="tooltip"
|
||||||
>
|
>
|
||||||
30
|
30
|
||||||
</div>
|
</div>
|
||||||
|
@ -4,13 +4,13 @@
|
|||||||
vertical-align: -0.125em; // for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
|
vertical-align: -0.125em; // for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
line-height: 1;
|
line-height: 0;
|
||||||
text-rendering: optimizeLegibility;
|
text-rendering: optimizeLegibility;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
display: block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
|
@ -95,7 +95,7 @@
|
|||||||
|
|
||||||
&-thead > tr,
|
&-thead > tr,
|
||||||
&-tbody > tr {
|
&-tbody > tr {
|
||||||
transition: all .3s;
|
transition: all .3s, height 0s;
|
||||||
&.@{table-prefix-cls}-row-hover,
|
&.@{table-prefix-cls}-row-hover,
|
||||||
&:hover {
|
&:hover {
|
||||||
& > td {
|
& > td {
|
||||||
|
@ -158,12 +158,14 @@ export default class Tabs extends React.Component<TabsProps, any> {
|
|||||||
</div>
|
</div>
|
||||||
) : null;
|
) : null;
|
||||||
|
|
||||||
|
const { className: dropped, ...tabBarProps } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<RcTabs
|
<RcTabs
|
||||||
{...this.props}
|
{...this.props}
|
||||||
className={cls}
|
className={cls}
|
||||||
tabBarPosition={tabPosition}
|
tabBarPosition={tabPosition}
|
||||||
renderTabBar={() => <TabBar {...this.props} tabBarExtraContent={tabBarExtraContent}/>}
|
renderTabBar={() => <TabBar {...tabBarProps} tabBarExtraContent={tabBarExtraContent}/>}
|
||||||
renderTabContent={() => <TabContent animated={tabPaneAnimated} animatedWithMargin />}
|
renderTabContent={() => <TabContent animated={tabPaneAnimated} animatedWithMargin />}
|
||||||
onChange={this.handleChange}
|
onChange={this.handleChange}
|
||||||
>
|
>
|
||||||
|
@ -26,7 +26,7 @@ The following APIs are shared by Tooltip, Popconfirm, Popover.
|
|||||||
| arrowPointAtCenter | Whether the arrow is pointed at the center of target, supported after `antd@1.11+` | boolean | `false` |
|
| arrowPointAtCenter | Whether the arrow is pointed at the center of target, supported after `antd@1.11+` | boolean | `false` |
|
||||||
| autoAdjustOverflow | Whether to adjust popup placement automatically when popup is off screen | boolean | `true` |
|
| autoAdjustOverflow | Whether to adjust popup placement automatically when popup is off screen | boolean | `true` |
|
||||||
| defaultVisible | Whether the floating tooltip card is visible by default | boolean | `false` |
|
| defaultVisible | Whether the floating tooltip card is visible by default | boolean | `false` |
|
||||||
| getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body`. Use `getTooltipContainer` if you are using `antd@<2.5.2` | Function(triggerNode) | () => document.body |
|
| getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body` | Function(triggerNode) | () => document.body |
|
||||||
| mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0 |
|
| mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0 |
|
||||||
| mouseLeaveDelay | Delay in seconds, before tooltip is hidden on mouse leave | number | 0.1 |
|
| mouseLeaveDelay | Delay in seconds, before tooltip is hidden on mouse leave | number | 0.1 |
|
||||||
| overlayClassName | Class name of the tooltip card | string | - |
|
| overlayClassName | Class name of the tooltip card | string | - |
|
||||||
|
@ -28,7 +28,7 @@ title: Tooltip
|
|||||||
| arrowPointAtCenter | 箭头是否指向目标元素中心,`antd@1.11+` 支持 | boolean | `false` |
|
| arrowPointAtCenter | 箭头是否指向目标元素中心,`antd@1.11+` 支持 | boolean | `false` |
|
||||||
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | `true` |
|
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | `true` |
|
||||||
| defaultVisible | 默认是否显隐 | boolean | false |
|
| defaultVisible | 默认是否显隐 | boolean | false |
|
||||||
| getPopupContainer | 浮层渲染父节点,默认渲染到 body 上。`2.5.2` 之前请使用 `getTooltipContainer` | Function(triggerNode) | () => document.body |
|
| getPopupContainer | 浮层渲染父节点,默认渲染到 body 上 | Function(triggerNode) | () => document.body |
|
||||||
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip,单位:秒 | number | 0 |
|
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip,单位:秒 | number | 0 |
|
||||||
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip,单位:秒 | number | 0.1 |
|
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip,单位:秒 | number | 0.1 |
|
||||||
| overlayClassName | 卡片类名 | string | 无 |
|
| overlayClassName | 卡片类名 | string | 无 |
|
||||||
|
@ -35,7 +35,7 @@ export interface TreeSelectProps extends AbstractSelectProps {
|
|||||||
multiple?: boolean;
|
multiple?: boolean;
|
||||||
maxTagCount?: number;
|
maxTagCount?: number;
|
||||||
onSelect?: (value: any) => void;
|
onSelect?: (value: any) => void;
|
||||||
onChange?: (value: any, label: any) => void;
|
onChange?: (value: any, label: any, extra: any) => void;
|
||||||
onSearch?: (value: any) => void;
|
onSearch?: (value: any) => void;
|
||||||
searchPlaceholder?: string;
|
searchPlaceholder?: string;
|
||||||
dropdownStyle?: React.CSSProperties;
|
dropdownStyle?: React.CSSProperties;
|
||||||
|
@ -136,15 +136,17 @@ export default class UploadList extends React.Component<UploadListProps, any> {
|
|||||||
[`${prefixCls}-list-item`]: true,
|
[`${prefixCls}-list-item`]: true,
|
||||||
[`${prefixCls}-list-item-${file.status}`]: true,
|
[`${prefixCls}-list-item-${file.status}`]: true,
|
||||||
});
|
});
|
||||||
|
const linkProps = typeof file.linkProps === 'string'
|
||||||
|
? JSON.parse(file.linkProps) : file.linkProps;
|
||||||
const preview = file.url ? (
|
const preview = file.url ? (
|
||||||
<a
|
<a
|
||||||
{...file.linkProps}
|
|
||||||
href={file.url}
|
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className={`${prefixCls}-list-item-name`}
|
className={`${prefixCls}-list-item-name`}
|
||||||
onClick={e => this.handlePreview(file, e)}
|
|
||||||
title={file.name}
|
title={file.name}
|
||||||
|
{...linkProps}
|
||||||
|
href={file.url}
|
||||||
|
onClick={e => this.handlePreview(file, e)}
|
||||||
>
|
>
|
||||||
{file.name}
|
{file.name}
|
||||||
</a>
|
</a>
|
||||||
|
@ -185,4 +185,43 @@ describe('Upload', () => {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should support linkProps as object', () => {
|
||||||
|
const fileList = [{
|
||||||
|
uid: '-1',
|
||||||
|
name: 'foo.png',
|
||||||
|
status: 'done',
|
||||||
|
url: 'http://www.baidu.com/xxx.png',
|
||||||
|
linkProps: {
|
||||||
|
download: 'image',
|
||||||
|
rel: 'noopener',
|
||||||
|
},
|
||||||
|
}];
|
||||||
|
const wrapper = mount(
|
||||||
|
<Upload fileList={fileList} />
|
||||||
|
);
|
||||||
|
const linkNode = wrapper.find('a.ant-upload-list-item-name');
|
||||||
|
expect(linkNode.props().download).toBe('image');
|
||||||
|
expect(linkNode.props().rel).toBe('noopener');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should support linkProps as json stringify', () => {
|
||||||
|
const linkPropsString = JSON.stringify({
|
||||||
|
download: 'image',
|
||||||
|
rel: 'noopener',
|
||||||
|
});
|
||||||
|
const fileList = [{
|
||||||
|
uid: '-1',
|
||||||
|
name: 'foo.png',
|
||||||
|
status: 'done',
|
||||||
|
url: 'http://www.baidu.com/xxx.png',
|
||||||
|
linkProps: linkPropsString,
|
||||||
|
}];
|
||||||
|
const wrapper = mount(
|
||||||
|
<Upload fileList={fileList} />
|
||||||
|
);
|
||||||
|
const linkNode = wrapper.find('a.ant-upload-list-item-name');
|
||||||
|
expect(linkNode.props().download).toBe('image');
|
||||||
|
expect(linkNode.props().rel).toBe('noopener');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
@ -66,8 +66,6 @@ When uploading state change, it returns:
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
> Before `antd@1.9.0`, this parameter will be Array Object `[file, ...]` in multiple mode, while in `antd@1.9.0+`, it will always be an Object.
|
|
||||||
|
|
||||||
2. `fileList` current list of files
|
2. `fileList` current list of files
|
||||||
3. `event` response from server, including uploading progress, supported by advanced browsers.
|
3. `event` response from server, including uploading progress, supported by advanced browsers.
|
||||||
|
|
||||||
|
@ -67,8 +67,6 @@ title: Upload
|
|||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
> `antd@1.9.0` 之前,multiple 模式下,此参数为一个对象数组 `[file, ...]`,`antd@1.9.0` 开始无论是否多选,均为一个对象。
|
|
||||||
|
|
||||||
2. `fileList` 当前的文件列表。
|
2. `fileList` 当前的文件列表。
|
||||||
3. `event` 上传中的服务端响应内容,包含了上传进度等信息,高级浏览器支持。
|
3. `event` 上传中的服务端响应内容,包含了上传进度等信息,高级浏览器支持。
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
---
|
---
|
||||||
order: 9
|
order: 10
|
||||||
title: Contributing
|
title: Contributing
|
||||||
toc: false
|
toc: false
|
||||||
---
|
---
|
||||||
@ -16,13 +16,13 @@ All work on Ant Design happens directly on [GitHub](https://github.com/ant-desig
|
|||||||
|
|
||||||
## Branch Organization
|
## Branch Organization
|
||||||
|
|
||||||
According to our [release schedule](changelog#Release-Schedule), we'll cut a `feature` branch (e.g. `feature-3.1` for 3.1 release) from `master` every month. If you send a bugfix pull request, please do it against the `master` branch, if it's a feature pull request, please do it against the `feature` branch.
|
According to our [release schedule](changelog#Release-Schedule), we maintians two branchs `master` and `feature`. If you send a bugfix pull request, please do it against the `master` branch, if it's a feature pull request, please do it against the `feature` branch.
|
||||||
|
|
||||||
## Bugs
|
## Bugs
|
||||||
|
|
||||||
We are using [GitHub Issues](https://github.com/ant-design/ant-design/issues) for bug tracing. The best way to get your bug fixed is using our [issue helper](http://new-issue.ant.design) and provide a reprduction with this [template](https://u.ant.design/codesandbox-repro).
|
We are using [GitHub Issues](https://github.com/ant-design/ant-design/issues) for bug tracing. The best way to get your bug fixed is using our [issue helper](http://new-issue.ant.design) and provide a reprduction with this [template](https://u.ant.design/codesandbox-repro).
|
||||||
|
|
||||||
Before you reporting a bug, please make sure you've searched exists issues, and read our [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ).
|
Before you reporting a bug, please make sure you've searched exists issues, and read our [FAQ](/docs/react/faq).
|
||||||
|
|
||||||
## Proposing a Change
|
## Proposing a Change
|
||||||
|
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
---
|
---
|
||||||
order: 9
|
order: 10
|
||||||
title: 贡献指南
|
title: 贡献指南
|
||||||
toc: false
|
toc: false
|
||||||
---
|
---
|
||||||
@ -16,13 +16,13 @@ toc: false
|
|||||||
|
|
||||||
## 分支管理
|
## 分支管理
|
||||||
|
|
||||||
基于我们的 [发布周期](/changelog),我们每个月都会从 `master` 分支切一个 `feature` 分支出来(比如 `features-3.1` 分支用来发布 3.1 版本)。 如果你要修一个 bug,那么请发 pull request 到 `master`;如果你要提一个增加新功能的 pull request,那么请基于 `feature` 分支来做。
|
基于我们的 [发布周期](/changelog),我们长期维护两个分支 `master` 和 `feature`。如果你要修一个 bug,那么请发 pull request 到 `master`;如果你要提一个增加新功能的 pull request,那么请基于 `feature` 分支来做。
|
||||||
|
|
||||||
## Bugs
|
## Bugs
|
||||||
|
|
||||||
我们使用 [GitHub Issues](https://github.com/ant-design/ant-design/issues) 来做 bug 追踪。 如果你想要你发现的 bug 被快速解决,最好的办法就是通过我们提供的 [issue 小助手](http://new-issue.ant.design) 来提 issue。并且能使用这个 [模板](https://u.ant.design/codesandbox-repro) 来提供重现。
|
我们使用 [GitHub Issues](https://github.com/ant-design/ant-design/issues) 来做 bug 追踪。 如果你想要你发现的 bug 被快速解决,最好的办法就是通过我们提供的 [issue 小助手](http://new-issue.ant.design) 来提 issue。并且能使用这个 [模板](https://u.ant.design/codesandbox-repro) 来提供重现。
|
||||||
|
|
||||||
在你报告一个 bug 之前,请先确保已经搜索过已有的 issue 和阅读了我们的 [常见问题](https://github.com/ant-design/ant-design/wiki/FAQ)。
|
在你报告一个 bug 之前,请先确保已经搜索过已有的 issue 和阅读了我们的 [常见问题](/docs/react/faq)。
|
||||||
|
|
||||||
## 新增功能
|
## 新增功能
|
||||||
|
|
||||||
|
160
docs/react/faq.en-US.md
Normal file
160
docs/react/faq.en-US.md
Normal file
@ -0,0 +1,160 @@
|
|||||||
|
---
|
||||||
|
order: 9
|
||||||
|
title: FAQ
|
||||||
|
---
|
||||||
|
|
||||||
|
Search in the questions about React first: https://reactfaq.site .
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Are you going to provide Vue(etc...) edition?
|
||||||
|
|
||||||
|
No, but [the LICENSE of ant-design](https://github.com/ant-design/ant-design/blob/master/LICENSE) is MIT. So, you can try to implement it with ant-design's [style](https://github.com/ant-design/ant-design/tree/master/style), like: [ant-design-vue](https://github.com/vueComponent/ant-design-vue) [vue-beauty)](https://github.com/FE-Driver/vue-beauty) or [antue](https://github.com/zzuu666/antue).
|
||||||
|
|
||||||
|
### Are you going to provide Sass/Stylus(etc...) style file?
|
||||||
|
|
||||||
|
No, actually, you can convert Less to Sass/Stylus(etc...) with tools (which you can Google).
|
||||||
|
|
||||||
|
### `Select Dropdown DatePicker TimePicker Popover Popconfirm` will disappear when I click another popup component inside it, How to resolve it?
|
||||||
|
|
||||||
|
Use `<Select getPopupContainer={trigger => trigger.parentNode}>` to render component inside Popover. (Or other getXxxxContainer props)
|
||||||
|
|
||||||
|
https://ant.design/components/select/#Select-props
|
||||||
|
|
||||||
|
related issue: [#3487](https://github.com/ant-design/ant-design/issues/3487) [#3438](https://github.com/ant-design/ant-design/issues/3438)
|
||||||
|
|
||||||
|
### `Select Dropdown DatePicker TimePicker Popover Popconfirm` will scroll with page?
|
||||||
|
|
||||||
|
Use `<Select getPopupContainer={trigger => trigger.parentNode}>` to render component inside the scroll area. (Or other getXxxxContainer props).
|
||||||
|
|
||||||
|
https://ant.design/components/select/#Select-props
|
||||||
|
|
||||||
|
related issue: [#3487](https://github.com/ant-design/ant-design/issues/3487) [#3438](https://github.com/ant-design/ant-design/issues/3438)
|
||||||
|
|
||||||
|
### How to modify default theme of Ant Design?
|
||||||
|
|
||||||
|
See: https://ant.design/docs/react/customize-theme .
|
||||||
|
|
||||||
|
### Would you supply other themes?
|
||||||
|
|
||||||
|
No, we follow Ant Design specification. https://github.com/ant-design/ant-design/issues/1241
|
||||||
|
|
||||||
|
### How to modify `Menu`/`Button`(etc...)'s style?
|
||||||
|
|
||||||
|
You can override its style. But we don't recommend to do so. antd is not only a set of React components but also a design specification.
|
||||||
|
|
||||||
|
### I just want to use `Menu`/`Button`(etc...), but it seems that I have to import the whole antd and its style.
|
||||||
|
|
||||||
|
Try [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), or import what you need in this way:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import Menu from 'antd/lib/menu';
|
||||||
|
import 'antd/lib/button/style/css';
|
||||||
|
```
|
||||||
|
|
||||||
|
or (ES6 way with tree shaking):
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { Menu, Breadcrumb, Icon } from 'antd';
|
||||||
|
```
|
||||||
|
|
||||||
|
### How to optimize momentjs bundle size with webpack?
|
||||||
|
|
||||||
|
See: https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
|
||||||
|
|
||||||
|
### It doesn't work when I change `defaultValue` dynamically.
|
||||||
|
|
||||||
|
The `defaultXxxx` (like `defaultValue`) of `Input`/`Select`(etc...) only works in first render. It is a specification of React, please read [React's documentation](https://facebook.github.io/react/docs/forms.html#controlled-components).
|
||||||
|
|
||||||
|
### I set the `value` of `Input`/`Select`(etc...), and then, it cannot be changed by user's action.
|
||||||
|
|
||||||
|
Try `defaultValue` or `onChange` to change `value`, and please read [React's documentation](https://facebook.github.io/react/docs/forms.html#controlled-components).
|
||||||
|
|
||||||
|
### antd override my global styles!
|
||||||
|
|
||||||
|
Yes, antd is designed to develop a complete background application, we override some global styles for styling convenience and it can't be removed now. More info trace https://github.com/ant-design/ant-design/issues/4331 .
|
||||||
|
|
||||||
|
Or follow instruction in [How to avoid modifying global styles?](docs/react/customize-theme#How-to-avoid-modifying-global-styles-?)
|
||||||
|
|
||||||
|
### I cannot install `antd` and `antd`'s dependencies(etc...). FYI, I live in China mainland.
|
||||||
|
|
||||||
|
Long live the Girl Friend Wall! And try [cnpm](http://npm.taobao.org/).
|
||||||
|
|
||||||
|
### I set `dependencies.antd` as git repository in package.json, but it doesn't work.
|
||||||
|
|
||||||
|
Yes, please install `antd` with npm.
|
||||||
|
|
||||||
|
### `message` and `notification` is lower case, but other components are capitalized. Typo?
|
||||||
|
|
||||||
|
No, as `message` is just a function, not a React Component.
|
||||||
|
|
||||||
|
### `antd` doesn't work well in mobile.
|
||||||
|
|
||||||
|
Please check [And Design Mobile](http://mobile.ant.design) for details. `antd` has not been optimized to do so. You may try [react-component](https://github.com/react-component/), those repositories which start with 'm-' 'rn-' are designed for mobile.
|
||||||
|
|
||||||
|
### Does `antd` supply standalone files like 'react' do?
|
||||||
|
|
||||||
|
Yep, you can [import `antd` with script tag](https://ant.design/docs/react/install?locale=en-US#Import-in-Browser). But we recommend use `npm` to import `antd`, it is simple and ease to maintain.
|
||||||
|
|
||||||
|
### I can't visit `icon` in my network environment.
|
||||||
|
|
||||||
|
You should deploy the iconfont files to your network by following this [example](https://github.com/ant-design/antd-init/tree/7c1a33cadb98f2fd8688fe527dd7f98215b9bced/examples/local-iconfont). [#1070](https://github.com/ant-design/ant-design/issues/1070)
|
||||||
|
|
||||||
|
After 3.9.x [we are using svg icon](/components/icon#svg-icons) so you don't need to deploy iconfont locally any more!
|
||||||
|
|
||||||
|
### How to extend antd's components?
|
||||||
|
|
||||||
|
If you need some features which should not be included in antd, try to extend antd's component with [HOC](https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775). [more](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.eeu8q01s1)
|
||||||
|
|
||||||
|
### How to spell Ant Design correctly?
|
||||||
|
|
||||||
|
- ✅ **Ant Design**: Capitalized with space, for the design language
|
||||||
|
- ✅ **antd**: all lowercase, for the React UI library
|
||||||
|
|
||||||
|
Here are some typical wrong examples:
|
||||||
|
|
||||||
|
- ❌ AntD
|
||||||
|
- ❌ antD
|
||||||
|
- ❌ Antd
|
||||||
|
- ❌ ant design
|
||||||
|
- ❌ AntDesign
|
||||||
|
- ❌ antdesign
|
||||||
|
- ❌ Antdesign
|
||||||
|
|
||||||
|
### Do you guys have any channel for donation? like PayPal or Alipay.
|
||||||
|
|
||||||
|
No yet.
|
||||||
|
|
||||||
|
### Why not?
|
||||||
|
|
||||||
|
Alibaba will pay us.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Errors & Warnings
|
||||||
|
|
||||||
|
Here are some errors & warnings that you may meet while using antd, but most of them are not bugs of antd.
|
||||||
|
|
||||||
|
### Adjacent JSX elements must be wrapped in an enclosing tag
|
||||||
|
|
||||||
|
An [answer from StackOverflow](http://stackoverflow.com/questions/25034994/how-to-correctly-wrap-few-td-tags-for-jsxtransformer), and please read [React's documentation](http://facebook.github.io/react/docs/displaying-data.html#components-are-just-like-functions).
|
||||||
|
|
||||||
|
### React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components)
|
||||||
|
|
||||||
|
Please make sure that you import `antd`'s components correctly. Read the corresponding documentation of the `antd`'s version which you use. And pay attention to typo.
|
||||||
|
|
||||||
|
### rm is not recognized as an internal or external command
|
||||||
|
|
||||||
|
Please read this [issue](https://github.com/ant-design/ant-design/issues/650#issuecomment-164966511), or try Linux/Unix.
|
||||||
|
|
||||||
|
### Failed propType: Invalid prop `AAA` of type `BBB` supplied to `CCC`, expected `DDD`. Check the render method of `EEE`.
|
||||||
|
|
||||||
|
Please read the corresponding documentation of the `antd`'s version which you use, and make sure that you pass value with correct type to `antd`'s components,
|
||||||
|
|
||||||
|
### Unknown option: xxx/package.json.presets
|
||||||
|
|
||||||
|
An [answer from Stack Overflow](http://stackoverflow.com/questions/33685365/unknown-option-babelrc-presets).
|
||||||
|
|
||||||
|
### Invariant Violation: findComponentRoot(...): Unable to find element.
|
||||||
|
|
||||||
|
You may import React twice. Set React & ReactDOM as external, if you are using webpack, See: [#525](https://github.com/ant-design/ant-design/issues/525). If you are using others(browserify, etc...), please read its documentation and find options which can set React & ReactDOM as external.
|
160
docs/react/faq.zh-CN.md
Normal file
160
docs/react/faq.zh-CN.md
Normal file
@ -0,0 +1,160 @@
|
|||||||
|
---
|
||||||
|
order: 9
|
||||||
|
title: FAQ
|
||||||
|
---
|
||||||
|
|
||||||
|
Search in the questions about React first: https://reactfaq.site .
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Are you going to provide Vue(etc...) edition?
|
||||||
|
|
||||||
|
No, but [the LICENSE of ant-design](https://github.com/ant-design/ant-design/blob/master/LICENSE) is MIT. So, you can try to implement it with ant-design's [style](https://github.com/ant-design/ant-design/tree/master/style), like: [ant-design-vue](https://github.com/vueComponent/ant-design-vue) [vue-beauty)](https://github.com/FE-Driver/vue-beauty) or [antue](https://github.com/zzuu666/antue).
|
||||||
|
|
||||||
|
### Are you going to provide Sass/Stylus(etc...) style file?
|
||||||
|
|
||||||
|
No, actually, you can convert Less to Sass/Stylus(etc...) with tools (which you can Google).
|
||||||
|
|
||||||
|
### `Select Dropdown DatePicker TimePicker Popover Popconfirm` will disappear when I click another popup component inside it, How to resolve it?
|
||||||
|
|
||||||
|
Use `<Select getPopupContainer={trigger => trigger.parentNode}>` to render component inside Popover. (Or other getXxxxContainer props)
|
||||||
|
|
||||||
|
https://ant.design/components/select/#Select-props
|
||||||
|
|
||||||
|
related issue: [#3487](https://github.com/ant-design/ant-design/issues/3487) [#3438](https://github.com/ant-design/ant-design/issues/3438)
|
||||||
|
|
||||||
|
### `Select Dropdown DatePicker TimePicker Popover Popconfirm` will scroll with page?
|
||||||
|
|
||||||
|
Use `<Select getPopupContainer={trigger => trigger.parentNode}>` to render component inside the scroll area. (Or other getXxxxContainer props).
|
||||||
|
|
||||||
|
https://ant.design/components/select/#Select-props
|
||||||
|
|
||||||
|
related issue: [#3487](https://github.com/ant-design/ant-design/issues/3487) [#3438](https://github.com/ant-design/ant-design/issues/3438)
|
||||||
|
|
||||||
|
### How to modify default theme of Ant Design?
|
||||||
|
|
||||||
|
See: https://ant.design/docs/react/customize-theme .
|
||||||
|
|
||||||
|
### Would you supply other themes?
|
||||||
|
|
||||||
|
No, we follow Ant Design specification. https://github.com/ant-design/ant-design/issues/1241
|
||||||
|
|
||||||
|
### How to modify `Menu`/`Button`(etc...)'s style?
|
||||||
|
|
||||||
|
You can override its style. But we don't recommend to do so. antd is not only a set of React components but also a design specification.
|
||||||
|
|
||||||
|
### I just want to use `Menu`/`Button`(etc...), but it seems that I have to import the whole antd and its style.
|
||||||
|
|
||||||
|
Try [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), or import what you need in this way:
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import Menu from 'antd/lib/menu';
|
||||||
|
import 'antd/lib/button/style/css';
|
||||||
|
```
|
||||||
|
|
||||||
|
or (ES6 way with tree shaking):
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
import { Menu, Breadcrumb, Icon } from 'antd';
|
||||||
|
```
|
||||||
|
|
||||||
|
### How to optimize momentjs bundle size with webpack?
|
||||||
|
|
||||||
|
See: https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
|
||||||
|
|
||||||
|
### It doesn't work when I change `defaultValue` dynamically.
|
||||||
|
|
||||||
|
The `defaultXxxx` (like `defaultValue`) of `Input`/`Select`(etc...) only works in first render. It is a specification of React, please read [React's documentation](https://facebook.github.io/react/docs/forms.html#controlled-components).
|
||||||
|
|
||||||
|
### I set the `value` of `Input`/`Select`(etc...), and then, it cannot be changed by user's action.
|
||||||
|
|
||||||
|
Try `defaultValue` or `onChange` to change `value`, and please read [React's documentation](https://facebook.github.io/react/docs/forms.html#controlled-components).
|
||||||
|
|
||||||
|
### antd override my global styles!
|
||||||
|
|
||||||
|
Yes, antd is designed to develop a complete background application, we override some global styles for styling convenience and it can't be removed now. More info trace https://github.com/ant-design/ant-design/issues/4331 .
|
||||||
|
|
||||||
|
Or follow instruction in [How to avoid modifying global styles?](docs/react/customize-theme#How-to-avoid-modifying-global-styles-?)
|
||||||
|
|
||||||
|
### I cannot install `antd` and `antd`'s dependencies(etc...). FYI, I live in China mainland.
|
||||||
|
|
||||||
|
Long live the Girl Friend Wall! And try [cnpm](http://npm.taobao.org/).
|
||||||
|
|
||||||
|
### I set `dependencies.antd` as git repository in package.json, but it doesn't work.
|
||||||
|
|
||||||
|
Yes, please install `antd` with npm.
|
||||||
|
|
||||||
|
### `message` and `notification` is lower case, but other components are capitalized. Typo?
|
||||||
|
|
||||||
|
No, as `message` is just a function, not a React Component.
|
||||||
|
|
||||||
|
### `antd` doesn't work well in mobile.
|
||||||
|
|
||||||
|
Please check [And Design Mobile](http://mobile.ant.design) for details. `antd` has not been optimized to do so. You may try [react-component](https://github.com/react-component/), those repositories which start with 'm-' 'rn-' are designed for mobile.
|
||||||
|
|
||||||
|
### Does `antd` supply standalone files like 'react' do?
|
||||||
|
|
||||||
|
Yep, you can [import `antd` with script tag](https://ant.design/docs/react/install?locale=en-US#Import-in-Browser). But we recommend use `npm` to import `antd`, it is simple and ease to maintain.
|
||||||
|
|
||||||
|
### I can't visit `icon` in my network environment.
|
||||||
|
|
||||||
|
You should deploy the iconfont files to your network by following this [example](https://github.com/ant-design/antd-init/tree/7c1a33cadb98f2fd8688fe527dd7f98215b9bced/examples/local-iconfont). [#1070](https://github.com/ant-design/ant-design/issues/1070)
|
||||||
|
|
||||||
|
After 3.9.x [we are using svg icon](/components/icon#svg-icons) so you don't need to deploy iconfont locally any more!
|
||||||
|
|
||||||
|
### How to extend antd's components?
|
||||||
|
|
||||||
|
If you need some features which should not be included in antd, try to extend antd's component with [HOC](https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775). [more](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.eeu8q01s1)
|
||||||
|
|
||||||
|
### How to spell Ant Design correctly?
|
||||||
|
|
||||||
|
- ✅ **Ant Design**: Capitalized with space, for the design language
|
||||||
|
- ✅ **antd**: all lowercase, for the React UI library
|
||||||
|
|
||||||
|
Here are some typical wrong examples:
|
||||||
|
|
||||||
|
- ❌ AntD
|
||||||
|
- ❌ antD
|
||||||
|
- ❌ Antd
|
||||||
|
- ❌ ant design
|
||||||
|
- ❌ AntDesign
|
||||||
|
- ❌ antdesign
|
||||||
|
- ❌ Antdesign
|
||||||
|
|
||||||
|
### Do you guys have any channel for donation? like PayPal or Alipay.
|
||||||
|
|
||||||
|
No yet.
|
||||||
|
|
||||||
|
### Why not?
|
||||||
|
|
||||||
|
Alibaba will pay us.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Errors & Warnings
|
||||||
|
|
||||||
|
Here are some errors & warnings that you may meet while using antd, but most of them are not bugs of antd.
|
||||||
|
|
||||||
|
### Adjacent JSX elements must be wrapped in an enclosing tag
|
||||||
|
|
||||||
|
An [answer from StackOverflow](http://stackoverflow.com/questions/25034994/how-to-correctly-wrap-few-td-tags-for-jsxtransformer), and please read [React's documentation](http://facebook.github.io/react/docs/displaying-data.html#components-are-just-like-functions).
|
||||||
|
|
||||||
|
### React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components)
|
||||||
|
|
||||||
|
Please make sure that you import `antd`'s components correctly. Read the corresponding documentation of the `antd`'s version which you use. And pay attention to typo.
|
||||||
|
|
||||||
|
### rm is not recognized as an internal or external command
|
||||||
|
|
||||||
|
Please read this [issue](https://github.com/ant-design/ant-design/issues/650#issuecomment-164966511), or try Linux/Unix.
|
||||||
|
|
||||||
|
### Failed propType: Invalid prop `AAA` of type `BBB` supplied to `CCC`, expected `DDD`. Check the render method of `EEE`.
|
||||||
|
|
||||||
|
Please read the corresponding documentation of the `antd`'s version which you use, and make sure that you pass value with correct type to `antd`'s components,
|
||||||
|
|
||||||
|
### Unknown option: xxx/package.json.presets
|
||||||
|
|
||||||
|
An [answer from Stack Overflow](http://stackoverflow.com/questions/33685365/unknown-option-babelrc-presets).
|
||||||
|
|
||||||
|
### Invariant Violation: findComponentRoot(...): Unable to find element.
|
||||||
|
|
||||||
|
You may import React twice. Set React & ReactDOM as external, if you are using webpack, See: [#525](https://github.com/ant-design/ant-design/issues/525). If you are using others(browserify, etc...), please read its documentation and find options which can set React & ReactDOM as external.
|
@ -129,7 +129,7 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
|
|||||||
- [Motion](https://motion.ant.design)
|
- [Motion](https://motion.ant.design)
|
||||||
- [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
|
- [Developer Instruction](https://github.com/ant-design/ant-design/wiki/Development)
|
||||||
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
- [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
||||||
- [FAQ](https://github.com/ant-design/ant-design/wiki/FAQ)
|
- [FAQ](/docs/react/faq)
|
||||||
- [CodeSandbox template](https://u.ant.design/codesandbox-repro) for bug reports
|
- [CodeSandbox template](https://u.ant.design/codesandbox-repro) for bug reports
|
||||||
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
|
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
|
||||||
- [Customize Theme](/docs/react/customize-theme)
|
- [Customize Theme](/docs/react/customize-theme)
|
||||||
|
@ -128,7 +128,7 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
|
|||||||
- [设计规范速查手册](https://github.com/ant-design/ant-design/wiki/Ant-Design-%E8%AE%BE%E8%AE%A1%E5%9F%BA%E7%A1%80%E7%AE%80%E7%89%88)
|
- [设计规范速查手册](https://github.com/ant-design/ant-design/wiki/Ant-Design-%E8%AE%BE%E8%AE%A1%E5%9F%BA%E7%A1%80%E7%AE%80%E7%89%88)
|
||||||
- [开发者说明](https://github.com/ant-design/ant-design/wiki/Development)
|
- [开发者说明](https://github.com/ant-design/ant-design/wiki/Development)
|
||||||
- [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
- [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
|
||||||
- [常见问题](https://github.com/ant-design/ant-design/wiki/FAQ)
|
- [常见问题](/docs/react/faq)
|
||||||
- [CodeSandbox 模板](https://u.ant.design/codesandbox-repro) for bug reports
|
- [CodeSandbox 模板](https://u.ant.design/codesandbox-repro) for bug reports
|
||||||
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
|
- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
|
||||||
- [定制主题](/docs/react/customize-theme)
|
- [定制主题](/docs/react/customize-theme)
|
||||||
|
@ -206,6 +206,7 @@
|
|||||||
"site": "cross-env NODE_ENV=production bisheng build --ssr -c ./site/bisheng.config.js && node ./scripts/generateColorLess.js",
|
"site": "cross-env NODE_ENV=production bisheng build --ssr -c ./site/bisheng.config.js && node ./scripts/generateColorLess.js",
|
||||||
"predeploy": "antd-tools run clean && npm run site && cp netlify.toml _site && cp -r .circleci _site",
|
"predeploy": "antd-tools run clean && npm run site && cp netlify.toml _site && cp -r .circleci _site",
|
||||||
"deploy": "bisheng gh-pages --push-only",
|
"deploy": "bisheng gh-pages --push-only",
|
||||||
|
"deploy:china-mirror": "git checkout gh-pages && git pull origin gh-pages && git push git@gitee.com:ant-design/ant-design.git gh-pages",
|
||||||
"pub": "antd-tools run pub",
|
"pub": "antd-tools run pub",
|
||||||
"prepublish": "antd-tools run guard",
|
"prepublish": "antd-tools run guard",
|
||||||
"pre-publish": "npm run test-all && node ./scripts/prepub",
|
"pre-publish": "npm run test-all && node ./scripts/prepub",
|
||||||
|
@ -193,10 +193,6 @@
|
|||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
||||||
svg {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: @site-text-color-secondary;
|
color: @site-text-color-secondary;
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
|
@ -59,7 +59,7 @@
|
|||||||
height: 1px;
|
height: 1px;
|
||||||
border: 0;
|
border: 0;
|
||||||
background: @site-border-color-split;
|
background: @site-border-color-split;
|
||||||
margin: 72px 0;
|
margin: 56px 0;
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -205,7 +205,7 @@ class Footer extends React.Component {
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<a target="_blank" rel="noopener noreferrer" href="https://github.com/ant-design/ant-design/wiki/FAQ">
|
<a target="_blank" rel="noopener noreferrer" href="/docs/react/faq">
|
||||||
<FormattedMessage id="app.footer.faq" />
|
<FormattedMessage id="app.footer.faq" />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user