web-dev-qa-db-fra.com

Ajouter une icône à l'entrée de matériau angulaire

J'essaie d'ajouter une icône de recherche à ma barre de recherche en entrée sur Angular Matériel :

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

Lorsque j'essaie de reproduire l'exemple avec des icônes que nous pouvons voir ici: http://codepen.io/anon/pen/rOxMdR , j'ai des problèmes de style et rien ne fonctionne correctement.

Avez-vous une idée de la manière dont je pourrais simplement ajouter une icône de recherche à mon entrée existante?

javascripthtmlcssangularjsangular-material
6
Ellone

Lorsque vous utilisez angular-material-design et font-awesome-icon, utilisez <md-icon> en tant qu'élément avec l'attribut md-font-icon.

Et utilisez class="md-icon-float" avec md-inout-container.

Travailler plunker

Change ça :

<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

Cette question est très ancienne, mais je viens de rencontrer le même problème ce matin et la réponse de @gaurav n'a pas fonctionné de la même manière que ce que le PO cherchait dans ce lien: https://material.angularjs.org/ dernière/#/demo/material.components.input

Si vous ouvrez la console de développeur Chrome, vous pouvez inspecter l'élément et voir que les personnes qui ont écrit le code de démonstration utilisent une classe personnalisée pour le comportement de l'icône de l'email saisi dans la section des icônes en bas. J'ai essentiellement copié ce comportement pour obtenir le même effet souhaité.

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

Une chose à noter est que je devais ajouter la classe "md-icon-left" à mon md-container ou les icônes s'empileraient au-dessus de l'entrée. J'utilise un matériau angulaire v1.1.0 et angulaire js v1.5.5 dans mon projet. J'espère que cette réponse aidera toute autre personne cherchant à obtenir le même comportement que dans la démo Angular Material.

0
jsternadel