Item
ion-list-header,ion-item,[ion-item],ion-item-divider
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.
<button ion-item (click)="buttonClick()">
Button Item
</button>
<a ion-item href="https://www.ionicframework.com">
Anchor Item
</a>
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.
<ion-item detail-push>
Item with Detail Arrow
</ion-item>
<button ion-item (click)="buttonClick()">
Button Item with Detail Arrow
</button>
<a ion-item detail-none href="https://www.ionicframework.com">
Anchor Item with no Detail Arrow
</a>
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.
Usage
<ion-list>
<ion-list-header>
Header
</ion-list-header>
<ion-item>
Item
</ion-item>
<ion-item detail-push>
Item with Detail Arrow
</ion-item>
<button ion-item (click)="buttonClick()">
Button Item
</button>
<ion-item-divider>
Item Divider
</ion-item-divider>
<button ion-item detail-none (click)="buttonClick()">
Button Item with no Detail Arrow
</button>
<a ion-item href="https://www.ionicframework.com">
Anchor Item
</a>
<ion-item no-lines>
Item with no border
</ion-item>
<ion-item text-wrap>
Multiline text that should wrap when it is too long
to fit on one line in the item.
</ion-item>
</ion-list>
Advanced
<ion-list>
<!-- List header with buttons on each side -->
<ion-list-header>
<button ion-button item-left (click)="buttonClick()">Button</button>
List Header
<button ion-button outline item-right (click)="buttonClick()">Outline</button>
</ion-list-header>
<!-- Loops through and creates multiple items -->
<ion-item *ngFor="let item of items">
Item {{item}}
</ion-item>
<!-- Button item with an icon on the left -->
<button ion-item>
<ion-icon name="star" item-left></ion-icon>
Button Item
</button>
<!-- Item with a label and content -->
<ion-item>
<ion-label>
Item Label
</ion-label>
<div item-content>
Item Content next to the label
</div>
</ion-item>
<!-- Item with left and right buttons -->
<ion-item>
<button ion-button item-left (click)="buttonClick()">Button</button>
Item
<button ion-button outline item-right (click)="buttonClick()">Outline</button>
</ion-item>
<!-- Item divider with a right button -->
<ion-item-divider>
Item Divider
<button ion-button item-right>Button</button>
</ion-item-divider>
<!-- Disabled button item with left and right buttons -->
<button ion-item disabled>
<button ion-button item-left (click)="buttonClick()">
<ion-icon name="home"></ion-icon>
Left Icon
</button>
Disabled Button Item
<button ion-button outline item-right (click)="buttonClick()">
<ion-icon name="star"></ion-icon>
Left Icon
</button>
</button>
<!-- Item with an avatar on the left and button on the right -->
<ion-item>
<ion-avatar item-left>
<img src="img/my-avatar.png">
</ion-avatar>
Avatar Item
<button ion-button outline item-right>View</button>
</ion-item>
<!-- Item with a thumbnail on the right -->
<ion-item>
<h2>Item</h2>
<p>Item Paragraph</p>
<ion-thumbnail item-right>
<img src="img/my-thumbnail.png">
</ion-thumbnail>
</ion-item>
<!-- Sliding item -->
<ion-item-sliding>
<ion-item>
Item
</ion-item>
<ion-item-options>
<button ion-button color="primary" (click)="archive()">Archive</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
Sass Variables
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-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-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-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-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-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-divider-padding |
5px 15px |
Padding for the divider |
$item-wp-sliding-content-background |
$list-wp-background-color |
Background for the sliding content |