Question

我试图按一下按钮（搜索）点击它会打开一个搜索框。

这与聚合物网站今天的做法几乎相同： https://www.polymer-project.org/0.5/

我怎样才能实现这一目标？

由于

Answer 1

以下是基于Polymers 1.0文档中使用的app-bar的解决方案：

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/iron-input/iron-input.html">

<dom-module id="search-bar">
    <template>
        <style>
        #search {
            display: -webkit-box;
            display: -webkit-flex;
            display: -moz-flex;
            display: -ms-flexbox;
            display: -o-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -moz-align-items: center;
            -ms-align-items: center;
            -o-align-items: center;
            align-items: center;
            -webkit-box-flex: 1;
            -webkit-flex: 0 0 auto;
            -moz-flex: 0 0 auto;
            -ms-flex: 0 0 auto;
            -o-flex: 0 0 auto;
            flex: 0 0 auto;
            width: 40px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            background-color: inherit
        }

        #search[show] {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            padding: 0 16px;
            margin-left: 0
        }

        #search[show] input {
            padding: 10px;
            visibility: visible
        }

        input {
            background-color: inherit;
            border: none;
            font-size: 20px;
            outline: none;
            padding: 0;
            color: inherit;
            -webkit-box-flex: 1;
            -webkit-flex: 1 0 0;
            -moz-flex: 1 0 0;
            -ms-flex: 1 0 0;
            -o-flex: 1 0 0;
            flex: 1 0 0;
            visibility: hidden;
            -webkit-appearance: none
        }
        </style>
        <div id="search" show$="{{show}}" on-click="toggleSearch">
            <paper-icon-button icon="search"></paper-icon-button>
            <input is="iron-input" bind-value="{{searchInput}}" type="search" id="input" on-keyup="onKeyPress" autocomplete="off">
        </div>
    </template>
    <script>
    Polymer({
        is: 'search-bar',

        properties: {
            show: {
                type: Boolean,
                value: false
            },
            searchInput: {
                type: String,
                value: ''
            }
        },

        toggleSearch: function(e) {
            if (e) { // comes first
                e.stopPropagation();
            }
            if (e.target === this.$.input) {
                return;
            }
            this.show = !this.show;
            this.async(function() {
                this.$.input.focus();
            });
        },

        onKeyPress: function(e) {
            if (e.keyCode == 13) { // Enter
                var q = this.searchInput;
                //q = 'site:mysite.com+' + q; // edit site here
                window.open('https://www.google.com/search?q=' + q);
                this.show = false;
                this.searchInput = '';
            }
        }
    });
    </script>
</dom-module>

要隐藏搜索栏，请再次添加以下内容：

var searchBar = document.querySelector('search-bar');

document.addEventListener('click', function(e) {
    if(searchBar.show) {
            searchBar.toggleSearch(e);
    }
});

到您的主应用/页面。

聚合物搜索输入文本从图标

1 个答案: