如何自定义Material Stepper组件实现标签顶部显示、图标居中及双标签位置布局？

Alright, let's break down how to build those two custom layouts for your Material Stepper. I’ve tinkered with similar CSS overrides for Material components before, so here’s a straightforward approach for both scenarios:

By default, Material Stepper only offers left/bottom label positions, but we can override the flex layout of the step headers to flip things around. Here’s the CSS you’ll need:

/* Override step header flex layout */
.mat-step-header {
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
}

/* Move the label above the icon */
.mat-step-label {
  order: -1;
  margin-bottom: 8px; /* Add space between label and icon */
}

/* Remove default horizontal margin from the icon to center it properly */
.mat-step-icon {
  margin: 0;
}

This forces each step header to stack vertically, with the label sitting directly above the centered circular icon. You might want to tweak the margin values to match your app’s design system.

For this, we’ll use a combination of custom template markup and CSS pseudo-elements to duplicate the label content. Here’s how to set it up:

Step 1: Update your template #

Add a data-label attribute to each mat-step element that matches your step label text. This gives us a way to pull the label content for the bottom position:

<mat-vertical-stepper>
  <mat-step [stepControl]="firstFormGroup" data-label="Personal Info">
    <ng-template matStepLabel>Personal Info</ng-template>
    <!-- Your step content goes here -->
  </mat-step>
  
  <mat-step [stepControl]="secondFormGroup" data-label="Shipping Details">
    <ng-template matStepLabel>Shipping Details</ng-template>
    <!-- Your step content goes here -->
  </mat-step>
</mat-vertical-stepper>

Step 2: Add the CSS #

We’ll use the ::after pseudo-element to render the bottom label, and adjust the flex layout to make space for both labels:

/* Stack header elements vertically */
.mat-step-header {
  flex-direction: column !important;
  align-items: center;
  padding: 16px 0; /* Add vertical padding to fit both labels */
}

/* Position top label above the icon */
.mat-step-label {
  order: -1;
  margin-bottom: 8px;
}

/* Render bottom label using the data-label attribute */
.mat-step-header::after {
  content: attr(data-label);
  display: block;
  margin-top: 8px;
  font-size: 14px; /* Match Material's default label font size */
  color: rgba(0, 0, 0, 0.6); /* Match default inactive label color */
}

/* Update bottom label color for active/completed steps */
.mat-step-header.mat-step-active::after,
.mat-step-header.mat-step-completed::after {
  color: rgba(0, 0, 0, 0.87);
}

Notes to Keep in Mind #

• If you’re using a horizontal stepper instead of vertical, adjust the flex-direction to row and tweak spacing accordingly (you’ll probably want to use flex-wrap: wrap to stack labels above/below the icon).
• Double-check your Material version: class names might vary slightly between versions (e.g., mat-step-header is consistent in most recent versions, but older ones might use different classes).
• For Angular, make sure to add these styles to your component’s stylesheet with encapsulation: ViewEncapsulation.None or use global styles if you want the changes to apply app-wide.

内容的提问来源于stack exchange，提问作者Arava Lokesh