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-input label="Default Input" placeholder="Enter text"></ion-input>
</ion-item>

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

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

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

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

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

<ion-item>
  <ion-select label="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-toggle> Toggle </ion-toggle>
</ion-item>

<ion-item>
  <ion-checkbox> Checkbox </ion-checkbox>
</ion-item>

<ion-item>
  <ion-range label-placement="start">
    <div slot="label">Range</div>
  </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	アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は 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	カウンターのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、カウンターのテキストは"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	`true`の場合、アイテムに詳細矢印が表示されます。デフォルトは `false` で、`mode` が `ios` で `href` または `button` プロパティが存在する場合のみです。
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	この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。
Attribute	`download`
Type	`string ｜ undefined`
Default	`undefined`

fill

Description	アイテムの塗りつぶし。もし `"solid"` ならば、アイテムは背景を持つようになります。もし `"outline"` ならば、アイテムはボーダー付きの透明なものになります。md`モードでのみ使用可能です。
Attribute	`fill`
Type	`"outline" ｜ "solid" ｜ undefined`
Default	`undefined`

href

Description	ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。
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	ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られたリンクタイプのリストです。
Attribute	`rel`
Type	`string ｜ undefined`
Default	`undefined`

routerAnimation

Description	ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。
Attribute	`undefined`
Type	`((baseEl: any, opts?: any) => Animation) ｜ undefined`
Default	`undefined`

routerDirection

Description	ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。
Attribute	`router-direction`
Type	`"back" ｜ "forward" ｜ "root"`
Default	`'forward'`

shape

Description	アイテムの形状を指定します。円形」の場合、境界線の半径が大きくなります。
Attribute	`shape`
Type	`"round" ｜ undefined`
Default	`undefined`

target

Description	リンク先のURLを表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_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`	コンテンツはアイテムの下に配置され、エラーが検出されたときに表示されます。DEPRECATED 代わりに ion-input または ion-textarea の "errorText" プロパティを使用してください。
`helper`	コンテンツはアイテムの下に配置され、エラーが検出されない場合に表示されます。DEPRECATED 代わりに ion-input または ion-textarea の "helperText" プロパティを使用してください。
`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