Skip to main content
Version: v8

ion-item

shadow

アイテムは、テキスト、アイコン、アバター、画像、Input、その他のネイティブまたはカスタム要素を含むことができる要素です。アイテムは他のアイテムと一緒にリストの行としてのみ使用してください。アイテムはスワイプ、削除、並び替え、編集などができます。

基本的な使い方​

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

コンテンツの種類​

リスト内のアイテムは様々な形をとりますが、一般的にビジュアル、テキスト、メタデータ、アクション、コントロールの5つの異なるコンテンツタイプをサポートします。しかし、これらのコンテンツタイプをすべて同時に使うべきではありません。以下のガイドでは、異なるコンテンツタイプと、アプリケーションでの適切な利用方法を示します。

補助ビジュアル​

補助ビジュアル 補助ビジュアルはアイテムの装飾アイコンやその他の飾りです。サポーティングビジュアルの一般的な例は、アバター、 アイコン、サムネイルです。このコンテンツはアイテムの意図を理解するために必要ではないので、通常aria-hidden="true"を使ってスクリーンリーダーから隠されます。

アイコン・ボタンのように、アイテムとのインタラクションにビジュアルが必要な場合、そのビジュアルはサポート・ビジュアルではなく、 アクション となります。

Supporting visuals should be rendered in a consistent manner. This makes the information in each item easier to parse.

A list with several items. Each item has an icon and visible text describing the item. The icon in each item is rendered at the start of the line.
Do

Align visuals on the same side in a list

A list with several items. Each item has an icon and visible text describing the item. Some icons are rendered at the start of the line, and some icons are rendered at the end of the line
Don't

Don't render visuals with different alignments in the same list

下の例では、ビジュアルをサポートする2つのリストを作成しています。最初のリストはアイコンを使い、2番目のリストはアバターを使います。ビジュアルは装飾的なものなので、すべて aria-hidden="true" を指定しています。さらに、これらは start スロットで一貫して表示されます。

テキスト​

テキスト・コンテンツ・タイプには、フォーム制御ラベルやその他の可視テキストが含まれます。このテキストは項目の意図を示す役割を果たします。テキストは短く、要点をまとめるようにしてください。

If you find that you need a few more sentences to clarify the item's purpose, consider moving the additional sentences to a Note at the bottom of the list. Adding the item to its own list makes it clear which item the text is associated with.

A list with an item that contains a checked checkbox indicating the user wants to receive emails. Text describing how often the user will receive emails as well as how to unsubscribe from emails is placed underneath the list.
Do

Move long text outside of the list

A list with an item that contains a checked checkbox indicating the user wants to receive emails. Text describing how often the user will receive emails as well as how to unsubscribe from emails is placed as a single paragraph inline with the checkbox, making the text hard to read and increasing the height of the item.
Don't

Don't try to fit long text in an item

下の例では、さまざまなタイプのテキストでリストを作成しています。"First Name"と "Last Name "のラベルは、テキスト入力に何を入力すべきかを示しています。

トグルの "Allow Notifications"ラベルの下には、ユーザーが通知を無効にできることを示すテキストが追加されています。このテキストは短いので、アイテムの内側に配置されています。

そのリストの下には、 Note の下に長いテキストを含むtextareaを含む別のリストがあります。textareaは、長いテキストが他のフィールドではなく、textareaに関連付けられていることを明らかにするために、それ自身のリストに配置されました。

メタデータ​

メタデータは、ステータステキストやカウントのようなアイテムの追加コンテキストを提供します。Badge](./badge)やNoteのようなコンポーネントは、メタデータを表示する素晴らしい方法です。

Limit the amount of metadata you include to only the most relevant information.

A list that contains several items, each representing a different to-do list. A count of how many tasks in each to-do list is placed at the end of each item.
Do

Add only the most important metadata

A list that contains several items, each representing a different to-do list. Two counts are placed at the end of each item: One count that states the total number of tasks, and another count that states the total number of tasks that are due today.
Don't

