離子項目顏色和href不工作

我開始了一個基於sidemenu模板的離子項目。我正在嘗試更改側邊菜單中每個元素的背景顏色（我希望每個項目都具有不同的顏色）。離子項目顏色和href不工作

我嘗試添加離子顏色類：

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

它運作良好登錄元素，但不是在其他元素。刪除其他元素的href屬性的作品...我怎麼能有背景顏色和href元素？

來源

2015-04-26 poiuytrez

一個ion-item與href屬性呈現不同。有關爲什麼看到dfsq的答案

你可以做什麼，而不是使用ion-list指令的詳細信息，可以使用類：

<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

來源

2015-04-29 08:06:48 devqon

問題是，ion-item指令呈現a元素與類.item-content裏面如果它有href屬性。你申請ion-item元素的類定義是這樣的：

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

，並在同一類離子裏面定義了鏈接這些樣式作爲

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

後來規則具有較高的specificity所以優先通過簡單的.assertive-bg類規則。

要解決要手動創建一些額外的規則，這個問題：

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

演示：http://plnkr.co/edit/bbUel2goJGYy8fv0ltXm?p=preview

UPD。 brandyshea提供了更好的解決方案，以避免顏色值重複而導致樣式過載。儘管如此，爲了解釋它，我會保留我的答案。

來源

2015-04-29 08:00:14 dfsq

有幾個方法可以做到這個。這裏是另一種方式：

添加自定義類你身邊菜單列表：

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

然後告訴項內容，以繼承這一項目的背景色：

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

Codepen demo

來源

2015-04-29 13:34:29 brandyshea

Arg，完全忘了'inherit'。這是重新聲明樣式的正確方法。 – dfsq

離子項目顏色和href不工作

回答

相關問題