выровнять значки в ионном заголовке

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

Добро пожаловать в 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

Answer 2

хорошо, вам нужно удалить первый <ion-buttons> и оставить только <button> и на втором теге <ion-buttons> изменить icon-end на end.

и оно должно работать !!