如何將搜索欄添加到角材料？

我想將搜索輸入添加到<md-toolbar>，但似乎沒有任何樣式。它似乎添加一個搜索欄將是一個共同的標題元素，所以也許我失去了一些東西。如何將搜索欄添加到角材料？

<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>

然後在JS：

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

然而，當元素沒有顯示出來 - 很顯然，這是不應該因爲無論是間距，字體顏色期望使用的方式，或對齊匹配。

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

來源

2016-06-11 Xeoncross

所以缺少什麼？期望不清楚 – charlietfl

雖然這並不能解決試圖用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

來源

2016-06-11 19:17:29 Xeoncross

如何將搜索欄添加到角材料？

回答

相關問題