メインコンテンツへスキップ
バージョン: v8

ion-item

シャドウ

アイテムは、テキスト、アイコン、アバター、画像、入力、その他のネイティブまたはカスタム要素を含むことができる要素です。アイテムは、他のアイテムとともにリスト内の行としてのみ使用する必要があります。アイテムは、スワイプ、削除、並べ替え、編集などが可能です。

基本使用法​

アイテムはテキストを左揃えにし、テキストがアイテムよりも広い場合は折り返します。Ionic Framework で提供される CSS ユーティリティを使用すると、この動作を変更できます。たとえば、以下の例のように .ion-text-nowrap を使用します。テキストを変換するためにアイテムに追加できる他のクラスについては、CSS ユーティリティドキュメントを参照してください。

コンテンツタイプ​

リスト内のアイテムにはさまざまな形式がありますが、通常は、サポートビジュアル、テキスト、メタデータ、アクション、コントロールの 5 つの異なるコンテンツタイプをサポートしています。ただし、これらのコンテンツタイプをすべて同時に使用すべきではありません。次のガイドでは、さまざまなコンテンツタイプと、アプリケーションでの適切な使用方法を示します。

サポートビジュアル​

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

アイコンボタンなど、ビジュアルがアイテムと対話するために必要な場合は、ビジュアルはサポートビジュアルではなくアクションです。

サポートビジュアルは、一貫した方法でレンダリングする必要があります。これにより、各アイテムの情報が解析しやすくなります。

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.
行う

リスト内の同じ側にビジュアルを配置する

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
しない

同じリスト内で異なる配置でビジュアルをレンダリングしない

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

テキスト​

テキストコンテンツタイプには、フォームコントロールのラベルまたはその他の表示テキストが含まれます。このテキストは、アイテムの意図を示す役割を果たします。テキストは短く要点を押さえるようにしてください。

アイテムの目的を明確にするためにもう少し文章が必要な場合は、リストの下部にあるノートに追加の文章を移動することを検討してください。アイテムを独自のリストに追加すると、テキストがどのアイテムに関連付けられているかが明確になります。

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.
行う

長いテキストをリストの外に移動する

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.
しない

アイテムに長いテキストを詰め込もうとしない

以下の例では、さまざまな種類のテキストを含むリストを作成しています。「名」と「姓」のラベルは、テキスト入力に入力する内容を示す役割を果たします。

トグルの「通知を許可する」ラベルの下には、ユーザーが通知を無効にできることを示す追加テキストがあります。このテキストは短いため、アイテム内に配置されています。

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

メタデータ​

メタデータは、ステータステキストやカウントなど、アイテムの追加のコンテキストを提供します。バッジやノートなどのコンポーネントは、メタデータを表示するのに最適な方法です。

含めるメタデータの量を、最も関連性の高い情報のみに制限してください。

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.
行う

最も重要なメタデータのみを追加する

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.
しない

メタデータを過度に含めると、ユーザーを圧倒したり混乱させたりする可能性があるため、含めすぎないようにしてください。

開発者は、メタデータがどれほど重要であるかも検討する必要があります。ユースケースによっては、メタデータに注意を向けることがユーザーにとって役立つ場合もあれば、より重要な情報から気をそらしてしまう場合もあります。

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.
行う

最も重要なコンテンツを優先する。

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.
注意

優先度の高いメタデータは、他の重要なコンテンツから気をそらしてしまう可能性があります。

以下の例では、さまざまな種類のメタデータを含む 2 つのリストを作成しています。最初のリストでは、ノートを使用して、各 ToDo リストに含まれるタスクの数を示しています。

2 番目のリストは、iOS Mail アプリを模倣して受信トレイを表示します。このリストでは、「未読メッセージ」インジケーターを「開始」スロットに含み、タイムスタンプとカスタム詳細アイコンを「終了」スロットに含めるなど、カスタムメタデータを使用しています。「未読メッセージ」インジケーターは、ユーザーの注意を未読メッセージに向けるために青色で強調表示されていますが、タイムスタンプはより控えめです。

アクション​

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

開発者は、ネストされたインタラクティブの作成を避ける必要があります。これは、スクリーンリーダーでのユーザーエクスペリエンスを損なう可能性があるためです。たとえば、button プロパティが true に設定されている場合、開発者はアイテムのメインコンテンツ内にボタンを追加することを避ける必要があります。

アクションは、アイテムスライドコンポーネントを使用することで追加できます。アクションは、アイテムスライドを使用せずにアイテム内に直接配置することもできますが、これは 2 つ以下のアクションに制限する必要があります。

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.
行う

アイテムスライドを使用して、アイテムをスワイプすることで複数のアクションを表示します。

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.
しない

