添加圖標角料輸入

我想一個搜索圖標添加到我的輸入搜索欄出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，我有風格問題，沒有任何工作正常。

任何想法我如何能簡單地添加一個搜索圖標，以我現有的輸入？

來源

2015-09-14 Ellone

你想添加'icon'的位置？內部形式？ –

那麼，在文本輸入的左側或右側，最好是正確的。 – Ellone

檢查我在我的答案中加入了工作中的重擊者。 –

當您使用angular-material-design和font-awesome-icon使用<md-icon>作爲元素與md-font-icon屬性。

並使用class="md-icon-float"與md-inout-container。

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

來源

2015-09-14 13:33:40

是的，我試過了，但是，圖標在縮小尺寸時變大了，就像我們關注輸入時的佔位符一樣。你可以在那裏看到佔位符的行爲：https://material.angularjs.org/latest/#/demo/material.components.input – Ellone

你添加了class =「md-icon-float」嗎？這樣'' –

嗯，我想，你的編輯後也是如此，但隨後的問題是內容的高度變得太大了，我有一個滾動條在輸入內容中。我想有一個帶圖標的一個線路輸入，就像在過去的例子有電子郵件：https://material.angularjs.org/latest/#/demo/material.components.input – Ellone

這個問題是很老，但我只是碰到了同樣的問題，今天上午從@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-圖標左」我的MD-容器或圖標會堆疊在輸入的頂部。我在我的項目中使用角度材質v1.1.0和角度js v1.5.5。我希望這個答案能夠幫助其他任何想要在角度材質演示中實現相同行爲的人。

來源

2016-11-19 18:08:55 jsternadel

添加圖標角料輸入

回答

相關問題