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	Emitted 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-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