打开晶圆厂列表时删除十字图标

Question

嗨，我想在ion-fab中做一些自定义样式，但是当我们单击并打开fab按钮和fab-list时，没有发现任何东西可以删除交叉图标，我不希望十字图标

所以我想摆脱这个十字形图标，而且当我更改宽度和高度时，它不允许我以百分比形式更改其高度。 即

允许

宽度：以百分比/像素为单位

高度：像素

不允许  但必须

高度：百分比

 <ion-fab>
<ion-fab-button>
  <ion-icon name="share"></ion-icon>
</ion-fab-button>

<ion-fab-list side="end">
  <ion-fab-button>
    <ion-icon name="logo-twitter"></ion-icon>
  </ion-fab-button>
  <ion-fab-button>
    <ion-icon name="logo-vimeo"></ion-icon>
  </ion-fab-button>
</ion-fab-list>

.css

ion-fab-button{
width: 75%;
height: 99px;
.button-native{
    .close-icon {

        display: none !important;
    }
}
}
ion-fab-list{
    margin: 0 0 0 100px;
    width: 325%;
}

请帮助我。

Answer 1

您对此控制有限，因为Ionic 4使用的Web组件是独立的。

基本上只是因为您可以在开发工具中看到它，并不意味着您可以对其进行编辑。

您必须接受您无法控制一切。

我很确定我只是在浪费时间尝试为您解决此问题，因为我看不到自己再次使用这种特殊技能，哈哈...但这全是做到了：

ion-fab-button.fab-button-close-active {
     --color: var(--ion-color-primary);
     --transition: opacity 0 ease-in;
}

唯一的问题是，当您再次单击该按钮以隐藏X时，X会自动显示一秒钟，而我找不到任何阻止它的组合。

Answer 2

我对此的解决方案：

ion-fab-button.fab-button-close-active {
  width: 16px !important;
  height: 20px !important;
}

这样，您可以在ion-fab中设置关闭图标的样式。