如何删除 Ion-Toolbar 上的边框？

Question

我需要帮助去除 Ionic v4 (4.0.9) 中 ion-header 中 ion-toolbar 的边框。

我的objective是删除这个：

在我的代码中，我有一个 ion-header 和两个 ion-toolbar。我已经尝试了 ion-header 和 ion-toolbar.

中 no-border 属性的所有内容

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

<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>

.toolbar-background{
    --border-width: 0px !important;
    border: 0 !important;
}
.toolbar-container{
    --padding-top: 0px !important;
    --padding-left: 0px !important;
    --padding-right: 0px !important;
    --padding-bottom: 0px !important;
    padding-top: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
}
.ToolbarVerde{
    --padding-top: 0px !important;
    --padding-left: 0px !important;
    --padding-right: 0px !important;
    --padding-bottom: 0px !important;
    padding-top: 0px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 0px !important;
}

但这不起作用。

Answer 1

终于明白了，对于任何有问题的人：

将 class 添加到您的 <ion-toolbar class="ToolbarVerde"，然后在您的 .scss 中使用以下内容：

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

Answer 2

嗨，这可能对某人有帮助

<ion-header no-border >

</ion-header>

这删除了 ionic 4 中的行

Answer 3

使用此删除边框：

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

Answer 4

用这个去除阴影：

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

Answer 5

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

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

它删除了边框和阴影。

如何删除 Ion-Toolbar 上的边框？

How do I remove a border on an Ion-Toolbar?

html

css

ionic-framework

ionic4