Version: v6

ion-item

コンテンツ

クリック可能なItems
Detail Arrows
Itemの配置
Input Highlight
使い方
プロパティ
イベント
メソッド
CSS Shadow Parts
CSSカスタムプロパティ
Slots
button

Itemsは、text, icons, avatars, images, inputsや、その他のnative elements, custom elementsを含むことができる要素です。通常は、他のitemsと共にlistに配置されます。Itemsは、swiped, deleted, reordered, editedなどが可能です。

クリック可能なItems

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

Detail Arrows

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

Itemの配置

Itemは、コンテンツを配置するために slots を使用します。このロジックにより、要素のスタイル設定や配置を気にすることなく、単純でわかりやすいマークアップを使用して複雑なアイテムを作成できます。

次の表に、itemのslotsの詳細と、item内で要素がどこに配置されるかを示します:

Slot	Description
`start`	LTRではほかのすべてのコンテンツの左側に配置され、RTLでは `右側` に配置されます
`end`	LTRではほかのすべてのコンテンツの右側に配置され、RTLでは `左側` に配置されます
none	Placed inside of the input wrapper.

文字揃え

Itemsはテキストを左揃えにし、テキストがItemsよりも広い場合は省略記号を追加します。テキストを変換するために <ion-item> に追加できる属性については、CSS Utilities Documentation を参照してください。

Input Highlight

ハイライトのheight

Inputを含むItemは、フォーカスされたとき、有効なとき、無効なときに、異なる色で入力の下枠を強調表示します。デフォルトでは、md itemsは height 2px でハイライトされ、iosはハイライトされません(技術的にはheight 0に設定される)。heightは --highlight-height CSSプロパティーを使用して変更できます。強調表示をオフにするには、この変数を 0 に設定します。CSSプロパティーの設定について詳しくは、theming documentationを参照してください。

ハイライトカラー

ハイライトカラーはItemsの状態に基づいて変化しますが、デフォルトではすべてのstatesでIonicカラーが使用されます。フォーカスすると、Inputハイライトに primary colorが使用されます。Inputが有効な場合、success colorが使用され、無効なInputはdanger colorが使用されます。ハイライトカラー変数については、後述の CSS Custom Properties を参照してください。

カウンターフォーマッタ

counter を使用する場合、デフォルトの動作は itemLength / maxLength として値を表示します。この動作は、 counterFormatter プロパティにフォーマッタ関数を渡すことで、カスタマイズすることができます。例については、使い方のセクションを参照してください。

使い方

Angular
Javascript
React
Stencil
Vue

<!-- 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>

アイテム上のアイコン

<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 fill="solid">
  <ion-label position="floating">Input (Fill: Solid)</ion-label>
  <ion-input></ion-input>
</ion-item>

<ion-item fill="outline">
  <ion-label position="floating">Input (Fill: Outline)</ion-label>
  <ion-input></ion-input>
</ion-item>

<ion-item>
  <ion-label>Helper and Error Text</ion-label>
  <ion-input></ion-input>
  <ion-note slot="helper">Helper Text</ion-note>
  <ion-note slot="error">Error Text</ion-note>
</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>

Item Counter

<ion-item [counter]="true">
  <ion-label>Counter</ion-label>
  <ion-input maxlength="20"></ion-input>
</ion-item>

Item Counter Formatter

<ion-item [counter]="true" [counterFormatter]="counterFormatter">
  <ion-label>Counter</ion-label>
  <ion-input maxlength="20"></ion-input>
</ion-item>


import { Component } from '@angular/core';

@Component({…})
export class MyComponent {
  
  counterFormatter(inputLength: number, maxLength: number) {
    return `${maxLength - inputLength} characters remaining`;
  }
}

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

<!-- Item as a Button -->
<ion-item button onclick="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 onclick="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 onclick="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 onclick="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>

アイテム上のアイコン

<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 fill="solid">
  <ion-label position="floating">Input (Fill: Solid)</ion-label>
  <ion-input></ion-input>
</ion-item>

<ion-item fill="outline">
  <ion-label position="floating">Input (Fill: Outline)</ion-label>
  <ion-input></ion-input>
</ion-item>

