mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 20:19:44 +08:00
Merge from master
This commit is contained in:
commit
f2bb4afd4d
@ -3,7 +3,7 @@ const eslintrc = {
|
||||
env: {
|
||||
browser: true,
|
||||
node: true,
|
||||
mocha: true,
|
||||
jasmine: true,
|
||||
jest: true,
|
||||
es6: true,
|
||||
},
|
||||
|
@ -1,14 +1,32 @@
|
||||
---
|
||||
order: 9
|
||||
order: 6
|
||||
title: Change Log
|
||||
toc: false
|
||||
timeline: true
|
||||
---
|
||||
|
||||
If you want to read change logs before `2.0.0`, please visit [GitHub](https://github.com/ant-design/ant-design/releases?after=2.0.0).
|
||||
|
||||
`antd` strictly follows [Semantic Versioning 2.0.0](http://semver.org/).
|
||||
|
||||
If you want to read change logs before `2.0.0`, please visit [GitHub](https://github.com/ant-design/ant-design/blob/1.x-stable/CHANGELOG.md).
|
||||
|
||||
---
|
||||
|
||||
## 2.6.4
|
||||
|
||||
`2017-01-20`
|
||||
|
||||
* Improve RangePicker when selecting a preset date.[#4561](https://github.com/ant-design/ant-design/issues/4561)
|
||||
* Fix DatePicker select time scroll issue.[#4412](https://github.com/ant-design/ant-design/issues/4412)
|
||||
* Fix issue resulting in vertical Menu can't be controlled.[#3783](https://github.com/ant-design/ant-design/issues/3783)
|
||||
* Fix Cascader's style when it's disabled.[#4648](https://github.com/ant-design/ant-design/issues/4648)
|
||||
* Table
|
||||
* Improve Table fixed header's scrollbar style.[#4637](https://github.com/ant-design/ant-design/issues/4637)
|
||||
* Fix issue resulting in Table's header flashes when `loading` is true in Safari.[#4622](https://github.com/ant-design/ant-design/issues/4622)
|
||||
* Fix multiple border issues. [#4647](https://github.com/ant-design/ant-design/issues/4647)、[#4635](https://github.com/ant-design/ant-design/issues/4635)
|
||||
* Fix `showHeader`'s default value.[#4658](https://github.com/ant-design/ant-design/issues/4658)
|
||||
* Fix missing `TableColumnConfig` type.[#4660](https://github.com/ant-design/ant-design/issues/4660)
|
||||
|
||||
## 2.6.3
|
||||
|
||||
`2017-01-15`
|
||||
|
@ -1,14 +1,31 @@
|
||||
---
|
||||
order: 9
|
||||
order: 6
|
||||
title: 更新日志
|
||||
toc: false
|
||||
timeline: true
|
||||
---
|
||||
|
||||
如果需要查看 `2.0.0` 之前的更新日志,请移步 [GitHub](https://github.com/ant-design/ant-design/releases?after=2.0.0)。
|
||||
`antd` 严格遵循 [Semantic Versioning 2.0.0](http://semver.org/lang/zh-CN/) 语义化版本规范。
|
||||
|
||||
如果需要查看 `2.0.0` 之前的更新日志,请移步 [GitHub](https://github.com/ant-design/ant-design/blob/1.x-stable/CHANGELOG.md)。
|
||||
|
||||
---
|
||||
|
||||
## 2.6.4
|
||||
|
||||
`2017-01-20`
|
||||
|
||||
* 优化 RangePicker 选择预设时间时的界面显示。[#4561](https://github.com/ant-design/ant-design/issues/4561)
|
||||
* 修复 DatePicker 选择时间界面的滚动问题。[#4412](https://github.com/ant-design/ant-design/issues/4412)
|
||||
* 修复 Menu 在 `vertical` 的受控模式下,子菜单不会弹出的问题。[#3783](https://github.com/ant-design/ant-design/issues/3783)
|
||||
* 修复 Cascader 禁用时的值显示样式问题。[#4648](https://github.com/ant-design/ant-design/issues/4648)
|
||||
* Table
|
||||
* 优化固定表头的滚动条显示。[#4637](https://github.com/ant-design/ant-design/issues/4637)
|
||||
* 修复在 Safari 下显示 loading 效果时表头会闪烁的问题。[#4622](https://github.com/ant-design/ant-design/issues/4622)
|
||||
* 修复多处边框问题。[#4647](https://github.com/ant-design/ant-design/issues/4647)、[#4635](https://github.com/ant-design/ant-design/issues/4635)
|
||||
* 修复 showHeader 的默认值不为 `false` 的问题。[#4658](https://github.com/ant-design/ant-design/issues/4658)
|
||||
* 修复找不到 `TableColumnConfig` 的类型定义的问题。[#4660](https://github.com/ant-design/ant-design/issues/4660)
|
||||
|
||||
## 2.6.3
|
||||
|
||||
`2017-01-15`
|
||||
|
@ -21,8 +21,8 @@
|
||||
|
||||
## 特性
|
||||
|
||||
- 提炼和服务企业级中后台产品的交互语言和视觉风格。
|
||||
- [React Component](http://react-component.github.io/badgeboard/) 基础上精心封装的高质量 UI 组件。
|
||||
- 提炼自企业级中后台产品的交互语言和视觉风格。
|
||||
- 开箱即用的高质量 React 组件。
|
||||
- 使用 TypeScript 构建,提供完整的类型定义文件。
|
||||
- 基于 npm + webpack + [dva](https://github.com/dvajs/dva) 的企业级开发框架。
|
||||
|
||||
|
@ -21,8 +21,8 @@ An enterprise-class UI design language and React-based implementation.
|
||||
|
||||
## Features
|
||||
|
||||
- An enterprise-class design language and high quality UI.
|
||||
- Graceful UI components out of the box, based on [React Component](http://react-component.github.io/badgeboard/).
|
||||
- An enterprise-class UI design language for web applications.
|
||||
- A set of high-quality React components out of the box.
|
||||
- Written in TypeScript with complete define types.
|
||||
- A npm + webpack + [dva](https://github.com/dvajs/dva) front-end development workflow.
|
||||
|
||||
|
@ -1,3 +1,14 @@
|
||||
function requestAnimationFramePolyfill() {
|
||||
let lastTime = 0;
|
||||
return function(callback) {
|
||||
const currTime = new Date().getTime();
|
||||
const timeToCall = Math.max(0, 16 - (currTime - lastTime));
|
||||
const id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall);
|
||||
lastTime = currTime + timeToCall;
|
||||
return id;
|
||||
};
|
||||
}
|
||||
|
||||
export default function getRequestAnimationFrame() {
|
||||
if (typeof window === 'undefined') {
|
||||
return () => {};
|
||||
@ -8,5 +19,5 @@ export default function getRequestAnimationFrame() {
|
||||
const prefix = ['moz', 'ms', 'webkit'].filter(key => `${key}RequestAnimationFrame` in window)[0];
|
||||
return prefix
|
||||
? window[`${prefix}RequestAnimationFrame`]
|
||||
: callback => setTimeout(callback, 1000 / 60);
|
||||
: requestAnimationFramePolyfill();
|
||||
}
|
||||
|
42
components/_util/throttleByAnimationFrame.tsx
Normal file
42
components/_util/throttleByAnimationFrame.tsx
Normal file
@ -0,0 +1,42 @@
|
||||
import getRequestAnimationFrame from '../_util/getRequestAnimationFrame';
|
||||
|
||||
const reqAnimFrame = getRequestAnimationFrame();
|
||||
|
||||
export default function throttleByAnimationFrame(fn, threshhold = 250) {
|
||||
let last;
|
||||
return function() {
|
||||
const self = this;
|
||||
const args = arguments;
|
||||
reqAnimFrame(timestamp => {
|
||||
if (!last || timestamp - last > threshhold) {
|
||||
last = timestamp;
|
||||
fn.apply(self, args);
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
export function throttleByAnimationFrameDecorator(threshhold = 250) {
|
||||
return function(target, key, descriptor) {
|
||||
let fn = descriptor.value;
|
||||
let definingProperty = false;
|
||||
return {
|
||||
configurable: true,
|
||||
get() {
|
||||
if (definingProperty || this === target.prototype || this.hasOwnProperty(key)) {
|
||||
return fn;
|
||||
}
|
||||
|
||||
let boundFn = throttleByAnimationFrame(fn.bind(this), threshhold);
|
||||
definingProperty = true;
|
||||
Object.defineProperty(this, key, {
|
||||
value: boundFn,
|
||||
configurable: true,
|
||||
writable: true,
|
||||
});
|
||||
definingProperty = false;
|
||||
return boundFn;
|
||||
},
|
||||
};
|
||||
};
|
||||
}
|
@ -16,8 +16,8 @@ Please note that Affix should not cover other content on the page, especially wh
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|--------------|-----------------------|----------|--------------|
|
||||
| offsetTop | Pixels to offset from top when calculating position of scroll | Number | 0 |
|
||||
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | Number | - |
|
||||
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |
|
||||
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
|
||||
| onChange | Callback when affix state is changed | Function(affixed) | - |
|
||||
|
||||
**Note:** Children of `Affix` can not be `position: absolute`, but you can set `Affix` as `position: absolute`:
|
||||
|
@ -5,6 +5,7 @@ import classNames from 'classnames';
|
||||
import shallowequal from 'shallowequal';
|
||||
import omit from 'omit.js';
|
||||
import getScroll from '../_util/getScroll';
|
||||
import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame';
|
||||
|
||||
function getTargetRect(target): ClientRect {
|
||||
return target !== window ?
|
||||
@ -96,18 +97,16 @@ export default class Affix extends React.Component<AffixProps, any> {
|
||||
});
|
||||
}
|
||||
|
||||
setPlaceholderStyle(e, placeholderStyle) {
|
||||
setPlaceholderStyle(placeholderStyle) {
|
||||
const originalPlaceholderStyle = this.state.placeholderStyle;
|
||||
if (e.type === 'resize') {
|
||||
return;
|
||||
}
|
||||
if (shallowequal(placeholderStyle, originalPlaceholderStyle)) {
|
||||
return;
|
||||
}
|
||||
this.setState({ placeholderStyle });
|
||||
}
|
||||
|
||||
updatePosition = (e) => {
|
||||
@throttleByAnimationFrameDecorator(250)
|
||||
updatePosition(e) {
|
||||
let { offsetTop, offsetBottom, offset, target = getDefaultTarget } = this.props;
|
||||
const targetNode = target();
|
||||
|
||||
@ -145,7 +144,7 @@ export default class Affix extends React.Component<AffixProps, any> {
|
||||
left: targetRect.left + elemOffset.left,
|
||||
width: affixNode.offsetWidth,
|
||||
});
|
||||
this.setPlaceholderStyle(e, {
|
||||
this.setPlaceholderStyle({
|
||||
width: affixNode.offsetWidth,
|
||||
height: affixNode.offsetHeight,
|
||||
});
|
||||
@ -161,13 +160,18 @@ export default class Affix extends React.Component<AffixProps, any> {
|
||||
left: targetRect.left + elemOffset.left,
|
||||
width: affixNode.offsetWidth,
|
||||
});
|
||||
this.setPlaceholderStyle(e, {
|
||||
this.setPlaceholderStyle({
|
||||
width: affixNode.offsetWidth,
|
||||
height: affixNode.offsetHeight,
|
||||
});
|
||||
} else {
|
||||
this.setAffixStyle(e, null);
|
||||
this.setPlaceholderStyle(e, null);
|
||||
const { affixStyle } = this.state;
|
||||
if (e.type === 'resize' && affixStyle && affixStyle.position === 'fixed' && affixNode.offsetWidth) {
|
||||
this.setAffixStyle(e, {...affixStyle, width: affixNode.offsetWidth });
|
||||
} else {
|
||||
this.setAffixStyle(e, null);
|
||||
}
|
||||
this.setPlaceholderStyle(null);
|
||||
}
|
||||
}
|
||||
|
||||
@ -217,9 +221,9 @@ export default class Affix extends React.Component<AffixProps, any> {
|
||||
});
|
||||
|
||||
const props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target']);
|
||||
|
||||
const placeholderStyle = { ...this.state.placeholderStyle, ...this.props.style };
|
||||
return (
|
||||
<div {...props} style={this.state.placeholderStyle}>
|
||||
<div {...props} style={placeholderStyle}>
|
||||
<div className={className} ref="fixedNode" style={this.state.affixStyle}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
|
@ -17,8 +17,8 @@ title: Affix
|
||||
|
||||
| 成员 | 说明 | 类型 | 默认值 |
|
||||
|-------------|----------------|--------------------|--------------|
|
||||
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | |
|
||||
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | Number | |
|
||||
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | |
|
||||
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | |
|
||||
| target | 设置 `Affix` 需要监听其滚动事件的元素,值为一个返回对应 DOM 元素的函数 | Function | () => window |
|
||||
| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 |
|
||||
|
||||
|
@ -15,11 +15,11 @@ Alert component for feedback.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|----------- |--------------------------------------------------------- | ---------- |-------|
|
||||
| type | Type of Alert styles, options:`success`, `info`, `warning`, `error` | String | `info` |
|
||||
| closable | Whether Alert can be closed | Boolean | - |
|
||||
| closeText | Close text to show | React.Node | - |
|
||||
| message | Content of Alert | React.Node | - |
|
||||
| description | Additional content of Alert | React.Node | - |
|
||||
| type | Type of Alert styles, options:`success`, `info`, `warning`, `error` | string | `info` |
|
||||
| closable | Whether Alert can be closed | boolean | - |
|
||||
| closeText | Close text to show | string\|ReactNode | - |
|
||||
| message | Content of Alert | string\|ReactNode | - |
|
||||
| description | Additional content of Alert | string\|ReactNode | - |
|
||||
| onClose | Callback when close Alert | Function | - |
|
||||
| showIcon | Whether to show icon | Boolean | false |
|
||||
| banner | Whether to show as banner | Boolean | false |
|
||||
| showIcon | Whether to show icon | boolean | false |
|
||||
| banner | Whether to show as banner | boolean | false |
|
||||
|
@ -16,12 +16,12 @@ title: Alert
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------- |--------------------------------------------------------- | ---------- |-------|
|
||||
| type | 指定警告提示的样式,有四种选择 `success`、`info`、`warning`、`error` | String | `info` |
|
||||
| closable | 默认不显示关闭按钮 | Boolean | 无 |
|
||||
| closeText | 自定义关闭按钮 | React.Node | 无 |
|
||||
| message | 警告提示内容 | React.Node | 无 |
|
||||
| description | 警告提示的辅助性文字介绍 | React.Node | 无 |
|
||||
| type | 指定警告提示的样式,有四种选择 `success`、`info`、`warning`、`error` | string | `info` |
|
||||
| closable | 默认不显示关闭按钮 | boolean | 无 |
|
||||
| closeText | 自定义关闭按钮 | string\|ReactNode | 无 |
|
||||
| message | 警告提示内容 | string\|ReactNode | 无 |
|
||||
| description | 警告提示的辅助性文字介绍 | string\|ReactNode | 无 |
|
||||
| onClose | 关闭时触发的回调函数 | Function | 无 |
|
||||
| showIcon | 是否显示辅助图标 | Boolean | false |
|
||||
| banner | 是否用作顶部公告 | Boolean | false |
|
||||
| showIcon | 是否显示辅助图标 | boolean | false |
|
||||
| banner | 是否用作顶部公告 | boolean | false |
|
||||
|
||||
|
@ -8,7 +8,7 @@ export interface AnchorLinkProps {
|
||||
active?: boolean;
|
||||
prefixCls?: string;
|
||||
children?: any;
|
||||
title?: Element;
|
||||
title?: React.ReactNode;
|
||||
bounds: number;
|
||||
target?: () => HTMLElement | Window;
|
||||
affix?: boolean;
|
||||
|
@ -17,13 +17,13 @@ For displaying anchor hyperlinks on page and jumping between them.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|--------------|-----------------------|----------|--------------|
|
||||
| offsetTop | Pixels to offset from top when calculating position of scroll | Number | 0 |
|
||||
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | Number | - |
|
||||
| bounds | Bounding distance of anchor area | Number | 5(px) |
|
||||
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |
|
||||
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
|
||||
| bounds | Bounding distance of anchor area | number | 5(px) |
|
||||
|
||||
### Link Props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|-------------|----------------|--------------------|--------------|
|
||||
| href | target of hyperlink | String | |
|
||||
| title | content of hyperlink | React.Node | |
|
||||
| href | target of hyperlink | string | |
|
||||
| title | content of hyperlink | string\|ReactNode | |
|
||||
|
@ -18,13 +18,13 @@ title: Anchor
|
||||
|
||||
| 成员 | 说明 | 类型 | 默认值 |
|
||||
|-------------|----------------|--------------------|--------------|
|
||||
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | Number | |
|
||||
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | Number | |
|
||||
| bounds | 锚点区域边界 | Number | 5(px) |
|
||||
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | |
|
||||
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | |
|
||||
| bounds | 锚点区域边界 | number | 5(px) |
|
||||
|
||||
### Link Props
|
||||
|
||||
| 成员 | 说明 | 类型 | 默认值 |
|
||||
|-------------|----------------|--------------------|--------------|
|
||||
| href | 锚点链接 | String | |
|
||||
| title | 文字内容 | React.Node | |
|
||||
| href | 锚点链接 | string | |
|
||||
| title | 文字内容 | string\|ReactNode | |
|
||||
|
@ -21,9 +21,9 @@ Since `AutoComplete` is based on `Select`, so besides the following API, `AutoCo
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|----------------|----------------------------------|------------|--------|
|
||||
| dataSource | Data source for autocomplete | Array | |
|
||||
| value | selected option | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}> | - |
|
||||
| defaultValue | Initial selected option. | string/Array<String> | - |
|
||||
| dataSource | Data source for autocomplete | [DataSourceItemType](https://git.io/vMMKF)[] | |
|
||||
| value | selected option | string\|string[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode }> | - |
|
||||
| defaultValue | Initial selected option. | string\|string[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode }> | - |
|
||||
| allowClear | Show clear button, effective in multiple mode only. | boolean | false |
|
||||
| onChange | Called when select an option or input value change, or value of input is changed | function(value, label) | - |
|
||||
| onSelect | Called when a option is selected. param is option's value and option instance. | function(value, option) | - |
|
||||
|
@ -22,9 +22,9 @@ const dataSource = ['12345', '23456', '34567'];
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------------|----------------------------------|------------|---------|
|
||||
| dataSource | 自动完成的数据源 | Array | |
|
||||
| value | 指定当前选中的条目 | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}> | 无 |
|
||||
| defaultValue | 指定默认选中的条目 | String/Array<String>/{key: String, label: React.Node}/Array<{key, label}> | 无 |
|
||||
| dataSource | 自动完成的数据源 | [DataSourceItemType](https://git.io/vMMKF)[] | |
|
||||
| value | 指定当前选中的条目 | string\|string[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode }> | 无 |
|
||||
| defaultValue | 指定默认选中的条目 | string\|string[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode}> | 无 |
|
||||
| allowClear | 支持清除, 单选模式有效 | boolean | false |
|
||||
| onChange | 选中 option,或 input 的 value 变化时,调用此函数 | function(value) | 无 |
|
||||
| onSelect | 被选中时调用,参数为选中项的 value 值 | function(value, option) | 无 |
|
||||
|
@ -20,6 +20,6 @@ title: BackTop
|
||||
|
||||
Property | Description | Type | Default
|
||||
-----|-----|-----|------
|
||||
visibilityHeight | the `BackTop` button will not show until the scroll height reaches this value | Number | 400
|
||||
visibilityHeight | the `BackTop` button will not show until the scroll height reaches this value | number | 400
|
||||
onClick | a callback function, which can be executed when you click the button | Function | -
|
||||
|
||||
|
@ -20,5 +20,5 @@ title: BackTop
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-------------|----------------|--------------------|--------------|
|
||||
| visibilityHeight | 滚动高度达到此参数值才出现 `BackTop` | Number | 400 |
|
||||
| visibilityHeight | 滚动高度达到此参数值才出现 `BackTop` | number | 400 |
|
||||
| onClick | 点击按钮的回调函数 | Function | - |
|
||||
|
@ -25,8 +25,8 @@ Badge normally appears in proximity to notification or head picture with eye-cat
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|----------------|-------------------------|------------|---------|
|
||||
| count | Number to show in badge | Number | |
|
||||
| overflowCount | Max count to show | Number | 99 |
|
||||
| dot | Whether to show red dot without number | Boolean | false |
|
||||
| count | Number to show in badge | number | |
|
||||
| overflowCount | Max count to show | number | 99 |
|
||||
| dot | Whether to show red dot without number | boolean | false |
|
||||
| status | Set Badge as a status dot | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |
|
||||
| text | If `status` is set, `text` is to set the text of status dot | String | '' |
|
||||
| text | If `status` is set, `text` is to set the text of status dot | string | '' |
|
||||
|
@ -26,8 +26,8 @@ title: Badge
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|----------------|----------------------------------|------------|---------|--------|
|
||||
| count | 展示的数字,大于 overflowCount 时显示为 `${overflowCount}+`,为 0 时隐藏 | Number | | |
|
||||
| overflowCount | 展示封顶的数字值 | Number | | 99 |
|
||||
| dot | 不展示数字,只有一个小红点 | Boolean | | false |
|
||||
| count | 展示的数字,大于 overflowCount 时显示为 `${overflowCount}+`,为 0 时隐藏 | number | | |
|
||||
| overflowCount | 展示封顶的数字值 | number | | 99 |
|
||||
| dot | 不展示数字,只有一个小红点 | boolean | | false |
|
||||
| status | 设置 Badge 为状态点 | Enum | 'success'、'processing'、'default'、'error'、'warning' | '' |
|
||||
| text | 在设置了 `status` 的前提下有效,设置状态点的文本 | String | | '' |
|
||||
| text | 在设置了 `status` 的前提下有效,设置状态点的文本 | string | | '' |
|
||||
|
@ -8,7 +8,7 @@ export interface BreadcrumbProps {
|
||||
prefixCls?: string;
|
||||
routes?: Array<any>;
|
||||
params?: Object;
|
||||
separator?: string | React.ReactNode;
|
||||
separator?: React.ReactNode;
|
||||
itemRender?: (route: any, params: any, routes: Array<any>, paths: Array<string>) => React.ReactNode;
|
||||
style?: React.CSSProperties;
|
||||
className?: string;
|
||||
@ -44,10 +44,7 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
|
||||
|
||||
static propTypes = {
|
||||
prefixCls: React.PropTypes.string,
|
||||
separator: React.PropTypes.oneOfType([
|
||||
React.PropTypes.string,
|
||||
React.PropTypes.element,
|
||||
]),
|
||||
separator: React.PropTypes.node,
|
||||
routes: React.PropTypes.array,
|
||||
params: React.PropTypes.object,
|
||||
linkRender: React.PropTypes.func,
|
||||
@ -92,8 +89,8 @@ export default class Breadcrumb extends React.Component<BreadcrumbProps, any> {
|
||||
} else if (children) {
|
||||
crumbs = React.Children.map(children, (element: any, index) => {
|
||||
warning(
|
||||
element.type === BreadcrumbItem,
|
||||
' `BreadcrumbItem` is required as the wrapper of children element. '
|
||||
element && element.type.__ANT_BREADCRUMB_ITEM,
|
||||
'Breadcrumb only accetps Breadcrumb.Item as it\'s children'
|
||||
);
|
||||
return cloneElement(element, {
|
||||
separator,
|
||||
|
@ -8,6 +8,8 @@ export interface BreadcrumbItemProps {
|
||||
}
|
||||
|
||||
export default class BreadcrumbItem extends React.Component<BreadcrumbItemProps, any> {
|
||||
static __ANT_BREADCRUMB_ITEM = true;
|
||||
|
||||
static defaultProps = {
|
||||
prefixCls: 'ant-breadcrumb',
|
||||
separator: '/',
|
||||
|
19
components/breadcrumb/__tests__/Breadcrumb.test.js
Normal file
19
components/breadcrumb/__tests__/Breadcrumb.test.js
Normal file
@ -0,0 +1,19 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import Breadcrumb from '../Breadcrumb';
|
||||
|
||||
describe('Breadcrumb', () => {
|
||||
it('warns on non-Breadcrumb.Item children', () => {
|
||||
const MyCom = () => <div>foo</div>;
|
||||
spyOn(console, 'error');
|
||||
mount(
|
||||
<Breadcrumb>
|
||||
<MyCom />
|
||||
</Breadcrumb>
|
||||
);
|
||||
expect(console.error.calls.count()).toBe(1);
|
||||
expect(console.error.calls.argsFor(0)[0]).toContain(
|
||||
'Breadcrumb only accetps Breadcrumb.Item as it\'s children'
|
||||
);
|
||||
});
|
||||
});
|
@ -17,10 +17,10 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
|
||||
|
||||
| Property | Description | Type | Optional | Default |
|
||||
|-----------|-----------------------------------|-----------------|---------|--------|
|
||||
| routes | The routing stack information of router | Array | | - |
|
||||
| params | Routing parameter | Object | | - |
|
||||
| separator | Custom separator | String or Element | | '/' |
|
||||
| itemRender | Custom item renderer | (route, params, routes, paths) => React.ReactNode | | - |
|
||||
| routes | The routing stack information of router | object[] | | - |
|
||||
| params | Routing parameter | object | | - |
|
||||
| separator | Custom separator | string\|ReactNode | | '/' |
|
||||
| itemRender | Custom item renderer | (route, params, routes, paths) => ReactNode | | - |
|
||||
|
||||
> `linkRender` and `nameRender` were removed after `antd@2.0`, please use `itemRender` instead.
|
||||
|
||||
|
@ -17,10 +17,10 @@ title: Breadcrumb
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|-----------|-----------------------------------|-----------------|---------|--------|
|
||||
| routes | router 的路由栈信息 | Array | | - |
|
||||
| params | 路由的参数 | Object | | - |
|
||||
| separator | 分隔符自定义 | String or Element | | '/' |
|
||||
| itemRender | 自定义链接函数,和 react-router 配置使用 | (route, params, routes, paths) => React.ReactNode | | - |
|
||||
| routes | router 的路由栈信息 | object[] | | - |
|
||||
| params | 路由的参数 | object | | - |
|
||||
| separator | 分隔符自定义 | string\|ReactNode | | '/' |
|
||||
| itemRender | 自定义链接函数,和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | | - |
|
||||
|
||||
> 2.0 之后,`linkRender` 和 `nameRender` 被移除,请使用 `itemRender` 来代替。
|
||||
|
||||
|
@ -21,7 +21,7 @@ htmlType | to set the original `type` of `button`, see: [MDN](https://developer.
|
||||
icon | set the icon of button, see: Icon component | string | -
|
||||
shape | can be set to `circle` or omitted | string | -
|
||||
size | can be set to `small` `large` or omitted | string | `default`
|
||||
loading | to set the loading status of button | boolean | false
|
||||
loading | to set the loading status of button | boolean | `false`
|
||||
onClick | set the handler to handle `click` event | function | -
|
||||
ghost | make background transparent and invert text and border color, added in 2.7 | boolean | false
|
||||
|
||||
|
@ -24,7 +24,7 @@ htmlType | 设置 `button` 原生的 `type` 值,可选值请参考 [HTML 标
|
||||
icon | 设置按钮的图标类型 | string | -
|
||||
shape | 设置按钮形状,可选值为 `circle` 或者不设 | string | -
|
||||
size | 设置按钮大小,可选值为 `small` `large` 或者不设 | string | `default`
|
||||
loading | 设置按钮载入状态 | boolean | false
|
||||
loading | 设置按钮载入状态 | boolean | `false`
|
||||
onClick | `click` 事件的 handler | function | -
|
||||
ghost | 幽灵属性,使按钮背景透明,版本 2.7 中增加 | boolean | false
|
||||
|
||||
|
@ -29,5 +29,5 @@ When data is in the form of date, such as schedule, timetable, prices calendar,
|
||||
| fullscreen | to set whether full-screen display | boolean | true |
|
||||
| dateCellRender | to set the way of renderer the date cell | function(date: moment): ReactNode | - |
|
||||
| monthCellRender | to set the way of renderer the month cell | function(date: moment): ReactNode | - |
|
||||
| locale | set locale | Object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
|
||||
| locale | set locale | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
|
||||
| onPanelChange| the callback when panel change | function(date: moment, mode: string) | - |
|
||||
|
@ -31,5 +31,5 @@ title: Calendar
|
||||
| fullscreen | 是否全屏显示 | boolean | true |
|
||||
| dateCellRender | 自定义渲染日期单元格| function(date: moment): ReactNode | 无 |
|
||||
| monthCellRender | 自定义渲染月单元格 | function(date: moment): ReactNode | 无 |
|
||||
| locale | 国际化配置 | Object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
|
||||
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
|
||||
| onPanelChange| 日期面板变化回调 | function(date: moment, mode: string) | 无 |
|
||||
|
@ -19,7 +19,7 @@ A card can be used to display content related to a single subject. The content c
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|----------|----------------|----------|--------------|
|
||||
| title | Card title | React.Element | - |
|
||||
| extra | Content to render in the top-right corner of the card | React.Element | - |
|
||||
| bordered | Toggles rendering of the border around the card | Boolean | true |
|
||||
| bodyStyle | Inline style to apply to the card content | Object | - |
|
||||
| title | Card title | string\|ReactNode | - |
|
||||
| extra | Content to render in the top-right corner of the card | string\|ReactNode | - |
|
||||
| bordered | Toggles rendering of the border around the card | boolean | true |
|
||||
| bodyStyle | Inline style to apply to the card content | object | - |
|
||||
|
@ -20,7 +20,7 @@ cols: 1
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|----------------|----------|--------------|
|
||||
| title | 卡片标题 | React.Element | - |
|
||||
| extra | 卡片右上角的操作区域 | React.Element | - |
|
||||
| bordered | 是否有边框 | Boolean | true |
|
||||
| bodyStyle | 内容区域自定义样式 | Object | - |
|
||||
| title | 卡片标题 | string\|ReactNode | - |
|
||||
| extra | 卡片右上角的操作区域 | string\|ReactNode | - |
|
||||
| bordered | 是否有边框 | boolean | true |
|
||||
| bodyStyle | 内容区域自定义样式 | object | - |
|
||||
|
@ -16,11 +16,11 @@ A carousel component. Scales with its container.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|------------------|----------------------------------------------|----------|---------------------------------|
|
||||
| effect | Animation effect, either `scrollx` or `fade` | String | scrollx |
|
||||
| dots | Whether to show the dots at the bottom of the gallery | Boolean | true |
|
||||
| vertical | Whether to use a vertical display | Boolean | false |
|
||||
| autoplay | Whether to scroll automatically | Boolean | false |
|
||||
| easing | Transition name | String | linear |
|
||||
| effect | Animation effect, either `scrollx` or `fade` | string | scrollx |
|
||||
| dots | Whether to show the dots at the bottom of the gallery | boolean | true |
|
||||
| vertical | Whether to use a vertical display | boolean | false |
|
||||
| autoplay | Whether to scroll automatically | boolean | false |
|
||||
| easing | Transition name | string | linear |
|
||||
| beforeChange | Callback function called before the current index changes | function(from, to) |
|
||||
| afterChange | Callback function called after the current index changes | function(current) |
|
||||
|
||||
|
@ -17,11 +17,11 @@ subtitle: 走马灯
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------------------|----------------------------------------------|----------|---------------------------------|
|
||||
| effect | 动画效果函数,可取 scrollx, fade | String | scrollx |
|
||||
| dots | 是否显示面板指示点 | Boolean | true |
|
||||
| vertical | 垂直显示 | Boolean | false |
|
||||
| autoplay | 是否自动切换 | Boolean | false |
|
||||
| easing | 动画效果 | String | linear |
|
||||
| effect | 动画效果函数,可取 scrollx, fade | string | scrollx |
|
||||
| dots | 是否显示面板指示点 | boolean | true |
|
||||
| vertical | 垂直显示 | boolean | false |
|
||||
| autoplay | 是否自动切换 | boolean | false |
|
||||
| easing | 动画效果 | string | linear |
|
||||
| beforeChange | 切换面板的回调 | function(from, to) | 无
|
||||
| afterChange | 切换面板的回调 | function(current) | 无
|
||||
|
||||
|
@ -22,10 +22,10 @@ Cascade selection box.
|
||||
| Property | Description | Type | Default |
|
||||
|------|------|------|--------|
|
||||
| options | data options of cascade | object | - |
|
||||
| defaultValue | initial selected value | array |[] |
|
||||
| value | selected value | array | - |
|
||||
| defaultValue | initial selected value | [CascaderOptionType](https://git.io/vMMoK)[] |[] |
|
||||
| value | selected value | [CascaderOptionType](https://git.io/vMMoK)[] | - |
|
||||
| onChange | callback when finishing cascader select | `(value, selectedOptions) => void` | - |
|
||||
| displayRender | render function of displaying selected options | `(label, selectedOptions) => React.ReactNode` | `label => label.join(' / ')` |
|
||||
| displayRender | render function of displaying selected options | `(label, selectedOptions) => ReactNode` | `label => label.join(' / ')` |
|
||||
| style | additional style | string | - |
|
||||
| className | additional css class | string | - |
|
||||
| popupClassName | additional className of popup overlay | string | - |
|
||||
@ -36,8 +36,8 @@ Cascade selection box.
|
||||
| allowClear | whether allow clear | boolean | true |
|
||||
| expandTrigger | expand current item when click or hover, one of 'click' 'hover' | string | 'click' |
|
||||
| changeOnSelect | change value on each selection if set to true, see above demo for details | boolean | false |
|
||||
| showSearch | Whether show search input in single mode. | Boolean or Object | false |
|
||||
| notFoundContent | Specify content to show when no result matches. | String | 'Not Found' |
|
||||
| showSearch | Whether show search input in single mode. | boolean\|object | false |
|
||||
| notFoundContent | Specify content to show when no result matches. | string | 'Not Found' |
|
||||
| loadData | To load option lazily, and it cannot work with `showSearch` | `(selectedOptions) => void` | - |
|
||||
| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative.[example](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body |
|
||||
|
||||
@ -46,7 +46,7 @@ Fields in `showSearch`:
|
||||
| Property | Description | Type | Default |
|
||||
|----------|-------------|------|---------|
|
||||
| filter | The function will receive two arguments, inputValue and option, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded. | `function(inputValue, path): boolean` | |
|
||||
| render | Used to render filtered options. | `function(inputValue, path): React.ReactNode` | |
|
||||
| render | Used to render filtered options. | `function(inputValue, path): ReactNode` | |
|
||||
| sort | Used to sort filtered options. | `function(a, b, inputValue)` | |
|
||||
| matchInputWidth | Whether the width of result list equals to input's | boolean | |
|
||||
|
||||
|
@ -22,23 +22,23 @@ subtitle: 级联选择
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|--------|
|
||||
| options | 可选项数据源 | Object | - |
|
||||
| defaultValue | 默认的选中项 | Array |[] |
|
||||
| value | 指定选中项 | Array | - |
|
||||
| options | 可选项数据源 | object | - |
|
||||
| defaultValue | 默认的选中项 | [CascaderOptionType](https://git.io/vMMoK)[] |[] |
|
||||
| value | 指定选中项 | [CascaderOptionType](https://git.io/vMMoK)[] | - |
|
||||
| onChange | 选择完成后的回调 | `(value, selectedOptions) => void` | - |
|
||||
| displayRender | 选择后展示的渲染函数 | `(label, selectedOptions) => React.ReactNode` | `label => label.join(' / ')` |
|
||||
| style | 自定义样式 | String | - |
|
||||
| className | 自定义类名 | String | - |
|
||||
| popupClassName | 自定义浮层类名 | String | - |
|
||||
| displayRender | 选择后展示的渲染函数 | `(label, selectedOptions) => ReactNode` | `label => label.join(' / ')` |
|
||||
| style | 自定义样式 | string | - |
|
||||
| className | 自定义类名 | string | - |
|
||||
| popupClassName | 自定义浮层类名 | string | - |
|
||||
| popupPlacement | 浮层预设位置:`bottomLeft` `bottomRight` `topLeft` `topRight` | Enum | `bottomLeft` |
|
||||
| placeholder | 输入框占位文本 | String | '请选择' |
|
||||
| size | 输入框大小,可选 `large` `default` `small` | String | `default` |
|
||||
| disabled | 禁用 | Boolean | false |
|
||||
| allowClear | 是否支持清除 | Boolean | true |
|
||||
| expandTrigger | 次级菜单的展开方式,可选 'click' 和 'hover' | String | 'click' |
|
||||
| changeOnSelect | 当此项为 true 时,点选每级菜单选项值都会发生变化,具体见上面的演示 | Boolean | false |
|
||||
| showSearch | 在选择框中显示搜索框 | Boolean | false |
|
||||
| notFoundContent | 当下拉列表为空时显示的内容 | String | 'Not Found' |
|
||||
| placeholder | 输入框占位文本 | string | '请选择' |
|
||||
| size | 输入框大小,可选 `large` `default` `small` | string | `default` |
|
||||
| disabled | 禁用 | boolean | false |
|
||||
| allowClear | 是否支持清除 | boolean | true |
|
||||
| expandTrigger | 次级菜单的展开方式,可选 'click' 和 'hover' | string | 'click' |
|
||||
| changeOnSelect | 当此项为 true 时,点选每级菜单选项值都会发生变化,具体见上面的演示 | boolean | false |
|
||||
| showSearch | 在选择框中显示搜索框 | boolean | false |
|
||||
| notFoundContent | 当下拉列表为空时显示的内容 | string | 'Not Found' |
|
||||
| loadData | 用于动态加载选项,无法与 `showSearch` 一起使用 | `(selectedOptions) => void` | - |
|
||||
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。[示例](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body |
|
||||
|
||||
@ -47,7 +47,7 @@ subtitle: 级联选择
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------|------|--------|
|
||||
| filter | 接收 `inputValue` `path` 两个参数,当 `path` 符合筛选条件时,应返回 true,反之则返回 false。 | `function(inputValue, path): boolean` | |
|
||||
| render | 用于渲染 filter 后的选项 | `function(inputValue, path): React.ReactNode` | |
|
||||
| render | 用于渲染 filter 后的选项 | `function(inputValue, path): ReactNode` | |
|
||||
| sort | 用于排序 filter 后的选项 | `function(a, b, inputValue)` | |
|
||||
| matchInputWidth | 搜索结果列表是否与输入框同宽 | boolean | |
|
||||
|
||||
|
@ -17,15 +17,15 @@ Checkbox.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|----------|------------------|----------|--------|
|
||||
| checked | Specifies whether the checkbox is selected. | Boolean | false |
|
||||
| defaultChecked | Specifies the initial state: whether or not the checkbox is selected. | Boolean | false |
|
||||
| checked | Specifies whether the checkbox is selected. | boolean | false |
|
||||
| defaultChecked | Specifies the initial state: whether or not the checkbox is selected. | boolean | false |
|
||||
| onChange | The callback function that is triggered when the state changes. | Function(e:Event) | - |
|
||||
|
||||
### Checkbox Group
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|----------|------------------|----------|--------|
|
||||
| defaultValue | Default selected value | Array | [] |
|
||||
| value | Used for setting the currently selected value. | Array | [] |
|
||||
| options | Specifies options | Array | [] |
|
||||
| defaultValue | Default selected value | string[] | [] |
|
||||
| value | Used for setting the currently selected value. | string[] | [] |
|
||||
| options | Specifies options | string[] | [] |
|
||||
| onChange | The callback function that is triggered when the state changes. | Function(checkedValue) | - |
|
||||
|
@ -18,16 +18,16 @@ title: Checkbox
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|------------------|----------|--------|
|
||||
| checked | 指定当前是否选中 | Boolean | false |
|
||||
| defaultChecked | 初始是否选中 | Boolean | false |
|
||||
| checked | 指定当前是否选中 | boolean | false |
|
||||
| defaultChecked | 初始是否选中 | boolean | false |
|
||||
| onChange | 变化时回调函数 | Function(e:Event) | - |
|
||||
| indeterminate | 设置 indeterminate 状态,只负责样式控制 | Boolean | false |
|
||||
| indeterminate | 设置 indeterminate 状态,只负责样式控制 | boolean | false |
|
||||
|
||||
### Checkbox Group
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|------------------|----------|--------|
|
||||
| defaultValue | 默认选中的选项 | Array | [] |
|
||||
| value | 指定选中的选项| Array | [] |
|
||||
| options | 指定可选项 | Array | [] |
|
||||
| defaultValue | 默认选中的选项 | string[] | [] |
|
||||
| value | 指定选中的选项| string[] | [] |
|
||||
| options | 指定可选项 | string[] | [] |
|
||||
| onChange | 变化时回调函数 | Function(checkedValue) | - |
|
||||
|
@ -18,13 +18,13 @@ A content area which can be collapsed and expanded.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|----------|----------------|----------|--------------|
|
||||
| activeKey | key of the active panel | Array or String | No default value. In `accordion` mode, it's the key of the first panel. |
|
||||
| defaultActiveKey | key of the initialized active panel | String | - |
|
||||
| activeKey | key of the active panel | string[]\|string | No default value. In `accordion` mode, it's the key of the first panel. |
|
||||
| defaultActiveKey | key of the initialized active panel | string | - |
|
||||
| onChange | a callback function, which can be executed when you switch the panels | Function | - |
|
||||
|
||||
### Collapse.Panel
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|----------|----------------|----------|--------------|
|
||||
| key | corresponds to the `activeKey` | String | - |
|
||||
| header | title of the panel | React.Element or String | - |
|
||||
| key | corresponds to the `activeKey` | string | - |
|
||||
| header | title of the panel | string\|ReactNode | - |
|
||||
|
@ -19,8 +19,8 @@ cols: 1
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------------------|----------------------------------------------|----------|---------------------------------|
|
||||
| activeKey | 当前激活 tab 面板的 key| Array or String | 默认无,accordion模式下默认第一个元素|
|
||||
| defaultActiveKey | 初始化选中面板的 key | String | 无 |
|
||||
| activeKey | 当前激活 tab 面板的 key| string[]\|string | 默认无,accordion模式下默认第一个元素|
|
||||
| defaultActiveKey | 初始化选中面板的 key | string | 无 |
|
||||
| onChange | 切换面板的回调 | Function | 无 |
|
||||
|
||||
|
||||
@ -28,5 +28,5 @@ cols: 1
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------|------------------|-------------------------|--------|
|
||||
| key | 对应 activeKey | String | 无 |
|
||||
| header | 面板头内容 | React.Element or String | 无 |
|
||||
| key | 对应 activeKey | string | 无 |
|
||||
| header | 面板头内容 | string\|ReactNode | 无 |
|
||||
|
@ -36,17 +36,17 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|--------------|----------------|----------|--------------|
|
||||
| allowClear | Whether to show clear button | bool | true |
|
||||
| disabled | determine whether the DatePicker is disabled | Boolean | false |
|
||||
| style | to customize the style of the input box | Object | {} |
|
||||
| popupStyle | to customize the style of the popup calendar | Object | {} |
|
||||
| size | determine the size of the input box, the height of `large` and `small`, are 32px and 22px respectively, while default size is 28px | String | - |
|
||||
| locale | localization configuration | Object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
|
||||
| allowClear | Whether to show clear button | boolean | true |
|
||||
| disabled | determine whether the DatePicker is disabled | boolean | false |
|
||||
| style | to customize the style of the input box | object | {} |
|
||||
| popupStyle | to customize the style of the popup calendar | object | {} |
|
||||
| size | determine the size of the input box, the height of `large` and `small`, are 32px and 22px respectively, while default size is 28px | string | - |
|
||||
| locale | localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
|
||||
| disabledDate | to specify the date that cannot be selected | function | - |
|
||||
| getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |
|
||||
| open | open state of picker | bool | - |
|
||||
| open | open state of picker | boolean | - |
|
||||
| onOpenChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) | - |
|
||||
| placeholder | placeholder of date input | string or array (RangePicker) | - |
|
||||
| placeholder | placeholder of date input | string\|RangePicker[] | - |
|
||||
|
||||
### DatePicker
|
||||
|
||||
@ -54,10 +54,10 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker.
|
||||
|--------------|----------------|----------|--------------|
|
||||
| value | to set date | [moment](http://momentjs.com/) | - |
|
||||
| defaultValue | to set default date | [moment](http://momentjs.com/) | - |
|
||||
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | String | "YYYY-MM-DD" |
|
||||
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" |
|
||||
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - |
|
||||
| showTime | to provide an additional time selection | Object/Boolean | [TimePicker Options](/components/time-picker/#api) |
|
||||
| showToday | whether to show "Today" button | Boolean | true |
|
||||
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#api) |
|
||||
| showToday | whether to show "Today" button | boolean | true |
|
||||
| disabledTime | to specify the time that cannot be selected | function(date) | - |
|
||||
|
||||
### MonthPicker
|
||||
@ -66,9 +66,9 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker.
|
||||
|--------------|----------------|----------|--------------|
|
||||
| value | to set date | [moment](http://momentjs.com/) | - |
|
||||
| defaultValue | to set default date | [moment](http://momentjs.com/) | - |
|
||||
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | String | "YYYY-MM" |
|
||||
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM" |
|
||||
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - |
|
||||
| monthCellContentRender | Custom month cell content render method | function(date, locale): React.Node | - |
|
||||
| monthCellContentRender | Custom month cell content render method | function(date, locale): ReactNode | - |
|
||||
|
||||
### RangePicker
|
||||
|
||||
@ -76,11 +76,11 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker.
|
||||
|--------------|----------------|----------|--------------|
|
||||
| value | to set date | [[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |
|
||||
| defaultValue | to set default date | [[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |
|
||||
| format | to set the date format | String | "YYYY-MM-DD HH:mm:ss" |
|
||||
| format | to set the date format | string | "YYYY-MM-DD HH:mm:ss" |
|
||||
| onChange | a callback function, can be executed when the selected time is changing | function(dates: [moment, moment], dateStrings: [string, string]) | - |
|
||||
| showTime | to provide an additional time selection | Object/Boolean | [TimePicker Options](/components/time-picker/#api) |
|
||||
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#api) |
|
||||
| disabledTime | to specify the time that cannot be selected | function(dates: [moment, moment], partial: `'start'|'end'`) | - |
|
||||
| ranges | preseted ranges for quick selection | Object { [range: string]: [moment, moment] } | - |
|
||||
| ranges | preseted ranges for quick selection | { [range: string]: [moment](http://momentjs.com/)[] } | - |
|
||||
|
||||
<style>
|
||||
.code-box-demo .ant-calendar-picker {
|
||||
|
@ -37,17 +37,17 @@ moment.locale('zh-cn');
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|--------------|----------------|----------|--------------|
|
||||
| allowClear | 是否显示清除按钮 | bool | true |
|
||||
| disabled | 禁用 | bool | false |
|
||||
| allowClear | 是否显示清除按钮 | boolean | true |
|
||||
| disabled | 禁用 | boolean | false |
|
||||
| style | 自定义输入框样式 | object | {} |
|
||||
| popupStyle | 格外的弹出日历样式 | object | {} |
|
||||
| size | 输入框大小,`large` 高度为 32px,`small` 为 22px,默认是 28px | string | 无 |
|
||||
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
|
||||
| disabledDate | 不可选择的日期 | function | 无 |
|
||||
| getCalendarContainer | 定义浮层的容器,默认为 body 上新建 div | function(trigger) | 无 |
|
||||
| open | 控制弹层是否展开 | bool | - |
|
||||
| open | 控制弹层是否展开 | boolean | - |
|
||||
| onOpenChange | 弹出日历和关闭日历的回调 | function(status) | 无 |
|
||||
| placeholder | 输入框提示文字 | string or array (RangePicker) | - |
|
||||
| placeholder | 输入框提示文字 | string\|RangePicker[] | - |
|
||||
|
||||
### DatePicker
|
||||
|
||||
@ -57,8 +57,8 @@ moment.locale('zh-cn');
|
||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 |
|
||||
| format | 展示的日期格式,配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" |
|
||||
| onChange | 时间发生变化的回调 | function(date: moment, dateString: string) | 无 |
|
||||
| showTime | 增加时间选择功能 | Object or Boolean | [TimePicker Options](/components/time-picker/#api) |
|
||||
| showToday | 是否展示“今天”按钮 | Boolean | true |
|
||||
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#api) |
|
||||
| showToday | 是否展示“今天”按钮 | boolean | true |
|
||||
| disabledTime | 不可选择的时间 | function(date) | 无 |
|
||||
|
||||
### MonthPicker
|
||||
@ -69,19 +69,19 @@ moment.locale('zh-cn');
|
||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 |
|
||||
| format | 展示的日期格式,配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM" |
|
||||
| onChange | 时间发生变化的回调,发生在用户选择时间时 | function(date: moment, dateString: string) | - |
|
||||
| monthCellContentRender | 自定义的月份内容渲染方法 | function(date, locale): React.Node | - |
|
||||
| monthCellContentRender | 自定义的月份内容渲染方法 | function(date, locale): ReactNode | - |
|
||||
|
||||
### RangePicker
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|--------------|----------------|----------|--------------|
|
||||
| value | 日期 | [[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | 无 |
|
||||
| defaultValue | 默认日期 | [[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | 无 |
|
||||
| value | 日期 | [moment](http://momentjs.com/)[] | 无 |
|
||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/)[] | 无 |
|
||||
| format | 展示的日期格式 | string | "YYYY-MM-DD HH:mm:ss" |
|
||||
| onChange | 时间发生变化的回调,发生在用户选择时间时 | function(dates: [moment, moment], dateStrings: [string, string]) | 无 |
|
||||
| showTime | 增加时间选择功能 | Object or Boolean | [TimePicker Options](/components/time-picker/#api) |
|
||||
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#api) |
|
||||
| disabledTime | 不可选择的时间 | function(dates: [moment, moment], partial: `'start'|'end'`) | 无 |
|
||||
| ranges | 预设事件范围快捷选择 | Object { [range: string]: [moment, moment] } | 无 |
|
||||
| ranges | 预设事件范围快捷选择 | { [range: string]: [moment](http://momentjs.com/)[] } | 无 |
|
||||
|
||||
<style>
|
||||
.code-box-demo .ant-calendar-picker {
|
||||
|
@ -16,10 +16,10 @@ If there are too many operations to display, you can wrap them in a `Dropdown`.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|--------------|----------------|----------|--------------|
|
||||
| trigger | the trigger mode which can execute the drop-down action | ['click'] or ['hover'] | ['hover'] |
|
||||
| trigger | the trigger mode which can execute the drop-down action | Array<'click'\|'hover'> | ['hover'] |
|
||||
| overlay | the dropdown menu | [Menu](/components/menu) | - |
|
||||
| getPopupContainer | to set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body |
|
||||
| visible | determine whether the dropdown menu is visible | Boolean | - |
|
||||
| visible | determine whether the dropdown menu is visible | boolean | - |
|
||||
| onVisibleChange | a callback function takes an argument: `visible`, can be executed when the visible state is changing | Function | - |
|
||||
|
||||
You can get the menu list by `antd.Menu`, and set a callback function `onSelect` for it if you need. The menu items and the dividers are also available, by using `antd.Menu.Item` and `antd.Menu.Divider` respectively.
|
||||
@ -31,9 +31,9 @@ You can get the menu list by `antd.Menu`, and set a callback function `onSelect`
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|--------------|----------------|----------|--------------|
|
||||
| type | type of the button, the same as [Button](/components/button) | String | 'default' |
|
||||
| type | type of the button, the same as [Button](/components/button) | string | 'default' |
|
||||
| onClick | a callback function, the same as [Button](/components/button), which will be executed when you click the button on the left | Function | - |
|
||||
| trigger | the trigger mode which can execute the drop-down action | ['click'] or ['hover'] | ['hover'] |
|
||||
| trigger | the trigger mode which can execute the drop-down action | Array<'click'\|'hover'> | ['hover'] |
|
||||
| overlay | the dropdown menu | [Menu](/components/menu) | - |
|
||||
| visible | determine whether the dropdown menu is visible | Boolean | - |
|
||||
| visible | determine whether the dropdown menu is visible | boolean | - |
|
||||
| onVisibleChange | a callback function takes an argument: `visible`, can be executed when the visible state is changing | Function | - |
|
||||
|
@ -17,10 +17,10 @@ title: Dropdown
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-------------|------------------|--------------------|--------------|
|
||||
| trigger | 触发下拉的行为 | ['click'] or ['hover'] | ['hover'] |
|
||||
| trigger | 触发下拉的行为 | Array<'click'\|'hover'> | ['hover'] |
|
||||
| overlay | 菜单 | [Menu](/components/menu) | - |
|
||||
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。[示例](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body |
|
||||
| visible | 菜单是否显示 | Boolean | - |
|
||||
| visible | 菜单是否显示 | boolean | - |
|
||||
| onVisibleChange | 菜单显示状态改变时调用,参数为 visible | Function | - |
|
||||
|
||||
菜单可由 `antd.Menu` 取得,可设置 `onSelect` 回调,菜单还包括菜单项 `antd.Menu.Item`,分割线 `antd.Menu.Divider`。
|
||||
@ -31,9 +31,9 @@ title: Dropdown
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-------------|------------------|--------------------|--------------|
|
||||
| type | 按钮类型,和 [Button](/components/button/) 一致 | String | 'default' |
|
||||
| type | 按钮类型,和 [Button](/components/button/) 一致 | string | 'default' |
|
||||
| onClick | 点击左侧按钮的回调,和 [Button](/components/button/) 一致 | Function | - |
|
||||
| trigger | 触发下拉的行为 | ['click'] or ['hover'] | ['hover'] |
|
||||
| trigger | 触发下拉的行为 | Array<'click'\|'hover'> | ['hover'] |
|
||||
| overlay | 菜单 | [Menu](/components/menu/) | - |
|
||||
| visible | 菜单是否显示 | Boolean | - |
|
||||
| visible | 菜单是否显示 | boolean | - |
|
||||
| onVisibleChange | 菜单显示状态改变时调用,参数为 visible | Function | - |
|
||||
|
@ -155,7 +155,6 @@
|
||||
|
||||
.@{dropdown-prefix-cls}-trigger,
|
||||
.@{dropdown-prefix-cls}-link {
|
||||
font-size: @font-size-base;
|
||||
.@{iconfont-css-prefix}-down {
|
||||
.iconfont-size-under-12px(10px);
|
||||
}
|
||||
|
@ -69,7 +69,7 @@ If the form has been decorated by `Form.create` then it has `this.props.form` pr
|
||||
| setFieldsValue | Set the value of a field.(Note: please don't use it in `componentWillReceiveProps`, otherwise, it will cause an endless loop, [more](https://github.com/ant-design/ant-design/issues/2985)) | Function({ [fieldName]: value } |
|
||||
| setFields | | Function(obj: object) |
|
||||
| setFields | Set the value and error of a field. [Code Sample](https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79) | Function({ [fieldName]: { value: any, errors: [Error] } }) |
|
||||
| validateFields | Validate the specified fields and get theirs values and errors. | Function([fieldNames: string[]], [options: object], callback: Function(errors, values)) |
|
||||
| validateFields | Validate the specified fields and get theirs values and errors. If you don't specify the parameter of fieldNames, you will vaildate all fields. | Function([fieldNames: string[]], [options: object], callback: Function(errors, values)) |
|
||||
| validateFieldsAndScroll | This function is similar to `validateFields`, but after validation, if the target field is not in visible area of form, form will be automatically scrolled to the target field area. | same as `validateFields` |
|
||||
| getFieldError | Get the error of a field. | Function(name) |
|
||||
| getFieldsError | Get the specified fields' error. If you don't specify a parameter, you will get all fields' error. | Function([names: string[]]) |
|
||||
@ -100,8 +100,8 @@ If you use `react@<15.3.0`, then, you can't use `getFieldDecorator` in stateless
|
||||
| options.initialValue | You can specify initial value, type, optional value of children node. | | n/a |
|
||||
| options.trigger | When to collect the value of children node | string | 'onChange' |
|
||||
| options.getValueFromEvent | To convert parameters of onChange to the value of control | function(..args) | [reference](https://github.com/react-component/form#optiongetvaluefromevent) |
|
||||
| options.validateTrigger | When to validate the value of children node. | string \| string[] | 'onChange' |
|
||||
| options.rules | Includes validation rules. Please refer to [async-validator](https://github.com/yiminghe/async-validator#rules) for details. | array | n/a |
|
||||
| options.validateTrigger | When to validate the value of children node. | string\|string[] | 'onChange' |
|
||||
| options.rules | Includes validation rules. Please refer to [async-validator](https://github.com/yiminghe/async-validator#rules) for details. | object[] | n/a |
|
||||
| options.exclusive | Whether it is exclusive with other controls, particularly for Radio. | boolean | false |
|
||||
|
||||
### Form.Item
|
||||
@ -112,11 +112,11 @@ Note:
|
||||
|
||||
| Property | Description | Type | Default Value |
|
||||
|---------------|--------------------------------------|--------|---------------|
|
||||
| label | Label text | React.Node | |
|
||||
| label | Label text | string\|ReactNode | |
|
||||
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` same as with `<Col>` | object | |
|
||||
| wrapperCol | The layout for input controls. Same as `labelCol` | object | |
|
||||
| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | React.Node | |
|
||||
| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time. | React.Node | |
|
||||
| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|ReactNode | |
|
||||
| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time. | string\|ReactNode | |
|
||||
| required | Whether provided or not, it will be generated by the validation rule. | boolean | false |
|
||||
| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | |
|
||||
| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | boolean | false |
|
||||
|
@ -70,7 +70,7 @@ CustomizedForm = Form.create({})(CustomizedForm);
|
||||
| getFieldValue | 获取一个输入控件的值 | Function(fieldName: string) |
|
||||
| setFieldsValue | 设置一组输入控件的值(注意:不要在 `componentWillReceiveProps` 内使用,否则会导致死循环,[更多](https://github.com/ant-design/ant-design/issues/2985)) | Function({ [fieldName]: value } |
|
||||
| setFields | 设置一组输入控件的值与 Error。 [代码](https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79) | Function({ [fieldName]: { value: any, errors: [Error] } }) |
|
||||
| validateFields | 校验并获取一组输入域的值与 Error | Function([fieldNames: string[]], [options: object], callback: Function(errors, values)) |
|
||||
| validateFields | 校验并获取一组输入域的值与 Error,若 fieldNames 参数为空,则校验全部组件 | Function([fieldNames: string[]], [options: object], callback: Function(errors, values)) |
|
||||
| validateFieldsAndScroll | 与 `validateFields` 相似,但校验完后,如果校验不通过的菜单域不在可见范围内,则自动滚动进可见范围 | 参考 `validateFields` |
|
||||
| getFieldError | 获取某个输入控件的 Error | Function(name) |
|
||||
| getFieldsError | 获取一组输入控件的 Error ,如不传入参数,则获取全部组件的 Error | Function([names: string[]]) |
|
||||
@ -101,8 +101,8 @@ CustomizedForm = Form.create({})(CustomizedForm);
|
||||
| options.initialValue | 子节点的初始值,类型、可选值均由子节点决定 | | |
|
||||
| options.trigger | 收集子节点的值的时机 | string | 'onChange' |
|
||||
| options.getValueFromEvent | 可以把 onChange 的参数转化为控件的值 | function(..args) | [reference](https://github.com/react-component/form#optiongetvaluefromevent) |
|
||||
| options.validateTrigger | 校验子节点值的时机 | string \| string[] | 'onChange' |
|
||||
| options.rules | 校验规则,参见 [async-validator](https://github.com/yiminghe/async-validator#rules) | array | |
|
||||
| options.validateTrigger | 校验子节点值的时机 | string\|string[] | 'onChange' |
|
||||
| options.rules | 校验规则,参见 [async-validator](https://github.com/yiminghe/async-validator#rules) | object[] | |
|
||||
| options.exclusive | 是否和其他控件互斥,特别用于 Radio 单选控件 | boolean | false |
|
||||
|
||||
### Form.Item
|
||||
@ -113,11 +113,11 @@ CustomizedForm = Form.create({})(CustomizedForm);
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------------------------------------|-----------|--------|
|
||||
| label | label 标签的文本 | React.Node | |
|
||||
| label | label 标签的文本 | string\|ReactNode | |
|
||||
| labelCol | label 标签布局,通 `<Col>` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}` | object | |
|
||||
| wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol | object | |
|
||||
| help | 提示信息,如不设置,则会根据校验规则自动生成 | React.Node | |
|
||||
| extra | 额外的提示信息,和 help 类似,当需要错误信息和提示文案同时出现时,可以使用这个。 | React.Node | |
|
||||
| help | 提示信息,如不设置,则会根据校验规则自动生成 | string\|ReactNode | |
|
||||
| extra | 额外的提示信息,和 help 类似,当需要错误信息和提示文案同时出现时,可以使用这个。 | string\|ReactNode | |
|
||||
| required | 是否必填,如不设置,则会根据校验规则自动生成 | boolean | false |
|
||||
| validateStatus | 校验状态,如不设置,则会根据校验规则自动生成,可选:'success' 'warning' 'error' 'validating' | string | |
|
||||
| hasFeedback | 配合 validateStatus 属性使用,展示校验状态图标,建议只配合 Input 组件使用 | boolean | false |
|
||||
|
@ -103,7 +103,7 @@ Ant Design 的布局组件若不能满足你的需求,你也可以直接使用
|
||||
| offset | 栅格左侧的间隔格数,间隔内不可以有栅格 | number | 0 |
|
||||
| push | 栅格向右移动格数 | number | 0 |
|
||||
| pull | 栅格向左移动格数 | number | 0 |
|
||||
| xs | `<768px` 响应式栅格,可为栅格数或一个包含其他属性的对象 | number or object | - |
|
||||
| sm | `≥768px` 响应式栅格,可为栅格数或一个包含其他属性的对象 | number or object | - |
|
||||
| md | `≥992px` 响应式栅格,可为栅格数或一个包含其他属性的对象 | number or object | - |
|
||||
| lg | `≥1200px` 响应式栅格,可为栅格数或一个包含其他属性的对象 | number or object | - |
|
||||
| xs | `<768px` 响应式栅格,可为栅格数或一个包含其他属性的对象 | number\|object | - |
|
||||
| sm | `≥768px` 响应式栅格,可为栅格数或一个包含其他属性的对象 | number\|object | - |
|
||||
| md | `≥992px` 响应式栅格,可为栅格数或一个包含其他属性的对象 | number\|object | - |
|
||||
| lg | `≥1200px` 响应式栅格,可为栅格数或一个包含其他属性的对象 | number\|object | - |
|
||||
|
@ -1,7 +1,7 @@
|
||||
/* eslint no-console:0 */
|
||||
// this file is not used if use https://github.com/ant-design/babel-plugin-import
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
if (typeof console !== 'undefined' && console.warn) {
|
||||
if (typeof console !== 'undefined' && console.warn && typeof window !== 'undefined') {
|
||||
console.warn(`You are using a whole package of antd,
|
||||
please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.`);
|
||||
}
|
||||
|
@ -14,11 +14,11 @@ When a numeric value needs to be provided.
|
||||
|
||||
| property | description | type | default |
|
||||
|-------------|----------------|--------------------|--------------|
|
||||
| min | min value | Number | -Infinity |
|
||||
| max | max vale | Number | Infinity |
|
||||
| value | current value | Number | |
|
||||
| step | The number to which the current value is increased or decreased. It can be an integer or decimal. | Number or String | 1 |
|
||||
| defaultValue | initial value | Number | |
|
||||
| min | min value | number | -Infinity |
|
||||
| max | max vale | number | Infinity |
|
||||
| value | current value | number | |
|
||||
| step | The number to which the current value is increased or decreased. It can be an integer or decimal. | number\|string | 1 |
|
||||
| defaultValue | initial value | number | |
|
||||
| onChange | The callback triggered when the value is changed. | Function | |
|
||||
| disabled | disable the input | Boolean | false |
|
||||
| size | width of input box | String | none |
|
||||
| disabled | disable the input | boolean | false |
|
||||
| size | width of input box | string | none |
|
||||
|
@ -17,11 +17,11 @@ title: InputNumber
|
||||
|
||||
| 成员 | 说明 | 类型 | 默认值 |
|
||||
|-------------|----------------|--------------------|--------------|
|
||||
| min | 最小值 | Number | -Infinity |
|
||||
| max | 最大值 | Number | Infinity |
|
||||
| value | 当前值 | Number | |
|
||||
| step | 每次改变步数,可以为小数 | Number or String | 1 |
|
||||
| defaultValue | 初始值 | Number | |
|
||||
| min | 最小值 | number | -Infinity |
|
||||
| max | 最大值 | number | Infinity |
|
||||
| value | 当前值 | number | |
|
||||
| step | 每次改变步数,可以为小数 | number\|string | 1 |
|
||||
| defaultValue | 初始值 | number | |
|
||||
| onChange | 变化回调 | Function | |
|
||||
| disabled | 禁用 | Boolean | false |
|
||||
| size | 输入框大小 | String | 无 |
|
||||
| disabled | 禁用 | boolean | false |
|
||||
| size | 输入框大小 | string | 无 |
|
||||
|
@ -24,12 +24,12 @@ Keyboard and mouse can be used for providing or changing data.
|
||||
| defaultValue | The initial input content | string | |
|
||||
| size | The size of the input box. Note: in the context of a form, the `large` size is used. Available: `large` `default` `small` | string | `default` |
|
||||
| disabled | Tell if the input is disabled. | boolean | false |
|
||||
| addonBefore | The label text displayed before (on the left side of) the input field. | React.Node | |
|
||||
| addonAfter | The label text displayed after (on the right side of) the input field. | React.Node | |
|
||||
| prefix | The Input with prefix icon. | React.Node | |
|
||||
| suffix | The Input with suffix icon. | React.Node | |
|
||||
| addonBefore | The label text displayed before (on the left side of) the input field. | string\|ReactNode | |
|
||||
| addonAfter | The label text displayed after (on the right side of) the input field. | string\|ReactNode | |
|
||||
| prefix | The Input with prefix icon. | string\|ReactNode | |
|
||||
| suffix | The Input with suffix icon. | string\|ReactNode | |
|
||||
| onPressEnter | The callback function that is triggered when pressing Enter key. | function(e) | |
|
||||
| autosize | Height autosize feature, available when type="textarea", can be set to `true|false` or a object `{ minRows: 2, maxRows: 6 }` | boolean or object | false |
|
||||
| autosize | Height autosize feature, available when type="textarea", can be set to `true|false` or a object `{ minRows: 2, maxRows: 6 }` | boolean\|object | false |
|
||||
|
||||
> When `Input` is used in a `Form.Item` context, if the `Form.Item` has the `id` and `options` props defined
|
||||
then `value`, `defaultValue`, and `id` props are automatically set.
|
||||
|
@ -24,12 +24,12 @@ title: Input
|
||||
| defaultValue | 输入框默认内容 | string | |
|
||||
| size | 控件大小。注:标准表单内的输入框大小限制为 `large`。可选 `large` `default` `small` | string | `default` |
|
||||
| disabled | 是否禁用状态,默认为 false | boolean | false |
|
||||
| addonBefore | 带标签的 input,设置前置标签 | React.Node | |
|
||||
| addonAfter | 带标签的 input,设置后置标签 | React.Node | |
|
||||
| prefix | 带有前缀图标的 input | React.Node | |
|
||||
| suffix | 带有后缀图标的 input | React.Node | |
|
||||
| addonBefore | 带标签的 input,设置前置标签 | string\|ReactNode | |
|
||||
| addonAfter | 带标签的 input,设置后置标签 | string\|ReactNode | |
|
||||
| prefix | 带有前缀图标的 input | string\|ReactNode | |
|
||||
| suffix | 带有后缀图标的 input | string\|ReactNode | |
|
||||
| onPressEnter | 按下回车的回调 | function(e) | |
|
||||
| autosize | 自适应内容高度,只对 `type="textarea"` 有效,可设置为 `true|false` 或对象:`{ minRows: 2, maxRows: 6 }` | boolean or object | false |
|
||||
| autosize | 自适应内容高度,只对 `type="textarea"` 有效,可设置为 `true|false` 或对象:`{ minRows: 2, maxRows: 6 }` | boolean\|object | false |
|
||||
|
||||
> 如果 `Input` 在 `Form.Item` 内,并且 `Form.Item` 设置了 `id` 和 `options` 属性,则 `value` `defaultValue` 和 `id` 属性会被自动设置。
|
||||
|
||||
|
@ -243,6 +243,7 @@
|
||||
& > * {
|
||||
border-radius: 0;
|
||||
border-right-width: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
// Undo float for .ant-input-group .ant-input
|
||||
|
@ -10,6 +10,7 @@ export interface SiderProps {
|
||||
collapsible?: boolean;
|
||||
collapsed?: boolean;
|
||||
defaultCollapsed?: boolean;
|
||||
reverseArrow?: boolean;
|
||||
onCollapse?: (collapsed: boolean) => void;
|
||||
trigger?: React.ReactNode;
|
||||
width?: number | string;
|
||||
@ -22,6 +23,7 @@ export default class Sider extends React.Component<SiderProps, any> {
|
||||
prefixCls: 'ant-layout-sider',
|
||||
collapsible: false,
|
||||
defaultCollapsed: false,
|
||||
reverseArrow: false,
|
||||
width: 200,
|
||||
collapsedWidth: 64,
|
||||
style: {},
|
||||
@ -68,7 +70,7 @@ export default class Sider extends React.Component<SiderProps, any> {
|
||||
|
||||
render() {
|
||||
const {
|
||||
prefixCls, className, collapsible, trigger, style, width, collapsedWidth,
|
||||
prefixCls, className, collapsible, reverseArrow, trigger, style, width, collapsedWidth,
|
||||
...others,
|
||||
} = this.props;
|
||||
const divProps = omit(others, ['collapsed', 'defaultCollapsed', 'onCollapse', 'name']);
|
||||
@ -81,8 +83,8 @@ export default class Sider extends React.Component<SiderProps, any> {
|
||||
flex: `0 0 ${this.state.collapsed ? collapsedWidth : width}px`,
|
||||
};
|
||||
const iconObj = {
|
||||
'expanded': <Icon type="left" />,
|
||||
'collapsed': <Icon type="right" />,
|
||||
'expanded': reverseArrow ? <Icon type="right" /> : <Icon type="left" />,
|
||||
'collapsed': reverseArrow ? <Icon type="left" /> : <Icon type="right" />,
|
||||
};
|
||||
const status = this.state.collapsed ? 'collapsed' : 'expanded';
|
||||
const defaultTrigger = iconObj[status];
|
||||
|
@ -461,11 +461,12 @@ exports[`test renders ./components/layout/demo/top-side.md correctly 1`] = `
|
||||
style="padding:24px 0;background:#fff;">
|
||||
<div
|
||||
class="ant-layout-sider"
|
||||
style="flex:0 0 200px;">
|
||||
style="background:#fff;flex:0 0 200px;">
|
||||
<ul
|
||||
aria-activedescendant=""
|
||||
class="ant-menu ant-menu-inline ant-menu-light ant-menu-root"
|
||||
role="menu"
|
||||
style="height:100%;"
|
||||
tabindex="0">
|
||||
<li
|
||||
class="ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected ant-menu-submenu">
|
||||
|
@ -40,11 +40,12 @@ ReactDOM.render(
|
||||
<Breadcrumb.Item>App</Breadcrumb.Item>
|
||||
</Breadcrumb>
|
||||
<Layout style={{ padding: '24px 0', background: '#fff' }}>
|
||||
<Sider width={200}>
|
||||
<Sider width={200} style={{ background: '#fff' }}>
|
||||
<Menu
|
||||
mode="inline"
|
||||
defaultSelectedKeys={['1']}
|
||||
defaultOpenKeys={['sub1']}
|
||||
style={{ height: '100%' }}
|
||||
>
|
||||
<SubMenu key="sub1" title={<span><Icon type="user" />subnav 1</span>}>
|
||||
<Menu.Item key="1">option1</Menu.Item>
|
||||
|
@ -37,7 +37,7 @@ The wrapper.
|
||||
|
||||
Property | Description | Type | Default
|
||||
-----|-----|-----|------
|
||||
style | to custom the styles | Object | -
|
||||
style | to custom the styles | object | -
|
||||
className | container className | string | -
|
||||
|
||||
> API of `Layout.Header` `Layout.Footer` `Layout.Content` is the same with `Layout`.
|
||||
@ -48,12 +48,12 @@ The sidebar.
|
||||
|
||||
Property | Description | Type | Default
|
||||
-----|-----|-----|------
|
||||
collapsible | whether can be collapsed | Boolean | false
|
||||
defaultCollapsed | to set the initial status | Boolean | false |
|
||||
collapsed | to set the current status | Boolean | -
|
||||
collapsible | whether can be collapsed | boolean | false
|
||||
defaultCollapsed | to set the initial status | boolean | false |
|
||||
collapsed | to set the current status | boolean | -
|
||||
onCollapse | the callback function, can be executed when you switch the sidebar, available only `collapsible: true` | (collapsed) => {} | -
|
||||
trigger | specify the customized trigger, set to null to hide the trigger | React.ReactNode or null | - |
|
||||
width | width of the sidebar | Number or String | 200
|
||||
collapsedWidth | width of the collapsed sidebar, available only `collapsible: true` | Number | 64
|
||||
style | to custom the styles | Object | -
|
||||
trigger | specify the customized trigger, set to null to hide the trigger | string\|ReactNode| - |
|
||||
width | width of the sidebar | number\|string | 200
|
||||
collapsedWidth | width of the collapsed sidebar, available only `collapsible: true` | number | 64
|
||||
style | to custom the styles | object | -
|
||||
className | container className | string | -
|
||||
|
@ -38,7 +38,7 @@ title: Layout
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|------------------------------------------|-------------|-------|
|
||||
| style | 指定样式 | Object | - |
|
||||
| style | 指定样式 | object | - |
|
||||
| className | 容器 className | string | - |
|
||||
|
||||
> `Layout.Header` `Layout.Footer` `Layout.Content` API 与 `Layout` 相同
|
||||
@ -49,12 +49,12 @@ title: Layout
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|-----------------------------------------|------------|-------|
|
||||
| collapsible | 是否可收起 | Boolean | false |
|
||||
| defaultCollapsed | 是否默认收起 | Boolean | false |
|
||||
| collapsed | 当前收起状态 | Boolean | - |
|
||||
| collapsible | 是否可收起 | boolean | false |
|
||||
| defaultCollapsed | 是否默认收起 | boolean | false |
|
||||
| collapsed | 当前收起状态 | boolean | - |
|
||||
| onCollapse | 展开-收起时的回调函数,仅当 `collapsible:true` 时生效 | (collapsed) => {} | - |
|
||||
| trigger | 自定义 trigger,设置为 null 时隐藏 trigger | React.ReactNode or null | - |
|
||||
| width | 宽度 | Number or String | 200 |
|
||||
| collapsedWidth | 收缩宽度,仅当 `collapsible:true` 时生效 | Number | 64 |
|
||||
| style | 指定样式 | Object | - |
|
||||
| trigger | 自定义 trigger,设置为 null 时隐藏 trigger | string\|ReactNode | - |
|
||||
| width | 宽度 | number\|string | 200 |
|
||||
| collapsedWidth | 收缩宽度,仅当 `collapsible:true` 时生效 | number | 64 |
|
||||
| style | 指定样式 | object | - |
|
||||
| className | 容器 className | string | - |
|
||||
|
65
components/locale-provider/__tests__/index.test.js
Normal file
65
components/locale-provider/__tests__/index.test.js
Normal file
@ -0,0 +1,65 @@
|
||||
import React from 'react';
|
||||
import { mount } from 'enzyme';
|
||||
import moment from 'moment';
|
||||
import { LocaleProvider, Pagination, DatePicker, TimePicker, Calendar,
|
||||
Popconfirm, Table, Modal, Select, Transfer } from '../../';
|
||||
import enUS from '../en_US';
|
||||
import ptBR from '../pt_BR';
|
||||
import ruRU from '../ru_RU';
|
||||
import esES from '../es_ES';
|
||||
|
||||
const Option = Select.Option;
|
||||
const RangePicker = DatePicker.RangePicker;
|
||||
|
||||
const columns = [{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
filters: [{
|
||||
text: 'filter1',
|
||||
value: 'filter1',
|
||||
}],
|
||||
}, {
|
||||
title: 'Age',
|
||||
dataIndex: 'age',
|
||||
}];
|
||||
|
||||
const App = () => (
|
||||
<div>
|
||||
<Pagination defaultCurrent={1} total={50} showSizeChanger />
|
||||
<Select showSearch style={{ width: 200 }}>
|
||||
<Option value="jack">jack</Option>
|
||||
<Option value="lucy">lucy</Option>
|
||||
</Select>
|
||||
<DatePicker />
|
||||
<TimePicker />
|
||||
<RangePicker style={{ width: 200 }} />
|
||||
<Popconfirm title="Question?" visible>
|
||||
<a>Click to confirm</a>
|
||||
</Popconfirm>
|
||||
<Transfer
|
||||
dataSource={[]}
|
||||
showSearch
|
||||
targetKeys={[]}
|
||||
render={item => item.title}
|
||||
/>
|
||||
<Calendar fullscreen={false} value={moment()} />
|
||||
<Table dataSource={[]} columns={columns} />
|
||||
<Modal title="Locale Modal" visible>
|
||||
<p>Locale Modal</p>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
|
||||
describe('Locale Provider', () => {
|
||||
it('should display the text as locale changed', () => {
|
||||
[enUS, ptBR, ruRU, esES].forEach((locale) => {
|
||||
const wrapper = mount(
|
||||
<LocaleProvider locale={locale}>
|
||||
<App />
|
||||
</LocaleProvider>
|
||||
);
|
||||
const DatePickerPlaceholder = wrapper.find('.ant-calendar-picker-input').at(0).node.getAttribute('placeholder');
|
||||
expect(DatePickerPlaceholder).toBe(locale.DatePicker.lang.placeholder);
|
||||
});
|
||||
});
|
||||
});
|
@ -32,4 +32,4 @@ This component aims for localization of the built-in text, if you want to suppor
|
||||
|
||||
Property | Description | Type | Default
|
||||
-----|-----|-----|------
|
||||
locale | language package setting, you can find the packages in this path: `antd/lib/locale-provider/` | Object | -
|
||||
locale | language package setting, you can find the packages in this path: `antd/lib/locale-provider/` | object | -
|
||||
|
@ -33,4 +33,4 @@ We supply an English locale package. Other language users can create a locale pa
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|--------|----------------|------------------|--------------|
|
||||
| locale | 语言包配置,语言包可到 `antd/lib/locale-provider/` 目录下寻找 | Object | - |
|
||||
| locale | 语言包配置,语言包可到 `antd/lib/locale-provider/` 目录下寻找 | object | - |
|
||||
|
@ -23,27 +23,27 @@ When need to mention someone or something.
|
||||
|
||||
| API | Description | Type |
|
||||
|----------|---------------|----------|--------------|
|
||||
| toString | convert EditorState to string | Function(editorState: EditorState): String |
|
||||
| toEditorState | convert string to EditorState | Function(string: String): EditorState |
|
||||
| getMentions | get mentioned people in current editorState | Function(editorState: EditorState): Array<String> |
|
||||
| toString | convert EditorState to string | Function(editorState: EditorState): string |
|
||||
| toEditorState | convert string to EditorState | Function(value: string): EditorState |
|
||||
| getMentions | get mentioned people in current editorState | Function(editorState: EditorState): string[] |
|
||||
|
||||
|
||||
### Mention props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|----------|---------------|----------|--------------|
|
||||
| suggestions | suggestion content | Array<string> or Array<Mention.Nav> | [] |
|
||||
| suggestionStyle | style of suggestion container | Object | {} |
|
||||
| onSearchChange | Callback function called when search content changes | function(value:String) | [] |
|
||||
| suggestions | suggestion content | Array<string\|Mention.Nav> | [] |
|
||||
| suggestionStyle | style of suggestion container | object | {} |
|
||||
| onSearchChange | Callback function called when search content changes | function(value:string) | [] |
|
||||
| onChange | Callback function called when content of input changes | function(editorState: EditorState) | null |
|
||||
| onSelect | Callback function called when select from suggestions | function(suggestion: String, data?: any) | null |
|
||||
| onSelect | Callback function called when select from suggestions | function(suggestion: string, data?: any) | null |
|
||||
| notFoundContent| suggestion when suggestions empty | string | '无匹配结果,轻敲空格完成输入' |
|
||||
| loading | loading mode | boolean | false |
|
||||
| multiLines | multilines mode | boolean | false |
|
||||
| prefix | character which will trigger Mention to show mention list | string | '@' |
|
||||
| defaultValue | default value | EditorState, you can use `Mention.toEditorState` to convert text to `EditorState` | null |
|
||||
| value | core state of mention | EditorState | null |
|
||||
| placeHolder | placeholder of input | string | null |
|
||||
| placeholder | placeholder of input | string | null |
|
||||
| getSuggestionContainer | rendered to the root of the menu. Default rendered to the body dom. If gets any problem of the menu while scrolling. Try to make the root the dom scrolled, and make it position relative. | Function() | () => document.body |
|
||||
| onFocus | Callback function called when mention component get focus | function() | null |
|
||||
| onBlur | Callback function called when mention component blur | function() | nul |
|
||||
@ -53,4 +53,4 @@ When need to mention someone or something.
|
||||
| Property | Description | Type | Default |
|
||||
|----------|---------------|----------|--------------|
|
||||
| value | value of suggestion,the value will insert into input filed while selected | string | "" |
|
||||
| children | suggestion content | Object | {} |
|
||||
| children | suggestion content | object | {} |
|
||||
|
@ -1,6 +1,7 @@
|
||||
import React from 'react';
|
||||
import RcMention, { Nav, toString, toEditorState, getMentions } from 'rc-editor-mention';
|
||||
import classNames from 'classnames';
|
||||
import shallowequal from 'shallowequal';
|
||||
import Icon from '../icon';
|
||||
|
||||
export interface MentionProps {
|
||||
@ -47,10 +48,12 @@ export default class Mention extends React.Component<MentionProps, MentionState>
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
this.setState({
|
||||
suggestions: nextProps.suggestions,
|
||||
});
|
||||
componentWillReceiveProps({ suggestions }) {
|
||||
if (!shallowequal(suggestions, this.props.suggestions)) {
|
||||
this.setState({
|
||||
suggestions,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onSearchChange = (value) => {
|
||||
@ -75,6 +78,7 @@ export default class Mention extends React.Component<MentionProps, MentionState>
|
||||
suggestions: filteredSuggestions,
|
||||
});
|
||||
}
|
||||
|
||||
onFocus = (ev) => {
|
||||
this.setState({
|
||||
focus: true,
|
||||
|
@ -24,24 +24,24 @@ title: Mention
|
||||
|
||||
| API | 说明 | 类型 |
|
||||
|----------|---------------|----------|
|
||||
| toString | 把 EditorState 转成字符串 | Function(editorState: EditorState): String |
|
||||
| toEditorState | 把字符串转成 EditorState | Function(string: String): EditorState |
|
||||
| getMentions | 获取当前 editorState 中提到的人的列表 | Function(editorState: EditorState): Array<String> |
|
||||
| toString | 把 EditorState 转成字符串 | Function(editorState: EditorState): string |
|
||||
| toEditorState | 把字符串转成 EditorState | Function(value: string): EditorState |
|
||||
| getMentions | 获取当前 editorState 中提到的人的列表 | Function(editorState: EditorState): string[] |
|
||||
|
||||
### Mention props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|---------------|----------|--------------|
|
||||
| suggestions | 建议内容 | Array<string> or Array<Mention.Nav> | [] |
|
||||
| suggestionStyle | 弹出下拉框样式 | Object | {} |
|
||||
| onSearchChange | 输入框中 @ 变化时回调 | function(value:String) | [] |
|
||||
| suggestions | 建议内容 | Array<string\|Mention.Nav> | [] |
|
||||
| suggestionStyle | 弹出下拉框样式 | object | {} |
|
||||
| onSearchChange | 输入框中 @ 变化时回调 | function(value:string) | [] |
|
||||
| onChange | 输入框内容变化时回调 | function(editorState: EditorState) | null |
|
||||
| onSelect | 下拉框选择建议时回调 | function(suggestion: String, data?: any) | null |
|
||||
| onSelect | 下拉框选择建议时回调 | function(suggestion: string, data?: any) | null |
|
||||
| notFoundContent| 未找到时的内容 | string | '无匹配结果,轻敲空格完成输入' |
|
||||
| loading | 加载中 | boolean | false |
|
||||
| multiLines | 多行模式 | boolean | false |
|
||||
| prefix | 触发弹出下拉框的字符 | string | '@' |
|
||||
| placeHolder | 输入框默认文字 | string | null |
|
||||
| placeholder | 输入框默认文字 | string | null |
|
||||
| defaultValue | 默认值 | EditorState, 可以用 Mention.toEditorState(text) 把文字转换成 EditorState | null |
|
||||
| value | 值 | EditorState | null |
|
||||
| getSuggestionContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位| Function() | () => document.body |
|
||||
@ -53,4 +53,4 @@ title: Mention
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|---------------|----------|--------------|
|
||||
| value | 建议值,选择建议时,用此值插入到输入框中 | string | "" |
|
||||
| children | 建议内容 | Object | {} |
|
||||
| children | 建议内容 | object | {} |
|
||||
|
@ -82,4 +82,20 @@ describe('Menu', () => {
|
||||
);
|
||||
expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
|
||||
});
|
||||
|
||||
// https://github.com/ant-design/ant-design/pulls/4677
|
||||
// https://github.com/ant-design/ant-design/issues/4692
|
||||
// TypeError: Cannot read property 'indexOf' of undefined
|
||||
it('pr #4677 and issue #4692', () => {
|
||||
const wrapper = mount(
|
||||
<Menu mode="horizontal">
|
||||
<SubMenu title="submenu">
|
||||
<Menu.Item key="1">menu1</Menu.Item>
|
||||
<Menu.Item key="2">menu2</Menu.Item>
|
||||
</SubMenu>
|
||||
</Menu>
|
||||
);
|
||||
wrapper.update();
|
||||
// just expect no error emit
|
||||
});
|
||||
});
|
||||
|
@ -28,17 +28,17 @@ More layout and samples: [layout](/docs/spec/layout).
|
||||
|
||||
| Param | Description | Type | Default value |
|
||||
|----------|---------------|----------|--------------|
|
||||
| theme | color of the theme | String: `light` `dark` | `light` |
|
||||
| mode | type of the menu; vertical, horizontal, and inline modes are supported | String: vertical horizontal inline | vertical |
|
||||
| selectedKeys | array with the keys of currently selected menu items | Array | |
|
||||
| defaultSelectedKeys | array with the keys of default selected menu items | Array | |
|
||||
| openKeys | array with the keys of currently opened sub menus | Array | |
|
||||
| theme | color of the theme | string: `light` `dark` | `light` |
|
||||
| mode | type of the menu; vertical, horizontal, and inline modes are supported | string: vertical horizontal inline | vertical |
|
||||
| selectedKeys | array with the keys of currently selected menu items | string[] | |
|
||||
| defaultSelectedKeys | array with the keys of default selected menu items | string[] | |
|
||||
| openKeys | array with the keys of currently opened sub menus | string[] | |
|
||||
| defaultOpenKeys | array with the keys of default opened sub menus | | |
|
||||
| onOpenChange | called when open/close sub menu | Function(openKeys: string[]) | noop |
|
||||
| onSelect | callback of the selected item | Function({ item, key, selectedKeys }) | none |
|
||||
| onDeselect | callback of the deselected item, only supported for multiple mode | Function({ item, key, selectedKeys }) | - |
|
||||
| onClick | callback of the clicked menu item, params: {item, key, keyPath} | function | - |
|
||||
| style | style of the root node | Object | |
|
||||
| style | style of the root node | object | |
|
||||
| inlineIndent | indent px of inline menu item on each level | number | 24 |
|
||||
|
||||
> More options in [rc-menu](https://github.com/react-component/menu#api)
|
||||
@ -47,24 +47,24 @@ More layout and samples: [layout](/docs/spec/layout).
|
||||
|
||||
| Param | Description | Type | Default value |
|
||||
|----------|----------------|----------|--------------|
|
||||
| disabled | disabled or not | Boolean | false |
|
||||
| key | unique id of the menu item | String | |
|
||||
| disabled | disabled or not | boolean | false |
|
||||
| key | unique id of the menu item | string | |
|
||||
|
||||
### Menu.SubMenu props
|
||||
|
||||
| Param | Description | Type | Default value |
|
||||
|----------|----------------|----------|--------------|
|
||||
| disabled | disabled or not | Boolean | false |
|
||||
| key | unique id of the menu item | String | |
|
||||
| title | title of the sub menu | String or React.Element | |
|
||||
| children | sub menus or sub menu items | (MenuItem or SubMenu)[] | |
|
||||
| disabled | disabled or not | boolean | false |
|
||||
| key | unique id of the menu item | string | |
|
||||
| title | title of the sub menu | string\|ReactNode | |
|
||||
| children | sub menus or sub menu items | Arrat<MenuItem\|SubMenu> | |
|
||||
| onTitleClick | callback of the clicked sub menu title | Function({ eventKey, domEvent }) | |
|
||||
|
||||
### Menu.ItemGroup props
|
||||
|
||||
| Param | Description | Type | Default value |
|
||||
|----------|----------------|----------|--------------|
|
||||
| title | title of the group | String or React.Element | |
|
||||
| title | title of the group | string\|ReactNode | |
|
||||
| children | sub menu items | MenuItem[] | |
|
||||
|
||||
### Menu.Divider
|
||||
|
@ -79,7 +79,7 @@ export default class Menu extends React.Component<MenuProps, any> {
|
||||
}
|
||||
|
||||
this.state = {
|
||||
openKeys,
|
||||
openKeys: openKeys || [],
|
||||
};
|
||||
}
|
||||
componentWillReceiveProps(nextProps) {
|
||||
|
@ -29,17 +29,17 @@ subtitle: 导航菜单
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|---------------|----------|--------------|
|
||||
| theme | 主题颜色 | String: `light` `dark` | `light` |
|
||||
| mode | 菜单类型,现在支持垂直、水平、和内嵌模式三种 | String: `vertical` `horizontal` `inline` | `vertical` |
|
||||
| selectedKeys | 当前选中的菜单项 key 数组 | Array | |
|
||||
| defaultSelectedKeys | 初始选中的菜单项 key 数组 | Array | |
|
||||
| openKeys | 当前展开的 SubMenu 菜单项 key 数组 | Array | |
|
||||
| theme | 主题颜色 | string: `light` `dark` | `light` |
|
||||
| mode | 菜单类型,现在支持垂直、水平、和内嵌模式三种 | string: `vertical` `horizontal` `inline` | `vertical` |
|
||||
| selectedKeys | 当前选中的菜单项 key 数组 | string[] | |
|
||||
| defaultSelectedKeys | 初始选中的菜单项 key 数组 | string[] | |
|
||||
| openKeys | 当前展开的 SubMenu 菜单项 key 数组 | string[] | |
|
||||
| defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | | |
|
||||
| onOpenChange | SubMenu 展开/关闭的回调 | Function(openKeys: string[]) | noop |
|
||||
| onSelect | 被选中时调 | Function({ item, key, selectedKeys }) | 无 |
|
||||
| onDeselect | 取消选中时调用,仅在 multiple 生效 | Function({ item, key, selectedKeys }) | - |
|
||||
| onClick | 点击 menuitem 调用此函数,参数为 {item, key, keyPath} | function | - |
|
||||
| style | 根节点样式 | Object | |
|
||||
| style | 根节点样式 | object | |
|
||||
| inlineIndent | inline 模式的菜单缩进宽度 | number | 24 |
|
||||
|
||||
> More options in [rc-menu](https://github.com/react-component/menu#api)
|
||||
@ -48,24 +48,24 @@ subtitle: 导航菜单
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|----------------|----------|--------------|
|
||||
| disabled | 是否禁用 | Boolean | false |
|
||||
| key | item 的唯一标志 | String | |
|
||||
| disabled | 是否禁用 | boolean | false |
|
||||
| key | item 的唯一标志 | string | |
|
||||
|
||||
### Menu.SubMenu props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|----------------|----------|--------------|
|
||||
| disabled | 是否禁用 | Boolean | false |
|
||||
| key | 唯一标志 | String | |
|
||||
| title | 子菜单项值 | String or React.Element | |
|
||||
| children | 子菜单的菜单项 | (MenuItem or SubMenu)[] | |
|
||||
| disabled | 是否禁用 | boolean | false |
|
||||
| key | 唯一标志 | string | |
|
||||
| title | 子菜单项值 | string\|ReactNode | |
|
||||
| children | 子菜单的菜单项 | Array<MenuItem\|SubMenu> | |
|
||||
| onTitleClick | 点击子菜单标题 | Function({ eventKey, domEvent }) | |
|
||||
|
||||
### Menu.ItemGroup props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|----------------|----------|--------------|
|
||||
| title | 分组标题 | String or React.Element | |
|
||||
| title | 分组标题 | string\|ReactNode | |
|
||||
| children | 分组的菜单项 | MenuItem[] | |
|
||||
|
||||
### Menu.Divider
|
||||
|
@ -25,7 +25,7 @@ This components provides 4 static methods, with arguments as following:
|
||||
|
||||
| Argument | Description | Type | Default |
|
||||
|------------|------------------------------------|--------------------------|--------------|
|
||||
| content | content of the message | React.Element or String | - |
|
||||
| content | content of the message | string\|ReactNode | - |
|
||||
| duration | time before auto-dismiss,in seconds | number | 1.5 |
|
||||
|
||||
Methods for global configuration and destruction are also provided:
|
||||
@ -42,5 +42,5 @@ message.config({
|
||||
|
||||
| Argument | Description | Type | Default |
|
||||
|------------|------------------------------------|--------------------------|-------------|
|
||||
| top | distance to top | Number | 24px |
|
||||
| duration | time before auto-dismiss,in seconds | Number | 1.5 |
|
||||
| top | distance to top | number | 24px |
|
||||
| duration | time before auto-dismiss,in seconds | number | 1.5 |
|
||||
|
@ -26,7 +26,7 @@ title: Message
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------------|----------------|--------------------------|--------------|
|
||||
| content | 提示内容 | React.Element or String | - |
|
||||
| content | 提示内容 | string\|ReactNode | - |
|
||||
| duration | 自动关闭的延时,单位秒 | number | 1.5 |
|
||||
|
||||
还提供了全局配置和全局销毁方法:
|
||||
@ -43,5 +43,5 @@ message.config({
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------------|--------------------|--------------------------|-------------|
|
||||
| top | 消息距离顶部的位置 | Number | 24px |
|
||||
| duration | 默认自动关闭延时,单位秒 | Number | 1.5 |
|
||||
| top | 消息距离顶部的位置 | number | 24px |
|
||||
| duration | 默认自动关闭延时,单位秒 | number | 1.5 |
|
||||
|
@ -18,19 +18,19 @@ and so on.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|------------|----------------|------------------|--------------|
|
||||
| visible | Determine whether a modal dialog is visible or not | Boolean | no |
|
||||
| confirmLoading | Determine whether to apply loading visual effect for OK button or not | Boolean | no |
|
||||
| title | The modal dialog's title | React.Element | no |
|
||||
| closable | Determine whether a close (x) button is visible on top right of the modal dialog or not | Boolean | true |
|
||||
| visible | Determine whether a modal dialog is visible or not | boolean | no |
|
||||
| confirmLoading | Determine whether to apply loading visual effect for OK button or not | boolean | no |
|
||||
| title | The modal dialog's title | string\|ReactNode | no |
|
||||
| closable | Determine whether a close (x) button is visible on top right of the modal dialog or not | boolean | true |
|
||||
| onOk | Specify a function that will be called when a user clicked OK button | function | no |
|
||||
| onCancel | Specify a function that will be called when a user clicked mask, close button on top right or cancel button | function(e) | no |
|
||||
| width | Width of a modal dialog | String or Number | 520 |
|
||||
| footer | Footer content | React.Element | OK and cancel button |
|
||||
| okText | Text of the OK button | String | OK |
|
||||
| cancelText | Text of the Cancel button | String | Cancel |
|
||||
| maskClosable | Determine whether to close the modal dialog when clicked mask of it. | Boolean | true |
|
||||
| style | Style of floating layer, typically used at least for adjusting the position. | Object | - |
|
||||
| wrapClassName | The class name of the container of the modal dialog | String | - |
|
||||
| width | Width of a modal dialog | string\|number | 520 |
|
||||
| footer | Footer content | string\|ReactNode | OK and cancel button |
|
||||
| okText | Text of the OK button | string | OK |
|
||||
| cancelText | Text of the Cancel button | string | Cancel |
|
||||
| maskClosable | Determine whether to close the modal dialog when clicked mask of it. | boolean | true |
|
||||
| style | Style of floating layer, typically used at least for adjusting the position. | object | - |
|
||||
| wrapClassName | The class name of the container of the modal dialog | string | - |
|
||||
| afterClose | Specify a function that will be called when modal is closed completely. | function | - |
|
||||
|
||||
#### Destroy on close
|
||||
@ -57,14 +57,14 @@ The properties of the object are follows:
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|------------|----------------|------------------|---------------|
|
||||
| title | Title | React.Element or String | no |
|
||||
| content | Content | React.Element or String | no |
|
||||
| title | Title | string\|ReactNode | no |
|
||||
| content | Content | string\|ReactNode | no |
|
||||
| onOk | Specify a function that will be called when a user clicked OK button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function | no |
|
||||
| onCancel | Specify a function that will be called when a user clicked Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function | no |
|
||||
| width | Width of dialog | String or Number | 416 |
|
||||
| iconType | Type of Icon component | String | question-circle |
|
||||
| okText | Text of OK button | String | OK |
|
||||
| cancelText | Text of cancel button | String | Cancel |
|
||||
| width | Width of dialog | string\|number | 416 |
|
||||
| iconType | Type of Icon component | string | question-circle |
|
||||
| okText | Text of OK button | string | OK |
|
||||
| cancelText | Text of cancel button | string | Cancel |
|
||||
| maskClosable | Determine whether to close the modal dialog when clicked mask of it. | Boolean | `false` |
|
||||
|
||||
<style>
|
||||
|
@ -17,19 +17,19 @@ title: Modal
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------------|----------------|------------------|--------------|
|
||||
| visible | 对话框是否可见 | Boolean | 无 |
|
||||
| confirmLoading | 确定按钮 loading | Boolean | 无 |
|
||||
| title | 标题 | React.Element | 无 |
|
||||
| closable | 是否显示右上角的关闭按钮 | Boolean | true |
|
||||
| visible | 对话框是否可见 | boolean | 无 |
|
||||
| confirmLoading | 确定按钮 loading | boolean | 无 |
|
||||
| title | 标题 | string\|ReactNode | 无 |
|
||||
| closable | 是否显示右上角的关闭按钮 | boolean | true |
|
||||
| onOk | 点击确定回调 | function | 无 |
|
||||
| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | 无 |
|
||||
| width | 宽度 | String or Number | 520 |
|
||||
| footer | 底部内容 | React.Element | 确定取消按钮 |
|
||||
| okText | 确认按钮文字 | String | 确定 |
|
||||
| cancelText | 取消按钮文字 | String | 取消 |
|
||||
| maskClosable | 点击蒙层是否允许关闭 | Boolean | true |
|
||||
| style | 可用于设置浮层的样式,调整浮层位置等 | Object | - |
|
||||
| wrapClassName | 对话框外层容器的类名 | String | - |
|
||||
| width | 宽度 | string\|number | 520 |
|
||||
| footer | 底部内容 | string\|ReactNode | 确定取消按钮 |
|
||||
| okText | 确认按钮文字 | string | 确定 |
|
||||
| cancelText | 取消按钮文字 | string | 取消 |
|
||||
| maskClosable | 点击蒙层是否允许关闭 | boolean | true |
|
||||
| style | 可用于设置浮层的样式,调整浮层位置等 | object | - |
|
||||
| wrapClassName | 对话框外层容器的类名 | string | - |
|
||||
| afterClose | Modal 完全关闭后的回调 | function | 无 |
|
||||
|
||||
#### 清空旧数据
|
||||
@ -55,14 +55,14 @@ title: Modal
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------------|----------------|------------------|--------------|
|
||||
| title | 标题 | React.Element or String | 无 |
|
||||
| content | 内容 | React.Element or String | 无 |
|
||||
| title | 标题 | string\|ReactNode | 无 |
|
||||
| content | 内容 | string\|ReactNode | 无 |
|
||||
| onOk | 点击确定回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 | function | 无 |
|
||||
| onCancel | 取消回调,参数为关闭函数,返回 promise 时 resolve 后自动关闭 | function | 无 |
|
||||
| width | 宽度 | String or Number | 416 |
|
||||
| iconType | 图标 Icon 类型 | String | question-circle |
|
||||
| okText | 确认按钮文字 | String | 确定 |
|
||||
| cancelText | 取消按钮文字 | String | 取消 |
|
||||
| width | 宽度 | string\|number | 416 |
|
||||
| iconType | 图标 Icon 类型 | string | question-circle |
|
||||
| okText | 确认按钮文字 | string | 确定 |
|
||||
| cancelText | 取消按钮文字 | string | 取消 |
|
||||
| maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` |
|
||||
|
||||
<style>
|
||||
|
@ -30,11 +30,11 @@ The properties of config are as follows:
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|----------- |--------------------------------------------- | ----------- |--------|
|
||||
| message | The title of notification box (required) | React.Node | - |
|
||||
| description | The content of notification box (required) | React.Node | - |
|
||||
| btn | Customized close button | React.Node | - |
|
||||
| icon | Customized icon | React.Node | _ |
|
||||
| key | The unique identifier of current notification | String | - |
|
||||
| message | The title of notification box (required) | string\|ReactNode | - |
|
||||
| description | The content of notification box (required) | string\|ReactNode | - |
|
||||
| btn | Customized close button | ReactNode | - |
|
||||
| icon | Customized icon | ReactNode | _ |
|
||||
| key | The unique identifier of current notification | string | - |
|
||||
| onClose | Specify a function that will be called after clicking the default close button | Function | - |
|
||||
| duration | A notification box is closed after 4.5s by default. When specifying `duration` to null or 0, it will never be closed automatically | number | 4.5 |
|
||||
| placement | To set the position, which can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | topRight |
|
||||
@ -58,4 +58,3 @@ notification.config({
|
||||
| top | Offset to top, when message pop up from `topRight` or `topLeft` (unit: pixels). | number | 24 |
|
||||
| bottom | Offset to bottom, when message pop up from `bottomRight` or `bottomLeft` (unit: pixels). | number | 24 |
|
||||
| duration | A duration to close notification automatically by default (unit: second) | number | 4.5 |
|
||||
|
||||
|
@ -45,8 +45,8 @@ function getPlacementStyle(placement) {
|
||||
}
|
||||
|
||||
export interface ArgsProps {
|
||||
message: React.ReactNode | string;
|
||||
description: React.ReactNode | string;
|
||||
message: React.ReactNode;
|
||||
description: React.ReactNode;
|
||||
btn?: React.ReactNode;
|
||||
key?: string;
|
||||
onClose?: () => void;
|
||||
|
@ -30,11 +30,11 @@ config 参数如下:
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------- |--------------------------------------------- | ----------- |--------|
|
||||
| message | 通知提醒标题,必选 | React.Node | - |
|
||||
| description | 通知提醒内容,必选 | React.Node | - |
|
||||
| btn | 自定义关闭按钮 | React.Node | - |
|
||||
| icon | 自定义图标 | React.Node | - |
|
||||
| key | 当前通知唯一标志 | String | - |
|
||||
| message | 通知提醒标题,必选 | string\|ReactNode | - |
|
||||
| description | 通知提醒内容,必选 | string\|ReactNode | - |
|
||||
| btn | 自定义关闭按钮 | ReactNode | - |
|
||||
| icon | 自定义图标 | ReactNode | - |
|
||||
| key | 当前通知唯一标志 | string | - |
|
||||
| onClose | 点击默认关闭按钮时触发的回调函数 | Function | - |
|
||||
| duration | 默认 4.5 秒后自动关闭,配置为 null 则不自动关闭 | number | 4.5 |
|
||||
| placement | 弹出位置,可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | topRight |
|
||||
|
@ -19,16 +19,16 @@ A long list can be divided into several pages by `Pagination`, and only one page
|
||||
|
||||
Property | Description | Type | Default
|
||||
-----|-----|-----|------
|
||||
current | current page number | Number | -
|
||||
defaultCurrent | default current page number | Number | 1
|
||||
total | total number of data | Number | 0
|
||||
defaultPageSize | default number of data per page | Number | 10
|
||||
pageSize | number of data per page | Number | -
|
||||
current | current page number | number | -
|
||||
defaultCurrent | default current page number | number | 1
|
||||
total | total number of data | number | 0
|
||||
defaultPageSize | default number of data per page | number | 10
|
||||
pageSize | number of data per page | number | -
|
||||
onChange | a callback function, can be executed when the page number is changing, and it takes the resulting page number as an argument | Function(page) | noop
|
||||
showSizeChanger | determine whether `pageSize` can be changed | Boolean | false
|
||||
pageSizeOptions | specify the sizeChanger selections | Array | ['10', '20', '30', '40']
|
||||
showSizeChanger | determine whether `pageSize` can be changed | boolean | false
|
||||
pageSizeOptions | specify the sizeChanger selections | string[] | ['10', '20', '30', '40']
|
||||
onShowSizeChange | a callback function, can be executed when `pageSize` is changing | Function(current, size) | noop
|
||||
showQuickJumper | determine whether you can jump to a page directly | Boolean | false
|
||||
size | specify the size of `Pagination`, can be set to `small` | String | ""
|
||||
simple | whether to use simple mode | Object | -
|
||||
showQuickJumper | determine whether you can jump to a page directly | boolean | false
|
||||
size | specify the size of `Pagination`, can be set to `small` | string | ""
|
||||
simple | whether to use simple mode | object | -
|
||||
showTotal | to display the total number and range | Function(total, range) | -
|
||||
|
@ -20,16 +20,16 @@ title: Pagination
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------------------|------------------------------------|---------------|--------------------------|
|
||||
| current | 当前页数 | Number | - |
|
||||
| defaultCurrent | 默认的当前页数 | Number | 1 |
|
||||
| total | 数据总数 | Number | 0 |
|
||||
| defaultPageSize | 默认的每页条数 | Number | 10 |
|
||||
| pageSize | 每页条数 | Number | - |
|
||||
| current | 当前页数 | number | - |
|
||||
| defaultCurrent | 默认的当前页数 | number | 1 |
|
||||
| total | 数据总数 | number | 0 |
|
||||
| defaultPageSize | 默认的每页条数 | number | 10 |
|
||||
| pageSize | 每页条数 | number | - |
|
||||
| onChange | 页码改变的回调,参数是改变后的页码 | Function(page) | noop |
|
||||
| showSizeChanger | 是否可以改变 pageSize | Boolean | false |
|
||||
| pageSizeOptions | 指定每页可以显示多少条 | Array<String> | ['10', '20', '30', '40'] |
|
||||
| showSizeChanger | 是否可以改变 pageSize | boolean | false |
|
||||
| pageSizeOptions | 指定每页可以显示多少条 | string[] | ['10', '20', '30', '40'] |
|
||||
| onShowSizeChange | pageSize 变化的回调 | Function(current, size) | noop |
|
||||
| showQuickJumper | 是否可以快速跳转至某页 | Boolean | false |
|
||||
| size | 当为「small」时,是小尺寸分页 | String | "" |
|
||||
| simple | 当添加该属性时,显示为简单分页 | Object | - |
|
||||
| showQuickJumper | 是否可以快速跳转至某页 | boolean | false |
|
||||
| size | 当为「small」时,是小尺寸分页 | string | "" |
|
||||
| simple | 当添加该属性时,显示为简单分页 | object | - |
|
||||
| showTotal | 用于显示数据总量和当前数据顺序 | Function(total, range) | - |
|
||||
|
@ -1,2 +0,0 @@
|
||||
import en_US from 'rc-pagination/lib/locale/en_US';
|
||||
export default en_US;
|
@ -16,10 +16,14 @@ The difference with `confirm` is more lightweight than the static popped full-sc
|
||||
|
||||
| Param | Description | Type | Default value |
|
||||
|-----------|------------------------------------------|---------------|--------|
|
||||
| title | title of the confirmation box | React.Element | none |
|
||||
| title | title of the confirmation box | string\|ReactNode | none |
|
||||
| onConfirm | callback of confirmation | function | none |
|
||||
| onCancel | callback of cancel | function | none |
|
||||
| okText | text of the confirmation button | String | Confirm |
|
||||
| cancelText| text of the cancel button | String | Cancel |
|
||||
| okText | text of the confirmation button | string | Confirm |
|
||||
| cancelText| text of the cancel button | string | Cancel |
|
||||
|
||||
Consult [Tooltip's documentation](https://ant.design/components/tooltip/#API) to find more APIs.
|
||||
|
||||
## Note
|
||||
|
||||
Please ensure that the child node of `Popconfirm` accepts `onMouseEnter`, `onMouseLeave`, `onFocus`, `onClick` event.
|
||||
|
@ -17,10 +17,14 @@ title: Popconfirm
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|------------------------------------------|---------------|--------|
|
||||
| title | 确认框的描述 | React.Element | 无 |
|
||||
| title | 确认框的描述 | string\|ReactNode | 无 |
|
||||
| onConfirm | 点击确认的回调 | function | 无 |
|
||||
| onCancel | 点击取消的回调 | function | 无 |
|
||||
| okText | 确认按钮文字 | String | 确定 |
|
||||
| cancelText| 取消按钮文字 | String | 取消 |
|
||||
| okText | 确认按钮文字 | string | 确定 |
|
||||
| cancelText| 取消按钮文字 | string | 取消 |
|
||||
|
||||
更多属性请参考 [Tooltip](/components/tooltip-cn/#API)。
|
||||
|
||||
## 注意
|
||||
|
||||
请确保 `Popconfirm` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
|
||||
|
@ -32,7 +32,7 @@ exports[`test renders ./components/popover/demo/control.md correctly 1`] = `
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="button">
|
||||
<span>
|
||||
Cilck me
|
||||
Click me
|
||||
</span>
|
||||
</button>
|
||||
`;
|
||||
|
@ -39,7 +39,7 @@ const App = React.createClass({
|
||||
visible={this.state.visible}
|
||||
onVisibleChange={this.handleVisibleChange}
|
||||
>
|
||||
<Button type="primary">Cilck me</Button>
|
||||
<Button type="primary">Click me</Button>
|
||||
</Popover>
|
||||
);
|
||||
},
|
||||
|
@ -16,7 +16,11 @@ Comparing with `Tooltip`, besides information `Popover` card can also provide ac
|
||||
|
||||
| Param | Description | Type | Default value |
|
||||
|-----------|------------------------------------------|---------------|--------|
|
||||
| title | title of the card | React.Element | none |
|
||||
| content | content of the card | React.Element | none |
|
||||
| title | title of the card | string\|ReactNode | none |
|
||||
| content | content of the card | string\|ReactNode | none |
|
||||
|
||||
Consult [Tooltip's documentation](https://ant.design/components/tooltip/#API) to find more APIs.
|
||||
|
||||
## Note
|
||||
|
||||
Please ensure that the child node of `Popover` accepts `onMouseEnter`, `onMouseLeave`, `onFocus`, `onClick` event.
|
||||
|
@ -17,7 +17,12 @@ title: Popover
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|------------------------------------------|---------------|--------|
|
||||
| title | 卡片标题 | React.Element | 无 |
|
||||
| content | 卡片内容 | React.Element | 无 |
|
||||
| title | 卡片标题 | string\|ReactNode | 无 |
|
||||
| content | 卡片内容 | string\|ReactNode | 无 |
|
||||
|
||||
更多属性请参考 [Tooltip](/components/tooltip-cn/#API)。
|
||||
|
||||
|
||||
## 注意
|
||||
|
||||
请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
|
||||
|
@ -17,12 +17,12 @@ If it will take a long time to complete the operation, you can use `Progress` to
|
||||
|
||||
Property | Description | Type | Default
|
||||
-----|-----|-----|------
|
||||
type | to set the type, options: `line` `circle` | String | line
|
||||
percent | to set the completion percentage | Number | 0
|
||||
type | to set the type, options: `line` `circle` | string | line
|
||||
percent | to set the completion percentage | number | 0
|
||||
format | template function of the content | function(percent) | `percent => percent + '%'`
|
||||
status | to set the status of the progress, options: `success` `exception` `active` | String | -
|
||||
showInfo | determine whether to display the progress value and the status icon | Boolean | true
|
||||
strokeWidth `(type=line)` | to set the width of the progress bar, unit: `px` | Number | 10
|
||||
strokeWidth `(type=circle)` | to set the width of the circular progress bar, unit: percentage of the canvas width | Number | 6
|
||||
width `(type=circle)` | to set the canvas width of the circular progress bar, unit: `px` | Number | 132
|
||||
status | to set the status of the progress, options: `success` `exception` `active` | string | -
|
||||
showInfo | determine whether to display the progress value and the status icon | boolean | true
|
||||
strokeWidth `(type=line)` | to set the width of the progress bar, unit: `px` | number | 10
|
||||
strokeWidth `(type=circle)` | to set the width of the circular progress bar, unit: percentage of the canvas width | number | 6
|
||||
width `(type=circle)` | to set the canvas width of the circular progress bar, unit: `px` | number | 132
|
||||
|
||||
|
@ -19,11 +19,11 @@ title: Progress
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
|----------|---------------|----------|---------------|
|
||||
| type | 类型,可选 `line` `circle` | String | line |
|
||||
| percent | 百分比 | Number | 0 |
|
||||
| type | 类型,可选 `line` `circle` | string | line |
|
||||
| percent | 百分比 | number | 0 |
|
||||
| format | 内容的模板函数 | function(percent) | `percent => percent + '%'` |
|
||||
| status | 状态,可选:`success` `exception` `active` | String | - |
|
||||
| showInfo | 是否显示进度数值或状态图标 | Boolean | true |
|
||||
| strokeWidth `(type=line)` | 进度条线的宽度,单位 px | Number | 10 |
|
||||
| strokeWidth `(type=circle)` | 圆形进度条线的宽度,单位是进度条画布宽度的百分比 | Number | 6 |
|
||||
| width `(type=circle)` | 圆形进度条画布宽度,单位 px | Number | 132 |
|
||||
| status | 状态,可选:`success` `exception` `active` | string | - |
|
||||
| showInfo | 是否显示进度数值或状态图标 | boolean | true |
|
||||
| strokeWidth `(type=line)` | 进度条线的宽度,单位 px | number | 10 |
|
||||
| strokeWidth `(type=circle)` | 圆形进度条线的宽度,单位是进度条画布宽度的百分比 | number | 6 |
|
||||
| width `(type=circle)` | 圆形进度条画布宽度,单位 px | number | 132 |
|
||||
|
@ -17,8 +17,8 @@ Radio.
|
||||
|
||||
| Property | Description | Type | optional | Default |
|
||||
|----------------|------------------------------------------|------------|---------|--------|
|
||||
| checked | Specifies whether the radio is selected. | Boolean | false |
|
||||
| defaultChecked | Specifies the initial state: whether or not the radio is selected. | Boolean | false |
|
||||
| checked | Specifies whether the radio is selected. | boolean | | false |
|
||||
| defaultChecked | Specifies the initial state: whether or not the radio is selected. | boolean | | false |
|
||||
| value | According to value for comparison, to determine whether the selected | any | | none |
|
||||
|
||||
### RadioGroup
|
||||
@ -30,4 +30,4 @@ radio group,wrap a group of `Radio`。
|
||||
| onChange | The callback function that is triggered when the state changes. | Function(e:Event) | none | none |
|
||||
| value | Used for setting the currently selected value. | any | none | none |
|
||||
| defaultValue | Default selected value | any | none | none |
|
||||
| size | Size, only on radio style | String | `large` `default` `small` | `default` |
|
||||
| size | Size, only on radio style | string | `large` `default` `small` | `default` |
|
||||
|
@ -18,8 +18,8 @@ title: Radio
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|----------------|------------------------------------------|------------|---------|--------|
|
||||
| checked | 指定当前是否选中 | Boolean | | false |
|
||||
| defaultChecked | 初始是否选中 | Boolean | | false |
|
||||
| checked | 指定当前是否选中 | boolean | | false |
|
||||
| defaultChecked | 初始是否选中 | boolean | | false |
|
||||
| value | 根据 value 进行比较,判断是否选中 | any | | 无 |
|
||||
|
||||
### RadioGroup
|
||||
@ -31,4 +31,4 @@ title: Radio
|
||||
| onChange | 选项变化时的回调函数 | Function(e:Event) | 无 | 无 |
|
||||
| value | 用于设置当前选中的值 | any | 无 | 无 |
|
||||
| defaultValue | 默认选中的值 | any | 无 | 无 |
|
||||
| size | 大小,只对按钮样式生效 | String | `large` `default` `small` | `default` |
|
||||
| size | 大小,只对按钮样式生效 | string | `large` `default` `small` | `default` |
|
||||
|
@ -15,9 +15,9 @@ Rate component.
|
||||
|
||||
| Property | Description | type | Default |
|
||||
|------------|----------------|-------------------|-------------|
|
||||
| count | star count | Number | 5 |
|
||||
| value | current value | Number | - |
|
||||
| defaultValue | default value | Number | 0 |
|
||||
| onChange | callback | Function(value: Number) | - |
|
||||
| allowHalf | whether to allow semi selection | Boolean | false |
|
||||
| disabled | read only, unable to interact | Boolean | false |
|
||||
| count | star count | number | 5 |
|
||||
| value | current value | number | - |
|
||||
| defaultValue | default value | number | 0 |
|
||||
| onChange | callback | Function(value: number) | - |
|
||||
| allowHalf | whether to allow semi selection | boolean | false |
|
||||
| disabled | read only, unable to interact | boolean | false |
|
||||
|
@ -16,9 +16,9 @@ title: Rate
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
|------------|----------------|-------------------|-------------|
|
||||
| count | star 总数 | Number | 5 |
|
||||
| value | 当前数,受控值 | Number | - |
|
||||
| defaultValue | 默认值 | Number | 0 |
|
||||
| onChange | 回调 | Function(value: Number) | - |
|
||||
| allowHalf | 是否允许半选 | Boolean | false |
|
||||
| disabled | 只读,无法进行交互 | Boolean | false |
|
||||
| count | star 总数 | number | 5 |
|
||||
| value | 当前数,受控值 | number | - |
|
||||
| defaultValue | 默认值 | number | 0 |
|
||||
| onChange | 回调 | Function(value: number) | - |
|
||||
| allowHalf | 是否允许半选 | boolean | false |
|
||||
| disabled | 只读,无法进行交互 | boolean | false |
|
||||
|
@ -23,8 +23,8 @@ A Selector similar to Select2.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|----------|----------------|----------|--------------|
|
||||
| value | Current selected option. | string/Array<String> | - |
|
||||
| defaultValue | Initial selected option. | string/Array<String> | - |
|
||||
| value | Current selected option. | string\|string[] | - |
|
||||
| defaultValue | Initial selected option. | string\|string[] | - |
|
||||
| multiple | Allow multiple select. | boolean | false |
|
||||
| allowClear | Show clear button, working in single mode only. | boolean | false |
|
||||
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true |
|
||||
@ -32,7 +32,7 @@ A Selector similar to Select2.
|
||||
| onSelect | Called when a option is selected, the params are option's value (or key) and option instance. | function(value, option) | - |
|
||||
| onDeselect | Called when a option is deselected, the params are option's value (or key) . only called for multiple or tags, effective in multiple or tags mode only. | function(value) | - |
|
||||
| onChange | Called when select an option or input value change, or value of input is changed in combobox mode | function(value, label) | - |
|
||||
| onSearch | Callback function that is fired when input changed. | function(value: String) | |
|
||||
| onSearch | Callback function that is fired when input changed. | function(value: string) | |
|
||||
| onBlur | Called when blur | function | - |
|
||||
| onFocus | Called when focus | function | - |
|
||||
| placeholder | Placeholder of select | string | - |
|
||||
@ -41,29 +41,29 @@ A Selector similar to Select2.
|
||||
| optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | value |
|
||||
| optionLabelProp | Which prop value of option will render as content of select. | string | `children` |
|
||||
| combobox | Enable combobox mode(can not set multiple at the same time). | boolean | false |
|
||||
| size | Size of Select input. `large` `small` | String | default |
|
||||
| size | Size of Select input. `large` `small` | string | default |
|
||||
| showSearch | Whether show search input in single mode.| boolean | false |
|
||||
| disabled | Whether disabled select | boolean | false |
|
||||
| defaultActiveFirstOption | Whether active first option by default | boolean | true |
|
||||
| dropdownStyle | style of dropdown menu | object | - |
|
||||
| dropdownClassName | className of dropdown menu | string | - |
|
||||
| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative.[example](http://codepen.io/anon/pen/xVBOVQ?editors=001) | function(triggerNode) | () => document.body |
|
||||
| labelInValue | whether to embed label in value, turn the format of value from `string` to `{key: String, label: React.Node}` | boolean | false |
|
||||
| tokenSeparators | Separator used to tokenize on tag/multiple mode | string[]? | |
|
||||
| labelInValue | whether to embed label in value, turn the format of value from `string` to `{key: string, label: ReactNode}` | boolean | false |
|
||||
| tokenSeparators | Separator used to tokenize on tag/multiple mode | string[] | |
|
||||
|
||||
|
||||
### Option props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|----------|----------------|----------|--------------|
|
||||
| disabled | Disable this option | Boolean | false |
|
||||
| value | default to filter with this property | String | - |
|
||||
| key | Same usage as `value`. If React request you to set this property, you can set it to value of option, and then omit value property. | String | |
|
||||
| title | `title` of Select after select this Option | String | - |
|
||||
| disabled | Disable this option | boolean | false |
|
||||
| value | default to filter with this property | string | - |
|
||||
| key | Same usage as `value`. If React request you to set this property, you can set it to value of option, and then omit value property. | string | |
|
||||
| title | `title` of Select after select this Option | string | - |
|
||||
|
||||
### OptGroup props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|----------|----------------|----------|-----------------|
|
||||
| label | Group label | String/React.Element | - |
|
||||
| key | | String | - |
|
||||
| label | Group label | string\|React.Element | - |
|
||||
| key | | string | - |
|
||||
|
@ -24,8 +24,8 @@ title: Select
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|----------------|----------|--------------|
|
||||
| value | 指定当前选中的条目 | string/Array<String> | - |
|
||||
| defaultValue | 指定默认选中的条目 | string/Array<String> | - |
|
||||
| value | 指定当前选中的条目 | string\|string[] | - |
|
||||
| defaultValue | 指定默认选中的条目 | string\|string[] | - |
|
||||
| multiple | 支持多选 | boolean | false |
|
||||
| allowClear | 支持清除, 单选模式有效 | boolean | false |
|
||||
| filterOption | 是否根据输入项进行筛选。当其为一个函数时,会接收 `inputValue` `option` 两个参数,当 `option` 符合筛选条件时,应返回 `true`,反之则返回 `false`。 | boolean or function(inputValue, option) | true |
|
||||
@ -33,7 +33,7 @@ title: Select
|
||||
| onSelect | 被选中时调用,参数为选中项的 value (或 key) 值 | function(value, option) | - |
|
||||
| onDeselect | 取消选中时调用,参数为选中项的 value (或 key) 值,仅在 multiple 或 tags 模式下生效 | function(value) | - |
|
||||
| onChange | 选中 option,或 input 的 value 变化(combobox 模式下)时,调用此函数 | function(value) | - |
|
||||
| onSearch | 文本框值变化时回调 | function(value: String) | |
|
||||
| onSearch | 文本框值变化时回调 | function(value: string) | |
|
||||
| onBlur | 失去焦点的时回调 | function | - |
|
||||
| onFocus | 获得焦点时回调 | function | - |
|
||||
| placeholder | 选择框默认文字 | string | - |
|
||||
@ -42,28 +42,28 @@ title: Select
|
||||
| optionFilterProp | 搜索时过滤对应的 option 属性,如设置为 children 表示对内嵌内容进行搜索 | string | value |
|
||||
| optionLabelProp | 回填到选择框的 Option 的属性值,默认是 Option 的子元素。比如在子元素需要高亮效果时,此值可以设为 `value`。 | string | `children` (combobox 模式下为 `value`) |
|
||||
| combobox | 输入框自动提示模式 | boolean | false |
|
||||
| size | 选择框大小,可选 `large` `small` | String | default |
|
||||
| size | 选择框大小,可选 `large` `small` | string | default |
|
||||
| showSearch | 在选择框中显示搜索框 | boolean | false |
|
||||
| disabled | 是否禁用 | boolean | false |
|
||||
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true
|
||||
| dropdownStyle | 下拉菜单的 style 属性 | object | - |
|
||||
| dropdownClassName | 下拉菜单的 className 属性 | string | - |
|
||||
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。[示例](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body |
|
||||
| labelInValue | 是否把每个选项的 label 包装到 value 中,会把 Select 的 value 类型从 `string` 变为 `{key: String, label: React.Node}` 的格式 | boolean | false |
|
||||
| tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string[]? | |
|
||||
| labelInValue | 是否把每个选项的 label 包装到 value 中,会把 Select 的 value 类型从 `string` 变为 `{key: string, label: ReactNode}` 的格式 | boolean | false |
|
||||
| tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string[] | |
|
||||
|
||||
### Option props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|----------------|----------|--------------|
|
||||
| disabled | 是否禁用 | Boolean | false |
|
||||
| value | 默认根据此属性值进行筛选 | String | - |
|
||||
| key | 和 value 含义一致。如果 React 需要你设置此项,此项值与 value 的值相同,然后可以省略 value 设置 | String | |
|
||||
| title | 选中该 Option 后,Select 的 title | String | - |
|
||||
| disabled | 是否禁用 | boolean | false |
|
||||
| value | 默认根据此属性值进行筛选 | string | - |
|
||||
| key | 和 value 含义一致。如果 React 需要你设置此项,此项值与 value 的值相同,然后可以省略 value 设置 | string | |
|
||||
| title | 选中该 Option 后,Select 的 title | string | - |
|
||||
|
||||
### OptGroup props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|----------------|----------|-----------------|
|
||||
| label | 组名 | String/React.Element | 无 |
|
||||
| key | | String | - |
|
||||
| label | 组名 | string\|React.Element | 无 |
|
||||
| key | | string | - |
|
||||
|
@ -147,7 +147,7 @@
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
line-height: 26px;
|
||||
line-height: @input-height-base - 2px;
|
||||
// https://github.com/ant-design/ant-design/issues/3481#issuecomment-254721026
|
||||
&:after {
|
||||
content: '.';
|
||||
@ -163,14 +163,14 @@
|
||||
height: @input-height-lg;
|
||||
}
|
||||
.@{select-prefix-cls}-selection__rendered {
|
||||
line-height: 30px;
|
||||
line-height: @input-height-lg - 2px;
|
||||
}
|
||||
.@{select-prefix-cls}-selection--multiple {
|
||||
min-height: @input-height-lg;
|
||||
.@{select-prefix-cls}-selection__rendered {
|
||||
li {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
height: @input-height-lg - 8px;
|
||||
line-height: @input-height-lg - 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -184,14 +184,14 @@
|
||||
height: @input-height-sm;
|
||||
}
|
||||
.@{select-prefix-cls}-selection__rendered {
|
||||
line-height: 20px;
|
||||
line-height: @input-height-sm - 2px;
|
||||
}
|
||||
.@{select-prefix-cls}-selection--multiple {
|
||||
min-height: @input-height-sm;
|
||||
.@{select-prefix-cls}-selection__rendered {
|
||||
li {
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
height: @input-height-sm - 8px;
|
||||
line-height: @input-height-sm - 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -290,8 +290,8 @@
|
||||
> ul > li,
|
||||
.@{select-prefix-cls}-selection__rendered > ul > li { // for tree-select
|
||||
margin-top: 3px;
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
height: @input-height-base - 8px;
|
||||
line-height: @input-height-base - 8px;
|
||||
}
|
||||
|
||||
.@{select-prefix-cls}-selection__choice {
|
||||
|
@ -14,17 +14,17 @@ To input a value in a range.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
|------------|----------------|-------------|--------------|
|
||||
| range | dual thumb mode | Boolean | false
|
||||
| min | The minimum value the slider can slide to. | Number | 0
|
||||
| max | The maximum value the slider can slide to | Number | 100
|
||||
| step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be `null`. | Number or null | 1
|
||||
| marks | Tick mark of Slider, type of key must be `Number`, and must in closed interval [min, max] ,each mark can declare its own style. | Object{} | Object{Number: String or React.Component} or Object{Number: { style, label}}
|
||||
| dots | Whether the thumb can drag over tick only. | Boolean | false
|
||||
| value | The value of slider. When `range` is `false`, use `Number`, otherwise, use `[Number, Number]` | Number or [Number, Number] |
|
||||
| defaultValue | The default value of slider. When `range` is `false`, use `Number`, otherwise, use `[Number, Number]` | Number or [Number, Number] | 0 or [0, 0]
|
||||
| included | Make effect when `marks` not null,`true` means containment and `false` means coordinative | Boolean | true
|
||||
| disabled | If true, the slider will not be interactable. | Boolean | false
|
||||
| range | dual thumb mode | boolean | false
|
||||
| min | The minimum value the slider can slide to. | number | 0
|
||||
| max | The maximum value the slider can slide to | number | 100
|
||||
| step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be `null`. | number\|null | 1
|
||||
| marks | Tick mark of Slider, type of key must be `number`, and must in closed interval [min, max] ,each mark can declare its own style. | object | { number: string\|ReactNode } or { number: { style: object, label: string\|ReactNode } }
|
||||
| dots | Whether the thumb can drag over tick only. | boolean | false
|
||||
| value | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number[] |
|
||||
| defaultValue | The default value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number[] | 0 or [0, 0]
|
||||
| included | Make effect when `marks` not null,`true` means containment and `false` means coordinative | boolean | true
|
||||
| disabled | If true, the slider will not be interactable. | boolean | false
|
||||
| vertical | If true, the slider will be vertical. | Boolean | false
|
||||
| onChange | Callback function that is fired when the user changes the slider's value. | Function(value) | NOOP
|
||||
| onAfterChange | Fire when `onmouseup` is fired. | Function(value) | NOOP
|
||||
| tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | Function or null | IDENTITY
|
||||
| tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | Function\|null | IDENTITY
|
||||
|
@ -15,17 +15,17 @@ title: Slider
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------------|----------------|-------------|--------------|
|
||||
| range | 双滑块模式 | Boolean | false
|
||||
| min | 最小值 | Number | 0
|
||||
| max | 最大值 | Number | 100
|
||||
| step | 步长,取值必须大于 0,并且可被 (max - min) 整除。当 `marks` 不为空对象时,可以设置 `step` 为 `null`,此时 Slider 的可选值仅有 marks 标出来的部分。 | Number or null | 1
|
||||
| marks | 刻度标记,key 的类型必须为 `Number` 且取值在闭区间 [min, max] 内,每个标签可以单独设置样式 | Object{} | Object{Number: String or React.Component} or Object{Number: { style, label}}
|
||||
| dots | 是否只能拖拽到刻度上 | Boolean | false
|
||||
| value | 设置当前取值。当 `range` 为 `false` 时,使用 `Number`,否则用 `[Number, Number]` | Number or [Number, Number] |
|
||||
| defaultValue | 设置初始取值。当 `range` 为 `false` 时,使用 `Number`,否则用 `[Number, Number]` | Number or [Number, Number] | 0 or [0, 0]
|
||||
| included | `marks` 不为空对象时有效,值为 true 时表示值为包含关系,false 表示并列 | Boolean | true
|
||||
| disabled | 值为 `true` 时,滑块为禁用状态 | Boolean | false
|
||||
| range | 双滑块模式 | boolean | false
|
||||
| min | 最小值 | number | 0
|
||||
| max | 最大值 | number | 100
|
||||
| step | 步长,取值必须大于 0,并且可被 (max - min) 整除。当 `marks` 不为空对象时,可以设置 `step` 为 `null`,此时 Slider 的可选值仅有 marks 标出来的部分。 | number\|null | 1
|
||||
| marks | 刻度标记,key 的类型必须为 `number` 且取值在闭区间 [min, max] 内,每个标签可以单独设置样式 | object | { number: string\|ReactNode } or { number: { style: object, label: string\|ReactNode } }
|
||||
| dots | 是否只能拖拽到刻度上 | boolean | false
|
||||
| value | 设置当前取值。当 `range` 为 `false` 时,使用 `number`,否则用 `[number, number]` | number\|number[] |
|
||||
| defaultValue | 设置初始取值。当 `range` 为 `false` 时,使用 `number`,否则用 `[number, number]` | number\|number[] | 0 or [0, 0]
|
||||
| included | `marks` 不为空对象时有效,值为 true 时表示值为包含关系,false 表示并列 | boolean | true
|
||||
| disabled | 值为 `true` 时,滑块为禁用状态 | boolean | false
|
||||
| vertical | 值为 `true` 时,Slider 为垂直方向 | Boolean | false
|
||||
| onChange | 当 Slider 的值发生改变时,会触发 onChange 事件,并把改变后的值作为参数传入。 | Function(value) | NOOP
|
||||
| onAfterChange | 与 `onmouseup` 触发时机一致,把当前值作为参数传入。 | Function(value) | NOOP
|
||||
| tipFormatter | Slider 会把当前值传给 `tipFormatter`,并在 Tooltip 中显示 `tipFormatter` 的返回值,若为 null,则隐藏 Tooltip。 | Function or null | IDENTITY
|
||||
| tipFormatter | Slider 会把当前值传给 `tipFormatter`,并在 Tooltip 中显示 `tipFormatter` 的返回值,若为 null,则隐藏 Tooltip。 | Function\|null | IDENTITY
|
||||
|
15
components/spin/__tests__/index.test.js
Normal file
15
components/spin/__tests__/index.test.js
Normal file
@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
import { shallow } from 'enzyme';
|
||||
import Spin from '..';
|
||||
|
||||
describe('Spin', () => {
|
||||
it('should only affect the spin element when set style to a nested <Spin>xx</Spin>', () => {
|
||||
const wrapper = shallow(
|
||||
<Spin style={{ background: 'red' }}>
|
||||
<div>content</div>
|
||||
</Spin>
|
||||
);
|
||||
expect(wrapper.find('.ant-spin-nested-loading').at(0).prop('style')).toBe(null);
|
||||
expect(wrapper.find('.ant-spin').at(0).prop('style').background).toBe('red');
|
||||
});
|
||||
});
|
@ -119,6 +119,7 @@ export default class Spin extends React.Component<SpinProps, any> {
|
||||
{...divProps}
|
||||
component="div"
|
||||
className={`${prefixCls}-nested-loading`}
|
||||
style={null}
|
||||
transitionName="fade"
|
||||
>
|
||||
{spinning && <div key="loading">{spinElement}</div>}
|
||||
|
@ -27,10 +27,10 @@ The whole of the step bar.
|
||||
|
||||
Property | Description | Type | Default
|
||||
-----|-----|-----|------
|
||||
current | to set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | Number | 0
|
||||
status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | String | `process`
|
||||
size | to specify the size of the step bar, `default` and `small` are currently supported | String | `default`
|
||||
direction | to specify the direction of the step bar, `horizontal` and `vertical` are currently supported | String | horizontal
|
||||
current | to set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0
|
||||
status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process`
|
||||
size | to specify the size of the step bar, `default` and `small` are currently supported | string | `default`
|
||||
direction | to specify the direction of the step bar, `horizontal` and `vertical` are currently supported | string | horizontal
|
||||
progressDot | Steps with progress dot style, customize the progress dot by setting it to a function | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false
|
||||
|
||||
### Steps.Step
|
||||
@ -39,7 +39,7 @@ A single step in the step bar.
|
||||
|
||||
Property | Description | Type | Default
|
||||
-----|-----|-----|------
|
||||
status | to specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | String | wait
|
||||
title | title of the step | React.ReactNode | -
|
||||
description | detail of the step, optional property | React.ReactNode | -
|
||||
icon | icon of the step, optional property | string or React.ReactNode | -
|
||||
status | to specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | string | wait
|
||||
title | title of the step | string\|ReactNode | -
|
||||
description | detail of the step, optional property | string\|ReactNode | -
|
||||
icon | icon of the step, optional property | string\|ReactNode | -
|
||||
|
@ -28,10 +28,10 @@ title: Steps
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|------------------------------------------|-------------|-------|
|
||||
| current | 指定当前步骤,从 0 开始记数。在子 Step 元素中,可以通过 `status` 属性覆盖状态 | Number | 0 |
|
||||
| status | 指定当前步骤的状态,可选 `wait` `process` `finish` `error` | String | process |
|
||||
| size | 指定大小,目前支持普通(`default`)和迷你(`small`)| String | default |
|
||||
| direction | 指定步骤条方向。目前支持水平(`horizontal`)和竖直(`vertical`)两种方向 | String | horizontal |
|
||||
| current | 指定当前步骤,从 0 开始记数。在子 Step 元素中,可以通过 `status` 属性覆盖状态 | number | 0 |
|
||||
| status | 指定当前步骤的状态,可选 `wait` `process` `finish` `error` | string | process |
|
||||
| size | 指定大小,目前支持普通(`default`)和迷你(`small`)| string | default |
|
||||
| direction | 指定步骤条方向。目前支持水平(`horizontal`)和竖直(`vertical`)两种方向 | string | horizontal |
|
||||
| progressDot | 点状步骤条,可以设置为一个 function | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false |
|
||||
|
||||
### Steps.Step
|
||||
@ -40,7 +40,7 @@ title: Steps
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|----------|-----------------------------------------|------------|-------|
|
||||
| status | 指定状态。当不配置该属性时,会使用 Steps 的 `current` 来自动指定状态。可选:`wait` `process` `finish` `error` | String | wait |
|
||||
| title | 标题 | React.ReactNode | - |
|
||||
| description | 步骤的详情描述,可选 | React.ReactNode | - |
|
||||
| icon | 步骤图标的类型,可选 | string or React.ReactNode | - |
|
||||
| status | 指定状态。当不配置该属性时,会使用 Steps 的 `current` 来自动指定状态。可选:`wait` `process` `finish` `error` | string | wait |
|
||||
| title | 标题 | string\|ReactNode | - |
|
||||
| description | 步骤的详情描述,可选 | string\|ReactNode | - |
|
||||
| icon | 步骤图标的类型,可选 | string\|ReactNode | - |
|
||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user