Material Design 中 NavigationView 的详细使用

Material Design 是谷歌推出的一种设计语言，旨在带来更加现代、直观和一致的用户体验。其中 NavigationView 是一种重要的控件，常常用于网站和应用程序的导航栏，具有良好的可读性、易用性和美观性。本文将介绍 NavigationView 的详细使用，以及如何在前端中使用它。

NavigationView 的基本介绍

NavigationView 是 Material Design 中的一个组件，它包含一个侧面滑出的导航菜单和一个主视图，可以让用户快速浏览不同内容，并切换视图。NavigationView 同时支持水平滑动和垂直滑动，可以根据实际情况进行设置。它的基本结构如下：

<md-sidenav-container>
  <md-sidenav #sidenav mode="side">
    <!-- 导航菜单内容 -->
  </md-sidenav>
  <md-toolbar color="primary">
    <!-- 工具栏内容 -->
  </md-toolbar>
  <div class="main-content">
    <!-- 主视图内容 -->
  </div>
</md-sidenav-container>

其中 md-sidenav-container 是容器控件，md-sidenav 是导航菜单，md-toolbar 是工具栏，.main-content 是主视图内容。可以通过改变样式和布局来达到不同的效果。

NavigationView 的使用步骤

NavigationView 的使用步骤如下：

  1. 安装依赖

首先需要安装 Angular Material 和 Angular CDK 依赖，以及相应的字体和图标库。可以使用 npm 安装：

  1. 引入模块

在模块中引入 BrowserAnimationsModule、MatSidenavModule 和 MatToolbarModule 模块，以及相应的图标和字体：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import 'material-design-icons/iconfont/material-icons.css';
import 'roboto-fontface/css/roboto/roboto-fontface.css';
  1. 添加控件

在组件中添加 NavigationView 组件和主视图内容：

<mat-sidenav-container>
  <mat-sidenav #sidenav mode="side">

  </mat-sidenav>
  <mat-toolbar color="primary">
    <button mat-button (click)="sidenav.toggle()">
      <mat-icon>menu</mat-icon>
    </button> {{title}}
  </mat-toolbar>
  <div class="main-content">

  </div>
</mat-sidenav-container>
  1. 样式调整

调整样式和布局，使 NavigationView 显示满足要求。

通过以上步骤，NavigationView 即可正常运行，下面将介绍一些使用中的注意事项和技巧。

NavigationView 中的注意事项和技巧

  1. 启用嵌套路由

