ItemOptions

`ion-item-options`

The 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 right. If you have multiple `ion-item-options`, a side must be provided for each.

Output Events

Attr	Details
ionSwipe	Expression to evaluate when the item has been fully swiped.

Sass Variables

iOS Material Design Windows Platform

Property	Default	Description
`$item-ios-body-text-font-size`	`1.7rem`	Font size of the item text
`$item-ios-paragraph-margin`	`0 0 2px`	Margin 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-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-divider-padding`	`5px 15px`	Padding 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-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-divider-padding`	`5px 15px`	Padding 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-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-divider-padding`	`5px 15px`	Padding for the divider
`$item-wp-sliding-content-background`	`$list-wp-background-color`	Background for the sliding content