web-dev-qa-db-ja.com

Ion-Toolbarの境界線を削除Ionic V4（4.0.9）

気が狂ってしまいました... ion-toolbar の中に ion-header in Ionic v4（4.0.9）。

私の目的はこれを削除することです：

my two toolbars with borders

私のコードにはion-header 2つの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およびion-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;
}

しかし、これは何も機能していません。私は過去3か月間Ionic v4を使用しており、これが私が問題を抱えているのは初めてです。

htmlcssionic-frameworkionic4
3
Juanfri Lira

こんにちはこれは誰かを助けるかもしれません

<ion-header no-border >

</ion-header>

これはionic4の行を削除します

22
Yokesh Varadhan

これを使用して影を削除します。

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

誰かがIonic 5ソリューションを探している場合、これを実行してください：

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

境界線と影を削除します。

2
Abdul Hafeez

これを使用して境界線を削除します。

ion-toolbar {
  --border-style: none;
}
0
Герман Манвелов

最後に、これで問題を抱えている人のために：

<ion-toolbar class="ToolbarVerde"にクラスを追加し、.scssで次を使用します。

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