ItemOptions ion-item-options
ion-item-optionsThe option buttons for an ion-item-sliding. These buttons can be placed either on the left or right side. You can combine the (ionSwipe) event plus the expandable directive to create a full swipe action for the item.
Usage
<ion-item-sliding> <ion-item> Item 1 </ion-item> <ion-item-options side="right" (ionSwipe)="saveItem(item)"> <button ion-button expandable (click)="saveItem(item)"> <ion-icon name="star"></ion-icon> </button> </ion-item-options> </ion-item-sliding> Input Properties
| Attr | Type | Details |
|---|---|---|
| side | string | The side the option button should be on. Defaults to |
Output Events
| Attr | Details |
|---|---|
| ionSwipe | Emitted when the item has been fully swiped. |
Sass Variables
| Property | Default | Description |
|---|---|---|
$item-ios-body-text-font-size | 1.7rem | Font size of the item text |
$item-ios-paragraph-margin-top | 0 | Margin top of the item paragraph |
$item-ios-paragraph-margin-end | 0 | Margin end of the item paragraph |
$item-ios-paragraph-margin-bottom | 2px | Margin bottom of the item paragraph |
$item-ios-paragraph-margin-start | $item-ios-paragraph-margin-end | Margin start of the item paragraph |
$item-ios-paragraph-font-size | 1.4rem | Font size of the item paragraph |
$item-ios-paragraph-text-color | #8e9093 | Color of the item paragraph |
$item-ios-avatar-size | 36px | Size of the avatar in the item |
$item-ios-avatar-border-radius | 50% | Border radius of the avatar in the item |
$item-ios-thumbnail-size | 56px | Size of the thumbnail in the item |
$item-ios-detail-push-show | true | Shows the detail arrow icon on an item |
$item-ios-detail-push-color | $list-ios-border-color | Color of the detail arrow icon |
$item-ios-detail-push-svg | "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$item-ios-detail-push-color}'/></svg>" | Icon for the detail arrow |
$item-ios-divider-background | #f7f7f7 | Background for the divider |
$item-ios-divider-color | #222 | Color for the divider |
$item-ios-sliding-content-background | $list-ios-background-color | Background for the sliding content |
| Property | Default | Description |
|---|---|---|
$item-md-body-text-font-size | 1.4rem | Font size of the item text |
$item-md-body-text-line-height | 1.5 | line height of the item text |
$item-md-paragraph-text-color | #666 | Color of the item paragraph |
$item-md-font-size | 1.6rem | Font size of the item |
$item-md-avatar-size | 40px | Size of the avatar in the item |
$item-md-avatar-border-radius | 50% | Border radius of the avatar in the item |
$item-md-thumbnail-size | 80px | Size of the thumbnail in the item |
$item-md-detail-push-show | false | Shows the detail arrow icon on an item |
$item-md-detail-push-color | $list-md-border-color | Color of the detail arrow icon |
$item-md-detail-push-svg | "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$item-md-detail-push-color}'/></svg>" | Icon for the detail arrow |
$item-md-divider-color | #858585 | Color for the divider |
$item-md-divider-background | #fff | Background for the divider |
$item-md-divider-font-size | $item-md-body-text-font-size | Font size for the divider |
$item-md-divider-border-bottom | 1px solid $list-md-border-color | Border bottom for the divider |
$item-md-sliding-content-background | $list-md-background-color | Background for the sliding content |
| Property | Default | Description |
|---|---|---|
$item-wp-body-text-font-size | 1.4rem | Font size of the item text |
$item-wp-body-text-line-height | 1.5 | line height of the item text |
$item-wp-body-background-color | $list-wp-background-color | Background color of the item |
$item-wp-body-text-color | $list-wp-text-color | Color of the item text |
$item-wp-paragraph-text-color | #666 | Color of the item paragraph |
$item-wp-font-size | 1.6rem | Font size of the item |
$item-wp-avatar-size | 40px | Size of the avatar in the item |
$item-wp-avatar-border-radius | 50% | Border radius of the avatar in the item |
$item-wp-thumbnail-size | 80px | Size of the thumbnail in the item |
$item-wp-detail-push-show | false | Shows the detail arrow icon on an item |
$item-wp-detail-push-color | $input-wp-border-color | Color of the detail arrow icon |
$item-wp-detail-push-svg | "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' fill='#{$item-wp-detail-push-color}'/></svg>" | Icon for the detail arrow |
$item-wp-divider-color | $list-wp-text-color | Color for the divider |
$item-wp-divider-background | #fff | Background for the divider |
$item-wp-divider-border-bottom | 1px solid $list-wp-border-color | Bodrer bottom for the divider |
$item-wp-divider-font-size | 2rem | Font size for the divider |
$item-wp-sliding-content-background | $list-wp-background-color | Background for the sliding content |