移除Ion-Toolbar Ionic V4(4.0.9)中的边框

Jua*_*ira 2 html css ionic-framework ionic4

我已经疯了...一个需要帮助消除来自边境ion-toolbarion-header中离子V4(4.0.9)。

我的目标是删除此:

我的两个带边框的工具栏

在我的代码中,我有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>
Run Code Online (Sandbox Code Playgroud)

我用尽了一切的no-border属性附加伤害内部ion-headerion-toolbar

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

.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;
}
Run Code Online (Sandbox Code Playgroud)

但这一切无济于事,最近3个月来我一直在使用Ionic v4,这是我第一次遇到问题。

小智 46

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

<ion-header class="ion-no-border">
</ion-header>
Run Code Online (Sandbox Code Playgroud)

它去除边框和阴影。


Yok*_*han 17

嗨,这可能会帮助某人

<ion-header no-border >

</ion-header>
Run Code Online (Sandbox Code Playgroud)

这删除了ionic4中的行

  • ionic 5 将 no-border 替换为 class="ion-no-border" (6认同)

小智 7

使用它来去除阴影:

ion-header {
  &.header-md:after {
    background: none;
  }
}
Run Code Online (Sandbox Code Playgroud)


小智 6

使用它来删除边框:

ion-toolbar {
  --border-style: none;
}
Run Code Online (Sandbox Code Playgroud)