Add icon to angular material input
我正在尝试使用 Angular Material 向我的输入搜索栏添加一个搜索图标：
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<section class="sidebar control-sidebar-dark" id="leftMenu"> <!– need to disable overflow–x somehow cuz of menu –> <md–tabs md–center–tabs id="menuTabs" md–dynamic–height="true" md–selected="selectedIndex"> <md–tab label="<i class=’fa fa-search’>" ng–if="handleResize()" search–Focus> </form> |
当我尝试使用我们可以在此处看到的图标重现示例时：http://codepen.io/anon/pen/rOxMdR，我遇到了样式问题，并且没有任何工作正常。
知道如何简单地将搜索图标添加到现有输入中吗？
当您使用
并使用
打工仔
改变这个：
|
1
2 3 4 5 6 |
<md–content md–theme="docs-dark">
<md–input–container style="padding-bottom: 5px;"> <label>{{isEnglish ? ‘Search…’ : ‘Recherche…’}}</label> <input ng–model="searchInput" id="sInput" ng–change="filterCartoList(searchInput)" my–enter="filterCartoList(searchInput)"> </md–input–container> </md–content> |
收件人：
|
1
2 3 4 5 6 7 |
<md–content md–theme="docs-dark">
<md–input–container class="md-icon-float"> <label>{{isEnglish ? ‘Search…’ : ‘Recherche…’}}</label> <md–icon md–font–icon="fa fa-search"></md–icon> <input ng–model="searchInput" id="sInput" ng–change="filterCartoList(searchInput)" my–enter="filterCartoList(searchInput)"> </md–input–container> </md–content> |
这个问题很老了，但我今天早上刚遇到同样的问题，@gaurav 的答案与 OP 在此链接中寻找的不同：https://material.angularjs.org /latest/#/demo/material.components.input
如果您打开 Chrome 开发者控制台，您可以检查该元素并看到编写演示代码的人正在使用自定义类来处理底部图标部分中电子邮件输入的图标行为。我基本上复制了该行为以达到相同的预期效果。
HTML:
|
1
2 3 4 5 6 7 8 |
<md–input–container class="md-block md-icon-left">
<md–icon class="form-icon">lock_outline</md–icon> <label>Password</label> <input type="password" ng–model="user.password" name="password" ng–required="true" ng–keyup="$event.keyCode == 13 && loginForm.$valid && login()"/> </md–input–container> |
CSS:
|
1
2 3 4 |
/* Angular extension */
md–input–container.md–input–invalid > md–icon.form–icon { color: #B71C1C; } |
需要注意的一点是，我必须将”md-icon-left”类添加到我的 md-container 中，否则图标会堆叠在输入的顶部。我在我的项目中使用 angular material v1.1.0 和 angular js v1.5.5。我希望这个答案可以帮助其他任何希望实现与 Angular Material 演示中相同的行为的人。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/269142.html