Search docs/

ion-item-option

The option button for an ion-item-sliding. Must be placed inside of an <ion-item-options>. You can combine the ionSwipe event and the expandable directive to create a full swipe action for the item.

Properties

color

Description

The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.

Attributecolor
Typestring | undefined

disabled

Description

If true, the user cannot interact with the item option.

Attributedisabled
Typeboolean
Defaultfalse

download

Description

This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).

Attributedownload
Typestring | undefined

expandable

Description

If true, the option will expand to take up the available width and cover any other options.

Attributeexpandable
Typeboolean
Defaultfalse

href

Description

Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.

Attributehref
Typestring | undefined

mode

Description

The mode determines which platform styles to use.

Attributemode
Type"ios" | "md"

rel

Description

Specifies the relationship of the target object to the link object. The value is a space-separated list of link types.

Attributerel
Typestring | undefined

target

Description

Specifies where to display the linked URL. Only applies when an href is provided. Special keywords: "_blank", "_self", "_parent", "_top".

Attributetarget
Typestring | undefined

type

Description

The type of the button.

Attributetype
Type"button" | "reset" | "submit"
Default'button'

CSS Custom Properties

NameDescription
--backgroundBackground of the item option
--colorColor of the item option

Slots

NameDescription
Content is placed between the named slots if provided without a slot.
"bottom"Content is placed below the option text.
"end"Content is placed to the right of the option text in LTR, and to the left in RTL.
"icon-only"Should be used on an icon in an option that has no text.
"start"Content is placed to the left of the option text in LTR, and to the right in RTL.
"top"Content is placed above the option text.