Question

我正在设计一个侧边菜单。我想减少位于ion-icon内的title和ion-item之间的填充。我试图覆盖ion-item sass属性，但它没有帮助。

<button menuClose ion-item *ngIf="!option.subItems" class="menu-style"
              (click)="openPage(option)">
          <ion-icon [name]="option.iconName" item-left color="primary"></ion-icon>
          {{ option.displayName }}
</button>

Answer 1

使用网络浏览器中的功能检查组件的sass属性，这样您就可以毫不费力地找出它。您可以通过以下方式覆盖ion-item样式。

.item ion-icon[item-left]+.item-inner,
.item ion-icon[item-left]+.item-input {
    margin-left: 10px !important;
}

Answer 2

今天碰到了这个。问题是，除非图标位于div内，否则您无法真正更改样式。但是，这意味着您必须将div与display:inline一起显示，这使得margin和width之类的内容不可用。此外，padding似乎什么也没做。

我能够通过放置div的附加包装器/父项relative来解决此问题，使内部图标父级div的显示位置absolute很好，因为您可以绝对定位图标，但相对于嵌入式父级：

Search 
<div style="position:relative;display:inline">
  <!-- transparent placeholder for width -->
  <ion-icon name="search" style="color:transparent"></ion-icon>

  <!-- positioned/displayed icon -->
  <div style="position:absolute;left:0px;top:3px">
    <ion-icon name="search" color="primary"></ion-icon>
  </div>
</div>

该代码使div文本后的Search直接出现在右边或与其他文本内联。然后，您会看到div style="position:absolute;left:0px;top:3px"用于绝对定位图标。

我添加透明图标的原因是，再次使用display:inline意味着您不能指定宽度，因此提供相同内容的透明版本可以保证相同宽度。基本上，您是在隐藏位置不佳的图标-仅将其用于宽度占位符-并显示位置正确的图标。

Ionic-item-自定义图标和文本之间的填充？

2 个答案: