AngularJSマテリアルデザインで簡単な検索入力テキストを作成する方法は？

Question

私は以下のように拡張可能な検索テキストフィールドのためにangular-mdlで利用できるものに似た何かを簡単に見つける方法を探しています。 クリックすると検索ボタンがテキストフィールドに展開されます。

<!-- Expandable Textfield --> 
<form action="#"> 
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable"> 
    <label class="mdl-button mdl-js-button mdl-button--icon" for="sample6"> 
     <i class="material-icons">search</i> 
    </label> 
    <div class="mdl-textfield__expandable-holder"> 
     <input class="mdl-textfield__input" type="text" id="sample6"> 
     <label class="mdl-textfield__label" for="sample-expandable">Expandable Input</label> 
    </div> 
    </div> 
</form> 

私の要件は...ユーザーは、それが入力を取るために展開する必要がありますクリックしたときにカードのタイトルで、検索ボタンが右側にスナップ持つことであると私は角-材質でそれを行う必要があります。

入力またはヘルプ..！おかげさまで

Answer 1

Angular with Materialでも拡張可能な検索の例を探していましたが、このコードをCodepenで見つけましたが、探しているものが正確かどうかはわかりません。 。

http://codepen.io/kyleledbetter/pen/gbQOaV

ツールバーのHTMLは次のようなものです：

<md-toolbar ng-show="!showSearch"> 
    <div class="md-toolbar-tools"> 
    <md-button ng-click="toggleSidenav('left')" hide-gt-md aria-label="Menu"> 
     <ng-md-icon icon="menu"></ng-md-icon> 
    </md-button> 
    <h3> 
     Dashboard 
     </h3> 
    <span flex></span> 
    <md-button aria-label="Search" ng-click="showSearch = !showSearch"> 
     <ng-md-icon icon="search"></ng-md-icon> 
    </md-button> 
    <md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)"> 
     <ng-md-icon icon="more_vert"></ng-md-icon> 
    </md-button> 
    </div> 
</md-toolbar> 
<md-toolbar class="md-hue-1" ng-show="showSearch"> 
    <div class="md-toolbar-tools"> 
    <md-button ng-click="showSearch = !showSearch" aria-label="Back"> 
     <ng-md-icon icon="arrow_back"></ng-md-icon> 
    </md-button> 
    <h3 flex="10"> 
     Back 
     </h3> 
    <md-input-container md-theme="input" flex> 
     <label>&nbsp;</label> 
     <input ng-model="search.who" placeholder="enter search"> 
    </md-input-container> 
    <md-button aria-label="Search" ng-click="showSearch = !showSearch"> 
     <ng-md-icon icon="search"></ng-md-icon> 
    </md-button> 
    <md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)"> 
     <ng-md-icon icon="more_vert"></ng-md-icon> 
    </md-button> 
    </div> 

</md-toolbar> 

Answer 2

は、そのためのクリーンな「ネイティブ」の角材料の選択肢がないように思えるので、私は「materiからone of the textfield optionsを使用しましたal lite 'library - expandable search button gif-demo