Items are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements. Generally they are placed in a list with other items. Items can be swiped, deleted, reordered, edited, and more.
Items left align text and add an ellipsis when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using .ion-text-wrap in the below example. See the CSS Utilities Documentation for more classes that can be added to an item to transform the text.
<ion-item> <ion-label>Basic Item</ion-label> </ion-item> <ion-item> <ion-label> Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ion-label> </ion-item> <ion-item> <ion-labelclass="ion-text-wrap"> Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </ion-label> </ion-item> <ion-item> <ion-label> <h1>H1 Heading</h1> <p>Paragraph</p> </ion-label> </ion-item> <ion-item> <ion-label> <h2>H2 Heading</h2> <p>Paragraph</p> </ion-label> </ion-item> <ion-item> <ion-label> <h3>H3 Heading</h3> <p>Paragraph</p> </ion-label> </ion-item>
An item is considered "clickable" if it has an href or button property set. Clickable items have a few visual differences that indicate they can be interacted with. For example, a clickable item receives the ripple effect upon activation in md mode, has a highlight when activated in ios mode, and has a detail arrow by default in ios mode.
By default clickable items will display a right arrow icon on ios mode. To hide the right arrow icon on clickable elements, set the detail property to false. To show the right arrow icon on an item that doesn't display it naturally, set the detail property to true.
<ion-itemdetail="true"> <ion-label> <h3>Text Item</h3> <p>Detail set to true - detail arrow displays on both modes</p> </ion-label> </ion-item> <ion-itembutton> <ion-label> <h3>Button Item</h3> <p>Default detail - detail arrow displays on iOS only</p> </ion-label> </ion-item> <ion-itembuttondetail="true"> <ion-label> <h3>Button Item</h3> <p>Detail set to true - detail arrow displays on both modes</p> </ion-label> </ion-item> <ion-itembuttondetail="false"> <ion-label> <h3>Button Item</h3> <p>Detail set to false - detail arrow hidden on both modes</p> </ion-label> </ion-item> <ion-itembuttondetail="true"detail-icon="caret-forward-outline"> <ion-label> <h3>Button Item</h3> <p>Detail set to true - detail arrow displays on both modes</p> <p>Detail icon set to caret-forward-outline</p> </ion-label> </ion-item>
Items show an inset bottom border by default. The border has padding on the left and does not appear under any content that is slotted in the "start" slot. The lines property can be modified to "full" or "none" which will show a full width border or no border, respectively.
Buttons are styled smaller inside of items than when they are outside of them. To make the button size match buttons outside of an item, set the size attribute to "default".
<ion-item> <ion-buttonslot="start"> Start </ion-button> <ion-label>Default Buttons</ion-label> <ion-buttonslot="end"> End </ion-button> </ion-item> <ion-item> <ion-buttonslot="start"> Start <ion-iconname="home"slot="end"></ion-icon> </ion-button> <ion-label>Buttons with Icons</ion-label> <ion-buttonslot="end"> <ion-iconname="star"slot="end"></ion-icon> End </ion-button> </ion-item> <ion-item> <ion-buttonslot="start"> <ion-iconslot="icon-only"name="navigate"></ion-icon> </ion-button> <ion-label>Icon only Buttons</ion-label> <ion-buttonslot="end"> <ion-iconslot="icon-only"name="star"></ion-icon> </ion-button> </ion-item> <ion-item> <ion-label>Button Sizes</ion-label> <ion-buttonslot="end"size="small"> Small </ion-button> <ion-buttonslot="end"size="default"> Default </ion-button> <ion-buttonslot="end"size="large"> Large </ion-button> </ion-item>
Items containing an input will highlight the bottom border of the input with a different color when focused, valid, or invalid. By default, md items have a highlight with a height set to 2px and ios has no highlight (technically the height is set to 0). The height can be changed using the --highlight-height CSS property. To turn off the highlight, set this variable to 0.
The highlight color changes based on the item state, but all of the states use Ionic colors by default. When focused, the input highlight will use the primary color. If the input is valid it will use the success color, and invalid inputs will use the danger color. This can be customized using the provided CSS properties.
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.
If true, a character counter will display the ratio of characters used and the total character limit. Only applies when the maxlength property is set on the inner ion-input or ion-textarea. Deprecated Use the counter property on ion-input or ion-textarea instead.
A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength". Deprecated Use the counterFormatter property on ion-input or ion-textarea instead.
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).
Background of the item when pressed. Note: setting this will interfere with the Material Design ripple.
--background-activated-opacity
Opacity of the item background when pressed
--background-focused
Background of the item when focused with the tab key
--background-focused-opacity
Opacity of the item background when focused with the tab key
--background-hover
Background of the item on hover
--background-hover-opacity
Opacity of the background of the item on hover
--border-color
Color of the item border
--border-radius
Radius of the item border
--border-style
Style of the item border
--border-width
Width of the item border
--color
Color of the item
--color-activated
Color of the item when pressed
--color-focused
Color of the item when focused with the tab key
--color-hover
Color of the item on hover
--detail-icon-color
Color of the item detail icon
--detail-icon-font-size
Font size of the item detail icon
--detail-icon-opacity
Opacity of the item detail icon
--highlight-color-focused
The color of the highlight on the item when focused. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on ion-input or ion-textarea when using the modern form syntax.
--highlight-color-invalid
The color of the highlight on the item when invalid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on ion-input or ion-textarea when using the modern form syntax.
--highlight-color-valid
The color of the highlight on the item when valid. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on ion-input or ion-textarea when using the modern form syntax.
--highlight-height
The height of the highlight on the item. Only applies to inputs and textareas using the legacy form syntax. DEPRECATED: Highlights can be styled on ion-input or ion-textarea when using the modern form syntax.
--inner-border-width
Width of the item inner border
--inner-box-shadow
Box shadow of the item inner
--inner-padding-bottom
Bottom padding of the item inner
--inner-padding-end
Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner
--inner-padding-start
Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner
--inner-padding-top
Top padding of the item inner
--min-height
Minimum height of the item
--padding-bottom
Bottom padding of the item
--padding-end
Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item
--padding-start
Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item
Content is placed between the named slots if provided without a slot.
end
Content is placed to the right of the item text in LTR, and to the left in RTL.
error
Content is placed under the item and displayed when an error is detected. DEPRECATED Use the "errorText" property on ion-input or ion-textarea instead.
helper
Content is placed under the item and displayed when no error is detected. DEPRECATED Use the "helperText" property on ion-input or ion-textarea instead.
start
Content is placed to the left of the item text in LTR, and to the right in RTL.