如果 NavigationView 中存在嵌套路由，需要在路由配置中进行相应设置，以支持正确的导航栏选中效果：

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      { path: 'overview', component: OverviewComponent },
      { path: 'users', component: UsersComponent },
      { path: 'posts', component: PostsComponent },
    ]
  }
];
...
const config: ExtraOptions = {
  useHash: true,
  enableTracing: false,
  scrollPositionRestoration: 'enabled',
  onSameUrlNavigation: 'reload',
  anchorScrolling: 'enabled',
  initialNavigation: 'enabled',
  relativeLinkResolution: 'legacy'
};
...
@NgModule({
  imports: [
    RouterModule.forRoot(routes, config)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }
  1. 设置导航栏高亮

通过设置导航栏样式，可以实现导航栏选中高亮的效果：

.mat-list-item.mat-list-item-active {
  background-color: rgba(0, 0, 0, 0.04);
  color: #c2185b;
}
  1. 切换导航栏

可以通过 Header 组件的 toggleSideNav 方法，来切换导航栏的显示状态：

export class HeaderComponent {
  constructor(private sidenavService: SidenavService) {
    this.sidenavService.observeNav().subscribe(res => {
      this.sidenav.opened = !this.sidenav.opened;
    });
  }
  @ViewChild('sidenav', { static: true }) sidenav: MatSidenav;

  toggleSideNav() {
    this.sidenavService.toggleNav();
  }
}
  1. 自定义导航栏内容

可以通过 MatList 组件自定义导航栏的内容和样式：

<mat-nav-list>
  <a mat-list-item routerLinkActive [routerLinkActiveOptions]="{exact:true}" routerLink="/home">
    <mat-icon mat-list-icon>home</mat-icon>
    <span class="nav-label">Home</span>
  </a>
  <mat-divider></mat-divider>
  <h4 mat-subheader>Dashboard</h4>
  <a mat-list-item routerLinkActive [routerLinkActiveOptions]="{exact:true}" routerLink="/dashboard/overview">
    <mat-icon mat-list-icon>dashboard</mat-icon>
    <span class="nav-label">Overview</span>
  </a>
  <a mat-list-item routerLinkActive [routerLinkActiveOptions]="{exact:true}" routerLink="/dashboard/users">
    <mat-icon mat-list-icon>people</mat-icon>
    <span class="nav-label">Users</span>
  </a>
  <a mat-list-item routerLinkActive [routerLinkActiveOptions]="{exact:true}" routerLink="/dashboard/posts">
    <mat-icon mat-list-icon>forum</mat-icon>
    <span class="nav-label">Posts</span>
  </a>
</mat-nav-list>
  1. 使用样式预处理器

对于大型项目，通常需要使用样式预处理器（如 SASS）来管理样式和变量。可以通过 Angular CLI 配置文件（angular.json）中的 styles 属性，来指定使用的样式预处理器：

"styles": [
  "src/styles.scss"
],

NavigationView 示例代码

下面是一个完整的 NavigationView 示例代码，包括组件代码和模板代码：

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
import { SidenavService } from '../sidenav.service';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {

  constructor(private sidenavService: SidenavService) { }

  ngOnInit() {
    this.sidenavService.setSideNav(this.sidenav);
  }

  @ViewChild('sidenav', { static: true }) sidenav: MatSidenav;

  toggleSideNav() {
    this.sidenavService.toggleNav();
  }

  title = 'My App';
}

<mat-toolbar color="primary" class="mat-elevation-z2">
  <button mat-icon-button (click)="toggleSideNav()"
    *ngIf="showMenuButton"
    aria-label="Toggle navigation"
    class="menu-button">
    <mat-icon>
      menu
    </mat-icon>
  </button>
  <h1 class="my-app-title">{{title}}</h1>
</mat-toolbar>
<mat-sidenav-container>
  <mat-sidenav #sidenav mode="side">

    <mat-nav-list>
      <a mat-list-item routerLink="/home" routerLinkActive="active-link" (click)="toggleSideNav()">
        <mat-icon>home</mat-icon>
        <span>Home</span>
      </a>
      <a mat-list-item routerLink="/dashboard" routerLinkActive="active-link" (click)="toggleSideNav()">
        <mat-icon>dashboard</mat-icon>
        <span>Dashboard</span>
      </a>
      <a mat-list-item routerLink="/settings" routerLinkActive="active-link" (click)="toggleSideNav()">
        <mat-icon>settings</mat-icon>
        <span>Settings</span>
      </a>
      <a mat-list-item (click)="logout()" class="logout-link">
        <mat-icon>exit_to_app</mat-icon>
        <span>Logout</span>
      </a>
    </mat-nav-list>

  </mat-sidenav>

  <div class="container">
    <app-header></app-header>
    <main class="content">
      <router-outlet></router-outlet>
    </main>
  </div>
</mat-sidenav-container>

总结

NavigationView 是 Material Design 中的一个重要组件，可以为页面提供良好的导航和切换效果。在前端开发中，使用 NavigationView 可以提高用户体验和界面美观度。通过本文的介绍和示例代码，相信读者已经能够掌握 NavigationView 的使用方法和技巧，可以在实际项目中灵活运用。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a4cf0fadd4f0e0ffd26876

阅读全文

纠错反馈

精选内容

相关推荐

    暂无