<ion-item>
  <ion-label>Helper and Error Text</ion-label>
  <ion-input></ion-input>
  <ion-note slot="helper">Helper Text</ion-note>
  <ion-note slot="error">Error Text</ion-note>
</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>

Item Counter

<ion-item counter="true">
  <ion-label>Counter</ion-label>
  <ion-input maxlength="20"></ion-input>
</ion-item>

Item Counter Formatter

<ion-item counter="true" id="custom-item">
  <ion-label>Counter</ion-label>
  <ion-input maxlength="20"></ion-input>
</ion-item>

<script>
  const customItem = document.querySelector('#custom-item');
  customItem.counterFormatter = (inputLength, maxLength) => `${maxLength - inputLength} characters remaining`; 
</script>

import React from 'react';
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonItem, IonLabel, IonList, IonText, IonAvatar, IonThumbnail, IonButton, IonIcon, IonDatetime, IonSelect, IonSelectOption, IonToggle, IonInput, IonCheckbox, IonRange, IonNote } from '@ionic/react';
import { closeCircle, home, star, navigate, informationCircle, checkmarkCircle, shuffle } from 'ionicons/icons';

export const ItemExamples: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>ItemExamples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        {/*-- Default Item --*/}
        <IonItem>
          <IonLabel>
            Item
          </IonLabel>
        </IonItem>

        {/*-- Item as a Button --*/}
        <IonItem button onClick={() => { }}>
          <IonLabel>
            Button Item
          </IonLabel>
        </IonItem>

        {/*-- Item as an Anchor --*/}
        <IonItem href="https://www.ionicframework.com">
          <IonLabel>
            Anchor Item
          </IonLabel>
        </IonItem>

        <IonItem color="secondary">
          <IonLabel>
            Secondary Color Item
          </IonLabel>
        </IonItem>

        {/*-- Detail Arrows --*/}
        <IonItem detail>
          <IonLabel>
            Standard Item with Detail Arrow
          </IonLabel>
        </IonItem>

        <IonItem button onClick={() => { }} detail>
          <IonLabel>
            Button Item with Detail Arrow
          </IonLabel>
        </IonItem>

        <IonItem detail={false} href="https://www.ionicframework.com">
          <IonLabel>
            Anchor Item with no Detail Arrow
          </IonLabel>
        </IonItem>

        <IonList>
          <IonItem>
            <IonLabel>
              Item
            </IonLabel>
          </IonItem>

          <IonItem lines="none">
            <IonLabel>
              No Lines Item
            </IonLabel>
          </IonItem>

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

          <IonItem>
            <IonLabel className="ion-text-wrap">
              <IonText color="primary">
                <h3>H3 Primary Title</h3>
              </IonText>
              <p>Paragraph line 1</p>
              <IonText color="secondary">
                <p>Paragraph line 2 secondary</p>
              </IonText>
            </IonLabel>
          </IonItem>

          <IonItem lines="full">
            <IonLabel>
              Item with Full Lines
            </IonLabel>
          </IonItem>
        </IonList>

        {/*-- Item Inset Lines --*/}
        <IonItem lines="inset">
          <IonLabel>Item Lines Inset</IonLabel>
        </IonItem>

        {/*-- Item Full Lines --*/}
        <IonItem lines="full">
          <IonLabel>Item Lines Full</IonLabel>
        </IonItem>

        {/*-- Item None Lines --*/}
        <IonItem lines="none">
          <IonLabel>Item Lines None</IonLabel>
        </IonItem>

        {/*-- List Full Lines --*/}
        <IonList lines="full">
          <IonItem>
            <IonLabel>Full Lines Item 1</IonLabel>
          </IonItem>

          <IonItem>
            <IonLabel>Full Lines Item 2</IonLabel>
          </IonItem>
        </IonList>

        {/*-- List Inset Lines --*/}
        <IonList lines="inset">
          <IonItem>
            <IonLabel>Inset Lines Item 1</IonLabel>
          </IonItem>

          <IonItem>
            <IonLabel>Inset Lines Item 2</IonLabel>
          </IonItem>
        </IonList>

        {/*-- List No Lines --*/}
        <IonList lines="none">
          <IonItem>
            <IonLabel>No lines Item 1</IonLabel>
          </IonItem>

          <IonItem>
            <IonLabel>No lines Item 2</IonLabel>
          </IonItem>

          <IonItem>
            <IonLabel>No lines Item 3</IonLabel>
          </IonItem>
        </IonList>

        <IonItem button onClick={() => { }}>
          <IonAvatar slot="start">
            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
          </IonAvatar>
          <IonLabel>
            Avatar Start, Button Item
          </IonLabel>
        </IonItem>

        <IonItem href="#">
          <IonLabel>
            Thumbnail End, Anchor Item
          </IonLabel>
          <IonThumbnail slot="end">
            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
          </IonThumbnail>
        </IonItem>

        <IonItem>
          <IonThumbnail slot="start">
            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
          </IonThumbnail>
          <IonLabel>
            <h2>H2 Title Text</h2>
            <p>Button on right</p>
          </IonLabel>
          <IonButton fill="outline" slot="end">View</IonButton>
        </IonItem>

        <IonItem button onClick={() => { }}>
          <IonThumbnail slot="start">
            <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==" />
          </IonThumbnail>
          <IonLabel>
            <h3>H3 Title Text</h3>
            <p>Icon on right</p>
          </IonLabel>
          <IonIcon icon={closeCircle} slot="end" />
        </IonItem>

        {/*-- Buttons in Items --*/}
        <IonItem>
          <IonButton slot="start">
            Start
          </IonButton>
          <IonLabel>Button Start/End</IonLabel>
          <IonButton slot="end">
            End
          </IonButton>
        </IonItem>

        <IonItem>
          <IonButton slot="start">
            Start Icon
            <IonIcon icon={home} slot="end" />
          </IonButton>
          <IonLabel>Buttons with Icons</IonLabel>
          <IonButton slot="end">
            <IonIcon icon={star} slot="end" />
            End Icon
          </IonButton>
        </IonItem>

        <IonItem>
          <IonButton slot="start">
            <IonIcon slot="icon-only" icon={navigate} />
          </IonButton>
          <IonLabel>Icon only Buttons</IonLabel>
          <IonButton slot="end">
            <IonIcon slot="icon-only" icon={star} />
          </IonButton>
        </IonItem>

        <IonItem>
          <IonLabel>
            Icon End
          </IonLabel>
          <IonIcon icon={informationCircle} slot="end" />
        </IonItem>

        <IonItem>
          <IonLabel>
            Large Icon End
          </IonLabel>
          <IonIcon icon={informationCircle} size="large" slot="end" />
        </IonItem>

        <IonItem>
          <IonLabel>
            Small Icon End
          </IonLabel>
          <IonIcon icon={informationCircle} size="small" slot="end" />
        </IonItem>

        <IonItem>
          <IonIcon icon={star} slot="start" />
          <IonLabel>
            Icon Start
          </IonLabel>
        </IonItem>

        <IonItem>
          <IonLabel>
            Two Icons End
          </IonLabel>
          <IonIcon icon={checkmarkCircle} slot="end" />
          <IonIcon icon={shuffle} slot="end" />
        </IonItem>

        <IonItem>
          <IonLabel position="floating">Datetime</IonLabel>
          <IonDatetime></IonDatetime>
        </IonItem>

        <IonItem>
          <IonLabel position="floating">Select</IonLabel>
          <IonSelect>
            <IonSelectOption value="">No Game Console</IonSelectOption>
            <IonSelectOption value="nes">NES</IonSelectOption>
            <IonSelectOption value="n64">Nintendo64</IonSelectOption>
            <IonSelectOption value="ps">PlayStation</IonSelectOption>
            <IonSelectOption value="genesis">Sega Genesis</IonSelectOption>
            <IonSelectOption value="saturn">Sega Saturn</IonSelectOption>
            <IonSelectOption value="snes">SNES</IonSelectOption>
          </IonSelect>
        </IonItem>

        <IonItem>
          <IonLabel>Toggle</IonLabel>
          <IonToggle slot="end"></IonToggle>
        </IonItem>

        <IonItem>
          <IonLabel position="floating">Floating Input</IonLabel>
          <IonInput></IonInput>
        </IonItem>

        <IonItem>
          <IonLabel>Input (placeholder)</IonLabel>
          <IonInput placeholder="Placeholder"></IonInput>
        </IonItem>

        <IonItem fill="solid">
          <IonLabel position="stacked">Input (Fill: Solid)</IonLabel>
          <IonInput></IonInput>
        </IonItem>

        <IonItem fill="outline">
          <IonLabel position="floating">Input (Fill: Outline)</IonLabel>
          <IonInput></IonInput>
        </IonItem>

        <IonItem>
          <IonLabel>Helper and Error Text</IonLabel>
          <IonInput></IonInput>
          <IonNote slot="helper">Helper Text</IonNote>
          <IonNote slot="error">Error Text</IonNote>
        </IonItem>

        <IonItem>
          <IonLabel>Checkbox</IonLabel>
          <IonCheckbox slot="start" />
        </IonItem>

        <IonItem>
          <IonLabel>Range</IonLabel>
          <IonRange></IonRange>
        </IonItem>

        {/*-- Item Counter --*/}
        <IonItem counter={true}>
          <IonLabel>Counter</IonLabel>
          <IonInput maxlength="20"></IonInput>
        </IonItem>

        {/*-- Item Counter Formatter --*/}
        <IonItem counter={true} counterFormatter={(inputLength, maxLength) => `${maxLength - inputLength} characters remaining`}>
          <IonLabel>Counter</IonLabel>
          <IonInput maxlength="20"></IonInput>
        </IonItem>
      </IonContent>
    </IonPage>
  );
};

