在Angular + Bulma CSS框架中定义 Navbar menu 事件
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<!-- navbar items, navbar burger... -->
</div>
<div class="navbar-menu">
<!-- navbar start, navbar end -->
</div>
</nav>
``
The navbar-menu is hidden on touch devices < 1024px . You need to add the modifier class is-active to display it.
```
And here is another implementation example, which again toggles the class is-active on both the navbar-burger and the targeted navbar-menu, but this time in jQuery.
$(document).ready(function() {
// Check for click events on the navbar burger icon
$(".navbar-burger").click(function() {
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
$(".navbar-burger").toggleClass("is-active");
$(".navbar-menu").toggleClass("is-active");
});
});
Angular:
import { Component, ViewChild, ElementRef } from '@angular/core';
import { RouterOutlet } from '@angular/router';
export class AppComponent {
@ViewChild('navMenu') navMenu: ElementRef;
Navbar() {
// this.navBurger.nativeElement.classList.toggle('is-active');
this.navMenu.nativeElement.classList.toggle('is-active');
}
}
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
</a>
<a (click)="toggleNavbar()" role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasic">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasic" class="navbar-menu" #navMenu>
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
</div>
</div>
</nav>
ViewChild 是属性装饰器，用来从模板视图中获取匹配的元素。视图查询在 ngAfterViewInit 钩子函数调用前完成，因此在 ngAfterViewInit 钩子函数中，就能正常获取查询的元素。
参考链接
https://semlinker.com/viewchild-and-viewchildren/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
