Я использую Angular Material MenuBar и пытаюсь добавить стрелку, так что, когда меню открыто, стрелка вверх и переключается вниз при закрытии.
Я могу использовать ng-show
чтобы вызвать его при нажатии. Однако, если пользователь нажимает на изменение фокуса, закрывая меню (без повторного щелчка по меню) стрелка теперь находится в неправильном состоянии и не переключается обратно.
Я также попробовал ng-blur
который не работал так, как я надеялся.
Я думаю, мне нужно посмотреть событие закрытия в меню, но я не уверен, что это лучший способ сделать это с помощью md-menu-bar
. Любые предложения по наилучшему способу реализации этой стрелки переключения?
<md-menu-bar id="user-menu">
<md-menu md-position-mode="left bottom">
<md-button class="user-button" ng-click="$mdOpenMenu($event); model.UserMenuOpen = !model.UserMenuOpen;" aria-label="User Settings">
<span class="username" hide-xs ng-if="profile">{{profile.firstName}} {{profile.lastName}}</span>
<md-icon md-font-icon="icon-chevron-down" class="icon s16" ng-show="model.UserMenuOpen"></md-icon>
<md-icon md-font-icon="icon-chevron-up" class="icon s16" ng-show="!model.UserMenuOpen"></md-icon>
</div>
</md-button>
<md-menu-content>
<md-menu-item>
<md-icon md-font-icon="icon-cart-outline" class="icon"></md-icon>
<md-button>Cart</md-button>
</md-menu-item>
<md-menu-item>
<md-icon md-font-icon="icon-account" class="icon"></md-icon>
<md-button>Profile</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-menu-bar>
Решается через CSS, используя класс md-open.
#user-menu .arrow-up
{
display: none;
}
#user-menu md-menu .arrow-down
{
display: inline;
}
#user-menu md-menu.md-open .arrow-up
{
display: inline;
}
#user-menu md-menu.md-open .arrow-down
{
display: none;
}