Version: v7

ion-item

アイテムは、テキスト、アイコン、アバター、画像、Input、その他のネイティブまたはカスタム要素を含むことができる要素です。一般的には、他のアイテムと一緒にlistに配置されます。アイテムは、スワイプ、削除、並び替え、編集などが可能です。

基本的な使い方

アイテムはテキストを左寄せにし、テキストがアイテムより幅が広い場合は省略記号を追加しています。この動作は、Ionic Framework が提供する CSS Utilities を使って変更することができます。例えば、以下の例では .ion-text-wrap を使っています。テキストを変換するためにアイテムに追加できる他のクラスについては、CSS Utilities Documentation を参照してください。

<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-label class="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>

クリック可能なItems

href か button プロパティが設定されている場合、itemは "clickable（クリック可能）" と見なされます。clickableなitemsには、インタラクティブに操作できることを示す視覚的な違いがいくつかあります。たとえば、clickableなitemは、md modeではrippleエフェクトを持ち、ios modeではハイライト表示され、ios modeでの detail arrow が表示されます。

<ion-item href="#">
  <ion-label>Anchor Item</ion-label>
</ion-item>

<ion-item href="#" disabled="true">
  <ion-label>Disabled Anchor Item</ion-label>
</ion-item>

<ion-item button>
  <ion-label>Button Item</ion-label>
</ion-item>

<ion-item button disabled="true">
  <ion-label>Disabled Button Item</ion-label>
</ion-item>

Detail Arrows

デフォルトでは、clickableなitems は、ios modeで右矢印アイコンを表示します。clickableな要素の右矢印アイコンを非表示にするには、 detail プロパティを false に設定します。自動的に表示されない項目に右矢印アイコンを表示するには、detailプロパティを true に設定します。

<ion-item detail="true">
  <ion-label>
    <h3>Text Item</h3>
    <p>Detail set to true - detail arrow displays on both modes</p>
  </ion-label>
</ion-item>

<ion-item button>
  <ion-label>
    <h3>Button Item</h3>
    <p>Default detail - detail arrow displays on iOS only</p>
  </ion-label>
</ion-item>

<ion-item button detail="true">
  <ion-label>
    <h3>Button Item</h3>
    <p>Detail set to true - detail arrow displays on both modes</p>
  </ion-label>
</ion-item>

<ion-item button detail="false">
  <ion-label>
    <h3>Button Item</h3>
    <p>Detail set to false - detail arrow hidden on both modes</p>
  </ion-label>
</ion-item>

<ion-item button detail="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>

Item Lines

アイテムはデフォルトで下部のボーダーを挿入して表示します。ボーダーは左側にパディングを持ち、 "start" スロットにスロットされたコンテンツの下に表示されることはありません。 lines プロパティを "full" または "none" に変更すると、それぞれ全幅のボーダーが表示され、ボーダーを表示しないようになります。

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

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

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

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

<ion-item>
  <ion-icon name="star" slot="start"></ion-icon>
  <ion-label>Default Item Lines</ion-label>
  <ion-icon name="information-circle" slot="end"></ion-icon>
</ion-item>

<ion-item lines="inset">
  <ion-icon name="star" slot="start"></ion-icon>
  <ion-label>Item Lines Inset</ion-label>
  <ion-icon name="information-circle" slot="end"></ion-icon>
</ion-item>

<ion-item lines="full">
  <ion-icon name="star" slot="start"></ion-icon>
  <ion-label>Item Lines Full</ion-label>
  <ion-icon name="information-circle" slot="end"></ion-icon>
</ion-item>

<ion-item lines="none">
  <ion-icon name="star" slot="start"></ion-icon>
  <ion-label>Item Lines None</ion-label>
  <ion-icon name="information-circle" slot="end"></ion-icon>
</ion-item>

Media Items

Avatars and Thumbnails can be slotted inside of an item. This is useful when making lists of images and text.

<ion-item>
  <ion-avatar slot="start">
    <img alt="Silhouette of a person's head" src="https://ionicframework.com/docs/img/demos/avatar.svg" />
  </ion-avatar>
  <ion-label>
    Avatar Item
  </ion-label>
</ion-item>

<ion-item>
  <ion-thumbnail slot="start">
    <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
  </ion-thumbnail>
  <ion-label>
    Thumbnail Item
  </ion-label>
</ion-item>

Buttons in Items

Buttonsは、アイテムの外側にあるときよりも、アイテムの内側にあるときの方が小さくスタイルされます。ボタンのサイズをアイテムの外側のボタンと同じにするには、size属性に"default"を設定します。

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

<ion-item>
  <ion-button slot="start">
    Start
    <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
  </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>

