Ionic 2 Facebook风格的页脚栏

Question

我正在尝试创建一个看起来风格的Facebook页脚栏。分段按钮控制页面导航。我有这个布局页面：

 <ion-header>
  <ion-navbar>
    <button ion-button icon-only menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      {{pageName}}
    </ion-title>
  </ion-navbar>
</ion-header>
<ng-content>
</ng-content>
<ion-footer>
  <ion-toolbar>
    <ion-segment>
      <ion-segment-button value="users">
        <ion-icon name="person"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="notifcations">
        <ion-icon name="notifications"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="posts">
        <ion-icon name="chatboxes"></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-footer>

这会生成如下所示的页面：

我希望页脚看起来更像这样：

如何使页脚看起来像所需的？

Answer 1

此样式是离子检查codepen.io/anon/pen/MyvRRr

中的选项卡

如果您需要任何组件，请检查此回购Componants