ion-item
コンテンツ
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. |