在Angular Material输入框中添加图标

Question

在Angular Material输入框中添加图标

javascripthtmlcssangularjsangular-material

8

我正在尝试将搜索图标添加到我的输入搜索栏，使用的是Angular Material库：

<aside class="main-sidebar">
    <section class="sidebar control-sidebar-dark" id="leftMenu">
        <div>
            <!--  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'></i>" ng-if="handleResize()" search-Focus>
                    <md-content class="control-sidebar-dark" ng-style="{'height' : menuHeight}">
                        <!-- search Menu -->
                        <div>
                            <div>
                                <form action="javascript:void(0)" method="get" class="sidebar-form" id="searchForm">
                                    <div>
                                    <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>
                                    </div>

                                </form>
                                <div>

我想复制这个示例中的图标：http://codepen.io/anon/pen/rOxMdR，但是我遇到了样式问题，什么都不能正常工作。

您有什么想法可以简单地将搜索图标添加到我的现有输入框中吗？

- Ellone

你想在哪里添加 icon？在表单内部吗？ - gaurav bhavsar

最好在文本输入框的左侧或右侧，最好是右侧。 - Ellone

请检查我在答案中添加的可工作的 Plunker。 - gaurav bhavsar

2个回答

1

这个问题很老了，但今天早上我遇到了同样的问题，@gaurav的答案与OP在此链接中所寻找的不同：https://material.angularjs.org/latest/#/demo/material.components.input 如果您打开Chrome开发者控制台，您可以检查该元素，并查看编写演示代码的人在底部图标部分的电子邮件输入方面使用了自定义类。我基本上复制了那种行为以实现相同的期望效果。

HTML：

<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：

/* 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演示相同行为的人。

- jsternadel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gaurav bhavsar · Accepted Answer

由于您正在使用 angular-material-design 和 font-awesome-icon，请使用具有 md-font-icon 属性的 <md-icon> 元素。

并且与 md-inout-container 一起使用 class="md-icon-float"。

工作的plunker

将此更改为：

<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>

收件人：

<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>