角度材料に検索バーを追加するにはどうすればよいですか？

Question

私は<md-toolbar>に検索入力を追加しようとしていますが、このための任意のスタイリングがあるようには思えません。それは検索バーを追加することが一般的なヘッダー要素になるようですので、おそらく私は何かが不足しています。 JSで次に

<md-toolbar md-theme="input"> 
     <md-input-container flex> 
     <md-icon class="material-icons">&#xE8B6;</md-icon> 
     <input ng-model="search.notes" placeholder="Search here"> 
     </md-input-container> 
    </md-toolbar> 

：

app.config(['$mdThemingProvider', function($mdThemingProvider) { 
    $mdThemingProvider.theme('input') 
     .primaryPalette('blue') 
     .accentPalette('pink') 
     .warnPalette('red') 
     .backgroundPalette('grey'); 
    } 
]); 

しかし、要素が現れないながら - それは明らかだ、これは、それはどちらの間隔、フォント、色ので、使用すべきである意図の方法ではありませんかアラインメントが一致する。

http://codepen.io/Xeoncross/pen/rLxEqv

Answer 1

これは、ツールバー/ヘッダ内md-inputを使用しようとする問題を解決していませんが。 md-contentはコンテンツ領域を暗くして、普通のmd-contentブロックから目立つようにして、ツールバーのように見えるようにすることができます。あなたが黒を気にしないなら、問題の周りの仕事の種類。

<md-content md-theme="input" layout="column" layout-padding> 
    <md-input-container style="padding-bottom: 0; margin-bottom: 0"> 
    <md-icon class="material-icons">&#xE8B6;</md-icon> 
    <input ng-model="search.notes" placeholder="Search here"> 
    </md-input-container> 
</md-content> 

やテーマJS：ここ

app.config(['$mdThemingProvider', function($mdThemingProvider) { 
    $mdThemingProvider.theme('input') 
     .primaryPalette('blue') 
     .dark();     // <----- Note 
    } 
]); 

例：http://codepen.io/Xeoncross/pen/jrWgqY