材料设计 – 如何使用md-icon与md-autocomplete在角材料设计?

前端之家收集整理的这篇文章主要介绍了材料设计 – 如何使用md-icon与md-autocomplete在角材料设计?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有没有办法将md-icon放在md-autocomplete中
<md-autocomplete 
       md-selected-item="ctrl.selectedItem"
       md-search-text-change="ctrl.searchTextChange(ctrl.searchText)"
       md-search-text="ctrl.searchText"
       md-items="item in ctrl.querySearch(ctrl.searchText)"
       md-item-text="item.display"
       placeholder="What is your favorite US state?">

   <md-icon class="material-icon">search</md-icon> // ofcourse,I think It won't work

  </md-autocomplete>

codepen

这不是角质材料(开箱即用).
见这 closed issue.

作为解决方法,您可以使用一些自定义CSS进行类似的操作.

看这个working plunker的例子.

HTML:(注意id和md-input-name)

<md-autocomplete id="custom" md-input-name="autocompleteField".../>

CSS:

#custom input[name="autocompleteField"]  {
    background: url(images/search.icon.png);
    background-repeat: no-repeat;
    background-position: 5px 7px;
    padding: 0px 35px;
}

希望它有帮助.

猜你在找的Angularjs相关文章