離子中的自定義標簽欄

您好，我是 ionic 的新手，正在嘗試實作自定義標簽欄，如下所示

預期產出

電流輸出

波紋管到目前為止是我的代碼

主頁.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;
    }
  }
}

主頁.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> 

家.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' },
  ];

有人可以幫我實作如螢屏截圖所示

uj5u.com熱心網友回復：

用于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

uj5u.com熱心網友回復：

您的按鈕位置為 2，因此我們將以編程方式在 It 中插入一個自定義類。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;
  }
}

uj5u.com熱心網友回復：

我更新了我的代碼如下，它對我有用

主頁.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>

家.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' },
  ];

主頁.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);
    }
  }
}

標籤：离子框架 标签

上一篇：帶有從右到左單選按鈕的離子警報

下一篇：離子選單模板未顯示在移動設備上