仅更改 Ionic 上 1 个选项卡的外观答案

【问题标题】：Change appearance of only 1 tab on the Ionic仅更改 Ionic 上 1 个选项卡的外观
【发布时间】：2021-11-08 21:10:11
【问题描述】：

我有这样的标签：只是一个例子。 Doc:https://ionicframework.com/docs/api/tabs

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="schedule">
      <ion-icon name="calendar"></ion-icon>
      <ion-label>Schedule</ion-label>
      <ion-badge>6</ion-badge>
    </ion-tab-button>

    <ion-tab-button tab="speakers">
      <ion-icon name="person-circle"></ion-icon>
      <ion-label>Speakers</ion-label>
    </ion-tab-button>
  

    <ion-tab-button tab="about">
      <ion-icon name="information-circle"></ion-icon>
      <ion-label>About</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

你知道如何像第三个那样创建一个更大更圆的顶部标签吗？即中间一个。

我已尝试更改height 和border-radius。但他们都没有工作。请问有什么线索吗？

Extracted from Adobe XD:

【问题讨论】：

你只需要创建空白的 ion-tab-button 用 ion-fab 替换它
@Indraraj26 我尝试了不同的方法。但他们都没有工作。那么我也可以为您的方法提供一些代码吗？
示例：forum.ionicframework.com/t/…

标签： html css angular ionic-framework

【解决方案1】：

您可以创建一个空白ion-tab-button，然后创建一个自定义元素并根据您的 UI 设计需要进行风格化。

    <ion-tabs>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="schedule">
          <ion-icon name="calendar"></ion-icon>
        </ion-tab-button>
    
        <ion-tab-button tab="speakers">
          <ion-icon name="person-circle"></ion-icon>
        </ion-tab-button>

        <ion-tab-button></ion-tab-button>
    
        <ion-tab-button tab="about">
          <ion-icon name="information-circle"></ion-icon>
        </ion-tab-button>
    
        <ion-tab-button tab="more">
          <ion-icon name="add"></ion-icon>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>
    <ion-fab vertical="bottom" horizontal="center" slot="fixed" edge="false">
      <ion-fab-button type="button">
         <ion-icon name="add"></ion-icon>
      </ion-fab-button>
    </ion-fab>

如果您不想使用ion-fab，您可以创建自己的自定义标记或组件来管理中间按钮的自定义布局和样式。

【讨论】：

抱歉，没听懂？可以给我一些代码吗？
@Sampath - 我已经用一些示例代码更新了我的回复。