web-dev-qa-db-ja.com

アイコンをangularマテリアル入力に追加

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 、スタイルの問題が発生し、何も正しく機能しません。

既存の入力に検索アイコンを追加する方法はありますか？

javascripthtmlcssangularjsangular-material
7
Ellone

angular-material-designとfont-awesome-iconを使用しているので、<md-icon>属性を持つ要素としてmd-font-iconを使用します。

そして、class="md-icon-float"をmd-inout-containerと一緒に使用します。

動作中 プランカー

これを変える ：

<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>
3
gaurav bhavsar

この質問は非常に古いものですが、今朝同じ問題が発生し、@ 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;
}

注意すべき点の1つは、クラス「md-icon-left」をmd-containerに追加する必要があったことです。そうしないと、アイコンが入力の上にスタックします。私のプロジェクトではangular materialv1.1.0とangular js v1.5.5を使用しています。この回答が、同じ動作を実現しようとしている他の人に役立つことを願っています。 Angularマテリアルデモで。

0
jsternadel