时间戳

首页 > 解决方案 > 打开工厂列表时删除十字图标

css - 打开工厂列表时删除十字图标

问题描述

嗨，我想在 ion-fab 中做一些自定义样式，但是当我们单击并打开 fab 按钮和 fab 列表时没有找到任何可以删除十字图标的东西，我不想要十字图标 在此处输入图像描述

所以我想摆脱这个十字图标，而且当我改变宽度和高度时，它不允许我改变它的百分比高度。IE

允许

宽度：百分比/像素

高度：像素

不允许 但需要

身高：百分比

 <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%;
}

请帮我解决这个问题。

标签： cssionic-frameworkionic4

解决方案

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

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

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

我很确定我只是浪费时间试图为你解决这个问题，因为我再也看不到自己使用过这个特殊技能了，哈哈......但这一切都可以做到：

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

唯一的小问题是，当您再次单击按钮以隐藏 X 时，X 会在几分之一秒内显示自己，而我找不到任何组合来阻止它。

推荐阅读