hello,
I would like to implement a “<” icon on the right of the ion-item in order to make the user slide the ion-options.
Even I would like to add a “X” on ion-options for the deletions.
Here is my code and I encounter an issue with the “I LOVE DOGS” Item.
Can someone help me and tell me how to have 2 icons (1 in the item and 1 or more in the ion-options) ?
Thank you very much.
<ion-content has-header="true" has-tabs="true">
<ion-list>
<ion-item>
<div class="item-checkbox">
<label class="checkbox">
<input type="checkbox"
ng-model="groupe0.checked"
ng-checked="groupe0.checked"
ng-change="">
</label>
<span>I love kittens!</span>
</div>
<ion-option-button class="button-positive">Share</ion-option-button>
<ion-option-button class="button-assertive icon ion-close-round"></ion-option-button>
<ion-option-button class="button-positive">Edit</ion-option-button>
</ion-item>
<ion-item class="item-icon-right">
<div class="item-checkbox">
<label class="checkbox">
<input type="checkbox"
ng-model="groupe1.checked"
ng-checked="groupe1.checked"
ng-change="">
</label>
<span>I love Dogs</span>
</div>
<i class="ion-ios7-arrow-left"></i>
<ion-option-button class="button-positive">Share</ion-option-button>
<ion-option-button class="button-assertive icon ion-close-round"></ion-option-button>
<ion-option-button class="button-positive">Edit</ion-option-button>
</ion-item>
<li class="item item-icon-right" >
<div class="item-checkbox">
<label class="checkbox">
<input type="checkbox"
ng-model="groupe.checked"
ng-checked="groupe.checked"
ng-change="">
</label>
<span>I love birds</span>
</div>
<i class="icon ion-ios7-arrow-left"></i>
</li>
Not sure what you wanted
can you Use the below code and see if it works:
<ion-item class="item-icon-right">
<div class="item-checkbox">
<label class="checkbox">
<input type="checkbox"
ng-model="groupe1.checked"
ng-checked="groupe1.checked"
ng-change="">
</label>
<span>I love kittens!</span>
</div>
<i class="icon ion-ios7-arrow-left"></i>
<ion-option-button class="button-positive">Share</ion-option-button>
<ion-option-button class="button-assertive icon ion-close-round"></ion-option-button>
<ion-option-button class="button-positive">Edit</ion-option-button>
</ion-item>
<ion-item class="item-icon-right">
<div class="item-checkbox">
<label class="checkbox">
<input type="checkbox"
ng-model="groupe1.checked"
ng-checked="groupe1.checked"
ng-change="">
</label>
<span>I love Dogs</span>
</div>
<i class="icon ion-ios7-arrow-left"></i>
<ion-option-button class="button-positive">Share</ion-option-button>
<ion-option-button class="button-assertive icon ion-close-round"></ion-option-button>
<ion-option-button class="button-positive">Edit</ion-option-button>
</ion-item>
<ion-item class="item item-icon-right" >
<div class="item-checkbox">
<label class="checkbox">
<input type="checkbox"
ng-model="groupe.checked"
ng-checked="groupe.checked"
ng-change="">
</label>
<span>I love birds</span>
</div>
<i class="icon ion-ios7-arrow-left"></i>
<ion-option-button class="button-positive">Share</ion-option-button>
<ion-option-button class="button-assertive icon ion-close-round"></ion-option-button>
<ion-option-button class="button-positive">Edit</ion-option-button>
</ion-item>
</ion-list>
Hello, Thank you for your help.
The first icon ion-ios7-arrow-left is OK
Unfortunately the second one : ion-close-round is not displayed in the options.
Without the ion-ios7-arrow-left - I love Kittens display properly the ion-close-round.
<ion-item>
<div class="item-checkbox">
<label class="checkbox">
<input type="checkbox"
ng-model="groupe0.checked"
ng-checked="groupe0.checked"
ng-change="">
</label>
<span>I love kittens!</span>
</div>
<ion-option-button class="button-positive">Share</ion-option-button>
<ion-option-button class="button-assertive icon ion-close-round"></ion-option-button>
<ion-option-button class="button-positive">Edit</ion-option-button>
</ion-item>
<ion-item class="item-icon-right">
<div class="item-checkbox">
<label class="checkbox">
<input type="checkbox"
ng-model="groupe1.checked"
ng-checked="groupe1.checked"
ng-change="">
</label>
<span>I love Dogs</span>
</div>
<i class="icon ion-ios7-arrow-left"></i>
<ion-option-button class="button-positive">Share</ion-option-button>
<ion-option-button class="button-assertive icon ion-close-round"></ion-option-button>
<ion-option-button class="button-positive">Edit</ion-option-button>
</ion-item>