ios - 在不增加图标大小的情况下增加可触摸区域

Question

如何在不增加图标大小的情况下增加图标的可触摸区域？我正在从事 Ionic 3 元素。特别是在 iOS UI 上，图标尺寸太小，这就是为什么在尝试关闭模式时会出现一些问题。

这是header的HTML代码:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      About
      <ion-icon name="close" (tap)='closeModal()'></ion-icon>
    </ion-title>
  </ion-navbar>
</ion-header>

尝试增加图标的高度或填充会导致溢出并破坏我的用户界面。

网页设计师有什么建议吗？

Answer 1

更好的做法是仍然使用“按钮”元素为用户放置一个交互点(这将增加“可触摸区域”而不仅仅是图标)。要仅呈现图标，您可以使用 icon-only 属性:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      About
    </ion-title>
    <ion-buttons end>
      <button ion-button icon-only (tap)='closeModal()'>
          <ion-icon name="close"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

我还记得 Ionic 3 使用的是 hammer.js，因此您可以重复使用(单击)而不是点击(次要)。

如果你觉得十字太右 - 添加标准 padding-right:

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      About
    </ion-title>
    <ion-buttons end>
      <button padding-right ion-button icon-only (click)='closeModal()'>
          <ion-icon name="close"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>