如何使用材质角度在导航栏上执行下拉项

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用材质角度在导航栏上执行下拉项相关的知识,希望对你有一定的参考价值。

我正在使用Angularjs和google的Material Angular库qazxsw poi

他们在他们的网站上的导航栏中有下拉项目,但我找不到任何对象或示例来制作我自己的。

我怎样才能做到这一点?

谢谢!

答案

您可以在下面的代码中使用Angular Material Side Menu

标记

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'; });

另一答案

“创建您自己的物质导航菜单”

我希望这个博客可以帮到你,Working Plunkr

见工作please visit here

另一答案

如果有其他人登陆,那么值得一提的是,在Angular ngHide和ngShow指令的帮助下,这可以很容易地完成。任何装饰,如图标,样式,动画等都可以添加到它,但如果你这样做,功能是非常直接的:

这是一个单一菜单层的模板(切换项和子菜单项)

plunkr

以下是它可能是你将看到的最简单的控制器,尽管如果它在它自己的json文件中会更好;)

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

你可能会发现它工作.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。

在这里,我将跟踪控制器中的活动菜单项。

here

https://github.com/mtushar091/angularjs_sideMenu

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>

以上是关于如何使用材质角度在导航栏上执行下拉项的主要内容,如果未能解决你的问题,请参考以下文章

在角度引导 ui 中单击时关闭下拉菜单

如何在导航栏上设置常用栏按钮项

如何进行活动菜单文本颜色更改导航下拉项子菜单? [复制]

无法在导航栏上添加导航项

鼠标悬停时打开角度材质菜单

导航栏上的菜单项和导航栏左侧的公司图标