AngularJS सामग्री डिज़ाइन में एक साधारण खोज इनपुट टेक्स्ट कैसे बनाएं?

Question

मैं विस्तार से खोज टेक्स्ट फ़ील्ड के लिए कोणीय-एमडीएल में जो कुछ भी उपलब्ध है, उसके समान कुछ आसान तरीका ढूंढ रहा हूं .. यह क्लिक पर एक खोज बटन जोड़ देगा, यह टेक्स्ट फ़ील्ड में विस्तारित होगा।

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

मैं सामग्री के साथ कोणीय में विस्तारणीय खोज का कुछ उदाहरण ढूंढ रहा था, और कोडपेन में यह कोड पाया, लेकिन यह सुनिश्चित नहीं है कि यह ठीक है कि आप क्या देखते हैं, यह बैक बटन के साथ एक पूर्ण लंबाई इनपुट खोलता है .. ।

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

उपकरण पट्टी के एचटीएमएल कुछ इस तरह है:

<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 इस्तेमाल किया अल डिजाइन लाइट 'लाइब्रेरी - expandable search button gif-demo