对齐离子标头中的图标

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-end更改为end。

它应该可以工作！

Answer 2

欢迎来到 StackOverflow！

由于Ionic基于应用运行的当前平台应用了android/ios标准，所以你需要了解以下属性的含义：start、end、left和right。

关于结束/开始/左/右

在离子按钮中使用start 属性并不意味着它将被放置在左侧，因为start 和end 遵循平台的UI 模式

所以<ion-buttons start> 对于 ios 将位于左侧，而对于 android 将是右侧的第一个按钮。

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

因此，对于start 或end，按钮将位于 Android 的右侧。

如果您想在两个平台的左侧或右侧放置一个按钮，您应该使用left 或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

安卓