<ion-item>
  <ion-label>Button Sizes</ion-label>
  <ion-button slot="end" size="small">
    Small
  </ion-button>
  <ion-button slot="end" size="default">
    Default
  </ion-button>
  <ion-button slot="end" size="large">
    Large
  </ion-button>
</ion-item>

Icons in Items

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

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

<ion-item>
  <ion-label>
    Small Icon
  </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>
    Default Icon
  </ion-label>
</ion-item>

Item Inputs

<ion-item>
  <ion-label>Default Input</ion-label>
  <ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
  <ion-label position="fixed">Fixed Input</ion-label>
  <ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
  <ion-label position="stacked">Stacked Input</ion-label>
  <ion-input placeholder="Enter text"></ion-input>
</ion-item>

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

<ion-item fill="outline">
  <ion-label position="floating">Floating Input: Outline (MD only)</ion-label>
  <ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item fill="solid">
  <ion-label position="floating">Floating Input: Solid (MD only)</ion-label>
  <ion-input placeholder="Enter text"></ion-input>
</ion-item>

<ion-item>
  <ion-label>Select</ion-label>
  <ion-select placeholder="Make a Selection">
    <ion-select-option value="">No Game Console</ion-select-option>
    <ion-select-option value="nes">NES</ion-select-option>
    <ion-select-option value="n64">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>Checkbox</ion-label>
  <ion-checkbox slot="end"></ion-checkbox>
</ion-item>

<ion-item>
  <ion-label position="stacked">Range</ion-label>
  <ion-range></ion-range>
</ion-item>

テーマ

Colors

<ion-item>
  <ion-label>Default Item</ion-label>
</ion-item>
<ion-item color="primary">
  <ion-label>Primary Item</ion-label>
</ion-item>
<ion-item color="secondary">
  <ion-label>Secondary Item</ion-label>
</ion-item>
<ion-item color="tertiary">
  <ion-label>Tertiary Item</ion-label>
</ion-item>
<ion-item color="success">
  <ion-label>Success Item</ion-label>
</ion-item>
<ion-item color="warning">
  <ion-label>Warning Item</ion-label>
</ion-item>
<ion-item color="danger">
  <ion-label>Danger Item</ion-label>
</ion-item>
<ion-item color="light">
  <ion-label>Light Item</ion-label>
</ion-item>
<ion-item color="medium">
  <ion-label>Medium Item</ion-label>
</ion-item>
<ion-item color="dark">
  <ion-label>Dark Item</ion-label>
</ion-item>

CSS Shadow Parts

src/app/example.component.css
src/app/example.component.html

ion-item::part(native) {
  background: #19422d;
  color: #fff;

  border-color: #fff;
  border-style: dashed;
  border-width: 2px;

  border-radius: 20px;
}

ion-item::part(detail-icon) {
  color: white;
  opacity: 1;
  font-size: 20px;
}

<ion-item button detail lines="full">
  <ion-label>Custom Item</ion-label>
</ion-item>

<ion-item button detail lines="full">
  <ion-label>Custom Item</ion-label>
</ion-item>

<ion-item button detail lines="full">
  <ion-label>Custom Item</ion-label>
</ion-item>

CSSカスタムプロパティ

src/app/example.component.css
src/app/example.component.html

ion-item {
  --background: #19422d;
  --color: #fff;

  --border-color: #fff;
  --border-style: dashed;
  --border-width: 2px;

  --border-radius: 20px;

  --ripple-color: purple;

  --detail-icon-color: white;
  --detail-icon-opacity: 1;
  --detail-icon-font-size: 20px;
}

<ion-item button detail lines="full">
  <ion-label>Custom Item</ion-label>
</ion-item>

<ion-item button detail lines="full">
  <ion-label>Custom Item</ion-label>
</ion-item>

<ion-item button detail lines="full">
  <ion-label>Custom Item</ion-label>
</ion-item>

Inputハイライト

input を含むアイテムは、フォーカスされたとき、有効なとき、無効なときに、Inputの下のボーダーを異なる色でハイライトします。デフォルトでは、mdアイテムは高さが 2px に設定されたハイライトを持ち、iosはハイライトを持ちません（技術的に高さは 0 に設定されています）。高さは --highlight-height CSS プロパティを使って変更することができます。ハイライトをオフにするには、この変数を 0 に設定します。

ハイライトの色はアイテムの状態に応じて変化しますが、デフォルトではすべての状態でIonicカラーが使用されます。フォーカスされている場合、Inputのハイライトは primary カラーを使用します。Inputが有効な場合は success カラーが使用され、無効なInputは danger カラーが使用されます。これは提供されているCSSプロパティを使ってカスタマイズすることができます。

src/app/example.component.css
src/app/example.component.html

ion-item {
  --highlight-height: 2px;
  --highlight-color-focused: #43e7f3;
  --highlight-color-valid: #6f58d8;
  --highlight-color-invalid: #ff46be;
}

