feat: allow overflowing content in ion-tab-button

Feature Request

I would like to modify our tabs component a little by highlighting our middle tab item. Unfortunately I cannot do much because the shadow dom native-button has an overflow: hidden set. Would be neat if this is exposed by a custom-prop as well or some option to disable overflow in there at all.

This is what I am trying to accomplish; first image is button-native wiht overflow: visible.

Ionic version:

[x] 5.x (template should be updated here)

Describe the Feature Request

Answered above. Is this section needed?

Describe Preferred Solution

An option [noOverflow]="false" or custom property --overflow: visible.

Describe Alternatives

Related Code

Additional Context

[roman-rr]

Hi @muuvmuuv Try it:

tabs.page.scss

.new-button {
    position: absolute;
    width: 70px;
    height: 70px;
    background: var(--ion-color-primary);
    border-radius: 50%;
    bottom: calc(-10px + var(--ion-safe-area-bottom));
    position:absolute;
    left:0;
    right:0;
    margin-left:auto;
    margin-right:auto;
    z-index: 100;
}

tabs.page.ts

import { Component, ViewChild, ElementRef } from '@angular/core';

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

  @ViewChild('specialTab', { read: ElementRef, static: false }) specialTab: ElementRef;
  constructor() {}
  activateTab() {
    this.specialTab.nativeElement.click();
  }
}

tabs.page.html

<div class="new-button" (click)="activateTab();"></div>
<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" #specialTab>
      <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-bar>
</ion-tabs>

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.