Skip to main content
Version: v5

ion-item

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.

Clickable Items

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.

Detail Arrows

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.

Item Placement

Item uses named slots in order to position content. 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 item slots and where it will place the element inside of the item:

SlotDescription
startPlaced to the left of all other content in LTR, and to the right in RTL.
endPlaced to the right of all other content in LTR, and to the left in RTL.
nonePlaced inside of the input wrapper.

Text Alignment

Items left align text and add an ellipsis when the text is wider than the item. See the CSS Utilities Documentation for classes that can be added to <ion-item> to transform the text.

Input Highlight

Highlight Height

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. For more information on setting CSS properties, see the theming documentation.

Highlight Color

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. See the CSS Custom Properties section below for the highlight color variables.

Usage

<!-- Default Item -->
<ion-item>
  <ion-label> Item </ion-label>
</ion-item>

<!-- Item as a Button -->
<ion-item button (click)="buttonClick()">
  <ion-label> Button Item </ion-label>
</ion-item>

<!-- Item as an Anchor -->
<ion-item href="https://www.ionicframework.com">
  <ion-label> Anchor Item </ion-label>
</ion-item>

<ion-item color="secondary">
  <ion-label> Secondary Color Item </ion-label>
</ion-item>

Detail Arrows

<ion-item detail>
  <ion-label> Standard Item with Detail Arrow </ion-label>
</ion-item>

<ion-item button (click)="buttonClick()" detail>
  <ion-label> Button Item with Detail Arrow </ion-label>
</ion-item>

<ion-item detail="false" href="https://www.ionicframework.com">
  <ion-label> Anchor Item with no Detail Arrow </ion-label>
</ion-item>

List Items

<ion-list>
  <ion-item>
    <ion-label> Item </ion-label>
  </ion-item>

  <ion-item lines="none">
    <ion-label> No Lines Item </ion-label>
  </ion-item>

  <ion-item>
    <ion-label class="ion-text-wrap">
      Multiline text that should wrap when it is too long to fit on one line in the item.
    </ion-label>
  </ion-item>

  <ion-item>
    <ion-label class="ion-text-wrap">
      <ion-text color="primary">
        <h3>H3 Primary Title</h3>
      </ion-text>
      <p>Paragraph line 1</p>
      <ion-text color="secondary">
        <p>Paragraph line 2 secondary</p>
      </ion-text>
    </ion-label>
  </ion-item>

  <ion-item lines="full">
    <ion-label> Item with Full Lines </ion-label>
  </ion-item>
</ion-list>

Item Lines

<!-- Item Inset Lines -->
<ion-item lines="inset">
  <ion-label>Item Lines Inset</ion-label>
</ion-item>

<!-- Item Full Lines -->
<ion-item lines="full">
  <ion-label>Item Lines Full</ion-label>
</ion-item>

<!-- Item None Lines -->
<ion-item lines="none">
  <ion-label>Item Lines None</ion-label>
</ion-item>

<!-- List Full Lines -->
<ion-list lines="full">
  <ion-item>
    <ion-label>Full Lines Item 1</ion-label>
  </ion-item>

  <ion-item>
    <ion-label>Full Lines Item 2</ion-label>
  </ion-item>
</ion-list>

<!-- List Inset Lines -->
<ion-list lines="inset">
  <ion-item>
    <ion-label>Inset Lines Item 1</ion-label>
  </ion-item>

  <ion-item>
    <ion-label>Inset Lines Item 2</ion-label>
  </ion-item>
</ion-list>

<!-- List No Lines -->
<ion-list lines="none">
  <ion-item>
    <ion-label>No lines Item 1</ion-label>
  </ion-item>

  <ion-item>
    <ion-label>No lines Item 2</ion-label>
  </ion-item>

  <ion-item>
    <ion-label>No lines Item 3</ion-label>
  </ion-item>
</ion-list>

Media Items

<ion-item button (click)="testClick()">
  <ion-avatar slot="start">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
  </ion-avatar>
  <ion-label> Avatar Start, Button Item </ion-label>
</ion-item>

<ion-item href="#">
  <ion-label> Thumbnail End, Anchor Item </ion-label>
  <ion-thumbnail slot="end">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
  </ion-thumbnail>
</ion-item>

