I am trying to add a search input to an <md-toolbar>
but there doesn't seem to be any styling for this. It seems adding a search bar would be a common header element so perhaps I am missing something.
<md-toolbar md-theme="input">
<md-input-container flex>
<md-icon class="material-icons"></md-icon>
<input ng-model="search.notes" placeholder="Search here">
</md-input-container>
</md-toolbar>
Then in the JS:
app.config(['$mdThemingProvider', function($mdThemingProvider) {
$mdThemingProvider.theme('input')
.primaryPalette('blue')
.accentPalette('pink')
.warnPalette('red')
.backgroundPalette('grey');
}]);
However, while the element does show up - it's clear this is not the intended way it should be used since neither the spacing, font-color, or alignment match up.
While this doesn't solve the problem of trying to use md-input
inside a toolbar/header. You can make md-content
look like a toolbar of sorts by making the content area dark so it stands out from regular md-content
blocks. Kind of a work around the problem if you don't mind black.
<md-content md-theme="input" layout="column" layout-padding>
<md-input-container style="padding-bottom: 0; margin-bottom: 0">
<md-icon class="material-icons"></md-icon>
<input ng-model="search.notes" placeholder="Search here">
</md-input-container>
</md-content>
and the theme js:
app.config(['$mdThemingProvider', function($mdThemingProvider) {
$mdThemingProvider.theme('input')
.primaryPalette('blue')
.dark(); // <----- Note
}
]);
Example here: http://codepen.io/Xeoncross/pen/jrWgqY