移除Ion-Toolbar Ionic V4（4.0.9）中的边框

Question

我发疯了...在Ionic v4（4.0.9）的ion-toolbar的{​​{1}}上删除边框需要帮助。

我的目标是删除此内容

在我的代码中，我有一个ion-header和两个ion-header

ion-toolbar

我已经尝试了<ion-header no-border-bottom no-border-top no-border> <ion-toolbar color="dark" no-border-bottom no-border-top no-border> <img src="../../assets/icoUserLogin.png" alt="Logo Aikox" slot="start" witdh="20%" /> <ion-title slot="primary"> Test </ion-title> </ion-toolbar> <ion-toolbar class="ToolbarVerde" color="medium" no-border-bottom no-border-top no-border> <ion-buttons slot="start"> <img src="../../assets/icoListado.png" alt="Icono Listado" slot="start" width="70%" /> </ion-buttons> <ion-title> <span>test</span> <br /> <span>test</span> </ion-title> <ion-buttons slot="primary"> <ion-button (click)="Nuevo()"> <img src="../../assets/icoRefresh.png" alt="Icono Recargar" width="70%" /><br /> </ion-button> <ion-button (click)="Nuevo()"> <img src="../../assets/icoNew.png" alt="Añadir Parte de Trabajo" width="70%" /><br /> </ion-button> </ion-buttons> </ion-toolbar> </ion-header>和no-border中的ion-header属性的所有内容

我还尝试过将属性添加到页面的.scss中，如下所示：

ion-toolbar

但是这些都没有用，最近三个月我一直在使用Ionic v4，这是我第一次遇到问题。

Answer 1

如果有人在寻找Ionic 5解决方案，请执行以下操作：

<ion-header class="ion-no-border">
</ion-header>

它消除了边框和阴影。

Answer 2

嗨，这可能会对某人有所帮助

<ion-header no-border >

</ion-header>

这将删除ionic4中的行

Answer 3

使用此方法去除阴影：

ion-header {
  &.header-md:after {
    background: none;
  }
}

Answer 4

最后，对于任何对此有疑问的人，

在您的<ion-toolbar class="ToolbarVerde"中添加一个类，然后在.scss中使用以下命令：

.ToolbarVerde{
    --padding-top: 0px !important;
    --padding-start: 0px !important;
    --padding-right: 0px !important;
    --padding-end: 0px !important;
}

这神奇地起作用了……希望它能对某人有所帮助！

Answer 5

使用它删除边框：

ion-toolbar {
  --border-style: none;
}

Answer 6