Angular Material Design中实现标签页拉伸至父容器全屏宽度

Hey there! I get you're trying to make your tabs stretch to the full width of their parent div, and the old <md-stretch-tabs> approach no longer works—totally frustrating when deprecated features vanish without docs. Let's walk through a few solid solutions depending on your setup:

Since the old md-stretch-tabs directive was removed, Angular Material's mat-tab-group now uses a built-in input to handle full-width tabs. Here's the straightforward fix:

• Use the mat-stretch-tabs input
  Add the [mat-stretch-tabs]="true" binding to your mat-tab-group component. This tells the tab group to evenly distribute all tabs across the full width of its parent container:

  <mat-tab-group [mat-stretch-tabs]="true">
    <mat-tab label="Tab 1">Content for Tab 1</mat-tab>
    <mat-tab label="Tab 2">Content for Tab 2</mat-tab>
    <mat-tab label="Tab 3">Content for Tab 3</mat-tab>
  </mat-tab-group>
  

• CSS Fallback for More Control
  If you need custom styling alongside the full-width behavior, target the tab elements directly with flexbox:

  /* Make the tab label container take full width */
  .mat-tab-group .mat-tab-label-container {
    width: 100%;
  }
  
  /* Force each tab to take equal space */
  .mat-tab-label {
    flex: 1;
    justify-content: center; /* Centers the tab text */
  }
  

If you're working with a custom tab setup (not using Angular Material), flexbox is your go-to tool for full-width tabs:

1. Style the tab container to use flexbox:

   .tab-wrapper {
     display: flex;
     width: 100%;
     border-bottom: 1px solid #e0e0e0;
   }
   

2. Make each tab item stretch to fill available space:

   .tab-item {
     flex: 1;
     padding: 12px 0;
     text-align: center;
     cursor: pointer;
     border: none;
     background: transparent;
     font-size: 1rem;
   }
   

3. Add active state styling to highlight the selected tab:

   .tab-item.active {
     border-bottom: 2px solid #1976d2;
     font-weight: 500;
   }
   

   Your HTML would look something like this:

   <div class="tab-wrapper">
     <button class="tab-item active">Home</button>
     <button class="tab-item">Profile</button>
     <button class="tab-item">Settings</button>
   </div>
   

• Ensure the parent div of your tabs doesn't have a fixed width or overflow: hidden property that would restrict the tab container's width.
• If using Angular Material, confirm you're on a version 5 or newer (the mat-stretch-tabs input was introduced in v5).
• For flexbox setups, double-check that tab items don't have conflicting margin or min-width values that could break the equal space distribution.

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