kolor elementu jonowego i href nie działa

Question

Rozpocząłem projekt jonowy oparty na szablonie sidemenu. Próbuję zmienić kolor tła dla każdego elementu menu bocznego (chciałbym, aby każdy element był innego koloru).

Próbowałem dodać jonową klasę kolorów:

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

to działa dobrze na elemencie logowania, ale nie na innych elementach. Usuwanie atrybutu href z innych elementów działa ... Jak mogę mieć kolor tła i element href?

Answer 1

An ion-item z atrybutem href renderuje się inaczej. Aby uzyskać więcej informacji na dlaczego patrz odpowiedź dfsq za

Co można zrobić, to zamiast stosowania dyrektywy ion-list użyj klasy:

<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

Problemem jest to, że dyrektywa ion-item renderuje a element z klasy .item-content wewnątrz czy ma ona atrybut href. Klasy ty dotyczą ion-item elementy są zdefiniowane jako coś takiego:

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

i w tej samej klasie jonowe definiuje te style dla linków wewnątrz jak

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

Później reguła ma wyższy specificity więc ma pierwszeństwo nad prostą regułą klasy .assertive-bg.

Aby obejść ten problem, który chcesz ręcznie utworzyć kilka dodatkowych zasad:

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

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

---

UPD. brandyshea dostarczyło znacznie lepsze rozwiązanie tego, jak style powinny być przeciążane bez duplikowania wartości kolorów. Ja jednak zachowam moją odpowiedź ze względu na wyjaśnienia.

Answer 3

Istnieje kilka sposobów na to, to. Oto kolejny sposób:

Dodaj niestandardowej klasy do listy bocznego menu:

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

A potem powiedz pozycja-content odziedziczyć background-color z pozycji:

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

Codepen demo