gpt4 book ai didi

angularjs - Angular Material 中的 md 菜单行为

转载 作者:行者123 更新时间:2023-12-02 23:18:56 25 4
gpt4 key购买 nike

我想要有多个 md 菜单,并让每个菜单打开并关闭另一个菜单,而不必先关闭已经打开的菜单?如何更改默认行为?

这里有一个 fiddle 来说明:https://jsfiddle.net/w1pf0et5/

<body ng-app="BlankApp" ng-cloak>

<md-menu md-offset="10 60" >
<!-- Trigger element is a md-button with an icon -->
<md-button ng-click="$mdOpenMenu($event)" aria-label="Open sample menu">
open first
</md-button>
<md-menu-content width="6" id="messages">

<md-menu-item md-menu-origin md-menu-align-target ><md-button ng-click="doSomething()">
Test 1
</md-button></md-menu-item>

<md-menu-item><md-button ng-click="doSomething()">
Test 2
</md-button></md-menu-item>

<md-menu-item><md-button ng-click="doSomething()">
Test 3
</md-button></md-menu-item>

<md-menu-item><md-button ng-click="doSomething()">
Test 4
</md-button></md-menu-item>

</md-menu-content>
</md-menu>

<md-menu md-offset="10 60" >
<!-- Trigger element is a md-button with an icon -->
<md-button ng-click="$mdOpenMenu($event)" aria-label="Open sample menu">
open second
</md-button>
<md-menu-content width="6" id="messages">

<md-menu-item md-menu-origin md-menu-align-target ><md-button ng-click="doSomething()">
Test 1
</md-button></md-menu-item>

<md-menu-item><md-button ng-click="doSomething()">
Test 2
</md-button></md-menu-item>

<md-menu-item><md-button ng-click="doSomething()">
Test 3
</md-button></md-menu-item>

<md-menu-item><md-button ng-click="doSomething()">
Test 4
</md-button></md-menu-item>

</md-menu-content>
</md-menu>

<script>
angular.module('BlankApp', ['ngMaterial']);

</script>

最佳答案

您必须将 md-menu-barmd-toolbar 一起使用才能获得所需的结果,并且必须使用 button 代替md-button 用于打开菜单(触发元素)。以下面的笔为例。

http://codepen.io/next1/pen/vGXOaY

关于angularjs - Angular Material 中的 md 菜单行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35959169/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com