如何在 Ionic 3 的 ion-navbar 中内联按钮和 ion-title？

Question

我需要在 ion-header 的 ion-navbar 中显示 ion-button 和 ion-title 同一行。下面是我的代码。

<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>

如何在 ion-navbar 中显示 ion-button 和 ion-title inline ?

Answer 1

试试这个：

<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>

它工作正常。

Answer 2

您应该使用 <ion-row> 和 <ion-col> 标签。使用这个：

<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>

使用它来使您的应用响应非常重要。

Answer 3

在最新的Ionic (v5)中，按钮位置已更改为"slot"，如下图：

<ion-header>   
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>My Navigation Bar</ion-title>   
  </ion-toolbar> 
</ion-header>

此外，还有一个新的 ion-back-button 可以根据历史堆栈插入后退按钮等

插槽值记录在此处：https://ionicframework.com/docs/api/buttons

Header 文档在这里：https://ionicframework.com/docs/api/header

如何在 Ionic 3 的 ion-navbar 中内联按钮和 ion-title？

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

css

ionic-framework

ionic2

ionic3

angular