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

Question

如何在不增加图标尺寸的情况下增加图标的可触摸区域？ 我正在做 Ionic 3 项目。尤其是在iOS UI上，图标的尺寸非常小，这就是为什么在尝试关闭模式时会出现一些问题。

这是标题的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>

尝试增加图标的高度或填充会引起一些溢出并破坏我的UI。

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

Answer 1

最好还是使用“按钮”元素为用户放置一个交互点（这将增加“可触摸区域”，而不仅仅是图标）。要仅渲染图标，可以使用仅图标属性：

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