Does anyone know if it would be possible to put a background image on the anchor element that is generated from ion-list?
I currently have the following code:
<ion-item class="location-item" ng-repeat="loc in locations | orderBy:$storage.sortLoc | filter: searchQuery" type="item-text-wrap" ng-href="#/app/loc/{{loc._id}}/detail" style="background-image:url('{{loc.heroImage.url}}');">
<div class="location-title">
<p>{{loc.commonName}}</p>
<span class="distance-indicator" ng-show="$storage.showDistance"><span class="digit">{{distanceFromHere(loc)}}</span><span class="unit">mi</span></span>
</div>
<ion-option-button ng-click="makeFavorite(loc)" ng-hide="isFavorite(loc)" class="button-favorite"><i class="icon ion-ios7-star-outline"></i></ion-option-button>
<ion-option-button ng-click="unFavorite(loc)" ng-show="isFavorite(loc)" class="button-favorite active"><i class="icon ion-ios7-star"></i></ion-option-button>
<ion-option-button ng-click="makeVisited(loc)" ng-hide="isVisited(loc)" class="button-visited"><i class="icon ion-ios7-checkmark-outline"></i></ion-option-button>
<ion-option-button ng-click="unVisit(loc)" ng-show="isVisited(loc)" class="button-visited active"><i class="icon ion-ios7-checkmark"></i></ion-option-button>
<ion-option-button ng-click="getDirections(loc)"><i class="icon ion-ios7-navigate-outline"></i></ion-option-button>
</ion-item>
</ion-list>
But the swipe to reveal the ion-option-buttons looks very tacky because it’s applying my background image to the <ion-item>
wrapper.
Ultimately this isn’t really what I want to do anyway, but I can’t seem to find a way with Ionic Framework to do what I really want to do: I’d like to be able to swipe all the way across the row and reveal the three option buttons evenly spaced out across the row.
Any help would be appreciated!