Ionic 4+自定义Tabs实现：如何打造指定样式的标签页？

Hey there! Let's tackle customizing your Ionic 4 tab bar to match that specific style you're aiming for. Based on your current code, here's a step-by-step guide to tweak the appearance:

Your Current Code #

First, let's clean up and format your existing code for clarity:

tabs.page.html

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="triangle"></ion-icon>
      <ion-label>Tab 1</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab2">
      <ion-icon name="ellipse"></ion-icon>
      <ion-label>Tab 2</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab3">
      <ion-icon name="square"></ion-icon>
      <ion-label>Tab 3</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab4">
      <ion-icon name="square"></ion-icon>
      <ion-label>Tab4</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="tab5">
      <ion-icon name="square"></ion-icon>
      <ion-label>Tab5</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

tabs.page.ts

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

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})
export class TabsPage {
  constructor() {}
}

Customizing the Tab Bar Style #

Most tab bar customizations happen in the tabs.page.scss file. Below are common tweaks to match popular custom designs:

1. Basic Style Overrides

Start with these foundational changes to match your color scheme and sizing:

// Customize tab bar background and border
ion-tab-bar {
  background-color: #ffffff; // Replace with your desired background color
  border-top: 1px solid #e5e7eb; // Optional: add a subtle top border
}

// Style all tab buttons (unselected state)
ion-tab-button {
  --color: #6b7280; // Unselected icon/text color
  --padding-top: 8px;
  --padding-bottom: 8px;

  ion-icon {
    font-size: 24px; // Adjust icon size
    margin-bottom: 4px; // Space between icon and label
  }

  ion-label {
    font-size: 12px; // Adjust label font size
    font-weight: 500;
  }
}

// Style selected tab button
ion-tab-button.tab-selected {
  --color-selected: #2563eb; // Selected icon/text color
}

// Optional: Hover state for desktop
ion-tab-button:hover {
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

2. Specialized Style: Raised Middle Tab

If your target design has a raised, circular middle tab (a common mobile app pattern), follow these steps:

First, add a custom class to your middle tab in the HTML:

<ion-tab-button tab="tab3" class="raised-tab">
  <ion-icon name="square"></ion-icon>
  <ion-label>Tab 3</ion-label>
</ion-tab-button>

Then add this SCSS to create the raised effect:

.raised-tab {
  position: relative;
  top: -16px; // Pull the button above the tab bar
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #2563eb; // Button background color
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); // Add depth with shadow

  ion-icon {
    color: #ffffff; // White icon for contrast
    font-size: 32px;
    margin-bottom: 0; // Remove space between icon and label (optional)
  }

  ion-label {
    display: none; // Hide label if you want only the icon (optional)
  }

  // Darken the button when selected
  &.tab-selected {
    background-color: #1d4ed8;
    box-shadow: 0 6px 16px rgba(29, 78, 216, 0.4);
  }
}

// Adjust tab bar padding to fit the raised button
ion-tab-bar {
  padding: 0 20px;
}

3. Extra Tips

• Custom Icons: Replace default Ionic icons with your own SVGs by placing files in src/assets/icons and using:

  <ion-icon src="/assets/icons/your-custom-icon.svg"></ion-icon>
  

• Responsive Adjustments: Tweak sizes for smaller screens with media queries:

  @media (max-width: 360px) {
    ion-tab-button ion-icon {
      font-size: 20px;
    }
    ion-tab-button ion-label {
      font-size: 10px;
    }
  }
  

• Subtle Animations: Add a scale effect when tabs are selected:

  ion-tab-button.tab-selected ion-icon {
    transform: scale(1.1);
    transition: transform 0.2s ease;
  }
  

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