Add icon to angular material input我正在尝试使用 Angular Material 向我的输入搜索栏添加一个搜索图标:[cc lang=javascript] ...
我正在尝试使用 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> <md-content class="control-sidebar-dark" ng-style="{'height' : menuHeight}"> <!-- search Menu --> <form action="javascript:void(0)" method="get" class="sidebar-form" id="searchForm"> <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> </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 演示中相同的行为的人。
本文标题为:关于javascript:添加图标到angular材质输入
基础教程推荐
- vue的 Mixins (混入) 2023-10-08
- 分页技术原理与实现之无刷新的Ajax分页技术(三) 2023-01-20
- 第7天:CSS入门 2022-11-04
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽) 2023-02-01
- ExtJS 3.x DateField menuListeners 显示/隐藏 2022-09-15
- 关于 css:WebKit (iPad) CSS3: 背景过渡闪烁 2022-09-21
- ECSHOP中实现ajax弹窗登录功能 2023-01-31
- Vue+WebSocket实现在线聊天 2023-10-08
- 深入浅析Jsonp解决ajax跨域问题 2022-12-28
- 解决ajax的delete、put方法接收不到参数的问题方法 2023-02-23