tabs.page.html 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637
  1. <ion-tabs>
  2. <ion-tab-bar slot="bottom" class="custom-tab-bar">
  3. <ion-tab-button tab="tab1" class="custom-tab-button">
  4. <ion-icon name="home"></ion-icon>
  5. <ion-label>首页</ion-label>
  6. </ion-tab-button>
  7. <ion-tab-button tab="tab2" class="custom-tab-button">
  8. <ion-icon name="chatbubbles"></ion-icon>
  9. <ion-label>动态</ion-label>
  10. </ion-tab-button>
  11. <ion-tab-button class="placeholder-tab-button"></ion-tab-button>
  12. <ion-tab-button tab="tab4" class="custom-tab-button">
  13. <ion-icon name="people"></ion-icon>
  14. <ion-label>联系人</ion-label>
  15. </ion-tab-button>
  16. <ion-tab-button tab="tab3" class="custom-tab-button">
  17. <ion-icon name="person"></ion-icon>
  18. <ion-label>我</ion-label>
  19. </ion-tab-button>
  20. </ion-tab-bar>
  21. <!-- 加号按钮,点击展开更多选项 -->
  22. <ion-fab vertical="bottom" horizontal="center" slot="fixed" class="custom-fab">
  23. <ion-fab-button (click)="toggleOptions()">
  24. <ion-icon name="add"></ion-icon>
  25. </ion-fab-button>
  26. <ion-fab-list side="top" *ngIf="optionsVisible">
  27. <ion-fab-button (click)="selectOption('option1')">选项1</ion-fab-button>
  28. <ion-fab-button (click)="selectOption('option2')">选项2</ion-fab-button>
  29. <ion-fab-button (click)="selectOption('option3')">选项3</ion-fab-button>
  30. </ion-fab-list>
  31. </ion-fab>
  32. </ion-tabs>