How to make button and ion-title inline in ion-navbar in Ionic 3?

问题: I need to show ion-button and ion-title same line in ion-navbar in ion-header. Below is my code. <ion-header> <ion-navbar> <button ion-button icon-on...

问题:

I need to show ion-button and ion-title same line in ion-navbar in ion-header. Below is my code.

<ion-header>
  <ion-navbar>
    <button ion-button icon-only>
      <ion-icon name="arrow-back"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

How to show ion-button and ion-title inline in ion-navbar ?


回答1:

Try this:

<ion-header>
    <ion-navbar>
      <ion-buttons left>
        <button ion-button icon-only >
          <ion-icon name="arrow-back"></ion-icon>
        </button>
      </ion-buttons>
      <ion-title text-left>Home</ion-title> 
    </ion-navbar>
</ion-header>

It is working properly.


回答2:

you should use <ion-row> and <ion-col> labels. Use this:

<ion-header>
<ion-navbar>
  <ion-row>
   <ion-col col-5>
    <ion-buttons left>
      <button ion-button icon-only >
        <ion-icon name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>
   </ion-col>
   <ion-col col-5>
    <ion-title text-left>Home</ion-title>
   </ion-col>
  </ion-row> 
</ion-navbar>

It is really important use that to do your app responsive.

  • 发表于 2019-03-10 10:19
  • 阅读 ( 205 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除