9
votes

Comment supprimer une bordure sur une Ion-Toolbar?

J'ai besoin d'aide pour supprimer la bordure de la ion-toolbar ion-header dans l'en ion-header ionique dans Ionic v4 (4.0.9).

Mon objectif est de supprimer ceci:

Dans mon code, j'ai un en ion-header ion-toolbar avec deux ion-toolbar . J'ai tout essayé, l'attribut no-border intérieur de l'en ion-header ion-toolbar et de ion-toolbar .

J'ai également essayé d'ajouter les attributs au .scss de ma page comme suit:

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

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

Mais ça ne fonctionne pas.

html css ionic-framework ionic4

0 commentaires

5 Réponses :

0
votes

Enfin compris, pour quiconque a des problèmes avec ceci:

Ajoutez une classe à votre <ion-toolbar class="ToolbarVerde" , puis dans votre .scss utilisez ce qui suit:

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

0 commentaires

28
votes

Salut cela pourrait aider quelqu'un

<ion-header no-border >

</ion-header>

cela supprime la ligne dans ionic4

3 commentaires

La directive no-border fonctionne pour les pages communes, mais pas pour les modaux.

@rochasdv Cela fonctionne très bien avec les pages Modal aussi.

ionic 5 remplace no-border par class = "ion-no-border"

0
votes

Utilisez ceci pour supprimer la bordure:

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

0 commentaires

6
votes

Utilisez ceci pour supprimer l'ombre:

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

0 commentaires

29
votes

Dans le cas où quelqu'un recherche une solution Ionic 5, procédez comme suit:

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

Il supprime la bordure et l'ombre.

0 commentaires