アイテム内に 2 つ以上のアクションを配置しない。

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

コントロール​

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

ヘルプテキストや文字数などのメタデータは、リストビューのフォームコントロールには使用しないでください。そのようなメタデータが必要な場合は、フォームコントロールをリストの外に配置する必要があります。入力は、リストの外に入力コンテナーを視覚的に定義するのに最適な方法です。

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.
行う

メタデータを含む入力をリストの外に配置する。

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.
しない

リスト内に入力のメタデータを配置しない。

あるいは、メタデータをリストの最下部にある注釈に配置することもできます。

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.
行う

入力のメタデータは、リストの最後に配置してください。

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.
しない

リスト内に入力のメタデータを配置しない。

通常、項目には2つ以下のコントロールが必要です。より多くのコントロールが必要な場合は、項目からアクセスできるモーダルに追加することを検討してください。

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.
行う

追加のコントロールは、項目からアクセスできるサブメニューに移動してください。

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.
しない

項目内に3つ以上のコントロールを使用しないでください。

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

クリック可能な項目​

項目にhrefまたはbuttonプロパティが設定されている場合、その項目は「クリック可能」とみなされます。クリック可能な項目には、操作可能であることを示す視覚的な違いがいくつかあります。たとえば、クリック可能な項目は、mdモードでアクティブ化されるとリップル効果を受け、iosモードでアクティブ化されるとハイライト表示され、iosモードではデフォルトで詳細矢印が表示されます。

詳細矢印​

デフォルトでは、クリック可能な項目はiosモードで右矢印アイコンを表示します。クリック可能な要素で右矢印アイコンを非表示にするには、detailプロパティをfalseに設定します。自然に表示されない項目に右矢印アイコンを表示するには、detailプロパティをtrueに設定します。

項目線​

項目にはデフォルトでインセットされた下線が表示されます。この線は左側にパディングがあり、"start"スロットに挿入されたコンテンツの下には表示されません。linesプロパティは"full"または"none"に変更でき、それぞれ全幅の線または線なしを表示します。

項目内のボタン​

ボタンは、項目の外にある場合よりも項目内にある場合は小さくスタイルされます。ボタンのサイズを項目の外にあるボタンと一致させるには、size属性を"default"に設定します。

項目入力​

テーマ​

色​

CSSシャドウパーツ​

CSSカスタムプロパティ​

ガイドライン​

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

  1. 項目は、リスト内で使用する必要があります。
  2. リスト内の項目は、一貫した形式で表示する必要があります。たとえば、項目が装飾的なアイコンを表示する場合、アイコンは項目間で同じように配置する必要があります。
  3. 項目はネストされたインタラクティブ要素をレンダリングしないでください。ネストされたインタラクティブ要素が使用されている場合、スクリーンリーダーは正しいインタラクティブ要素を選択できません。たとえば、button="true"を持つion-item内にボタンを配置しないでください。
  4. コンテンツタイプを正しく使用してください。Itemコンポーネントは、リストの行として設計されており、汎用コンテナとして使用するべきではありません。

アクセシビリティ​

キーボード操作​

次のいずれかの条件が満たされる場合、<ion-item>には次のキーボード操作があります。

  • buttonプロパティが"true"に設定されている場合、ネイティブの<button>要素がレンダリングされます。
  • hrefプロパティが設定されている場合、ネイティブの<a>要素がレンダリングされます。
  • routerLinkプロパティが設定されている場合、ネイティブの<a>要素がレンダリングされます。
キー説明
Tabフォーカスを次のフォーカス可能な要素に移動します。
Shift + Tabフォーカスを前のフォーカス可能な要素に移動します。

ボタン​

<ion-item>がネイティブの<button>要素をレンダリングする場合、キーボード操作はbuttonロールと同じパターンに従います。

キー説明
Enter項目をアクティブ化し、そのclickイベントをトリガーします。項目がフォーム内にあり、typeが"submit"に設定されている場合、フォームを送信します。
Space項目をアクティブ化し、そのclickイベントをトリガーします。項目のtypeが"submit"であっても、フォームを送信しません。

アンカー​

<ion-item>がネイティブの<a>要素をレンダリングする場合、キーボード操作はlinkロールと同じパターンに従います。

キー説明
Enter項目をアクティブ化し、リンク先のページに移動するか、ページ内のターゲットにフォーカスを移動します。

プロパティ​

button​

説明trueの場合、buttonタグがレンダリングされ、項目がタップ可能になります。
属性button
型boolean
デフォルトfalse

color​

