离子中的自定义标签栏

Question

您好，我是 ionic 的新手，正在尝试按如下方式实现自定义标签栏

预期输出

当前输出

下面是我目前的代码

home.scss

ion-tabs {
  ion-tab-bar {
    bottom: 0px;
    width: 100%;
    position: absolute;
    backdrop-filter: blur(12px);
    --color: var(--ion-color-white);
    --background: rgba(255, 255, 255, 0.04);
  }
  ion-tab-button {
    ion-label {
      font-weight: 500;
      font-size: 14px;
      line-height: 10px;
    }
    opacity: 0.75;

    ion-icon {
      font-size: 24px;
    }
    ion-icon[ng-reflect-name='add-circle-outline'] {
      font-size: 40px;
    }
  }
  ion-tab-button.tab-selected {
    opacity: 1;
    ion-label {
      font-weight: 600;
    }
  }
}

home.html

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button
      *ngFor="let item of navigationItems; index as i"
      [tab]="item?.route"
      (click)="item?.click ? item?.click() : null"
      id="tabButton-{{ i }}"
    >
      <ion-icon [name]="item?.icon"></ion-icon>
      <ion-label>{{item?.name}}</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

home.ts

  navigationItems = [
    { name: 'Home', route: 'dashboard', icon: 'home' },
    { name: 'Calendar', route: 'calendar', icon: 'calendar' },
    { icon: 'add-circle-outline', click: () => this.openBottomSheet() },
    { name: 'Reports', route: 'reports', icon: 'stats-chart-outline' },
    { name: 'Settings', route: 'settings', icon: 'settings' },
  ];

谁能帮我实现如截图所示

Answer 1

使用 ion-fab-button 在中心显示大按钮。例如：

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="tab1">
      <ion-icon name="newspaper"></ion-icon>
    </ion-tab-button>   

    <ion-tab-button tab="tab2">
      <ion-icon name="construct"></ion-icon>
    </ion-tab-button>

    <ion-tab-button>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="notifications"></ion-icon>
    </ion-tab-button>

    <ion-tab-button tab="tab4">
      <ion-icon name="settings"></ion-icon>
    </ion-tab-button>

  </ion-tab-bar>

  <ion-fab vertical="bottom" horizontal="center" slot="fixed">
    <ion-fab-button routerDirection="root" color="warning" >
      <ion-icon name="add-circle"></ion-icon>
    </ion-fab-button>
  </ion-fab>

</ion-tabs>

查看此 Stackblitz 了解更多信息： Stackblitz

Answer 2

您的按钮位置是 2，因此我们将以编程方式在其中插入自定义 class。 home.html（更改代码）：

<ion-tab-button
      *ngFor="let item of navigationItems; index as i"
      [tab]="item?.route"
      (click)="item?.click ? item?.click() : null"
      id="tabButton-{{ i }}"
      [ngClass]="{'add-btn':i===2 ? true : false}"
    >
      <ion-icon [name]="item?.icon"></ion-icon>
      <ion-label>{{item?.name}}</ion-label>
    </ion-tab-button>

然后将其样式添加到 scss 文件中：

.add-btn {
  ion-icon {
    color: #fcad07;
    padding: 0px;
    margin: 0px;
    font-size: 55px !important;
    position: absolute;
    margin: auto;
  }
}

Answer 3

我更新了我的代码如下，它对我有用

home.html

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button
      *ngFor="let item of navigationItems; index as i"
      [tab]="item?.route"
      (click)="item?.click ? item?.click() : null"
      id="tabButton-{{ i }}"
    >
      <ion-icon [src]="item?.src" [name]="item?.icon"></ion-icon>
      <ion-label *ngIf="item.src == null">{{item?.name}}</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

home.ts

navigationItems = [
    { name: 'Home', route: 'dashboard', icon: 'home' },
    { name: 'Calendar', route: 'calendar', icon: 'calendar' },
    { src: 'assets/images/tab-bar-add.svg', click: () => this.openBottomSheet() },
    { name: 'Reports', route: 'reports', icon: 'stats-chart-outline' },
    { name: 'Settings', route: 'settings', icon: 'settings' },
  ];

home.scss

ion-tabs {
  ion-tab-bar {
    bottom: 0px;
    width: 100%;
    position: absolute;
    backdrop-filter: blur(12px);
    --color: var(--ion-color-white);
    --background: var(--ion-tab-bar-background);
  }
  ion-tab-button {
    ion-label {
      padding-bottom: 5px;
      font-weight: 500;
      font-size: 14px;
      line-height: 10px;
      color: var(--ion-color-white-light);
    }

    ion-icon {
      font-size: 24px;
      color: var(--ion-color-white-light);
    }

    ion-icon[ng-reflect-src='assets/images/tab-bar-add.svg'] {
      width: 80%;
      height: 80%;
    }
  }
  ion-tab-button.tab-selected {
    ion-label {
      font-weight: 600;
      color: var(--ion-color-tab-selected);
    }
    ion-icon {
      color: var(--ion-color-tab-selected);
    }
  }
}

离子中的自定义标签栏

Custom tab bar in ionic

tabs

ionic-framework