对齐离子标题中的图标

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

Android

---

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

Android