聚合物搜索從圖標輸入文本

Question

我試圖做一個按鈕（搜索），一旦點擊它將打開一個搜索框。

這幾乎是該聚合物網站做同樣的事情今天： https://www.polymer-project.org/0.5/

我怎樣才能做到這一點？

感謝

Answer 1

這是基於在聚合物中使用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); 
    } 
}); 

到您的主應用程序/頁。