如何在导航栏上用有角度的材料做下拉项
How to do dropdown item on navbar with material angular
我正在使用Angularjs和谷歌材料角度库https://material.angularjs.org/
他们在网站的导航栏中有下拉项目,但我找不到任何可以自己制作的对象或示例。
我怎样才能做到这一点?
谢谢!
您可以使用以下代码的角度材料侧菜单
标记
<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>
Plunkr
我可以给你关于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>
控制器
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';
});
工作Plunkr
"创建自己的角度材料导航菜单"
我希望这个博客可以帮助你,请访问这里
参见工作plunkr
为了防止其他人进入,值得一提的是,在Angular ngHide和ngShow指令的帮助下,这可以很容易地完成。任何装饰,如图标、样式、动画等都可以添加到其中,但如果你这样做,功能是非常直接的:
这是一个单一菜单层(切换项和子菜单项)的模板
<md-button ng-click="menuIsOpen = !menuIsOpen" layout="row"> Trigger</md-button>
<ul ng-init="menuIsOpen= false" ng-show="menuIsOpen">
<md-menu-item ng-repeat="item in data">
<md-button>
<div layout="row" flex="">
<a ui-sref="{{item.link}}" class="">
<p flex=""><i class="fa fa-{{item.icon}}"></i> {{item.title}}</p>
</a>
</div>
</md-button>
</md-menu-item>
</ul>
这可能是你见过的最简单的控制器,尽管如果它在自己的json文件中会更好;)
.controller('ListBottomSheetCtrl', function($scope) {
$scope.data = [{
title: 'Home',
icon: 'home',
link: '/page1/'
}, {
title: 'Email us',
icon: 'envelope',
link: '/page2/'
}, {
title: 'Profile',
icon: 'user',
link: '/page3/'
}, {
title: 'Print',
icon: 'print',
link: '/page4/'
}, ];
})
您可能会发现它在此处运行
看!容易的不需要太疯狂,在编程中很容易做到。用于可维护性的销售;)
一个简单的,我自己做的。使用Angular材料库
只需使用Md列表项和两个指令(如ng-show、ng-class)就可以做到这一点。
在这里,我正在跟踪控制器中的活动菜单项。
https://github.com/mtushar091/angularjs_sideMenu
侧菜单.png
<md-list ng-repeat="menu in menus" class="list_no_padding manu_container">
<!-- MAIN MENU ITEMS -->
<md-list-item
ng-click="parentMenuAction(menu)"
class="menu_item"
ng-class="{active: menu === activeMenu}">
<md-icon md-svg-icon="res/icons/{{menu.icon}}"></md-icon>
<p>{{menu.name}}</p>
<span flex></span>
<md-icon
md-svg-icon="res/icons/ic_keyboard_arrow_right_24px.svg"
ng-click="parentMenuAction(menu)"
ng-show="menu.items.length != 0"
class="nav_icon md-toggle-icon"
aria-hidden="true">
</md-icon>
</md-list-item>
<!-- SUB MENU ITEMS -->
<md-list-item
ng-repeat="item in menu.items"
ng-click="chieldMenuAction(item)"
ng-show="menu === activeMenu"
class="sub_menu_item animate-show-hide"
ng-class="{'sub_active': item === activeSubMenu}">
<p>{{item.name}}</p>
</md-list-item>
</md-list>
// Init Default Active Item...
$scope.activeMenu = { };
$scope.activeSubMenu = { };
// Sidenav Toggle
$scope.toggle = function() { $mdSidenav('left').toggle(); };
$scope.menus = [
{
icon: "ic_apps_24px.svg",
name: "Tables",
state: "home.table",
items : [{name : 'Submenu 1'}, {name : 'Submenu 2'}, {name : 'Submenu 2'}]
},
{ icon: "ic_attach_file_24px.svg", name: "Reminders", items : [] },
{
icon: "ic_archive_24px.svg",
name: "Inspriation",
items : [{name : 'Submenu 1'}, {name : 'Submenu 2'}, {name : 'Submenu 2'}]
},
{
icon: "ic_apps_24px.svg",
name: "Notes",
items : [{name : 'Submenu 1'}, {name : 'Submenu 2'}, {name : 'Submenu 2'}]
},
{ icon: "ic_attach_file_24px.svg", name: "Reminders", items : [] },
{
icon: "ic_archive_24px.svg",
name: "Inspriation",
items : [{name : 'Submenu 1'}, {name : 'Submenu 2'}, {name : 'Submenu 2'}]
},
{
icon: "ic_battery_30_24px.svg",
name: "Personal",
items : [{name : 'Submenu 1'}, {name : 'Submenu 2'}, {name : 'Submenu 2'}]
},
{
icon: "ic_archive_24px.svg",
name: "Inspriation",
items : [{name : 'Submenu 1'}, {name : 'Submenu 2'}, {name : 'Submenu 2'}]
}
];
// MENU ITEM NAVIGATION ....................................
$scope.parentMenuAction = function(menu) {
//Set as Active Menu or Remove as Active menu
$scope.activeMenu = (menu === $scope.activeMenu) ? {} : menu;
// Other Things to Do When Parent Manu is Clicked ...
console.log('Active Menu ' + $scope.activeMenu.name);
$state.go(menu.state);
};
// SUB MENU ITEM NAVIGATION ..............................
$scope.chieldMenuAction = function(item) {
// Set As Active SubMenu Item
$scope.activeSubMenu = item;
console.log('Active SubMenu ' + $scope.activeSubMenu);
}
相关文章:
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- angular 1.5应用程序中的导航栏
- 无法从jquery Mobile导航栏重定向到另一个页面
- 引导程序:在导航栏中,显示悬停在单个位置的基于Li Link的不同内容
- 导航到特定事件的另一个变量页面
- MVC 3页面导航和使用javascript传递参数
- 如何在react js中从一个页面导航到另一个页面
- JavaScript的额外材料:理解奇怪的部分
- 导航栏没有调整到浏览器屏幕的大小
- 显示放大镜弹出窗口时隐藏导航内容
- DataTable按下键选择扩展/导航
- 正在检测导航到<a name=“;最新主题”></a>
- 带有url的单页网站导航
- 父页面的角度路由器导航高亮显示
- 如何正确编程jQuery动画与平滑(导航栏)
- 动态更改'汉堡包'导航取决于BG图像
- 无法读取属性'材料'未定义的Three.js
- 如何在导航栏上用有角度的材料做下拉项
- 材料设计精简版 - 导航锁定到位
- AngularJS材料 - 侧面导航无法使用玉石