web-dev-qa-db-fra.com

Comment créer un texte d'entrée de recherche simple dans la conception de matériau AngularJS?

Je suis à la recherche d'un moyen simple d'obtenir quelque chose de similaire à ce qui est disponible dans angular-mdl pour un champ de recherche extensible comme ci-dessous .. Cela ajoutera un bouton de recherche en cliquant dessus, il sera étendu au champ de texte.

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

Mon exigence est d’avoir un tel bouton de recherche dans le titre de la carte accroché à droite lorsque l’utilisateur clique dessus, il devrait s’agrandir pour prendre une entrée .. et je dois le faire dans Angular-Material.

Toute entrée ou aide ..! Merci.

javascripthtmlcssangularjsangular-material
6
Diptesh Patil

Je cherchais également un exemple de recherche extensible dans Angular avec Matériau. J'ai trouvé ce code dans Codepen, mais je ne suis pas sûr que ce soit exactement ce que vous cherchez. Il ouvre une saisie de toute la longueur avec un bouton Précédent. .

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

Le code HTML de la barre d’outils ressemble à ceci:

<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>
5
Dunos

On dirait qu’il n’existe pas d’option matérielle angulaire «native» propre pour cela; j’ai donc utilisé une des options de champ de texte de la bibliothèque 'material design lite' - bouton de recherche extensible gif-demo

0
Fyodor