[英]How to change pressed item background color in ion-list on Ionic?
I have a list of items, i want to change background color of the pressed item in ionic project. 我有一个项目列表,我想更改离子项目中所按项目的背景颜色。
index.html index.html
<ion-list>
<ion-item ng-repeat="item in familleItems">
<div ng-click="selectSousFamille(item.Numfam)">{{item.Nomfam}}</div>
</ion-item>
</ion-list>
help me please 请帮帮我
Highlight hover item 突出显示悬停项目
Purely with CSS 纯粹使用CSS
ion-item:hover a {
background-color: slategray !important;
}
Highlight active item 突出显示活动项
You could add a active css class using ng-class. 您可以使用ng-class添加活动的CSS类。 Define custom CSS for this 'active' class. 为此“活动”类定义自定义CSS。
<ion-item ng-repeat="item in familleItems" ng-class="{'activeItem': active}">
<div ng-click="selectSousFamille(item.Numfam)">{{item.Nomfam}}</div>
</ion-item>
Example: 例:
<ion-content padding="true">
<ul class="product-list">
<!-- You need a .selected in your stylesheet -->
<li ng-repeat="(key, item) in products" ng-class="{'selected':item.selected}">
<div class="list card" ng-click="select_item(key)">
<p><span>{{item.title}}</span></p>
<div class="item item-image">
<img ng-src="{{item.photo}}">
</div>
</div>
</li>
</ul>
</ion-content>
// Your Stylesheet
.selected {
// Highlight style
}
// Your controller
.controller('SomeController', ['$scope', function ($scope) {
// Expects an array, your product list may look like this
$scope.products = [
{ "title": "Super Man's Tommy Toy", "price": 20000, "thumb": "DO_RE_MI.jpg" },
{ "title": "An old picture of Seldom", "price": 1999, "thumb": "MI_RE_DO.gif" }
];
// Your logic for selection, e.g. unselect, select or something
$scope.select_item = function (key) {
if ($scope.products[key]) {
$scope.products[key].selected = true;
}
}
}]);
Thanks, it worked. 谢谢,它有效。 I just made some changes to your code because I wanna change only the selected item background color. 我只是对您的代码进行了一些更改,因为我只想更改所选项目的背景颜色。 Here's my code 这是我的代码
<ion-content padding="true">
<ul class="product-list">
<!-- You need a .selected in your stylesheet -->
<li ng-repeat="(key, item) in products" ng-class="{'selected' : item.selected, 'unselected' : !item.selected }">
<div class="list card" ng-click="select_item(key,familleItems.length)">
<p><span>{{item.title}}</span></p>
<div class="item item-image">
<img ng-src="{{item.photo}}">
</div>
</div>
</li>
</ul>
</ion-content>
// Your Stylesheet
.selected {
background-color: gray !important;
}
.unselected{
background-color: white !important;
}
// Your controller
.controller('SomeController', ['$scope', function ($scope) {
// Expects an array, your product list may look like this
$scope.products = [
{ "title": "Super Man's Tommy Toy", "price": 20000, "thumb": "DO_RE_MI.jpg" },
{ "title": "An old picture of Seldom", "price": 1999, "thumb": "MI_RE_DO.gif" }
];
// Your logic for selection, e.g. unselect, select or something
$scope.selectSousFamille = function(key, count) {
for (var i = 0; i < count; i++) {
if (key == i) {
$scope.familleItems[i].selected = true;
} else {
$scope.familleItems[i].selected = false;
}
}
}
}]);
Hope it can help someone else. 希望它可以帮助别人。
The best way is by overriding the following in the variables.scss file : 最好的方法是通过覆盖variables.scss文件中的以下内容:
$list-ios-activated-background-color: #ff8902;
$list-md-activated-background-color: #ff8902;
$list-wp-activated-background-color: #ff8902;
( Or set these variables to an altered entry from your sass color map ) (或将这些变量设置为您的萨斯色图的更改条目)
$list-ios-activated-background-color: lighten(color($colors, dark, base), 10%);
$list-md-activated-background-color: lighten(color($colors, dark, base), 10%);
$list-wp-activated-background-color: lighten(color($colors, dark, base), 10%);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.