Ionen Artikel Farbe und href nicht funktioniert

Question

begann ich ein ionisches Projekt auf der Grundlage der sidemenu Vorlage. Ich versuche, die Hintergrundfarbe für jedes Element der Seite im Menü zu ändern (Ich mag jedes Element einer anderen Farbe sein).

Ich versuchte, eine ionische Farbklasse hinzuzufügen:

<ion-side-menu side="left"> 
    <ion-header-bar class="bar-stable"> 
     <h1 class="title">Left</h1> 
    </ion-header-bar> 
    <ion-content> 
     <ion-list> 
     <ion-item class="positive-bg" nav-clear menu-close ng-click="login()"> 
      Login 
     </ion-item> 
     <ion-item class="calm-bg" nav-clear menu-close href="#/app/search"> 
      Search 
     </ion-item> 
     <ion-item class="assertive-bg" nav-clear menu-close href="#/app/browse"> 
      Browse 
     </ion-item> 
     <ion-item nav-clear menu-close class="balanced-bg" href="#/app/playlists"> 
      Playlists 
     </ion-item> 
     </ion-list> 
    </ion-content> 

Es funktioniert gut auf dem Login-Element, aber nicht auf die anderen Elemente. Entfernen des Attributs href auf anderen Elementen funktioniert ... Wie kann ich die Hintergrundfarbe und das HREF-Element?

Answer 1

Ein ion-item mit einem href Attribut rendert anders. Für weitere Informationen über die warum dfsq Antwort siehe

Was Sie tun können, anstatt die ion-list Richtlinie ist, verwenden Sie die Klassen:

<ion-content> 
    <ul class="list"> 
     <a href="" class="item positive-bg" nav-clear menu-close ng-click="login()">Login</a> 
     <a href="#/app/search" class="item calm-bg" nav-clear menu-close>Search</a> 
     <a href="#/app/browse" class="item assertive-bg" nav-clear menu-close>Browse</a> 
     <a href="#/app/playlists" class="item balanced-bg" nav-clear menu-close>Playlists</a> 
    </ul> 
</ion-content> 

Demo on Codepen

Answer 2

Das Problem ist, dass ion-item Direktive rendert a Element mit Klasse .item-content innerhalb, wenn es href Attribut hat. Die Klassen, die Sie ion-item Elemente gelten als so etwas wie folgt definiert:

.assertive-bg { 
    background-color: #ef473a; 
} 

und in der gleichen Klasse ionischer definiert diese Stile für Links innerhalb als

.item-complex .item-content, .item-radio .item-content { 
    position: relative; 
    z-index: 2; 
    padding: 16px 49px 16px 16px; 
    border: none; 
    background-color: white; 
} 

Später Regel hat eine höhere specificity so hat es Vorrang über einfache .assertive-bg Klassenregel.

dieses Problem manuell paar zusätzliche Regeln erstellen möchten Umgehung:

.item-complex.assertive-bg .item-content { 
    background-color: #ef473a; 
} 

Demo:http://plnkr.co/edit/bbUel2goJGYy8fv0ltXm?p=preview

---

UPD. Brandyshea lieferte eine viel bessere Lösung dafür, wie Styles ohne Farbwertverdopplung überladen werden sollten. Ich werde jedoch meine Antwort behalten, um sie zu erklären.

Answer 3

Es gibt ein paar Möglichkeiten, zu tun Dies. Hier ist eine andere Art und Weise:

eine benutzerdefinierte Klasse zu Ihrer Seite Menüliste hinzufügen:

<ion-list class="sidemenu-list"> 

Und dann sagen Artikel-Inhalt die Hintergrundfarbe aus dem Artikel zu erben:

.sidemenu-list .item-complex .item-content { 
    background-color: inherit; 
} 

Codepen demo