我将 Angularjs 与 googles Material Angular 库一起使用 https://material.angularjs.org/
他们在他们网站的导航栏中有下拉元素,但我找不到任何对象或示例来制作我自己的元素。
我怎样才能做到这一点?
谢谢!
最佳答案
您可以在下面的代码中使用 Angular Material Side Menu
标记
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2"
md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
<md-list>
<md-item ng-repeat="item in menu">
<a>
<md-item-content md-ink-ripple layout="row" layout-align="start center" ng-click="$parent.navigate(item.icon)">
<div class="inset">
<ng-md-icon icon="{{item.icon}}" ></ng-md-icon>
<md-tooltip md-direction="right">{{item.title}}</md-tooltip>
</div>
</md-item-content>
<md-divider></md-divider>
</a>
</md-item>
<md-divider></md-divider>
<md-item ng-repeat="item in admin">
<a>
<md-item-content md-ink-ripple layout="row" layout-align="start center">
<div class="inset">
<ng-md-icon icon="{{item.icon}}"></ng-md-icon>
<md-tooltip md-direction="right">{{item.title}}</md-tooltip>
</div>
</md-item-content>
</a>
</md-item>
</md-list>
</md-sidenav>
我可以给你关于 md-select
的想法,它将充当下拉菜单。
标记
<body data-ng-controller="MainCtrl">
<h1>md-select demo</h1>
<md-select ng-model="widgetType" >
<md-option ng-value="t.title" data-ng-repeat="t in widget">{{ t.title }}</md-option>
</md-select>
</body>
Controller
var app = angular.module('DemoApp', ['ngMaterial']);
app.controller('MainCtrl', function($scope) {
$scope.widget = [{
"id": "line",
"title": "Line"
}, {
"id": "spline",
"title": "Smooth line"
}, {
"id": "area",
"title": "Area"
}, {
"id": "areaspline",
"title": "Smooth area"
}];
//init
$scope.widgetType = 'Line';
});
关于javascript - 如何使用 Material Angular 在导航栏上做下拉元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29397130/