v4 ft: Allows custom tab placement inside tabs content

[sean-perkins]

Short description of what this resolves:

This allows you to place custom tabbar implementations inside the shadowDOM to allow the bar to place correctly and fill the container space accurately.

Changes proposed in this pull request:

• Add tabbar slot to the ion-tabs web component

Ionic Version: 4

Notice how in the before gif I cannot reach the end of the container because it does not account for my tabbar. In the after, the content is projected in the same slot and calculates against the sizing of the bar.

Before:

After:

[ionitron-bot]

Screenshot Report 🔎📱

• 📑 Comparing 0b39a0c → 333cc4b
• 📊 0 / 0 screenshots mismatched
• 🔮 See the full comparison

No comparison data found!

---

💙 - Ionitron

[ionitron-bot]

Screenshot Report 🔎📱

• 📑 Comparing 0b39a0c → 333cc4b
• 📊 0 / 0 screenshots mismatched
• 🔮 See the full comparison

No comparison data found!

---

💙 - Ionitron

[ionitron-bot]

Screenshot Report 🔎📱

• 📑 Comparing 0b39a0c → 333cc4b
• 📊 0 / 0 screenshots mismatched
• 🔮 See the full comparison

No comparison data found!

---

💙 - Ionitron

[ionitron-bot]

Screenshot Report 🔎📱

• 📑 Comparing 0b39a0c → 333cc4b
• 📊 0 / 0 screenshots mismatched
• 🔮 See the full comparison

No comparison data found!

---

💙 - Ionitron

[ionitron-bot]

Screenshot Report 🔎📱

• 📑 Comparing 0b39a0c → 333cc4b
• 📊 0 / 0 screenshots mismatched
• 🔮 See the full comparison

No comparison data found!

---

💙 - Ionitron

[ionitron-bot]

Screenshot Report 🔎📱

• 📑 Comparing 0b39a0c → 333cc4b
• 📊 0 / 0 screenshots mismatched
• 🔮 See the full comparison

No comparison data found!

---

💙 - Ionitron

[ionitron-bot]

Screenshot Report 🔎📱

• 📑 Comparing 0b39a0c → 333cc4b
• 📊 0 / 0 screenshots mismatched
• 🔮 See the full comparison

No comparison data found!

---

💙 - Ionitron

[brandyscarney]

Thank you for the PR! With the recent changes to tabs in 4.0.0-beta.15 you should have full control over customizing the ion-tab-bar and ion-tab-button elements. Here's an example:

<ion-tab-bar selected-tab="1" class="custom-tabbar">
  <ion-tab-button tab="1">
    <ion-label>Location</ion-label>
    <ion-icon name="navigate"></ion-icon>
  </ion-tab-button>

  <ion-tab-button tab="2" class="main-tab">
    <ion-icon src="/src/components/tab-bar/test/scenarios/camera.svg"></ion-icon>
  </ion-tab-button>

  <ion-tab-button tab="3">
    <ion-label>Radio</ion-label>
    <ion-icon name="musical-notes"></ion-icon>
  </ion-tab-button>
</ion-tab-bar>

.custom-tabbar {
  margin-top: 30px;
  margin-bottom: 30px;
  overflow: visible;
  contain: none;
}

.main-tab {
  border-radius: 50%;
  max-width: 80px;
  height: 80px;
  background: #3880ff;
  color: white;
  font-size: 16px;
}

I am going to close this PR since it should now be possible to customize ours and achieve the desired behavior. However, please let me know if I am misunderstanding you so we can find a solution. Thanks! 🙂