Come creare un testo di input per la ricerca semplice nella progettazione dei materiali di AngularJS?

Question

Sto cercando un modo semplice per avere qualcosa di simile a quello che è disponibile in angular-mdl per il campo di testo di ricerca espandibile come di seguito .. Questo aggiungerà un pulsante di ricerca sul clic si espanderà al campo di testo.

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

La mia esigenza è quella di avere un tale pulsante di ricerca nel titolo scheda scattò a destra quando l'utente fa clic dovrebbe espandersi per prendere l'input .. e ho bisogno di farlo in Angular-materiale.

Qualsiasi input o aiuto ..! Grazie.

Answer 1

Stavo cercando un esempio di ricerca espandibile anche in Angolare con Materiale, e ho trovato questo codice in Codepen, ma non sono sicuro se sia esattamente quello che cerchi, apre un input a lunghezza intera con un pulsante indietro .. .

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

il codice HTML della barra degli strumenti è qualcosa di simile:

<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

Sembra che non ci sono pulito 'native' opzione materiale angolare per questo, quindi ho usato one of the textfield options da 'materi libreria al design lite '- expandable search button gif-demo