Item

ion-list-header,ion-item,[ion-item],ion-item-divider

An item can contain text, images, and anything else. Generally it is placed in a list with other
items. It can easily be swiped, deleted, reordered, edited, and more. An item is only required to
be in a List if manipulating the item via gestures is required. It requires an
ItemSliding wrapper element in order to be swiped.

Common Usage

There are a few elements that are considered items, but not all of them are styled to look the same.
The basic item can be written as an <ion-item> element or it can be added to any element by adding
ion-item as an attribute. List headers and item dividers, although styled differently, are also items
and can be written as <ion-list-header> and <ion-item-divider>, respectively.

As an Element

A basic item should be written as a <ion-item> element when it is not clickable.

<ion-item>
Item
</ion-item>

A list header should be written as <ion-list-header>.

<ion-list-header>
List Header
</ion-list-header>

An item divider should be written as <ion-item-divider>.

<ion-item-divider>
Item Divider
</ion-item-divider>

As an Attribute

The attribute ion-item should be added to a <button> when the item can be clicked or tapped. It
should be added to an <a> element when the item needs to contain a href. It can be added as an
attribute to any element to take on the item styling.

Note: do not add ion-item as an attribute to an <ion-list-header> or <ion-item-divider> element
as they are already items and their styling will be changed to look like a basic item.

Detail Arrows

By default, <button> and <a> elements with the ion-item attribute will display a right arrow icon
on ios mode. To hide the right arrow icon on either of these elements, add the detail-none attribute
to the item. To show the right arrow icon on an element that doesn't display it naturally, add the
detail-push attribute to the item.

This feature is not enabled by default for md and wp modes, but it can be enabled by setting the
Sass variables $item-md-detail-push-show and $item-wp-detail-push-show, respectively, to true.
It can also be disabled for ios by setting $item-ios-detail-push-show to false. See the
theming documentation for
more information on overriding Sass variables.

Item Placement

Items rely heavily on content projection to position content. The item grabs content based on the
element or attribute and positions it that way. This logic makes it possible to write a complex
item with simple, understandable markup without having to worry about styling and positioning
the elements.

The below chart details the attributes item looks for and where it will place the element with
that attribute inside of the item:

Attribute

Description

item-left

Placed to the left of all other elements, outside of the inner item.

item-right

Placed to the right of all other elements, inside of the inner item, outside of the input wrapper.

item-content

Placed to the right of any ion-label, inside of the input wrapper.

Checkboxes, Radios and Toggles

Checkboxes are positioned in the same place as the item-left attribute.
Radios and Toggles are positioned in the same place
as the item-right attribute. All of these components can be positioned differently by adding the
item-left or item-right attribute.

Content and Inputs

A Label is placed inside of the item to the left of all content and inputs. The
following components are all placed in the same position as the item-content attribute: Select,
Input, TextArea, DateTime, and
Range.

Any element directly placed inside of an <ion-item> that does not have one of the previously mentioned
attributes and isn't one of the above elements will be placed inside of a Label.

Text Alignment

By default, Items will align text to the left and add an ellipsis when the text is wider than the item.
See the Utility Attributes Documentation for attributes that can
be added to ion-item to transform the text.