<ion-item>
  <ion-thumbnail slot="start">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
  </ion-thumbnail>
  <ion-label>
    <h2>H2 Title Text</h2>
    <p>Button on right</p>
  </ion-label>
  <ion-button fill="outline" slot="end">View</ion-button>
</ion-item>

<ion-item button (click)="testClick()">
  <ion-thumbnail slot="start">
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
  </ion-thumbnail>
  <ion-label>
    <h3>H3 Title Text</h3>
    <p>Icon on right</p>
  </ion-label>
  <ion-icon name="close-circle" slot="end"></ion-icon>
</ion-item>

Buttons in Items

<ion-item>
  <ion-button slot="start"> Start </ion-button>
  <ion-label>Button Start/End</ion-label>
  <ion-button slot="end"> End </ion-button>
</ion-item>

<ion-item>
  <ion-button slot="start">
    Start Icon
    <ion-icon name="home" slot="end"></ion-icon>
  </ion-button>
  <ion-label>Buttons with Icons</ion-label>
  <ion-button slot="end">
    <ion-icon name="star" slot="end"></ion-icon>
    End Icon
  </ion-button>
</ion-item>

<ion-item>
  <ion-button slot="start">
    <ion-icon slot="icon-only" name="navigate"></ion-icon>
  </ion-button>
  <ion-label>Icon only Buttons</ion-label>
  <ion-button slot="end">
    <ion-icon slot="icon-only" name="star"></ion-icon>
  </ion-button>
</ion-item>

Icons in Items

<ion-item>
  <ion-label> Icon End </ion-label>
  <ion-icon name="information-circle" slot="end"></ion-icon>
</ion-item>

<ion-item>
  <ion-label> Large Icon End </ion-label>
  <ion-icon name="information-circle" size="large" slot="end"></ion-icon>
</ion-item>

<ion-item>
  <ion-label> Small Icon End </ion-label>
  <ion-icon name="information-circle" size="small" slot="end"></ion-icon>
</ion-item>

<ion-item>
  <ion-icon name="star" slot="start"></ion-icon>
  <ion-label> Icon Start </ion-label>
</ion-item>

<ion-item>
  <ion-label> Two Icons End </ion-label>
  <ion-icon name="checkmark-circle" slot="end"></ion-icon>
  <ion-icon name="shuffle" slot="end"></ion-icon>
</ion-item>

Item Inputs

<ion-item>
  <ion-label position="floating">Datetime</ion-label>
  <ion-datetime></ion-datetime>
</ion-item>

<ion-item>
  <ion-label position="floating">Select</ion-label>
  <ion-select>
    <ion-select-option value="">No Game Console</ion-select-option>
    <ion-select-option value="nes">NES</ion-select-option>
    <ion-select-option value="n64" selected>Nintendo64</ion-select-option>
    <ion-select-option value="ps">PlayStation</ion-select-option>
    <ion-select-option value="genesis">Sega Genesis</ion-select-option>
    <ion-select-option value="saturn">Sega Saturn</ion-select-option>
    <ion-select-option value="snes">SNES</ion-select-option>
  </ion-select>
</ion-item>

<ion-item>
  <ion-label>Toggle</ion-label>
  <ion-toggle slot="end"></ion-toggle>
</ion-item>

<ion-item>
  <ion-label position="floating">Floating Input</ion-label>
  <ion-input></ion-input>
</ion-item>

<ion-item>
  <ion-label>Input (placeholder)</ion-label>
  <ion-input placeholder="Placeholder"></ion-input>
</ion-item>

<ion-item>
  <ion-label>Checkbox</ion-label>
  <ion-checkbox slot="start"></ion-checkbox>
</ion-item>

<ion-item>
  <ion-label>Range</ion-label>
  <ion-range></ion-range>
</ion-item>

Properties

button

Descriptiontrueの場合、ボタンタグがレンダリングされ、アイテムはタップ可能になる。
Attributebutton
Typeboolean
Defaultfalse

color

DescriptionThe 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
Defaultundefined

detail

DescriptionIf true, a detail arrow will appear on the item. Defaults to false unless the mode is ios and an href or button property is present.
Attributedetail
Typeboolean ｜ undefined
Defaultundefined

detailIcon

