Skip to main content
Version: v7

ion-item

shadow

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

基本的な使い方

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

クリック可能なItems

hrefbutton プロパティが設定されている場合、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 Lines

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

Media Items

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

Buttons in Items

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

Icons in Items

Item Inputs

テーマ

Colors

CSS Shadow Parts

CSSカスタムプロパティ

Inputハイライト

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

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

プロパティ

button

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

color

Descriptionアプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です.色に関する詳しい情報は theming を参照してください。
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Defaultundefined

counter (deprecated)

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

counterFormatter (deprecated)

Descriptionカウンターのテキストをフォーマットするために使用されるコールバックです。デフォルトでは、カウンターのテキストは"itemLength / maxLength"に設定されています。 Deprecated Use the counterFormatter property on ion-input or ion-textarea instead.
Attributeundefined
Type((inputLength: number, maxLength: number) => string) | undefined
Defaultundefined

detail

Descriptiontrueの場合、アイテムに詳細矢印が表示されます。デフォルトは false で、modeioshref または button プロパティが存在する場合のみです。
Attributedetail
Typeboolean | undefined
Defaultundefined

detailIcon

Descriptiondetailtrue に設定されているときに使用するアイコンです。
Attributedetail-icon
Typestring
DefaultchevronForward

disabled

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

download

Descriptionこの属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます(ユーザーはファイル名を変更することができます)。
Attributedownload
Typestring | undefined
Defaultundefined

fill

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

href

Descriptionハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。
Attributehref
Typestring | undefined
Defaultundefined

lines

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

mode

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

rel

Descriptionターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られたリンクタイプのリストです。
Attributerel
Typestring | undefined
Defaultundefined

routerAnimation

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

routerDirection

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

shape

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

target

Descriptionリンク先のURLを表示する場所を指定します。hrefを指定した場合のみ適用される。特別なキーワードがあります。_blank", "_self", "_parent", "_top".
Attributetarget
Typestring | undefined
Defaultundefined

type

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

イベント

No events available for this component.

メソッド

No public methods available for this component.

CSS Shadow Parts

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

CSSカスタムプロパティ

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

Slots

NameDescription
``slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。
endコンテンツは、LTRではアイテムテキストの右側に、RTLでは左側に配置されます。
errorコンテンツはアイテムの下に配置され、エラーが検出されたときに表示されます。DEPRECATED 代わりに ion-input または ion-textarea の "errorText" プロパティを使用してください。
helperコンテンツはアイテムの下に配置され、エラーが検出されない場合に表示されます。DEPRECATED 代わりに ion-input または ion-textarea の "helperText" プロパティを使用してください。
startコンテンツは、LTRではアイテムテキストの左側に、RTLでは右側に配置されます。