<ion-item lines="full" class="item-has-focus ion-touched">
  <ion-label position="stacked">Custom Input Highlight: Focused</ion-label>
  <ion-input></ion-input>
</ion-item>

<ion-item lines="full" class="item-has-focus ion-touched ion-valid">
  <ion-label position="stacked">Custom Input Highlight: Focused & Valid</ion-label>
  <ion-input></ion-input>
</ion-item>

<ion-item lines="full" class="item-has-focus ion-touched ion-invalid">
  <ion-label position="stacked">Custom Input Highlight: Focused & Invalid</ion-label>
  <ion-input></ion-input>
</ion-item>

プロパティ

button

Description	`true`の場合、ボタンタグがレンダリングされ、アイテムはタップ可能になる。
Attribute	`button`
Type	`boolean`
Default	`false`

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.
Attribute	`color`
Type	`"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string & Record<never, never> ｜ undefined`
Default	`undefined`

counter (deprecated)

Description	`true`の場合、文字カウンタが使用された文字の比率と総文字数制限を表示します。内側の `ion-input` または `ion-textarea` に `maxlength` プロパティが設定されている場合にのみ適用されます。 Deprecated Use the `counter` property on `ion-input` or `ion-textarea` instead.
Attribute	`counter`
Type	`boolean`
Default	`false`

counterFormatter (deprecated)

Description	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.
Attribute	`undefined`
Type	`((inputLength: number, maxLength: number) => string) ｜ undefined`
Default	`undefined`

detail

Description	If `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.
Attribute	`detail`
Type	`boolean ｜ undefined`
Default	`undefined`

detailIcon

Description	`detail` が `true` に設定されているときに使用するアイコンです。
Attribute	`detail-icon`
Type	`string`
Default	`chevronForward`

disabled

Description	`true`の場合、ユーザはそのアイテムと対話することができません。
Attribute	`disabled`
Type	`boolean`
Default	`false`

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).
Attribute	`download`
Type	`string ｜ undefined`
Default	`undefined`

fill

Description	The fill for the item. If `"solid"` the item will have a background. If `"outline"` the item will be transparent with a border. Only available in `md` mode.
Attribute	`fill`
Type	`"outline" ｜ "solid" ｜ undefined`
Default	`undefined`

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.
Attribute	`href`
Type	`string ｜ undefined`
Default	`undefined`

lines

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

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
Attribute	`mode`
Type	`"ios" ｜ "md"`
Default	`undefined`

rel

Description	Specifies the relationship of the target object to the link object. The value is a space-separated list of link types.
Attribute	`rel`
Type	`string ｜ undefined`
Default	`undefined`

routerAnimation

Description	When using a router, it specifies the transition animation when navigating to another page using `href`.
Attribute	`undefined`
Type	`((baseEl: any, opts?: any) => Animation) ｜ undefined`
Default	`undefined`

routerDirection

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

shape

Description	The shape of the item. If "round" it will have increased border radius.
Attribute	`shape`
Type	`"round" ｜ undefined`
Default	`undefined`

target

Description	Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
Attribute	`target`
Type	`string ｜ undefined`
Default	`undefined`

type

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

イベント

No events available for this component.

メソッド

No public methods available for this component.

CSS Shadow Parts

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

CSSカスタムプロパティ

Name	Description
`--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

Name	Description
``	slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。
`end`	コンテンツは、LTRではアイテムテキストの右側に、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`	コンテンツは、LTRではアイテムテキストの左側に、RTLでは右側に配置されます。

基本的な使い方​

クリック可能なItems​

Detail Arrows​

Item Lines​

Media Items​

Buttons in Items​

Icons in Items​

Item Inputs​

テーマ​

Colors​

CSS Shadow Parts​

CSSカスタムプロパティ​

Inputハイライト​

プロパティ​

button​

color​

counter (deprecated)​

counterFormatter (deprecated)​

detail​

detailIcon​

disabled​

download​

fill​

href​

lines​

mode​

rel​

routerAnimation​

routerDirection​

shape​

target​

type​

イベント​

メソッド​

CSS Shadow Parts​

CSSカスタムプロパティ​

Slots​

Contents

基本的な使い方

クリック可能なItems

Detail Arrows

Item Lines

Media Items

Buttons in Items

Icons in Items

Item Inputs

テーマ

Colors

CSS Shadow Parts

CSSカスタムプロパティ

Inputハイライト

プロパティ

button

color

counter (deprecated)

counterFormatter (deprecated)

detail

detailIcon

disabled

download

fill

href

lines

mode

rel

routerAnimation

routerDirection

shape

target

type

イベント

メソッド

CSS Shadow Parts

CSSカスタムプロパティ

Slots