Descriptiondetail が true に設定されているときに使用するアイコンです。
Attributedetail-icon
Typestring
Default'chevron-forward'

disabled

Descriptiontrueの場合、ユーザはそのアイテムと対話することができません。
Attributedisabled
Typeboolean
Defaultfalse

download

DescriptionThis 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
Defaultundefined

href

DescriptionContains 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
Defaultundefined

lines

Descriptionアイテムに表示される下枠の表示方法。
Attributelines
Type"full" ｜ "inset" ｜ "none" ｜ undefined
Defaultundefined

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" ｜ "md"
Defaultundefined

rel

DescriptionSpecifies the relationship of the target object to the link object. The value is a space-separated list of link types.
Attributerel
Typestring ｜ undefined
Defaultundefined

routerAnimation

DescriptionWhen using a router, it specifies the transition animation when navigating to another page using href.
Attributeundefined
Type((baseEl: any, opts?: any) => Animation) ｜ undefined
Defaultundefined

routerDirection

DescriptionWhen using a router, it specifies the transition direction when navigating to another page using href.
Attributerouter-direction
Type"back" ｜ "forward" ｜ "root"
Default'forward'

target

DescriptionSpecifies where to display the linked URL. Only applies when an href is provided. Special keywords: "_blank", "_self", "_parent", "_top".
Attributetarget
Typestring ｜ undefined
Defaultundefined

type

Descriptionボタンの種類。onclickまたはbutton`プロパティが存在する場合にのみ使用される。
Attributetype
Type"button" ｜ "reset" ｜ "submit"
Default'button'

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

NameDescription
detail-iconアイテムのシェブロンアイコンを表示します。detail="true"`のときのみ適用されます。
nativeすべての子要素をラップするネイティブHTMLのボタン、アンカー、またはdiv要素です。

CSS Custom Properties

NameDescription
--backgroundアイテムの背景
--background-activated押されたときのアイテムの背景。注意：これを設定すると、Material Designの波紋に干渉します。
--background-activated-opacity押されたときのアイテム背景の不透明度
--background-focusedタブキーでフォーカスしたときのアイテムの背景
--background-focused-opacityタブキーでフォーカスしたときのアイテムの背景の不透明度
--background-hoverホバー時のアイテムの背景
--background-hover-opacityホバー時のアイテムの背景の不透明度
--border-colorアイテムの縁取りの色
--border-radiusアイテムの境界線の半径
--border-styleアイテムの枠のスタイル
--border-widthアイテムの枠の幅
--colorアイテムのカラー
--color-activated押したときのアイテムの色
--color-focusedタブキーでフォーカスしたときのアイテムの色
--color-hoverホバー時のアイテムの色
--detail-icon-colorアイテム詳細アイコンの色
--detail-icon-font-sizeアイテム詳細アイコンのFont Size
--detail-icon-opacityアイテム詳細アイコンの不透明度
--highlight-color-focusedフォーカスされたときのアイテムのハイライトの色
--highlight-color-invalid無効時のアイテムのハイライトの色
--highlight-color-valid有効時のアイテム上のハイライトの色
--highlight-heightアイテムに表示されるハイライトの高さ
--inner-border-widthアイテム内枠の幅
--inner-box-shadowアイテム内側のボックスシャドウ
--inner-padding-bottomアイテム内側のBottom Padding
--inner-padding-end方向が左から右の場合はRight Padding、方向がアイテムの内側の右から左の場合はLeft Paddingとなります。
--inner-padding-start方向が左から右の場合はLeft Padding、方向が右から左の場合はRight Paddingがアイテム内側に入る
--inner-padding-topアイテム内側のTop Padding
--min-heightアイテムの最小高さ
--padding-bottomアイテムのBottom Padding
--padding-end方向が左から右の場合はRight Padding、方向が右から左の場合はLeft Paddingで項目を囲む
--padding-start方向が左から右の場合はLeft Padding、方向が右から左の場合はRight Paddingで項目を囲む
--padding-topアイテムのTop Padding
--ripple-colorアイテム波及効果の色
--transitionアイテムの変遷

Slots

NameDescription
``slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。
endコンテンツは、LTRではアイテムテキストの右側に、RTLでは左側に配置されます。
startコンテンツは、LTRではアイテムテキストの左側に、RTLでは右側に配置されます。
View Source