mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-02 20:19:44 +08:00
Merge branch 'master' of github.com:ant-design/ant-design
This commit is contained in:
commit
b63d620625
@ -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
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 链接
|
||||
|
@ -75,7 +75,8 @@ tsconfig.json
|
||||
{
|
||||
"compilerOptions": {
|
||||
"moduleResolution": "node",
|
||||
"jsx": "preserve"
|
||||
"jsx": "preserve",
|
||||
"allowSyntheticDefaultImports": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
@ -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);
|
||||
````
|
||||
|
@ -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}
|
||||
/>
|
||||
);
|
||||
},
|
||||
|
@ -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
|
||||
|
||||
|
@ -16,6 +16,7 @@ export interface MentionProps {
|
||||
className?: string;
|
||||
multiLines?: Boolean;
|
||||
prefix?: string;
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
export interface MentionState {
|
||||
|
@ -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 |
|
||||
|
||||
|
@ -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;
|
||||
|
@ -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
|
||||
|
@ -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);
|
||||
````
|
||||
|
@ -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);
|
||||
````
|
||||
|
@ -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);
|
||||
````
|
||||
|
@ -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);
|
||||
````
|
||||
|
Loading…
Reference in New Issue
Block a user