如何在离子3中的离子 - 纳瓦巴中制作按钮和离子词语

Question

我需要在离子 - 头部中的 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-button和ion-title inline 在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

在最新离子（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>

此外，还有一个新的离子 - 背面按钮，它根据历史记录堆栈插入一个返回按钮，等等。

插槽值在此处记录：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>

进行应用程序响应迅速是非常重要的。