From af7dafe0b866d43cdcaff53f1ea08ee68d0646cb Mon Sep 17 00:00:00 2001 From: Erwann Mest Date: Fri, 10 Feb 2017 15:59:16 +0100 Subject: [PATCH 1/2] Update LocaleProvider doc to be clearer. (#4833) * Update LocaleProvider doc to be clearer. * Update index.en-US.md --- components/locale-provider/index.en-US.md | 1 + 1 file changed, 1 insertion(+) diff --git a/components/locale-provider/index.en-US.md b/components/locale-provider/index.en-US.md index 26e53522a3..2b44ce69a1 100644 --- a/components/locale-provider/index.en-US.md +++ b/components/locale-provider/index.en-US.md @@ -13,6 +13,7 @@ title: LocaleProvider ```jsx +import { LocaleProvider } from 'antd'; import enUS from 'antd/lib/locale-provider/en_US'; ... From 49bbb2225f30417595026ad1a09975f0e6fc61a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=86=E7=A6=BB?= Date: Fri, 10 Feb 2017 22:59:28 +0800 Subject: [PATCH 2/2] Add Demo of Uncertain Category (#4828) * Add Demo of Uncertain Category + close #4736 * add class prefix and cut lines --- .../auto-complete/demo/uncertain-category.md | 126 ++++++++++++++++++ 1 file changed, 126 insertions(+) create mode 100644 components/auto-complete/demo/uncertain-category.md diff --git a/components/auto-complete/demo/uncertain-category.md b/components/auto-complete/demo/uncertain-category.md new file mode 100644 index 0000000000..1fd99c66b0 --- /dev/null +++ b/components/auto-complete/demo/uncertain-category.md @@ -0,0 +1,126 @@ +--- +order: 3 +title: + zh-CN: 查询模式 - 不确定类目 + en-US: Lookup-Patterns - Uncertain Category +--- + +## zh-CN + +[查询模式: 不确定类目](https://ant.design/docs/spec/reaction#Lookup-Patterns) 示例。 + +## en-US + +Demonstration of [Lookup Patterns: Uncertain Category](https://ant.design/docs/spec/reaction#Lookup-Patterns). +Basic Usage, set datasource of autocomplete with `dataSource` property. + +````__react +import { Icon, Button, Input, AutoComplete } from 'antd'; +const Option = AutoComplete.Option; +const InputGroup = Input.Group; + +function onSelect(value) { + console.log('onSelect', value); +} + +function getRandomInt(max, min = 0) { + return Math.floor(Math.random() * (max - min + 1)) + min; +} + +function searchResult(query) { + return (new Array(getRandomInt(5))).join('.').split('.') + .map((item, idx) => ({ + query, + category: `${query}${idx}`, + count: getRandomInt(200, 100), + })); +} + +function renderOption(item) { + return ; +} + +const Complete = React.createClass({ + getInitialState() { + return { + dataSource: [], + }; + }, + handleChange(value) { + if (value) { + this.setState({ + dataSource: searchResult(value), + }); + } + }, + render() { + const { dataSource } = this.state; + return ( +
+ + + + } /> + +
+ ); + }, +}); + +ReactDOM.render(, mountNode); +```` + +````css +.global-search-wrapper { + padding-right: 50px; +} + +.global-search { + width: 100%; +} + +.global-search.ant-select-auto-complete .ant-input { + height: 40px; + padding: 11px 12px; +} + +.global-search.ant-select-auto-complete .ant-select-selection__placeholder { + top: 20px; + margin-left: 12px; + margin-right: 12px; +} + +.global-search .search-btn { + font-size: 18px; +} + +.global-search.ant-select-auto-complete .ant-select-selection--single { + margin-right: -50px; +} + +.global-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input:not(:last-child) { + padding-right: 62px; +} + +.global-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input-suffix { + right: 0; +} + +.global-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input-suffix button { + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +```` \ No newline at end of file