improve components search dropdown style

8f39e43f · afc163 · 4135a00e · 8f39e43f · 8f39e43f · 8f39e43f
隐藏空白更改
内联并排

Showing with 21 addition and 5 deletion

scripts/demo.js scripts/demo.js +2 -3

site/templates/layout.html site/templates/layout.html +1 -1

static/style.css static/style.css +18 -1

未找到文件。
--- a/scripts/demo.js
+++ b/scripts/demo.js
@@ -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>;
    }
  });

--- a/site/templates/layout.html
+++ b/site/templates/layout.html
@@ -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 }}

--- a/static/style.css
+++ b/static/style.css
@@ -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 {