Question

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

<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-button中显示ion-title和ion-navbar 内嵌？

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

在最新的Ionic（v5）中，按钮位置已更改为“插槽”，如下所示：

<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

此处的标题文档：https://ionicframework.com/docs/api/header

Answer 3

您应该使用<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>

使应用程序响应非常重要。

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

3 个答案: