mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-12 20:43:11 +08:00
Code Issues Actions 26 Packages Projects Releases Wiki Activity

Improve AutoComplete demo

Browse Source
This commit is contained in:
afc163 2017-03-06 17:56:34 +08:00
parent aefdfb9458
commit 24f9c24f48
2 changed files with 18 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
components/auto-complete/demo/certain-category.md
View File

@ -46,16 +46,18 @@ const dataSource = [{
}]; }];
function renderTitle(title) { function renderTitle(title) {
return (<span> return (
{title} <span>
<a {title}
style={{ float: 'right' }} <a
href="https://www.google.com/search?q=antd" style={{ float: 'right' }}
target="_blank" href="https://www.google.com/search?q=antd"
rel="noopener noreferrer" target="_blank"
>更多 rel="noopener noreferrer"
</a> >更多
</span>); </a>
</span>
);
} }
const options = dataSource.map(group => const options = dataSource.map(group =>
@ -92,18 +94,8 @@ function Complete() {
dataSource={options} dataSource={options}
placeholder="input here" placeholder="input here"
optionLabelProp="value" optionLabelProp="value"
dropdownAlign={{
points: ['bl', 'tl'],
offset: [0, -4],
overflow: {
adjustX: 0,
adjustY: 0,
},
}}
> >
<Input <Input suffix={<Icon type="search" className="certain-category-icon" />} />
suffix={<Icon type="search" className="certain-category-icon" />}
/>
</AutoComplete> </AutoComplete>
</div> </div>
); );
@ -113,18 +105,8 @@ ReactDOM.render(<Complete />, mountNode);
```` ````
````css ````css
.certain-category-search.ant-select-auto-complete .ant-input {
height: 40px;
padding: 11px 12px;
}
.certain-category-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input-suffix { .certain-category-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input-suffix {
right: 16px; right: 12px;
}
.certain-category-search.ant-select-auto-complete .ant-select-selection__placeholder {
top: 20px;
margin-left: 12px;
margin-right: 12px;
} }
.certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title { .certain-category-search-dropdown .ant-select-dropdown-menu-item-group-title {
@ -156,7 +138,7 @@ ReactDOM.render(<Complete />, mountNode);
} }
.certain-category-search.ant-select-focused .certain-category-icon { .certain-category-search.ant-select-focused .certain-category-icon {
color: #49A9EE; color: #108ee9;
} }
.certain-category-icon { .certain-category-icon {

23
components/auto-complete/demo/uncertain-category.md
View File

@ -102,23 +102,8 @@ ReactDOM.render(<Complete />, mountNode);
width: 100%; 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 { .global-search.ant-select-auto-complete .ant-select-selection--single {
margin-right: -50px; margin-right: -46px;
} }
.global-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input:not(:last-child) { .global-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input:not(:last-child) {
@ -130,14 +115,12 @@ ReactDOM.render(<Complete />, mountNode);
} }
.global-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input-suffix button { .global-search.ant-select-auto-complete .ant-input-preSuffix-wrapper .ant-input-suffix button {
padding-top: 5px;
padding-bottom: 6px;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
.global-search-item-count { .global-search-item-count {
position: absolute; position: absolute;
right: 16px; right: 16px;
} }
```` ````