ionic-framework - 对齐离子标头中的图标

Question

我试图有一个离子头，其中一个图标在左边，另一个在右边。我的代码如下所示

<ion-header>
    <ion-navbar>
      <ion-buttons icon-start>
        <button ion-button icon-only>
          <ion-icon name="contact"></ion-icon>
        </button>

      </ion-buttons>
      <ion-title text-center>about</ion-title>
      <ion-buttons  icon-end>
        <button ion-button icon-only>
          <ion-icon name="search"></ion-icon>
        </button>
      </ion-buttons>
    </ion-navbar>
  </ion-header>

但正在发生的是我看到它出现在 3 个不同的行中。

Answer 1

好的，您需要删除第一个<ion-buttons>并仅保留并在更改为<button>的第二个标签上。<ion-buttons>icon-endend

它应该工作！

Answer 2

欢迎来到 StackOverflow！

由于 Ionic 是根据应用运行的当前平台来应用 android/ios 标准的，因此您需要了解以下属性的含义：start、end和。leftright

关于结束/开始/左/右

在 ion-buttons 中使用该start属性并不意味着它将被放置在左侧，因为start并end遵循平台的 UI 模式

因此<ion-buttons start>，对于 ios，将在左侧，对于 android，将是右侧的第一个按钮。

并且<ion-buttons end>将在 ios 的右侧和 android 右侧的最后一个按钮。

因此，两者start或end按钮将放置在 Android 的右侧。

如果您想在两个平台的左侧或右侧放置一个按钮，您应该使用leftor right，因为这些属性是作为一种覆盖它的方式提供的。通过几个例子更容易看出，所以请看下面的例子。

---

示例 1：使用start和end

<ion-header>
  <ion-navbar>
    <ion-buttons start> <!-- Here we use start -->
        <button ion-button icon-only>
          <ion-icon name="contact"></ion-icon>
        </button>
    </ion-buttons>
    <ion-title>Home</ion-title>
    <ion-buttons end> <!-- Here we use end -->
        <button ion-button icon-only>
          <ion-icon name="search"></ion-icon>
        </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

结果是：

iOS

安卓

---

示例 2：使用left和right

<ion-header>
  <ion-navbar>
    <ion-buttons left> <!-- Here we use left -->
        <button ion-button icon-only>
          <ion-icon name="contact"></ion-icon>
        </button>
    </ion-buttons>
    <ion-title>Home</ion-title>
    <ion-buttons right> <!-- Here we use right -->
        <button ion-button icon-only>
          <ion-icon name="search"></ion-icon>
        </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

结果是：

iOS

安卓