mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 05:05:48 +08:00
Code Issues Actions 43 Packages Projects Releases Wiki Activity

Merge

Browse Source
This commit is contained in:
afc163 2016-07-21 14:39:28 +08:00
commit db4cbabf0c
75 changed files with 1540 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/cascader/demo/basic.md
View File

@ -1,10 +1,18 @@
---
order: 0
title: 基本
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
省市区级联。
## en-US
Cascade selection box for selecting province/city/district.
````jsx
import { Cascader } from 'antd';

10
components/cascader/demo/change-on-select.md
View File

@ -1,10 +1,18 @@
---
order: 5
title: 选择即改变
title:
zh-CN: 选择即改变
en-US: Change on select
---
## zh-CN
这种交互允许只选中父级选项。
## en-US
Allow only select parent options.
````jsx
import { Cascader } from 'antd';

10
components/cascader/demo/custom-render.md
View File

@ -1,10 +1,18 @@
---
order: 8
title: 自定义已选项
title:
zh-CN: 自定义已选项
en-US: Custom render
---
## zh-CN
例如给最后一项加上邮编链接。
## en-US
For instance, add an external link after the selected value.
````jsx
import { Cascader } from 'antd';

10
components/cascader/demo/custom-trigger.md
View File

@ -1,10 +1,18 @@
---
order: 1
title: 可以自定义显示
title:
zh-CN: 可以自定义显示
en-US: Custom trigger
---
## zh-CN
切换按钮和结果分开。
## en-US
Separate trigger button and result.
````jsx
import { Cascader } from 'antd';

10
components/cascader/demo/default-value.md
View File

@ -1,10 +1,18 @@
---
order: 0
title: 默认值
title:
zh-CN: 默认值
en-US: Default value
---
## zh-CN
默认值通过数组的方式指定。
## en-US
Specifies default value by an array.
````jsx
import { Cascader } from 'antd';

10
components/cascader/demo/disabled-option.md
View File

@ -1,10 +1,18 @@
---
order: 4
title: 禁用选项
title:
zh-CN: 禁用选项
en-US: Disabled option
---
## zh-CN
通过指定 options 里的 `disabled` 字段。
## en-US
Disable option by specifying the `disabled` property in `options`.
````jsx
import { Cascader } from 'antd';

10
components/cascader/demo/hover.md
View File

@ -1,10 +1,18 @@
---
order: 2
title: 移入展开
title:
zh-CN: 移入展开
en-US: Hover
---
## zh-CN
通过移入展开下级菜单，点击完成选择。
## en-US
Hover to expand sub menu, click to select option.
````jsx
import { Cascader } from 'antd';

10
components/cascader/demo/size.md
View File

@ -1,10 +1,18 @@
---
order: 7
title: 大小
title:
zh-CN: 大小
en-US: Size
---
## zh-CN
不同大小的级联选择器。
## en-US
Cascade selection box of different sizes.
````jsx
import { Cascader } from 'antd';

38
components/cascader/index.en-US.md Normal file
View File

