如何在Angular 6中使用Angular Material创建水平与垂直标签页？

Hey there! Let's walk through how to build both horizontal and vertical tabs using Angular Material in Angular 6. I'll break it down step by step so it's easy to follow.

First: Set Up Angular Material #

Before diving into tabs, make sure you have Angular Material and its dependencies installed in your Angular 6 project. Run these commands if you haven't already:

npm install @angular/material@6.x @angular/cdk@6.x @angular/animations@6.x --save

Next, import the required modules in your app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTabsModule } from '@angular/material/tabs';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule, // Required for Angular Material animations
    MatTabsModule // Import the tabs module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1. Horizontal Tabs (Default Behavior) #

Angular Material tabs are horizontal by default, so this is straightforward. Here's how to implement them:

Component Template (app.component.html) #

<mat-tab-group>
  <mat-tab label="Home">
    <h2>Home Tab Content</h2>
    <p>Welcome to the home tab! This is where your main content goes.</p>
  </mat-tab>
  <mat-tab label="Profile">
    <h2>Profile Tab Content</h2>
    <p>View and edit your profile details here.</p>
  </mat-tab>
  <mat-tab label="Settings">
    <h2>Settings Tab Content</h2>
    <p>Adjust your app preferences in this tab.</p>
  </mat-tab>
</mat-tab-group>

Component Code (app.component.ts) #

You don't need much custom code here unless you want dynamic tabs. For static tabs, this basic setup works:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-material-tabs';
}

Key Notes #

• <mat-tab-group> acts as the container for all tabs.
• Each <mat-tab> represents a single tab; use the label attribute to set the tab's display text.
• The content inside each <mat-tab> is what shows when the tab is active.

2. Vertical Tabs #

To create vertical tabs, we just need to add the orientation="vertical" attribute to <mat-tab-group>, plus some minor styling to get the layout right.

Component Template (app.component.html) #

<mat-tab-group orientation="vertical">
  <mat-tab label="Home">
    <h2>Home Tab Content</h2>
    <p>Welcome to the home tab! This is where your main content goes.</p>
  </mat-tab>
  <mat-tab label="Profile">
    <h2>Profile Tab Content</h2>
    <p>View and edit your profile details here.</p>
  </mat-tab>
  <mat-tab label="Settings">
    <h2>Settings Tab Content</h2>
    <p>Adjust your app preferences in this tab.</p>
  </mat-tab>
</mat-tab-group>

Add Custom Styling (app.component.css) #

By default, vertical tabs might look cramped. Add these styles to improve the layout:

/* Set a fixed width for the vertical tab group */
mat-tab-group[orientation="vertical"] {
  width: 600px;
  height: 400px;
}

/* Adjust the tab labels to fit properly on the left */
mat-tab-group[orientation="vertical"] .mat-tab-labels {
  flex-direction: column;
  width: 150px;
}

/* Ensure the tab content takes up the remaining space */
mat-tab-group[orientation="vertical"] .mat-tab-body-wrapper {
  flex-grow: 1;
}

Key Notes #

• The orientation="vertical" attribute tells Angular Material to stack tabs vertically (by default, they're horizontal).
• The custom CSS ensures the tab labels and content are properly spaced and sized—feel free to adjust the width/height values to match your app's design.

Troubleshooting Tip #

Make sure your Angular Material version matches your Angular 6 version (use 6.x for both). Mismatched versions can cause unexpected errors or broken components.

Hope that helps you get your tabs up and running smoothly! Let me know if you run into any snags.

内容的提问来源于stack exchange，提问作者Athira Soman