import { Component, h } from '@stencil/core';

@Component({
  tag: 'item-example',
  styleUrl: 'item-example.css'
})
export class ItemExample {
  buttonClick() {
    console.log('Clicked button');
  }

  render() {
    return [
      // Default Item
      <ion-item>
        <ion-label>
          Item
        </ion-label>
      </ion-item>,

      // Item as a Button
      <ion-item button onClick={() => this.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

import { Component, h } from '@stencil/core';

@Component({
  tag: 'item-example',
  styleUrl: 'item-example.css'
})
export class ItemExample {
  buttonClick() {
    console.log('Clicked button');
  }

  render() {
    return [
      <ion-item detail>
        <ion-label>
          Standard Item with Detail Arrow
        </ion-label>
      </ion-item>,

      <ion-item button onClick={() => this.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

import { Component, h } from '@stencil/core';

@Component({
  tag: 'item-example',
  styleUrl: 'item-example.css'
})
export class ItemExample {
  render() {
    return [
      <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

import { Component, h } from '@stencil/core';

@Component({
  tag: 'item-example',
  styleUrl: 'item-example.css'
})
export class ItemExample {
  render() {
    return [
      // 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

import { Component, h } from '@stencil/core';

@Component({
  tag: 'item-example',
  styleUrl: 'item-example.css'
})
export class ItemExample {
  testClick() {
    console.log('Test click');
  }

  render() {
    return [
      <ion-item button onClick={() => this.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 onClick={() => this.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

import { Component, h } from '@stencil/core';

@Component({
  tag: 'item-example',
  styleUrl: 'item-example.css'
})
export class ItemExample {
  render() {
    return [
      <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>
    ];
  }
}

アイテム上のアイコン

import { Component, h } from '@stencil/core';

@Component({
  tag: 'item-example',
  styleUrl: 'item-example.css'
})
export class ItemExample {
  render() {
    return [
      <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

import { Component, h } from '@stencil/core';

@Component({
  tag: 'item-example',
  styleUrl: 'item-example.css'
})
export class ItemExample {
  render() {
    return [
      <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 fill="solid">
        <ion-label position="floating">Input (Fill: Solid)</ion-label>
        <ion-input></ion-input>
      </ion-item>,

      <ion-item fill="outline">
        <ion-label position="floating">Input (Fill: Outline)</ion-label>
        <ion-input></ion-input>
      </ion-item>,

      <ion-item>
        <ion-label>Helper and Error Text</ion-label>
        <ion-input></ion-input>
        <ion-note slot="helper">Helper Text</ion-note>
        <ion-note slot="error">Error Text</ion-note>
      </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>
    ];
  }
}

Item Counter

import { Component, h } from '@stencil/core';

@Component({
  tag: 'item-example',
  styleUrl: 'item-example.css'
})
export class ItemExample {
  render() {
    return [
      <ion-item counter={true}>
        <ion-label>Counter</ion-label>
        <ion-input maxlength="20"></ion-input>
      </ion-item>
    ];
  }
}

Item Counter Formatter

import { Component, h } from '@stencil/core';

@Component({
  tag: 'item-example',
  styleUrl: 'item-example.css'
})
export class ItemExample {
  render() {
    return [
      <ion-item counter="true" counterFormatter={(inputLength, maxLength) => `${maxLength - inputLength} characters remaining`}>
        <ion-label>Counter</ion-label>
        <ion-input maxlength="20"></ion-input>
      </ion-item>
    ];
  }
}

<template>
  <!-- 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>
</template>

Detail Arrows

<template>
  <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>
</template>

List Items

<template>
  <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>
</template>

Item Lines

<template>
  <!-- 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>
</template>

Media Items

<template>
  <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 :icon="closeCircle" slot="end"></ion-icon>
  </ion-item>
</template>

Buttons in Items

<template>
  <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 :icon="home" slot="end"></ion-icon>
    </ion-button>
    <ion-label>Buttons with Icons</ion-label>
    <ion-button slot="end">
      <ion-icon :icon="star" slot="end"></ion-icon>
      End Icon
    </ion-button>
  </ion-item>

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

アイテム上のアイコン

<template>
  <ion-item>
    <ion-label>
      Icon End
    </ion-label>
    <ion-icon :icon="informationCircle" slot="end"></ion-icon>
  </ion-item>

  <ion-item>
    <ion-label>
      Large Icon End
    </ion-label>
    <ion-icon :icon="informationCircle" size="large" slot="end"></ion-icon>
  </ion-item>

  <ion-item>
    <ion-label>
      Small Icon End
    </ion-label>
    <ion-icon :icon="informationCircle" size="small" slot="end"></ion-icon>
  </ion-item>

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

  <ion-item>
    <ion-label>
      Two Icons End
    </ion-label>
    <ion-icon :icon="checkmarkCircle" slot="end"></ion-icon>
    <ion-icon :icon="shuffle" slot="end"></ion-icon>
  </ion-item>
</template>

Item Inputs

<template>
  <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 fill="solid">
    <ion-label position="floating">Input (Fill: Solid)</ion-label>
    <ion-input></ion-input>
  </ion-item>

  <ion-item fill="outline">
    <ion-label position="floating">Input (Fill: Outline)</ion-label>
    <ion-input></ion-input>
  </ion-item>

  <ion-item>
    <ion-label>Helper and Error Text</ion-label>
    <ion-input></ion-input>
    <ion-note slot="helper">Helper Text</ion-note>
    <ion-note slot="error">Error Text</ion-note>
  </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>
</template>

<script>
import { 
  IonAvatar,
  IonButton,
  IonCheckbox, 
  IonDatetime,
  IonNote,
  IonIcon,
  IonInput, 
  IonItem, 
  IonLabel, 
  IonRange,
  IonSelect, 
  IonSelectOption, 
  IonText,
  IonThumbnail,
  IonToggle
} from '@ionic/vue';
import { 
  checkmarkCircle, 
  closeCircle, 
  home, 
  informationCircle, 
  navigate, 
  shuffle, 
  star
} from 'ionicons/icons';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { 
    IonAvatar,
    IonButton,
    IonCheckbox, 
    IonDatetime,
    IonNote,
    IonIcon,
    IonInput, 
    IonItem, 
    IonLabel, 
    IonRange,
    IonSelect, 
    IonSelectOption, 
    IonText,
    IonThumbnail,
    IonToggle
  },
  setup() {
    return {
      checkmarkCircle, 
      closeCircle, 
      home, 
      informationCircle, 
      navigate, 
      shuffle, 
      star
    }
  }
});
</script>

Item Counter

<template>
  <ion-item :counter="true">
    <ion-label>Counter</ion-label>
    <ion-input maxlength="20"></ion-input>
  </ion-item>
</template>

Item Counter Formatter

<template>
  <ion-item :counter="true" :counter-formatter="counterFormatter">
    <ion-label>Counter</ion-label>
    <ion-input maxlength="20"></ion-input>
  </ion-item>
</template>
<script lang="ts">
import { IonInput, IonItem, IonLabel } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: {  IonItem, IonLabel, IonInput },
  setup() {
    const counterFormatter = (inputLength: number, maxLength: number) => `${maxLength - inputLength} characters remaining`;
    
    return { counterFormatter };
  }
});
</script>

プロパティ

button

Description	If `true`, a button tag will be rendered and the item will be tappable.
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

Description	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`.
Attribute	`counter`
Type	`boolean`
Default	`false`

counterFormatter

Description	A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
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	The icon to use when `detail` is set to `true`.
Attribute	`detail-icon`
Type	`string`
Default	`chevronForward`

disabled

Description	If `true`, the user cannot interact with the item.
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	How the bottom border should be displayed on the item.
Attribute	`lines`
Type	`"full" ｜ "inset" ｜ "none" ｜ undefined`
Default	`undefined`

mode

Description	The mode determines which platform styles to use.
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	The type of the button. Only used when an `onclick` or `button` property is present.
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`	The chevron icon for the item. Only applies when `detail="true"`.
`native`	The native HTML button, anchor or div element that wraps all child elements.

CSSカスタムプロパティ

Name	Description
`--background`	Background of the item
`--background-activated`	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
`--highlight-color-invalid`	The color of the highlight on the item when invalid
`--highlight-color-valid`	The color of the highlight on the item when valid
`--highlight-height`	The height of the highlight on the item
`--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
`--padding-top`	Top padding of the item
`--ripple-color`	Color of the item ripple effect
`--transition`	Transition of the item

Slots

Name	Description
``	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.
`helper`	Content is placed under the item and displayed when no error is detected.
`start`	Content is placed to the left of the item text in LTR, and to the right in RTL.

コンテンツ

クリック可能なItems​

Detail Arrows​

Itemの配置​

文字揃え​

Input Highlight​

ハイライトのheight​

ハイライトカラー​

カウンターフォーマッタ​

使い方​

Detail Arrows​

List Items​

Item Lines​

Media Items​

Buttons in Items​

アイテム上のアイコン​

Item Inputs​

Item Counter​

Item Counter Formatter​

Detail Arrows​

List Items​

Item Lines​

Media Items​

Buttons in Items​

アイテム上のアイコン​

Item Inputs​

Item Counter​

Item Counter Formatter​

Detail Arrows​

List Items​

Item Lines​

Media Items​

Buttons in Items​

アイテム上のアイコン​

Item Inputs​

Item Counter​

Item Counter Formatter​

Detail Arrows​

List Items​

Item Lines​

Media Items​

Buttons in Items​

アイテム上のアイコン​

Item Inputs​

Item Counter​

Item Counter Formatter​

プロパティ​

button​

color​

counter​

counterFormatter​

detail​

detailIcon​

disabled​

download​

fill​

href​

lines​

mode​

rel​

routerAnimation​

routerDirection​

shape​

target​

type​

イベント​

メソッド​

CSS Shadow Parts​

CSSカスタムプロパティ​

Slots​

クリック可能なItems

Detail Arrows

Itemの配置

文字揃え

Input Highlight

ハイライトのheight

ハイライトカラー

カウンターフォーマッタ

使い方

Detail Arrows

List Items

Item Lines

Media Items

Buttons in Items

アイテム上のアイコン

Item Inputs

Item Counter

Item Counter Formatter

Detail Arrows

List Items

Item Lines

Media Items

Buttons in Items

アイテム上のアイコン

Item Inputs

Item Counter

Item Counter Formatter

Detail Arrows

List Items

Item Lines

Media Items

Buttons in Items

アイテム上のアイコン

Item Inputs

Item Counter

Item Counter Formatter

Detail Arrows

List Items

Item Lines

Media Items

Buttons in Items

アイテム上のアイコン

Item Inputs

Item Counter

Item Counter Formatter

プロパティ

button

color

counter

counterFormatter

detail

detailIcon

disabled

download

fill

href

lines

mode

rel

routerAnimation

routerDirection

shape

target

type

イベント

メソッド

CSS Shadow Parts

CSSカスタムプロパティ

Slots