Merge branch 'master' of github.com:ant-design/ant-design

This commit is contained in:
afc163 2016-09-30 11:31:40 +08:00
commit b63d620625
13 changed files with 55 additions and 21 deletions

View File

@ -45,9 +45,16 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
## TypeScript
```js
///<reference path='./node_modules/antd/type-definitions/antd.d.ts'/>
...
tsconfig.json
```
{
"compilerOptions": {
"moduleResolution": "node",
"jsx": "preserve",
"allowSyntheticDefaultImports": true
}
}
```
## 链接

View File

@ -75,7 +75,8 @@ tsconfig.json
{
"compilerOptions": {
"moduleResolution": "node",
"jsx": "preserve"
"jsx": "preserve",
"allowSyntheticDefaultImports": true
}
}
```

View File

@ -21,12 +21,17 @@ function onChange(editorState) {
console.log(toString(editorState));
}
function onSelect(suggestion) {
console.log('onSelect', suggestion);
}
ReactDOM.render(
<Mention
style={{ width: 500, height: 100 }}
onChange={onChange}
defaultValue={toEditorState('@afc163')}
suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
onSelect={onSelect}
/>
, mountNode);
````

View File

@ -27,6 +27,9 @@ const webFrameworks = [
{ name: 'Django', type: 'Python' },
];
function onSelect(suggestion) {
console.log('onSelect', suggestion);
}
const CustomNavMention = React.createClass({
getInitialState() {
return {
@ -48,9 +51,11 @@ const CustomNavMention = React.createClass({
const { suggestions } = this.state;
return (
<Mention
placeholder="@someone"
style={{ width: 500, height: 100 }}
suggestions={suggestions}
onSearchChange={this.onSearchChange}
onSelect={onSelect}
/>
);
},

View File

@ -37,12 +37,14 @@ When need to mention someone or something.
| 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) | 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 |
### Nav props

View File

@ -16,6 +16,7 @@ export interface MentionProps {
className?: string;
multiLines?: Boolean;
prefix?: string;
placeholder?: string;
}
export interface MentionState {

View File

@ -37,10 +37,12 @@ title: Mention
| suggestionStyle | 弹出下拉框样式 | Object | {} |
| onSearchChange | 输入框中 @ 变化时回调 | function(value:String) | [] |
| onChange | 输入框内容变化时回调 | function(editorState: EditorState) | null |
| onSelect | 下拉框选择建议时回调 | function(suggestion: String) | null |
| notFoundContent| 未找到时的内容 | string | '无匹配结果,轻敲空格完成输入' |
| loading | 加载中 | boolean | false |
| multiLines | 多行模式 | boolean | false |
| prefix | 触发弹出下拉框的字符 | string | '@' |
| placeHolder | 输入框默认文字 | string | null |
| defaultValue | 默认值 | EditorState, 可以用 Mention.toEditorState(text) 把文字转换成 EditorState | null |
| value | 值 | EditorState | null |

View File

@ -19,7 +19,18 @@
overflow-y: auto;
height: auto;
}
.public-DraftEditorPlaceholder-root {
position: absolute;
.public-DraftEditorPlaceholder-inner {
color: #ccc;
opacity: 1;
outline: none;
white-space: pre-wrap;
word-wrap: break-word;
height: auto;
padding: 4px 7px;
}
}
.DraftEditor-editorContainer .public-DraftEditor-content {
height: auto;
padding: 4px 7px;

View File

@ -1,6 +1,6 @@
---
order: 4
title:
title:
zh-CN: 智能提示
en-US: Automatic completion
---
@ -9,13 +9,13 @@ title:
输入框自动完成功能,下面是一个账号注册表单的例子。
推荐使用 [AutoComplete](/components/auto-complete) 组件。
推荐使用 [AutoComplete](/components/auto-complete/) 组件。
## en-US
Automatic completion of select input.
Automatic completion of select input.
Using the [AutoComplete](/components/auto-complete) component is strongly recommended instead as it is more flexible and capable.
Using the [AutoComplete](/components/auto-complete/) component is strongly recommended instead as it is more flexible and capable.
````jsx

View File

@ -19,9 +19,9 @@ const Step = Steps.Step;
ReactDOM.render(
<Steps current={1} status="error">
<Step title="finished" description="This is description" />
<Step title="In Process" description="This is description" />
<Step title="Waiting" description="This is description" />
<Step title="Finished" description="This is a description" />
<Step title="In Process" description="This is a description" />
<Step title="Waiting" description="This is a description" />
</Steps>
, mountNode);
````

View File

@ -19,9 +19,9 @@ const Step = Steps.Step;
ReactDOM.render(
<Steps current={1}>
<Step title="Finished" description="This is description." />
<Step title="In Progress" description="This is description." />
<Step title="Waiting" description="This is description." />
<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
, mountNode);
````

View File

@ -19,9 +19,9 @@ const Step = Steps.Step;
ReactDOM.render(
<Steps direction="vertical" size="small" current={1}>
<Step title="Finished" description="This is description." />
<Step title="In Progress" description="This is description." />
<Step title="Waiting" description="This is description." />
<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
, mountNode);
````

View File

@ -19,9 +19,9 @@ const Step = Steps.Step;
ReactDOM.render(
<Steps direction="vertical" current={1}>
<Step title="Finished" description="This is description." />
<Step title="In Progress" description="This is description." />
<Step title="Waiting" description="This is description." />
<Step title="Finished" description="This is a description." />
<Step title="In Progress" description="This is a description." />
<Step title="Waiting" description="This is a description." />
</Steps>
, mountNode);
````