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

发布时间：2020-12-17 09:29:47 所属栏目：安全来源：网络整理

导读：有没有办法将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.searchTex

有没有办法将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;
}

希望它有帮助.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!