带有 Ionic 框架的类似 iOS 的选项卡

Posted 2023-03-14

【中文标题】带有 Ionic 框架的类似 iOS 的选项卡

【英文标题】：iOS-like tab with Ionic Framework

【发布时间】：2016-05-09 12:52:43

【问题描述】：

我在一个项目中使用 ionic，但对 ios 的 UX 不太满意。我的意思是如何添加这个选项卡（见图）而不是创建选项卡项目时附带的基本选项卡？

enter image description here

【参考方案1】：

您可以使用<ion-nav-buttons class="button-bar"></ion-nav-buttons> 指令为屏幕截图中提到的每个选项卡添加按钮。

<ion-nav-buttons class="button-bar" side="left">
  <a class="button"
     ui-sref-active-eq="active"
     ui-sref="path1">
    Label 1
  </a>
  <a class="button"
     ui-sref-active-eq="active"
     ui-sref="path2">
    Label 2
  </a>
  <a class="button"
     ui-sref-active-eq="active"
     ui-sref="path3">
    Label 3
  </a>
</ion-nav-buttons> 

ui-sref 和 ui-sref-active 指令确保处于活动状态的选项卡处于焦点中

【讨论】：

好的，让我试试这个然后回来