关于javascript：添加图标到angular材质输入

无卤 • • 问答

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>
                    <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，我遇到了样式问题，并且没有任何工作正常。

知道如何简单地将搜索图标添加到现有输入中吗？

相关讨论

  • 你想在哪里添加 icon ？内表？
  • 好吧，在文本输入的左边或右边，最好是右边。
  • 检查我在答案中添加了工作 plunker。

当您使用 angular-material-design 和 font-awesome-icon 时，使用 <md-icon> 作为具有 md-font-icon 属性的元素。

并使用 和 md-inout-container.

打工仔

改变这个：

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>

相关讨论

  • 是的，我试过了，但是图标变小了，就像我们聚焦输入时输入的占位符一样。您可以在那里看到占位符行为：material.angularjs.org/latest/#/demo/material.components.inp??ut
  • 你添加了 吗？像这样 <md-input-container>
  • 好吧，我在您编辑后也尝试过，但问题是内容的高度变得太大，并且我在输入内容中有一个滚动条。我想要一个带有图标的单行输入，就像最后一个示例中的电子邮件一样：material.angularjs.org/latest/#/demo/material.components.inp??ut
  • plunker 的示例和 angular-material 站点中的电子邮件输入没有区别。区别只是电子邮件没有标签但有占位符。我再次更新 Plunker。
  • 是的，但我的有一个滚动条，这可能是因为它的父母之一：aside > section > md-tabs > md-tab > md-content > form > md-content > md-input-container > input

这个问题很老了，但我今天早上刚遇到同样的问题，@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材质输入的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>