Don't add too much metadata as it can overwhelm or confuse the user.

Developers should also consider how important the metadata is. Drawing attention to the metadata may be helpful for the user or it may distract them from the more important information depending on the use case.

A list that contains several items, each representing a different to-do list. A count of how many tasks in each to-do list is placed at the end of each item.
Do

Prioritize the most important content.

A list that contains several items, each representing a different to-do list. A count of how many tasks in each to-do list is placed at the end of each item. However, the count is highlighted in blue which draws the user's attention away from the name of the to-do list.
Caution

Prioritized metadata may distract from other important content.

以下の例では、異なる種類のメタデータを持つ2つのリストを作成している。最初のリストはNoteを使って、それぞれのToDoリストにいくつのタスクがあるかを表示している。

つ目のリストは、iOSのメールアプリを真似て受信トレイを表示しています。このリストでは、"開始"スロットに "未読メッセージ"インジケータ、"終了"スロットにタイムスタンプとカスタム詳細アイコンを含むカスタムメタデータを使用しています。"未読メッセージ"インジケータは、未読メッセージにユーザーの注意を引くために青くハイライトされ、タイムスタンプはより控えめです。

アクション​

アクションは、アクティブにすると何かをするインタラクティブな要素です。アイテムは1行に複数のアクションを表示することができます。しかし、開発者は、各アクションのタップターゲットが十分に大きいことを確認する必要があります。

開発者は、入れ子になったインタラクティブ機能を作成することは避けるべきです。例えば、 button プロパティが true に設定されている場合、開発者はアイテムのメインコンテンツ内にボタンを追加することを避けるべきです。

Actions can be added by using the Item Sliding component. Actions can also be placed directly inside of the Item without the use of Item Sliding, but this should be limited to no more than 2 actions.

A list that contains several items, each representing a contact. Each item has text that states the contact's name as well as several actions including pinning the contact, sharing the contact, and deleting the contact. These actions are revealed by swiping on the item.
Do

Use an Item Sliding to reveal multiple actions by swiping on the Item.

A list that contains several items, each representing a contact. Each item has text that states the contact's name as well as several actions including pinning the contact, sharing the contact, and deleting the contact. The actions are placed directly on the item. Since there are so many actions, some of the text is cut off.
Don't

Don't put more than 2 actions within an Item.

下の例では、連絡先のリストを作成しています。各項目は、その項目の完全な連絡先ページに移動するためのスタブボタンです。各項目には、ユーザーが項目をスワイプすることで表示できる追加アクションがあります。

コントロール​

コントロールは、チェックボックス、入力、ラジオなどのフォームコンポーネントです。リスト内の各項目は、画面スペースの制約上、最大でも2つのコントロールを持つ必要があります。

Metadata such as helper text or character counts should not be used on form controls in list views. If such metadata is needed, the form control should be placed outside of a list. Filled Inputs are a great way of visually defining the input container outside of a list.

There is an email input and a password input. Both have helper text associated with them. Since both are placed outside of a list it is clear which input each helper text is associated with.
Do

Place inputs with metadata outside of the list.

There is a list containing an email input and a password input. Both have helper texts associated with them. However, the divider between each item and between the helper text makes it hard to tell which input each helper text is associated with.
Don't

Don't put metadata for inputs in the list.

Alternatively, the metadata can be placed in a Note at the bottom of the list.

There are two lists of inputs. The first list contains a password input. Below that list contains text that says 'Password must be at least 16 characters'. The second list contains an email input. This second list is separated so the password length requirement text is clearly associated with the password input above.
Do

Place metadata for inputs at the end of a list.

There is one list of inputs. One of the inputs is a password input with text below the input that says 'Password must be at least 16 characters'. However, this text is placed directly above another input, so it's not immediately clear which input the text is associated with.
Don't

Don't put metadata for inputs in the list.

