gpt4 book ai didi

html - 使用 md-menu 和 Material 图标构建垂直菜单

转载 作者:太空宇宙 更新时间:2023-11-04 08:29:59 24 4
gpt4 key购买 nike

我正在尝试使用 md-menu创建垂直菜单并使用 Material 图标。

但我得到的只是一个水平菜单,图标没有对齐,当我将它们放入 <md-icon md-svg-icon="hotel" md-menu-align-target></md-icon> 时将不起作用。

这是我的代码。

<md-menu md-position-mode="target-right target" class="">

<md-button aria-label="" class="md-icon-button" ng-click="$mdMenu.open()">
<img src="../img/Menu.png" alt="Menu">
</md-button>

<md-menu-content width="2">
<md-menu-item>
<md-button ui-sref="book"> <span md-menu-align-target><i class="material-icons">hotel</i> New Booking</span></md-button>
<md-button ui-sref="book"> <span md-menu-align-target><i class="material-icons">hotel</i> New Booking</span></md-button>
<md-menu-divider></md-menu-divider>
<md-button ui-sref="book"> <span md-menu-align-target><i class="material-icons">hotel</i> New Booking</span></md-button>
<md-button ui-sref="book"> <span md-menu-align-target><i class="material-icons">hotel</i> New Booking</span></md-button>
</md-menu-item>
</md-menu-content>

</md-menu>

上面是我想要的,下面是我当前的代码:

enter image description here

第一个问题 使菜单垂直并将其定位在我的箭头按钮下方。

第二个问题 让图标像我尝试过的 Angular 示例中那样显示。

我试过这样制作按钮:

<md-button ui-sref="book">
<md-icon md-svg-icon="hotel" md-menu-align-target></md-icon>
Booking
</md-button>

但是我没有图标。

最佳答案

您没有使用正确的 html 结构,md-menu-item 应该包含每个菜单项,应该是:

  <md-menu-item>
<md-button ui-sref="book"> <span md-menu-align-target><i class="material-icons">hotel</i> New Booking</span></md-button>
</md-menu-item>
<md-menu-item>
<md-button ui-sref="book"> <span md-menu-align-target><i class="material-icons">hotel</i> New Booking</span></md-button>
</md-menu-item>
...

关于html - 使用 md-menu 和 Material 图标构建垂直菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44866624/

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