web-dev-qa-db-ja.com

AngularJSマテリアルデザインで簡単な検索入力テキストを作成するにはどうすればよいですか？

以下のように、拡張可能な検索テキストフィールドの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>

私の要件は、ユーザーがクリックしたときにカードタイトルのこのような検索ボタンを右にスナップして、入力を取得するために展開する必要があることです。Angular-Materialで行う必要があります。

任意の入力またはヘルプ..！ありがとう。

javascripthtmlcssangularjsangular-material
6
Diptesh Patil

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

クリーンな 'ネイティブ' angularマテリアルオプションがないようですので、 テキストフィールドオプションの1つを使用しました 'マテリアルデザインライト'ライブラリから- 拡張可能な検索ボタンgif-デモ

0
Fyodor