对齐离子标题中的图标 [英] align icons in ionic header

问题描述

我正在尝试创建一个离子标题，其中一个图标在左侧，另一个图标在右侧.我的代码如下所示

<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个不同的行.

解决方案

欢迎使用StackOverflow！

由于Ionic基于运行应用程序的当前平台应用了android/ios标准，因此您需要了解以下属性的含义:start，end，left和right./p>

关于结束/开始/向左/向右

在离子按钮中使用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

I am trying to have a ion-header where one icon is on left and another on right. my code looks like below

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

but what is hapenning is that i see it coming in 3 different rows.

解决方案

Welcome to StackOverflow!

Since Ionic applies the android/ios standards based on the current platform where the app is running, you need to understand the meaning of the following attributes: start, end, left and right.

About end/start/left/right

Using the start attribute in the ion-buttons doesn't mean it will be placed to the left, since start and end follow the UI pattern for the platform

So <ion-buttons start> would be on the left for ios and be the first button on the right for android.

And <ion-buttons end> would be on the right for ios and the last button on the right for android.

So with both start or end the button will be placed at the right on Android.

If you want to place a button at the left or the right in both platforms, you should use left or right, since these attributes are provide as a way to over ride that. It's easier to see with a few examples, so please take a look at the following examples.

---

Example 1: Using start and 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>

The result is:

iOS

Android

---

Example 2: Using left and 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>

The result is:

iOS

Android

这篇关于对齐离子标题中的图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！