CODEWITHSUNDEEP
htmlcsscordovaionic-framework
Imoum
Imoum

Reputation: 745

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

<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

Upvotes: 1

Views: 10797

Answers (3)

juliusbangert
juliusbangert

Reputation: 657

The best way is by overriding the following in the variables.scss file :

$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%);

Upvotes: 0

Imoum
Imoum

Reputation: 745

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.

Upvotes: 1

daan.desmedt
daan.desmedt

Reputation: 3820

Highlight hover item

Purely with CSS 

ion-item:hover a {
  background-color: slategray !important;
}

Highlight active item

You could add a active css class using ng-class. Define custom CSS for this 'active' class.

<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;
    }
  }
}]);

Source

Upvotes: 1

Related Questions