Добавить значок для углового ввода материала

Я пытаюсь добавить значок поиска в панель поиска ввода из 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 , у меня проблемы со стилем, и ничего не работает должным образом.

Любая идея, как я могу просто добавить значок поиска к моему существующему вводу?


javascript html css angularjs angular-material
person Ellone    schedule 14.09.2015    source источник
comment
куда вы хотите добавить icon ? внутренняя форма?   -  person gaurav bhavsar    schedule 14.09.2015
comment
Ну и слева или справа от ввода текста, желательно справа.   -  person Ellone    schedule 14.09.2015
comment
Проверьте, я добавил рабочий плунжер в свой ответ.   -  person gaurav bhavsar    schedule 14.09.2015

Ответы (2)


arrow_upward
5
arrow_downward

Поскольку вы используете 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>

To :

<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>
person gaurav bhavsar    schedule 14.09.2015
comment
Да, я пробовал это, но значок становится вверху в уменьшенном размере, точно так же, как заполнитель ввода, когда мы фокусируем ввод. Там вы можете увидеть поведение заполнителя: material.angularjs.org/latest/ #/demo/material.components.input - person Ellone; 14.09.2015
comment
вы добавили class=md-icon-float ? вот так <md-input-container class="md-icon-float"> - person gaurav bhavsar; 14.09.2015
comment
Ну, я тоже пробовал это после вашего редактирования, но тогда проблема в том, что высота содержимого становится слишком большой, и у меня есть полоса прокрутки во входном содержимом. Я хотел бы иметь однострочный ввод со значком, как электронная почта в последнем примере: material.angularjs.org/latest/#/demo/material.components.input - person Ellone; 14.09.2015
comment
нет никакой разницы между примером plunker и вводом электронной почты на сайте angular-material. разница только в том, что электронная почта не имеет метки, но имеет заполнитель. Я снова обновляю Plunker. - person gaurav bhavsar; 14.09.2015
comment
Да, но у меня есть полоса прокрутки, это, вероятно, из-за одного из его родителей: в стороне › раздел › md-tabs › md-tab › md-content › form › md-content › md-input-container › input - person Ellone; 15.09.2015

arrow_upward
1
arrow_downward

Этот вопрос очень старый, но сегодня утром я столкнулся с той же проблемой, и ответ от @gaurav не работал так же, как то, что искал ОП по этой ссылке: 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-контейнер, иначе значки будут складываться поверх ввода. Я использую угловой материал v1.1.0 и angular js v1.5.5 в своем проекте. Я надеюсь, что эти ответы помогут всем, кто хочет добиться того же поведения, что и в демонстрации Angular Material.

person jsternadel    schedule 19.11.2016