如何在 AngularJS material 设计中创建简单的搜索输入文本?
How to create a simple search input text in AngularJS material design?
我正在寻找一些简单的方法来获得类似于 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.
任何意见或帮助..!
谢谢
我也在 Angular 和 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> </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>
似乎没有干净的 'native' angular material 选项,所以我使用了 one of the textfield options from 'material design lite' library - expandable search button gif-demo
我正在寻找一些简单的方法来获得类似于 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.
任何意见或帮助..! 谢谢
我也在 Angular 和 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> </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>
似乎没有干净的 'native' angular material 选项,所以我使用了 one of the textfield options from 'material design lite' library - expandable search button gif-demo