mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-08-05 23:46:28 +08:00
Code Issues Actions 18 Packages Projects Releases Wiki Activity

improve components search dropdown style

Browse Source
This commit is contained in:
afc163 2015-07-30 15:33:45 +08:00
parent 4135a00e79
commit 8f39e43f72
3 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
scripts/demo.js
View File

@ -18,7 +18,7 @@ $(function () {
return <Option sData={s} key={s.title} text={'跳转到 ' + s.title}>
<strong>{s.title}</strong>
&nbsp;
<span>{s.desc}</span>
<span className="ant-component-decs">{s.desc}</span>
</Option>;
});
},
@ -34,12 +34,11 @@ $(function () {
},
render() {
return <Select combobox style={{width: 200}}
return <Select combobox style={{width: 260}}
onSelect={this.handleSelect}
optionLabelProp="text"
dropdownMenuStyle={{maxHeight: 200, overflow: 'auto'}}
searchPlaceholder="搜索组件..."
renderDropdownToBody={true}
filterOption={this.filterOption}>{this.getOptions()}</Select>;
}
});

2
site/templates/layout.html
View File

@ -78,7 +78,7 @@
{% block scripts %}{% endblock %}
</head>
<body {% block bodyAttribute %}{% endblock %}>
<header id="header">
<header id="header" class="clearfix">
<a class="logo" href="/">
<img width="60" src="https://t.alipayobjects.com/images/rmsweb/T1B9hfXcdvXXXXXXXX.svg">
{{ config.site.name }}

19
static/style.css
View File

@ -117,7 +117,6 @@ a:hover {
header {
width: 100%;
background: #fff;
overflow: hidden;
border-bottom: 1px solid #eee;
font-size: 16px;
}
@ -167,6 +166,10 @@ a.logo {
margin-top: -2px;
}
#autoComplete .ant-select {
font-size: 14px;
}
#autoComplete .ant-select-selection--single {
border: transparent;
outline: none;
@ -179,6 +182,20 @@ a.logo {
box-shadow: none;
}
#autoComplete .ant-select-dropdown {
border: 0;
border-radius: 0;
box-shadow: 0 0 8px rgba(0,0,0,0.25);
}
#autoComplete .ant-component-decs {
font-size: 12px;
position: absolute;
top: 9px;
color: #aaa;
right: 16px;
}
#autoComplete input::-webkit-input-placeholder,
#autoComplete input::-moz-placeholder,
#autoComplete input:-ms-input-placeholder {