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

【问题标题】：Increasing touchable area without increasing icon size在不增加图标大小的情况下增加可触摸区域
【发布时间】：2018-08-01 09:20:07
【问题描述】：

如何在不增加图标大小的情况下增加图标的可触摸区域？我正在从事 Ionic 3 项目。尤其是在 iOS UI 上，图标太小了，这就是为什么在尝试关闭 modal 时有点问题。

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>

试图增加图标的height或padding会导致一些溢出并破坏我的 UI。

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

【问题讨论】：

你能把你的代码显示在：stackblitz.com/edit/ionic
使图像更大... (x) 相等...图像可以更大。
你可以为关闭图标使用绝对定位，然后增加它的内边距，你的用户界面应该没问题。
@theriddle2 谢谢！我设置了这个样式并且图标的可触摸区域增加了： ion-title ion-icon{ position: absolute;填充：0 20px 20px 20px；右：0； }
我不觉得这将是一个很好的解决方案，因为您可能仍然会在各种设备尺寸上发现看起来很尴尬的按钮。我会坚持使用为此用例提供的框架 - 使用按钮而不是图标并在那里利用 icon-only 指令。

标签： ios css ionic-framework ionic3

【解决方案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>

【讨论】：