説明アプリケーションのカラーパレットから使用する色。デフォルトのオプションは、"primary"、"secondary"、"tertiary"、"success"、"warning"、"danger"、"light"、"medium"、および"dark"です。色に関する詳細については、テーマを参照してください。
属性color
型"danger" ｜ "dark" ｜ "light" ｜ "medium" ｜ "primary" ｜ "secondary" ｜ "success" ｜ "tertiary" ｜ "warning" ｜ string ｜ undefined
デフォルトundefined

detail​

説明trueの場合、項目の詳細矢印が表示されます。modeがiosで、hrefまたはbuttonプロパティが存在しない限り、デフォルトはfalseです。
属性detail
型boolean ｜ undefined
デフォルトundefined

detailIcon​

説明detailがtrueに設定されている場合に使用するアイコン。
属性detail-icon
型string
デフォルトchevronForward

disabled​

説明trueの場合、ユーザーは項目を操作できません。
属性disabled
型boolean
デフォルトfalse

download​

説明この属性は、ブラウザにURLに移動するのではなくダウンロードするように指示するため、ユーザーはローカルファイルとして保存するように求められます。属性に値がある場合、保存プロンプトで事前に設定されたファイル名として使用されます（ユーザーは必要に応じてファイル名を変更できます）。
属性download
型string ｜ undefined
デフォルトundefined

href​

説明ハイパーリンクが指すURLまたはURLフラグメントが含まれます。このプロパティが設定されている場合、アンカータグがレンダリングされます。
属性href
型string ｜ undefined
デフォルトundefined

lines​

説明項目の下線をどのように表示するか。
属性lines
型"full" ｜ "inset" ｜ "none" ｜ undefined
デフォルトundefined

mode​

説明モードは、使用するプラットフォームのスタイルを決定します。
属性mode
型"ios" ｜ "md"
デフォルトundefined

rel​

説明ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、リンクタイプのスペース区切りのリストです。
属性rel
型string ｜ undefined
デフォルトundefined

routerAnimation​

説明ルーターを使用する場合、hrefを使用して別のページに移動するときのトランジションアニメーションを指定します。
属性undefined
型((baseEl: any, opts?: any) => Animation) ｜ undefined
デフォルトundefined

routerDirection​

説明ルーターを使用する場合、hrefを使用して別のページに移動するときのトランジションの方向を指定します。
属性router-direction
型"back" ｜ "forward" ｜ "root"
デフォルト'forward'

target​

説明リンク先のURLを表示する場所を指定します。hrefが指定されている場合にのみ適用されます。特別なキーワード："_blank"、"_self"、"_parent"、"_top"。
属性target
型string ｜ undefined
デフォルトundefined

type​

説明ボタンのタイプ。onclickまたはbuttonプロパティが存在する場合にのみ使用されます。
属性type
型"button" ｜ "reset" ｜ "submit"
デフォルト'button'

イベント​

このコンポーネントで使用できるイベントはありません。

メソッド​

このコンポーネントで使用できるパブリックメソッドはありません。

CSSシャドウパーツ​

名前説明
detail-icon項目のシェブロンアイコン。detail="true"の場合にのみ適用されます。
nativeすべての子要素をラップするネイティブのHTMLボタン、アンカー、またはdiv要素。

CSSカスタムプロパティ​

名前説明
--background項目の背景
--background-activated押されたときの項目の背景。注意：これを設定すると、マテリアルデザインのリップルが妨げられます。
--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項目の詳細アイコンのフォントサイズ
--detail-icon-opacityアイテム詳細アイコンの不透明度
--inner-border-widthアイテムの内側ボーダーの幅
--inner-box-shadowアイテム内側のボックスシャドウ
--inner-padding-bottomアイテム内側の下パディング
--inner-padding-endアイテム内側の、左から右方向の場合は右パディング、右から左方向の場合は左パディング
--inner-padding-startアイテム内側の、左から右方向の場合は左パディング、右から左方向の場合は右パディング
--inner-padding-topアイテム内側の上パディング
--min-heightアイテムの最小高さ
--padding-bottomアイテムの下パディング
--padding-endアイテムの、左から右方向の場合は右パディング、右から左方向の場合は左パディング
--padding-startアイテムの、左から右方向の場合は左パディング、右から左方向の場合は右パディング
--padding-topアイテムの上パディング
--ripple-colorアイテムのリップル効果の色
--transitionアイテムのトランジション

スロット​

名前説明
``スロットが指定されていない場合、コンテンツは名前付きスロット間に配置されます。
endコンテンツは、LTRの場合はアイテムテキストの右側に、RTLの場合は左側に配置されます。
startコンテンツは、LTRの場合はアイテムテキストの左側に、RTLの場合は右側に配置されます。

目次

このページを編集