Items should typically have no more than two controls. If you need more controls, consider adding the additional controls in a Modal that is accessible from the item.

There is one list of inputs. One of the inputs is a password input with text below the input that says 'Password must be at least 16 characters'. However, this text is placed directly above another input, so it's not immediately clear which input the text is associated with.
Do

Move additional controls to a submenu accessible from the item.

There are two lists of inputs. The first list contains a password input. Below that list contains text that says 'Password must be at least 16 characters'. The second list contains an email input. This second list is separated so the password length requirement text is clearly associated with the password input above.
Don't

Don't use more than two controls within an item.

以下の例では、ToDoタスクのリストを作成しています。それぞれの項目にはチェックボックスと入力があります。チェックボックスはユーザーがタスクを完了としてマークできるようにし、入力はユーザーがタスクの名前を変更できるようにします。

クリック可能な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 Lines​

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

Buttons in Items​

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

Item Inputs​

テーマ​

Colors​

CSS Shadow Parts​

CSSカスタムプロパティ​

ガイドライン​

以下のガイドラインは、リスト項目を理解しやすく、使いやすくするのに役立ちます。

  1. アイテムは Lists の中だけで使用してください。
  2. リスト内のアイテムは、一貫したフォーマットで表示されるべきです。例えば、アイテムに装飾的なアイコンを表示する場合、アイコンはアイテム間で同じように配置されるべきです。
  3. アイテムは決して入れ子になったインタラクティヴをレンダリングすべきではありません。入れ子になったインタラクティブ要素が使用されている場合、スクリーンリーダーは正しいインタラクティブ要素を選択することができません。例えば、button="true"を持つion-itemの中にボタンを置くことは避けてください。
  4. コンテントタイプ](#content-types)を正しく使用してください。Itemコンポーネントは、List内の行として設計されており、汎用コンテナとして使用すべきではありません。

アクセシビリティ​

キーボードインタラクション​

An <ion-item> has the following keyboard interactions when any of these conditions are met:

  • The button property is set to "true", rendering a native <button> element.
  • The href property is set, rendering a native <a> element.
  • The routerLink property is set, rendering a native <a> element.
KeyDescription
TabMoves focus to the next focusable element.
Shift + TabMoves focus to the previous focusable element.

Button​

When an <ion-item> renders a native <button> element, the keyboard interactions follow the same pattern as the button role:

KeyDescription
EnterActivates the item, triggering its click event. If the item is within a form and has type set to "submit", it submits the form.
SpaceActivates the item, triggering its click event. Does not submit the form, even if the item type is "submit".

Anchor​

When an <ion-item> renders a native <a> element, the keyboard interactions follow the same pattern as the link role:

KeyDescription
EnterActivates the item, navigating to the linked page or moving focus to the in-page target.

Properties​

button​

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

color​

DescriptionThe 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.
Attributecolor
Type"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined
Defaultundefined

detail​

DescriptionIf 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.
Attributedetail
Typeboolean ｜ undefined
Defaultundefined

detailIcon​

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

disabled​

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

download​

DescriptionThis 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).
Attributedownload
Typestring ｜ undefined
Defaultundefined

href​

DescriptionContains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
Attributehref
Typestring ｜ undefined
Defaultundefined

lines​

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

mode​

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

rel​

DescriptionSpecifies the relationship of the target object to the link object. The value is a space-separated list of link types.
Attributerel
Typestring ｜ undefined
Defaultundefined

routerAnimation​

DescriptionWhen using a router, it specifies the transition animation when navigating to another page using href.
Attributerouter-animation
Type((baseEl: any, opts?: any) => Animation) ｜ undefined
Defaultundefined

routerDirection​

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

target​

DescriptionSpecifies where to display the linked URL. Only applies when an href is provided. Special keywords: "_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アイテム詳細アイコンの不透明度
--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では左側に配置されます。
startコンテンツは、LTRではアイテムテキストの左側に、RTLでは右側に配置されます。

Contents

Edit this page