@ -0,0 +1,38 @@
---
category: Components
type: Form Controls
title: Cascader
---
Cascade selection box.
## When to use
- When you need to select from a set of associated data set. Such as province/city/district, company level, things classification.
- When selecting from a large data set, with multi-stage classification separated for easy selection.
- chooses cascade items in one float layer for better user experience.
## API
```html
<Cascader options={options} onChange={onChange} />
```
| Property | Description | Type | Default |
|------|------|------|--------|
| options | data options of cascade | object | - |
| defaultValue | initial selected value | array |[] |
| value | selected value | array | - |
| onChange | callback when finishing cascader select | `function(value, selectedOptions)` | - |
| displayRender | render function of displaying selected options | `function(label, selectedOptions)` | `label => label.join(' / ')` |
| style | additional style | string | - |
| className | additional css class | string | - |
| popupClassName | additional className of popup overlay | string | - |
| popupPlacement | use preset popup align config from builtinPlacements：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` |
| placeholder | input placeholder | string | 'Please select' |
| size | input size, one of `large` `default` `small` | string | `default` |
| disabled | whether disabled select | boolean | false |
| 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 |

2
components/cascader/index.md → components/cascader/index.zh-CN.md
View File

@ -1,7 +1,7 @@
---
category: Components
chinese: 级联选择
type: Form Controls
chinese: 级联选择
english: Cascader
---

5
components/date-picker/RangePicker.tsx
View File

@ -78,7 +78,9 @@ export default class RangePicker extends React.Component {
onOk: this.handleChange,
};
if (props.timePicker) {
pickerChangeHandler = {};
pickerChangeHandler.onChange = (value) => {
this.handleChange(value);
};
} else {
calendarHandler = {};
}
@ -91,6 +93,7 @@ export default class RangePicker extends React.Component {
const calendar = (
<RangeCalendar
prefixCls="ant-calendar"
formatter={props.getFormatter()}
className={calendarClassName}
timePicker={props.timePicker}
disabledDate={disabledDate}

3
components/date-picker/demo/start-end.md
View File

@ -29,7 +29,7 @@ const DateRange = React.createClass({
if (!startValue || !this.state.endValue) {
return false;
}
return startValue.getTime() >= this.state.endValue.getTime();
return startValue.getTime() > this.state.endValue.getTime();
},
disabledEndDate(endValue) {
if (!endValue || !this.state.startValue) {
@ -38,7 +38,6 @@ const DateRange = React.createClass({
return endValue.getTime() <= this.state.startValue.getTime();
},
onChange(field, value) {
console.log(field, 'change', value);
this.setState({
[field]: value,
});

2
components/date-picker/index.tsx
View File

@ -9,7 +9,7 @@ const DatePicker = wrapPicker(createPicker(RcCalendar));
const MonthPicker = wrapPicker(createPicker(MonthCalendar), 'yyyy-MM');
DatePicker.Calendar = Calendar;
DatePicker.RangePicker = wrapPicker(RangePicker, 'yyyy-MM-dd');
DatePicker.RangePicker = wrapPicker(RangePicker);
DatePicker.MonthPicker = MonthPicker;
export default DatePicker;

9
components/date-picker/style/Calendar.less
View File

@ -106,7 +106,7 @@
.calendarPanelHeader(@calendar-prefix-cls);
}
&-calendar-body {
&-body {
padding: 4px 8px;
}
@ -163,6 +163,10 @@
text-align: center;
transition: background 0.3s ease;
&-panel {
position: relative;
}
&:hover {
background: tint(@primary-color, 90%);
cursor: pointer;
@ -286,6 +290,9 @@
&-disabled {
.button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
cursor: not-allowed;
&:hover {
.button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
}
}
}
}

101
components/date-picker/style/RangePicker.less
View File

@ -26,16 +26,40 @@
width: 470px;
overflow: hidden;
.@{calendar-prefix-cls}-date-panel {
&::after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
}
&-part {
width: 50%;
position: relative;
}
&-left {
float: left;
.@{calendar-prefix-cls} {
&-time-picker-inner {
border-right: 1px solid #e9e9e9;
}
}
}
&-right {
float: right;
.@{calendar-prefix-cls} {
&-time-picker-inner {
margin-left: 21px;
border-left: 1px solid #e9e9e9;
}
&-time-picker-panel {
// padding-left: 22px;
}
}
}
&-middle {
@ -74,7 +98,12 @@
.input;
border-radius: @border-radius-sm;
height: @input-height-sm;
width: 96px;
border: 0;
box-shadow: none;
&:focus {
box-shadow: none;
}
}
.@{timepicker-prefix-cls}-icon {
display: none;
@ -132,14 +161,68 @@
&-bottom {
text-align: right;
}
.@{calendar-prefix-cls}-ok-btn {
position: static;
height: 22px;
margin: 8px;
.@{calendar-prefix-cls} {
&-header {
border-bottom: 0;
}
&-body {
border-top: 1px solid #e9e9e9;
}
}
.@{calendar-prefix-cls}-today-btn {
margin: 8px 12px;
height: 22px;
line-height: 22px;
&.@{calendar-prefix-cls}-time {
.@{timepicker-prefix-cls} {
height: 207px;
top: 68px;
z-index: 2; // in order to cover .ant-calendar-range .ant-calendar-in-range-cell > div (z-index: 1)
&-panel {
height: 241px;
margin-top: -34px;
}
&-inner {
padding-top: 34px;
height: 241px;
background: none;
}
&-combobox {
display: inline-block;
background-color: white;
border-top: 1px solid #e9e9e9;
}
&-select {
width: 71px;
ul {
max-height: 206px;
}
}
}
.@{calendar-prefix-cls}-footer-btn {
padding-right: 12px;
display: block;
&::after {
content: 'x';
height: 0;
font-size: 0;
overflow: hidden;
clear: both;
}
}
.@{calendar-prefix-cls}-ok-btn {
position: static;
height: 22px;
}
.@{calendar-prefix-cls}-footer .@{calendar-prefix-cls}-time-picker-btn {
margin-right: 12px;
}
.@{calendar-prefix-cls}-today-btn {
margin: 8px 12px;
height: 22px;
line-height: 22px;
}
}
}

280
components/date-picker/style/TimePicker.less
View File

@ -1,32 +1,264 @@
.@{calendar-prefix-cls}-time {
// Change display order in DOM
.@{calendar-prefix-cls}-input-wrap {
direction: rtl;
.@{calendar-prefix-cls}-date-input-wrap,
.@{calendar-prefix-cls}-time-picker-wrap {
direction: ltr;
display: inline-block;
.@{timepicker-prefix-cls} {
position: absolute;
width: 100%;
top: 34px;
background-color: white;
height: 206px;
&-panel {
z-index: @zindex-picker;
position: absolute;
width: 100%;
}
&-inner {
display: inline-block;
position: relative;
outline: none;
list-style: none;
font-size: 12px;
text-align: left;
background-color: #fff;
background-clip: padding-box;
line-height: 1.5;
overflow: hidden;
}
&-input {
margin: 0;
padding: 0;
border: 0;
width: 100%;
cursor: auto;
line-height: 1.5;
outline: 0;
&-wrap {
display: none;
box-sizing: border-box;
position: relative;
padding: 6px;
border-bottom: 1px solid @border-color-split;
}
.@{timepicker-prefix-cls}-panel,
.@{calendar-prefix-cls}-clear-btn {
direction: ltr;
&-invalid {
border-color: red;
}
}
.@{calendar-prefix-cls}-input,
.@{timepicker-prefix-cls}-input {
.input;
border-radius: @border-radius-sm;
height: @input-height-sm;
width: 96px;
margin-right: 6px;
&-clear-btn {
position: absolute;
right: 5px;
cursor: pointer;
overflow: hidden;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
top: 5px;
margin: 0;
}
.@{calendar-prefix-cls}-input {
padding-right: 21px;
&-clear-btn:after {
content: "\e631";
font-family: "anticon";
font-size: 12px;
color: #ccc;
display: inline-block;
line-height: 1;
width: 20px;
transition: color 0.3s ease;
}
.@{timepicker-prefix-cls}-panel {
min-width: 168px;
&-clear-btn:hover:after {
color: #999;
}
.@{timepicker-prefix-cls}-icon {
display: none;
&-narrow &-input-wrap {
max-width: 111px;
}
&-select {
float: left;
font-size: 12px;
border: 1px solid @border-color-split;
border-width: 0 1px;
margin-left: -1px;
box-sizing: border-box;
width: 77px;
overflow: hidden;
position: relative; // Fix chrome weird render bug
&:hover {
overflow-y: auto;
}
&:first-child {
border-left: 0;
margin-left: 0;
}
&:last-child {
border-right: 0;
}
ul {
list-style: none;
box-sizing: border-box;
margin: 0;
padding: 0;
width: 100%;
max-height: 206px;
}
li {
text-align: center;
list-style: none;
box-sizing: content-box;
margin: 0;
width: 100%;
height: 24px;
line-height: 24px;
cursor: pointer;
user-select: none;
transition: background 0.3s ease;
}
li:last-child:after {
content: '';
height: 120px;
display: block;
}
li:hover {
background: tint(@primary-color, 90%);
}
li&-option-selected {
background: #f7f7f7;
font-weight: bold;
}
li&-option-disabled {
color: @btn-disable-color;
&:hover {
background: transparent;
cursor: @cursor-disabled;
}
}
}
&.slide-up-enter.slide-up-enter-active&-placement-topLeft,
&.slide-up-enter.slide-up-enter-active&-placement-topRight,
&.slide-up-appear.slide-up-appear-active&-placement-topLeft,
&.slide-up-appear.slide-up-appear-active&-placement-topRight {
animation-name: antSlideDownIn;
}
&.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
&.slide-up-enter.slide-up-enter-active&-placement-bottomRight,
&.slide-up-appear.slide-up-appear-active&-placement-bottomLeft,
&.slide-up-appear.slide-up-appear-active&-placement-bottomRight {
animation-name: antSlideUpIn;
}
&.slide-up-leave.slide-up-leave-active&-placement-topLeft,
&.slide-up-leave.slide-up-leave-active&-placement-topRight {
animation-name: antSlideDownOut;
}
&.slide-up-leave.slide-up-leave-active&-placement-bottomLeft,
&.slide-up-leave.slide-up-leave-active&-placement-bottomRight {
animation-name: antSlideUpOut;
}
}
.@{timepicker-prefix-cls} {
display: inline-block;
outline: none;
font-size: @font-size-base;
&-input {
.input;
width: 100px;
}
&-large &-input {
.input-lg;
}
&-small &-input {
.input-sm;
}
&-open {
opacity: 0;
}
&-icon {
position: absolute;
user-select: none;
transition: all .3s @ease-in-out;
width: 12px;
height: 12px;
line-height: 12px;
right: 8px;
color: #999;
top: 50%;
margin-top: -6px;
&:after {
content: "\e643";
font-family: "anticon";
font-size: 12px;
color: #999;
display: inline-block;
line-height: 1;
vertical-align: bottom;
}
}
}
.@{calendar-prefix-cls} {
&-time {
.@{calendar-prefix-cls}-day-select {
padding: 0 2px;
font-weight: bold;
display: inline-block;
color: #666;
line-height: 34px;
}
.@{calendar-prefix-cls}-footer {
border-top: 1px solid #ccc;
padding: 10px 0;
text-align: right;
position: relative;
height: auto;
line-height: auto;
&-btn {
line-height: 1.5;
text-align: right;
}
.@{calendar-prefix-cls}-today-btn {
float: left;
margin: 0;
padding-left: 12px;
}
.@{calendar-prefix-cls}-time-picker-btn {
display: inline-block;
text-align: center;
margin-right: 60px;
&-disabled {
color: #ccc;
}
}
}
}
}

2
components/date-picker/style/index.less
View File

@ -4,7 +4,7 @@
@import "../../button/style/mixin";
@calendar-prefix-cls: ant-calendar;
@timepicker-prefix-cls: ant-time-picker;
@timepicker-prefix-cls: ant-calendar-time-picker;
@import "Picker";
@import "Calendar";

6
components/date-picker/wrapPicker.tsx
View File

@ -1,6 +1,6 @@
import { PropTypes } from 'react';
import * as React from 'react';
import TimePicker from 'rc-time-picker';
import TimePickerPanel from 'rc-time-picker/lib/module/Panel';
import DateTimeFormat from 'gregorian-calendar-format';
import GregorianCalendar from 'gregorian-calendar';
import classNames from 'classnames';
@ -87,10 +87,10 @@ export default function wrapPicker(Picker, defaultFormat) {
showHour: timeFormat && timeFormat.indexOf('HH') >= 0,
};
const timePicker = props.showTime ? (
<TimePicker
<TimePickerPanel
{...rcTimePickerProps}
{...props.showTime}
prefixCls="ant-time-picker"
prefixCls="ant-calendar-time-picker"
placeholder={locale.timePickerLocale.placeholder}
locale={locale.timePickerLocale}
transitionName="slide-up"

3
components/index.tsx
View File

@ -48,3 +48,6 @@ export { Timeline }
import Tooltip from './tooltip';
export { Tooltip }
import Mention from './mention';
export { Mention };

1
components/input/Input.tsx
View File

@ -1,3 +1,4 @@
import * as React from 'react';
import { Component, PropTypes } from 'react';
import classNames from 'classnames';
import calculateNodeHeight from './calculateNodeHeight';

56
components/mention/demo/async.md Normal file
View File

@ -0,0 +1,56 @@
---
order: 1
title: 异步加载
---
## zh-CN
匹配内容列表为异步返回时。
## en-US
asnyc
````jsx
import { Mention } from 'antd';
const users = ['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai'];
const AsyncMention = React.createClass({
getInitialState() {
return {
suggestions: [],
loading: false,
};
},
fetchSuggestions(value, callback) {
setTimeout(() => {
callback(users.filter(item => item.indexOf(value) !== -1));
}, 500);
},
onSearchChange(value) {
this.fetchSuggestions(value, (suggestions) => {
this.setState({
suggestions,
loading: false,
});
});
this.setState({
loading: true,
});
},
render() {
const { suggestions, loading } = this.state;
return (<Mention
loading={loading}
suggestions={suggestions}
onSearchChange={this.onSearchChange}
/>);
},
});
ReactDOM.render(
<AsyncMention />,
mountNode
);
````

66
components/mention/demo/avatar.md Normal file
View File

@ -0,0 +1,66 @@
---
order: 3
title: 头像
---
## zh-CN
自定义建议（含头像）
注意，自定义建议时，onSearchChange 必须不能为空。
## en-US
Customize suggestions
````jsx
import { Mention } from 'antd';
const Nav = Mention.Nav;
const webFrameworks = [
{ name: 'React', type: 'JavaScript', icon: 'https://zos.alipayobjects.com/rmsportal/LFIeMPzdLcLnEUe.svg' },
{ name: 'Angular', type: 'JavaScript', icon: 'https://zos.alipayobjects.com/rmsportal/PJTbxSvzYWjDZnJ.png' },
{ name: 'Laravel', type: 'PHP', icon: 'http://laravel-china.org/assets/img/laravel-logo.png' },
{ name: 'Flask', type: 'Python', icon: 'https://zos.alipayobjects.com/rmsportal/xaypBUijfnpAlXE.png' },
];
const CustomNavMention = React.createClass({
getInitialState() {
return {
suggestions: [],
loading: false,
};
},
onSearchChange(value) {
const searchValue = value.toLowerCase();
const filtered = webFrameworks.filter(item =>
item.name.toLowerCase().indexOf(searchValue) !== -1
);
const suggestions = filtered.map(suggestion =>
<Nav value={suggestion.name} data={suggestion} disabled={suggestion.disabled}>
<span>
<img alt={suggestion.name} style={{ height: 16, width: 16, marginRight: 5 }} src={suggestion.icon} />
{suggestion.name} - {suggestion.type}
</span>
</Nav>);
this.setState({
suggestions,
});
},
render() {
const { suggestions, loading } = this.state;
return (<Mention
loading={loading}
suggestions={suggestions}
onSearchChange={this.onSearchChange}
/>);
},
});
ReactDOM.render(
<CustomNavMention />,
mountNode
);
````

32
components/mention/demo/basic.md Normal file
View File

@ -0,0 +1,32 @@
---
order: 0
title: 基本使用
---
## zh-CN
基本使用
## en-US
Basic usage.
````jsx
import { Mention } from 'antd';
const { toString, toEditorState } = Mention;
function onChange(editorState) {
console.log(toString(editorState));
}
ReactDOM.render(
<Mention
onChange={onChange}
defaultValue={toEditorState('@afc163')}
suggestions={['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai']}
/>,
mountNode
);
````

63
components/mention/demo/customTag.md Normal file
View File

@ -0,0 +1,63 @@
---
order: 2
title: 自定义建议
---
## zh-CN
自定义建议
注意，自定义建议时，onSearchChange 必须不能为空。
## en-US
Customize suggestions
````jsx
import { Mention } from 'antd';
const Nav = Mention.Nav;
const webFrameworks = [
{ name: 'React', type: 'JavaScript' },
{ name: 'Angular', type: 'JavaScript' },
{ name: 'Laravel', type: 'PHP', disabled: true },
{ name: 'Flask', type: 'Python' },
{ name: 'Django', type: 'Python' },
];
const CustomNavMention = React.createClass({
getInitialState() {
return {
suggestions: [],
loading: false,
};
},
onSearchChange(value) {
const searchValue = value.toLowerCase();
const filtered = webFrameworks.filter(item =>
item.name.toLowerCase().indexOf(searchValue) !== -1
);
const suggestions = filtered.map(suggestion =>
<Nav value={suggestion.name} >
<span>{suggestion.name} - {suggestion.type} </span>
</Nav>);
this.setState({
suggestions,
});
},
render() {
const { suggestions, loading } = this.state;
return (<Mention
loading={loading}
suggestions={suggestions}
onSearchChange={this.onSearchChange}
/>);
},
});
ReactDOM.render(
<CustomNavMention />,
mountNode
);
````

32
components/mention/demo/multilines.md Normal file
View File

@ -0,0 +1,32 @@
---
order: 4
title: 多行
---
## zh-CN
多行模式，多行模式必须指定高度。
## en-US
Multi lines mode.
````jsx
import { Mention } from 'antd';
const { toString } = Mention;
function onChange(editorState) {
console.log(toString(editorState));
}
ReactDOM.render(
<Mention
style={{ width: '100%', height: 200 }}
onChange={onChange}
suggestions={['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai']}
multiLines
/>,
mountNode
);
````

43
components/mention/index.en-US.md Normal file
View File

@ -0,0 +1,43 @@
---
category: Components
chinese: 提及
cols: 1
type: Views
english: Mention
---
Mention component。
## When To Use
When need to mention someone or something.
```html
<Mention
onChange={onChange}
suggestions={['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai']}
/>,
```
## API
### Mention props
| Property | Description | Type | Default |
|----------|---------------|----------|--------------|
| suggestions | suggestion content | Array<string> or Array<Mention.Nav> | [] |
| suggestionStyle | style of suggestion container | Objet | {} |
| onSearchChange | Callback function called when search content changes | function(value:String) | [] |
| onChange | Callback function called when content of input changes | function(editorState: EditorState) | null |
| notFoundContent| suggestion when suggestions empty | string | '无匹配结果，轻敲空格完成输入' |
| loading | loading mode | boolean | false |
| multiLines | multilines mode | boolean | false |
| defaultValue | default value | EditorState, you can use `Mention.toEditorState` to convert text to `EditorState` | null |
| value | core state of mention | EditorState | null |
### Nav props
| Property | Description | Type | Default |
|----------|---------------|----------|--------------|
| value | value of suggestion，the value will insert into input filed while selected | string | "" |
| children | suggestion content | Objet | {} |

101
components/mention/index.tsx Normal file
View File

@ -0,0 +1,101 @@
import * as React from 'react';
import RcMention, { Nav, toString, toEditorState } from 'rc-editor-mention';
import classnames from 'classnames';
export interface MentionProps {
prefixCls: string;
suggestionStyle?: Object;
suggestions?: Array<any>;
onSearchChange?: Function;
onChange?: Function;
notFoundContent?: any;
loading?: Boolean;
style?: Object;
defaultValue?: string;
className?: string;
multiLines?: Boolean;
}
export interface MentionState {
suggestions?: Array<any>;
focus?: Boolean;
}
export default class Mention extends React.Component<MentionProps, MentionState> {
static Nav = Nav;
static toString = toString;
static toEditorState = toEditorState;
static defaultProps = {
prefixCls: 'ant-mention',
suggestions: [],
notFoundContent: '无匹配结果，轻敲空格完成输入',
loading: false,
multiLines: false,
};
constructor(props) {
super(props);
this.state = {
suggestions: props.suggestions,
focus: false,
};
}
componentWillReceiveProps(nextProps) {
this.setState({
suggestions: nextProps.suggestions,
});
}
onSearchChange(value) {
if (this.props.onSearchChange) {
return this.props.onSearchChange(value);
}
return this.defaultSearchChange(value);
}
onChange(editorState) {
if (this.props.onChange) {
this.props.onChange(editorState);
}
}
defaultSearchChange(value: String): void {
const searchValue = value.toLowerCase();
const filteredSuggestions = this.props.suggestions.filter(
suggestion => suggestion.toLowerCase().indexOf(searchValue) !== -1
);
this.setState({
suggestions: filteredSuggestions,
});
}
render() {
const { className, prefixCls, style, multiLines, defaultValue } = this.props;
let { notFoundContent } = this.props;
const { suggestions, focus } = this.state;
const cls = classnames({
[className]: !!className,
['active']: focus,
});
if (this.props.loading) {
notFoundContent = <i className="anticon anticon-loading"></i>;
}
return <RcMention
{...this.props}
className={cls}
prefixCls={prefixCls}
style={style}
defaultValue={defaultValue}
multiLines={multiLines}
onSearchChange={this.onSearchChange.bind(this)}
onChange={this.onChange.bind(this)}
onFocus={() => this.setState({focus: true})}
onBlur={() => this.setState({focus: false})}
suggestions={suggestions}
notFoundContent={notFoundContent}
/>;
}
}

44
components/mention/index.zh-CN.md Normal file
View File

@ -0,0 +1,44 @@
---
category: Components
chinese: 提及
cols: 1
type: Views
english: Mention
---
提及组件。(圈人组件)
## 何时使用
用于在输入中提及某人或某事。
```html
<Mention
onChange={onChange}
suggestions={['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai']}
/>,
```
## API
### Mention props
| 参数 | 说明 | 类型 | 默认值 |
|----------|---------------|----------|--------------|
| suggestions | 建议内容 | Array<string> or Array<Mention.Nav> | [] |
| suggestionStyle | 弹出下拉框样式 | Objet | {} |
| onSearchChange | 输入框中 @ 变化时回调 | function(value:String) | [] |
| onChange | 输入框内容变化时回调 | function(editorState: EditorState) | null |
| notFoundContent| 未找到时的内容 | string | '无匹配结果，轻敲空格完成输入' |
| loading | 加载中 | boolean | false |
| multiLines | 多行模式 | boolean | false |
| defaultValue | 默认值 | EditorState, 可以用 Mention.toEditorState(text) 把文字转换成 EditorState | null |
| value | 值 | EditorState | null |
### Nav props
| 参数 | 说明 | 类型 | 默认值 |
|----------|---------------|----------|--------------|
| value | 建议值，选择建议时，用此值插入到输入框中 | string | "" |
| children | 建议内容 | Objet | {} |

98
components/mention/style/index.less Normal file
View File

@ -0,0 +1,98 @@
@import "../../style/themes/default";
@import "../../style/mixins/index";
@import '../../input/style/mixin.less';
.ant-mention-wrapper {
position: relative;
display: inline-block;
width: 100%;
&.active .ant-mention-editor {
.active;
}
.ant-mention-editor {
.input;
padding: 0;
}
.ant-mention-editor-wrapper {
overflow-y: auto;
height: auto;
}
.DraftEditor-editorContainer .public-DraftEditor-content {
height: auto;
padding: 4px 7px;
}
.ant-mention-dropdown {
margin-top: 1.5em;
max-height: 250px;
min-width: 120px;
background-color: white;
border: 1px solid @border-color-base;
box-shadow: @box-shadow-base;
border-radius: @border-radius-base;
box-sizing: border-box;
z-index: @zindex-dropdown;
left: -9999px;
top: -9999px;
position: absolute;
outline: none;
overflow-x: hidden;
overflow-y: auto;
font-size: @font-size-base;
&-notfound.ant-mention-dropdown-item {
color: #ccc;
.anticon-loading {
color: @primary-color;
}
}
&-item {
position: relative;
display: block;
padding: 7px 15px;
font-weight: normal;
color: #666;
white-space: nowrap;
cursor: pointer;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
transition: background 0.3s ease;
&:hover,
&.focus,
&-active {
background-color: tint(@primary-color, 90%);
}
&-disabled {
color: #ccc;
cursor: not-allowed;
&:hover {
color: #ccc;
background-color: #fff;
cursor: not-allowed;
}
}
&-selected {
&,
&:hover {
background-color: #f7f7f7;
font-weight: bold;
color: #666;
}
}
&-divider {
height: 1px;
margin: 1px 0;
overflow: hidden;
background-color: #e5e5e5;
line-height: 0;
}
}
}
}

1
components/mention/style/index.tsx Normal file
View File

@ -0,0 +1 @@
import './index.less';

15
components/radio/demo/basic.md
View File

@ -1,12 +1,21 @@
---
order: 0
title: 基本
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
最简单的用法。
````jsx
## en-US
The simplest use.
```jsx
import { Radio } from 'antd';
ReactDOM.render(<Radio>Radio</Radio>, mountNode);
````
```
2

14
components/radio/demo/disable.md
View File

@ -1,11 +1,19 @@
---
order: 1
title: 不可用
title:
zh-CN: 不可用
en-US: disabled
---
## zh-CN
Radio 不可用。
````jsx
## en-US
Radio unavailable.
```jsx
import { Radio, Button } from 'antd';
const App = React.createClass({
@ -36,4 +44,4 @@ const App = React.createClass({
});
ReactDOM.render(<App />, mountNode);
````
```

16
components/radio/demo/radiobutton.md
View File

@ -1,11 +1,19 @@
---
order: 3
title: 按钮样式
---
title:
zh-CN: 按钮样式
en-US: raido style
------------------
## zh-CN
按钮样式的单选组合。
````jsx
## en-US
The combination of radio button style.
```jsx
import { Radio } from 'antd';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
@ -40,4 +48,4 @@ ReactDOM.render(<div>
</RadioGroup>
</div>
</div>, mountNode);
````
```

16
components/radio/demo/radiogroup-more.md
View File

@ -1,11 +1,19 @@
---
order: 2
title: RadioGroup 垂直
---
title:
zh-CN: RadioGroup 垂直
en-US: Vertical RadioGroup
--------------------------
## zh-CN
垂直的 RadioGroup，配合更多输入框选项。
````jsx
## en-US
Vertical RadioGroup, with more radios.
```jsx
import { Radio, Input } from 'antd';
const RadioGroup = Radio.Group;
@ -42,4 +50,4 @@ const App = React.createClass({
});
ReactDOM.render(<App />, mountNode);
````
```

16
components/radio/demo/radiogroup.md
View File

@ -1,11 +1,19 @@
---
order: 1
title: RadioGroup 组合
---
title:
zh-CN: RadioGroup 组合
en-US: RadioGroup group
-----------------------
## zh-CN
一组互斥的 Radio 配合使用。
````jsx
## en-US
A set of mutually exclusive Radio with the use of
```jsx
import { Radio } from 'antd';
const RadioGroup = Radio.Group;
@ -34,4 +42,4 @@ const App = React.createClass({
});
ReactDOM.render(<App />, mountNode);
````
```

16
components/radio/demo/size.md
View File

@ -1,11 +1,19 @@
---
order: 5
title: 大小
---
title:
zh-CN: 大小
en-US: Size
-----------
## zh-CN
大中小三种组合，可以和表单输入框进行对应配合。
````jsx
## en-US
There are three kinds of combination, large medium and small. It can coordinate with input box.
```jsx
import { Radio } from 'antd';
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
@ -36,4 +44,4 @@ ReactDOM.render(<div>
</RadioGroup>
</div>
</div>, mountNode);
````
```

34
components/radio/index.en-US.md Normal file
View File

@ -0,0 +1,34 @@
---
category: Components
type: Form Controls
title: Radio
---
Radio.
## When to use
- Used to select a single state in multiple options.
- The different between Select, Radio is visbile to user, it can facilitate users in the comparison of choice. So, when you want to use Radio, option should not be too much.
## API
### Radio
| Property | Description | Type | optional | Default |
|----------------|------------------------------------------|------------|---------|--------|
| checked | Specifies whether the current is selected | Boolean | | false |
| defaultChecked | Initial whether or not selected | Boolean | | false |
| value | According to value for comparison, to determine whether the selected | String | | none |
### RadioGroup
radio group，wrap a group of `Radio`。
| Property | Description | Type | optional | Default |
|----------------|----------------------------------|-------------------|--------|--------|
| onChange | The callback function when the options change | Function(e:Event) | none | none |
| value | Used to set the current selected value | String | none | none |
| defaultValue | Default selected value | String | none | none |
| size | Size, only on radio style | String | `large` `default` `small` | `default` |

4
components/radio/index.md → components/radio/index.zh-CN.md
View File

@ -1,8 +1,8 @@
---
category: Components
chinese: 单选框
subtitle: 单选框
type: Form Controls
english: Radio
title: Radio
---
单选框。

10
components/rate/demo/basic.md
View File

@ -1,10 +1,18 @@
---
order: 0
title: 基本
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
最简单的用法。
## en-US
The simplest usage.
````jsx
import { Rate } from 'antd';

10
components/rate/demo/disabled.md
View File

@ -1,10 +1,18 @@
---
order: 3
title: 只读
title:
zh-CN: 只读
en-US: Read only
---
## zh-CN
只读，无法进行鼠标交互。
## en-US
Read only, can't use mouse to interact.
````jsx
import { Rate } from 'antd';

10
components/rate/demo/half.md
View File

@ -1,10 +1,18 @@
---
order: 1
title: 半星
title:
zh-CN: 半星
en-US: Half star
---
## zh-CN
支持选中半星。
## en-US
Support select half star.
````jsx
import { Rate } from 'antd';

10
components/rate/demo/text.md
View File

@ -1,10 +1,18 @@
---
order: 2
title: 文案展现
title:
zh-CN: 文案展现
en-US: Show copywriting
---
## zh-CN
给评分组件加上文案展示。
## en-US
Add copywriting in rate components.
````jsx
import { Rate } from 'antd';

23
components/rate/index.en-US.md Normal file
View File

@ -0,0 +1,23 @@
---
category: Components
type: Form Controls
title: Rate
---
Rate component.
## When to use
- Show evalutate.
- A quick rating operation on something.
## API
| Property | Description | type | Default |
|------------|----------------|-------------------|-------------|
| count | star count | Number | 5 |
| value | current value | Number | - |
| defaultValue | default value | Number | 0 |
| onChange(value: Number) | callback | Function | - |
| allowHalf | weather to allow semi selection | Boolean | false |
| disabled | read only, unable to interact | Boolean | false |

4
components/rate/index.md → components/rate/index.zh-CN.md
View File

@ -1,8 +1,8 @@
---
category: Components
chinese: 评分
subtitle: 评分
type: Form Controls
english: Rate
title: Rate
---
评分组件。

10
components/slider/demo/basic.md
View File

@ -1,10 +1,18 @@
---
order: 0
title: 基本
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
基本滑动条。当 `range` 为 `true` 时，渲染为双滑块。当 `disabled` 为 `true` 时，滑块处于不可用状态。
## en-US
Basic slider. When `range` is `true`, display as dual thumb mode. When `disable` is `true`, the slider will not be interactable.
````jsx
import { Slider } from 'antd';

11
components/slider/demo/event.md
View File

@ -1,10 +1,19 @@
---
order: 4
title: 事件
title:
zh-CN: 事件
en-US: Event
---
## zh-CN
当 Slider 的值发生改变时，会触发 `onChange` 事件，并把改变后的值作为参数传入。在 `onmouseup` 时，会触发 `onAfterChange` 事件，并把当前值作为参数传入。
## en-US
The `onChange` callback function will fire when the user changes the slider's value.
The `onAfterChange` callback function will fire when `onmouseup` fired.
````jsx
import { Slider } from 'antd';

10
components/slider/demo/icon-slider.md
View File

@ -1,10 +1,18 @@
---
order: 2
title: 带 icon 的滑块
title:
zh-CN: 带 icon 的滑块
en-US: Slider with icon
---
## zh-CN
滑块左右可以设置图标来表达业务含义。
## en-US
You can add an icon beside the slider to make it meaningful.
````jsx
import { Slider, Icon } from 'antd';

10
components/slider/demo/input-number.md
View File

@ -1,10 +1,18 @@
---
order: 1
title: 带输入框的滑块
title:
zh-CN: 带输入框的滑块
en-US: Slider with input field
---
## zh-CN
和 [数字输入框](/components/input-number/) 组件保持同步。
## en-US
Synchronize with [InptNumber](/components/input-number/) component.
````jsx
import { Slider, InputNumber, Row, Col } from 'antd';

13
components/slider/demo/mark.md
View File

@ -1,10 +1,21 @@
---
order: 3
title: 分段式滑块
title:
zh-CN: 分段式滑块
en-US: Graduated slider
---
## zh-CN
使用 `marks` 属性标注分段式滑块，使用 `value` / `defaultValue` 指定滑块位置。当 `included=false` 时，表明不同标记间为并列关系。当 `step=null` 时，Slider 的可选值仅有 `marks` 标出来的部分。
## en-US
Using `marks` property to mark a graduated slider, use `value` or `defaultValue` to specify the position of thumb.
When `included` is false, means that different thumbs are coordinative.
when `step` is null, users can only slide the thumbs onto marks.
````jsx
import { Slider } from 'antd';

10
components/slider/demo/tip-formatter.md
View File

@ -1,10 +1,18 @@
---
order: 5
title: 自定义提示
title:
zh-CN: 自定义提示
en-US: Customerize tooltip
---
## zh-CN
使用 `tipFormatter` 可以格式化 `Tooltip` 的内容，设置 `tipFormatter={null}`，则隐藏 `Tooltip`。
## en-US
Use `tipFormatter` to formart content of `Toolip`. If `tipFormatter` is null, hide it.
````jsx
import { Slider } from 'antd';

29
components/slider/index.en-US.md Normal file
View File

@ -0,0 +1,29 @@
---
category: Components
type: Form Controls
title: Slider
---
A Slider component for displaying current value and intervals in range.
## When to use
To input a value in a range.
## API
| 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 devided 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 interva [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
| onChange | Callback function that is fired when the user changes the slider's value. | Function | NOOP
| onAfterChange | Fire when `onmouseup` is fired. | Function | 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

0
components/slider/index.md → components/slider/index.zh-CN.md
View File

10
components/spin/demo/basic.md
View File

@ -1,10 +1,18 @@
---
order: 0
title: 基本用法
title:
zh-CN: 基本用法
en-US: basic Usage
---
## zh-CN
一个简单的 loading 状态。
## en-US
A simple loading status.
````jsx
import { Spin } from 'antd';

10
components/spin/demo/inside.md
View File

@ -1,10 +1,18 @@
---
order: 2
title: 容器
title:
zh-CN: 容器
en-US: Inside a container
---
## zh-CN
放入一个容器中。
## en-US
Spin in a container.
````jsx
import { Spin } from 'antd';

10
components/spin/demo/nested.md
View File

@ -1,10 +1,18 @@
---
order: 3
title: 卡片加载中
title:
zh-CN: 卡片加载中
en-US: Embedded mode
---
## zh-CN
可以直接把内容内嵌到 `Spin` 中，将现有容器变为加载状态。
## en-US
Embedding content into `Spin` will alter it into loading state.
````jsx
import { Spin, Switch, Alert } from 'antd';

10
components/spin/demo/size.md
View File

@ -1,10 +1,18 @@
---
order: 1
title: 各种大小
title:
zh-CN: 各种大小
en-US: Size
---
## zh-CN
小的用于文本加载，默认用于卡片容器级加载，大的用于**页面级**加载。
## en-US
A small `Spin` use in loading text, default `Spin` use in loading card-level block, and large `Spin` use in loading **page**.
````jsx
import { Spin } from 'antd';

10
components/spin/demo/tip.md
View File

@ -1,10 +1,18 @@
---
order: 4
title: 自定义描述文案
title:
zh-CN: 自定义描述文案
en-US: Customize description
---
## zh-CN
自定义描述文案，指定的 tip 文案会直接代替 `...`。
## en-US
Customize description content, specified tip content will replace the dots in `Spin`.
````jsx
import { Spin, Alert } from 'antd';

21
components/spin/index.en-US.md Normal file
View File

@ -0,0 +1,21 @@
---
category: Components
type: Other
title: Spin
---
A Spin is used for displaying loading state of a page or a block.
## When to use
When partial of page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude.
## API
| Property | Type | Default | Description |
|------------|----------------|-------------|--------------|
| size | enum | default | Size of dot in spin component, avaliable in `small`, `default` and `large`. |
| spinning | boolean | true | Use in embedded mode, to modify loading state. |
| tip | string | None | Customize decription content |

4
components/spin/index.md → components/spin/index.zh-CN.md
View File

@ -1,8 +1,8 @@
---
category: Components
chinese: 加载中
type: Other
english: Spin
title: Spin
subtitle: 加载中
---
用于页面和区块的加载中状态。

10
components/steps/demo/error.md
View File

@ -1,10 +1,18 @@
---
order: 6
title: 步骤运行错误
title:
zh-CN: 步骤运行错误
en-US: Error status
---
## zh-CN
使用 Steps 的 `status` 属性来指定当前步骤的状态。
## en-US
By using `status` of `Steps`, you can specify the state for current step.
````jsx
import { Steps } from 'antd';
const Step = Steps.Step;

10
components/steps/demo/icon.md
View File

@ -1,10 +1,18 @@
---
order: 2
title: 带图标的步骤条
title:
zh-CN: 带图标的步骤条
en-US: With icon
---
## zh-CN
通过设置 `Steps.Step` 的 `icon` 属性，可以启用自定义图标。
## en-US
You can use your own custom icons by setting the property `icon` for `Steps.Step`.
````jsx
import { Steps } from 'antd';
const Step = Steps.Step;

10
components/steps/demo/simple.md
View File

@ -1,10 +1,18 @@
---
order: 0
title: 基本用法
title:
zh-CN: 基本用法
en-US: Basic
---
## zh-CN
简单的步骤条。
## en-US
The most basic step bar.
````jsx
import { Steps } from 'antd';
const Step = Steps.Step;

10
components/steps/demo/small-size.md
View File

@ -1,10 +1,18 @@
---
order: 1
title: 迷你版
title:
zh-CN: 迷你版
en-US: Mini version
---
## zh-CN
迷你版的步骤条，通过设置 `<Steps size="small">` 启用.
## en-US
By setting like this: `<Steps size="small">`, you can get a mini version.
````jsx
import { Steps } from 'antd';
const Step = Steps.Step;

10
components/steps/demo/step-next.md
View File

@ -1,10 +1,18 @@
---
order: 3
title: 切换到下一步
title:
zh-CN: 切换到下一步
en-US: Switch to next
---
## zh-CN
随机生成 3~6 个步骤，初始随机进行到其中一个步骤。
## en-US
Let's generate 3~6 steps randomly, and proceed to a random step.
````jsx
import { Steps, Button } from 'antd';
const Step = Steps.Step;

10
components/steps/demo/vertical-small.md
View File

@ -1,10 +1,18 @@
---
order: 5
title: 竖直方向的小型步骤条
title:
zh-CN: 竖直方向的小型步骤条
en-US: Vertical mini version
---
## zh-CN
简单的竖直方向的小型步骤条。
## en-US
A simple mini version step bar in the vertical direction.
````jsx
import { Steps } from 'antd';
const Step = Steps.Step;

10
components/steps/demo/vertical.md
View File

@ -1,10 +1,18 @@
---
order: 4
title: 竖直方向的步骤条
title:
zh-CN: 竖直方向的步骤条
en-US: Vertical
---
## zh-CN
简单的竖直方向的步骤条。
## en-US
A simple step bar in the vertical direction.
````jsx
import { Steps } from 'antd';
const Step = Steps.Step;

44
components/steps/index.en-US.md Normal file
View File

@ -0,0 +1,44 @@
---
category: Components
type: Navigation
cols: 1
title: Steps
---
`Steps` is a navigation bar that guides users through the steps of a task.
## When to use
When the task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier.
## API
```jsx
<Steps>
<Step title="first step" />
<Step title="second step" />
<Step title="third step" />
</Steps>
```
### Steps
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
### Steps.Step
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.Element | -
description | detail of the step, optional property | React.Element | -
icon | icon of the step, optional property | React.Element | -

10
components/steps/index.md → components/steps/index.zh-CN.md
View File

@ -28,10 +28,10 @@ english: Steps
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0 |
| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | `process` |
| size | 指定大小，目前支持普通（`default`）和迷你（`small`）| string | default |
| direction | 指定步骤条方向。目前支持水平和竖直（`vertical`）两种方向，默认水平方向） | string | - |
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | Number | 0 |
| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | String | process |
| size | 指定大小，目前支持普通（`default`）和迷你（`small`）| String | default |
| direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | String | horizontal |
### Steps.Step
@ -39,7 +39,7 @@ english: Steps
| 参数 | 说明 | 类型 | 默认值 |
|----------|-----------------------------------------|------------|-------|
| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | `wait` |
| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | String | wait |
| title | 标题 | React.Element | - |
| description | 步骤的详情描述，可选 | React.Element | - |
| icon | 步骤图标，可选 | React.Element | - |

10
components/tree/demo/basic-controlled.md
View File

@ -1,10 +1,18 @@
---
order: 1
title: 受控操作示例
title:
zh-CN: 受控操作示例
en-US: basic controlled example
---
## zh-CN
受控操作示例
## en-US
basic controlled example
````jsx
import { Tree } from 'antd';
const TreeNode = Tree.TreeNode;

10
components/tree/demo/basic.md
View File

@ -1,10 +1,18 @@
---
order: 0
title: 基本
title:
zh-CN: 基本
en-US: basic
---
## zh-CN
最简单的用法，展示可勾选，可选中，禁用，默认展开等功能。
## en-US
The most basic usage, tell you how to use checkable, selectable, disabled, defaultExpandKeys, and etc.
````jsx
import { Tree } from 'antd';
const TreeNode = Tree.TreeNode;

10
components/tree/demo/draggable.md
View File

@ -1,10 +1,18 @@
---
order: 2
title: 拖动示例
title:
zh-CN: 拖动示例
en-US: draggable
---
## zh-CN
将节点拖拽到其他节点内部或前后。
## en-US
Drag treeNode to insert after the other treeNode or insert into the other parent TreeNode.
````jsx
import { Tree } from 'antd';
const TreeNode = Tree.TreeNode;

10
components/tree/demo/dynamic.md
View File

@ -1,10 +1,18 @@
---
order: 3
title: 异步数据加载
title:
zh-CN: 异步数据加载
en-US: load data asynchronously
---
## zh-CN
点击展开节点，动态加载数据。
## en-US
To load data asynchronously when click to expand a treeNode.
````jsx
import { Tree } from 'antd';
const TreeNode = Tree.TreeNode;

49
components/tree/index.en-US.md Normal file
View File

@ -0,0 +1,49 @@
---
category: Components
type: Views
title: Tree
---
## When to use
Directory, organization, biological classification, country, and etc. Almost things of the world are tree structrue. The `Tree` component is a way of representing the hierachical relationship of these things，and you also can expand, collapse, select the treeNodes of it.
## API
### Tree props
| Property | Description | Type | Default |
|----------------|--------------------------------------------------|------------|---------|
|multiple | Whether allow to multiple select treeNode | bool | false |
|checkable | Whether support checkable treeNode | bool | false |
|defaultExpandAll | Whether default to expand all treeNodes | bool | false |
|defaultExpandedKeys | Specify keys of default expanded treeNodes | String[] | [] |
|expandedKeys |(controlled) Sepcifies keys of expanded treeNodes | String[] | [] |
|autoExpandParent | Whether to automatically expand a parent treeNode | bool | true |
|defaultCheckedKeys | Specifies keys of default checked treeNodes | String[] | [] |
|checkedKeys |(controlled) Specifies keys of checked treeNodes（PS： When specifies a key of treeNode which is a parent treeNode, all children treeNodes of its will be checked; And vice versa, when specifies a key of treeNode which is a child treeNode, its parent treeNode will also be checked. When `checkable` and `checkStrictly` is true, it'a object has `checked` and `halfChecked` property, and no matter child treeNode or parent treeNode is checked, they won't impact on eachother. | String[]/{checked:Array<String>,halfChecked:Array<String>} | [] |
|checkStrictly| Check treeNode precisely, parent treeNode and children treeNodes are not associated | bool | false |
|defaultSelectedKeys | Specifies keys of default selected treeNodes | String[] | [] |
|selectedKeys |(controlled) Specifies keys of selected treeNode | String[] | - |
|onExpand | Defines a function will be called when expand or collapse a treeNode | function(expandedKeys, {expanded: bool, node}) | - |
|onCheck | Defines a function will be called when the onCheck event occurs | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) | - |
|onSelect | The callback will be invoked when the user clicks a treeNode | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - |
|filterTreeNode | Defines a function to filter treeNodes（highlight），when return true, corresponding treeNode will be highlight | function(node) | - |
|loadData | load data asynchronously | function(node)| - |
|onRightClick | The call back will be invoked when the user right clicks a treeNoe | function({event,node}) | - |
|draggable | Specifies whether this Tree is draggable（IE>8） | bool | false |
|onDragStart | Defines a function will be called when the onDragStart event occurs | function({event,node}) | - |
|onDragEnter | Defines a function will be called when the onDragEnter event occurs | function({event,node,expandedKeys}) | - |
|onDragOver | Defines a function will be called when the onDragOver event occurs | function({event,node}) | - |
|onDragLeave | Defines a function will be called when the onDragLeave event occurs | function({event,node}) | - |
|onDrop | Defines a function will be called when the onDrop event occurs | function({event, node, dragNode, dragNodesKeys}) | - |
### TreeNode props
| Property | Description | Type | Default |
|-----------|------------------------------------------|---------|---------|
|disabled | whether disabled the treeNode | bool | false |
|disableCheckbox | whether disable the checkbox of treeNode | bool | false |
|title | title | String/element | '---' |
|key | it's used with (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. P.S.: it must be unique in all of treeNodes of the tree! | String | internal calculated position of treeNode |
|isLeaf | whether it's leaf node | bool | false |

4
components/tree/index.md → components/tree/index.zh-CN.md
View File

@ -1,8 +1,8 @@
---
category: Components
chinese: 树形控件
type: Views
english: Tree
title: Tree
subtitle: 树形控件
---
## 何时使用

1
package.json
View File

@ -47,6 +47,7 @@
"rc-collapse": "~1.6.4",
"rc-dialog": "~6.2.1",
"rc-dropdown": "~1.4.8",
"rc-editor-mention": "^0.1.0",
"rc-form": "~0.17.1",
"rc-input-number": "~2.5.14",
"rc-menu": "~4.12.4",