How do you add a search bar to angular material?
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
Xeoncross
PHP, Javascript, and Go Application developer responsible for over 50 open source projects and libraries at https://github.com/xeoncross By default I build Go backends with AngularJS frontends. Thanks to Ionic and Electron this even works for mobile and desktop apps. Bash, PHP, Python, Node.js, and random linux libraries are used for specific tasks because of the size of the ecosystems or libraries for odd jobs.
Updated on June 04, 2022Comments
-
Xeoncross almost 2 years
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.