Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

ItemOptions

ion-item-options

Improve this doc

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

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

API

Native

General