Question

如何创建导航栏按钮，例如facebook Lite使用ionic2 ，Sample facebook navbar image

Answer 1

我认为你应该使用Grid concept in Ionic 2 documentation。所以基本上你需要创建一个div，你需要将div分成两部分。（至于你的facebook示例）一个部分将包括新闻提要，朋友请求，消息，通知，另一部分将包括搜索和菜单按钮。首先，你需要将div除以80％和20％的比例（仅作为例子），然后你需要将第一部分分成4个等效部分。所以这是一个示例代码： -

  <ion-grid>
    <ion-row>
      <ion-col width-80>
        <ion-col width-25><button ion-button>News Feed</button></ion-col>
        <ion-col width-25><button ion-button>Notifications</button></ion-col></ion-col>
        <ion-col width-25><button ion-button>Requests</button></ion-col></ion-col>
        <ion-col width-25><button ion-button>Messages</button></ion-col></ion-col>
      </ion-col>
      <ion-col width-20>
        <ion-col width-50><button ion-button>Search</button></ion-col></ion-col>
        <ion-col width-50><button ion-button>Menu</button></ion-col></ion-col>
      </ion-col>
   </ion-row>
 </ion-grid>

ionic2中的等效空间导航栏按钮

1 个答案: