shadowItems are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements. Generally they are placed in a list with other items. Items can be swiped, deleted, reordered, edited, and more.
Items left align text and add an ellipsis when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using .ion-text-wrap in the below example. See the CSS Utilities Documentation for more classes that can be added to an item to transform the text.
An item is considered "clickable" if it has an href or button property set. Clickable items have a few visual differences that indicate they can be interacted with. For example, a clickable item receives the ripple effect upon activation in md mode, has a highlight when activated in ios mode, and has a detail arrow by default in ios mode.
By default clickable items will display a right arrow icon on ios mode. To hide the right arrow icon on clickable elements, set the detail property to false. To show the right arrow icon on an item that doesn't display it naturally, set the detail property to true.
Items show an inset bottom border by default. The border has padding on the left and does not appear under any content that is slotted in the "start" slot. The lines property can be modified to "full" or "none" which will show a full width border or no border, respectively.
Avatars and Thumbnails can be slotted inside of an item. This is useful when making lists of images and text.
Buttons are styled smaller inside of items than when they are outside of them. To make the button size match buttons outside of an item, set the size attribute to "default".
Helper & Error Text
Helper & error text can be used inside of an item with an input by slotting a note in the "helper" and "error" slots. The error slot will not be displayed unless the ion-invalid class is added to the ion-item. In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation.
The item counter is helper text that displays under an input to notify the user of how many characters have been entered out of the total that the input will accept. When adding counter, the default behavior is to format the value that gets displayed as inputLength / maxLength. This behavior can be customized by passing in a formatter function to the counterFormatter property.
Items containing an input will highlight the bottom border of the input with a different color when focused, valid, or invalid. By default, md items have a highlight with a height set to 2px and ios has no highlight (technically the height is set to 0). The height can be changed using the --highlight-height CSS property. To turn off the highlight, set this variable to 0.
The highlight color changes based on the item state, but all of the states use Ionic colors by default. When focused, the input highlight will use the primary color. If the input is valid it will use the success color, and invalid inputs will use the danger color. This can be customized using the provided CSS properties.
| Description | trueの場合、ボタンタグがレンダリングされ、アイテムはタップ可能になる。 |
| Attribute | button |
| Type | boolean |
| Default | false |
| 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 ｜ undefined |
| Default | undefined |
| Description | trueの場合、文字カウンタが使用された文字の比率と総文字数制限を表示します。内側の ion-input または ion-textarea に maxlength プロパティが設定されている場合にのみ適用されます。 |
| Attribute | counter |
| Type | boolean |
| Default | false |
| 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 |
| 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 |
| Description | detail が true に設定されているときに使用するアイコンです。 |
| Attribute | detail-icon |
| Type | string |
| Default | chevronForward |
| Description | trueの場合、ユーザはそのアイテムと対話することができません。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
| 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 |
| 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 |
| 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 |
| Description | アイテムに表示される下枠の表示方法。 |
| Attribute | lines |
| Type | "full" ｜ "inset" ｜ "none" ｜ undefined |
| Default | undefined |
| Description | modeは、どのプラットフォームのスタイルを使用するかを決定します。 |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
| 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 |
| 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 |
| 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' |
| Description | The shape of the item. If "round" it will have increased border radius. |
| Attribute | shape |
| Type | "round" ｜ undefined |
| Default | undefined |
| 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 |
| Description | ボタンの種類。onclickまたはbutton`プロパティが存在する場合にのみ使用される。 |
| Attribute | type |
| Type | "button" ｜ "reset" ｜ "submit" |
| Default | 'button' |
No events available for this component.
No public methods available for this component.
| Name | Description |
|---|
detail-icon | アイテムのシェブロンアイコンを表示します。detail="true"`のときのみ適用されます。 |
native | すべての子要素をラップするネイティブHTMLのボタン、アンカー、またはdiv要素です。 |
| Name | Description |
|---|
--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 | フォーカスされたときのアイテムのハイライトの色 |
--highlight-color-invalid | 無効時のアイテムのハイライトの色 |
--highlight-color-valid | 有効時のアイテム上のハイライトの色 |
--highlight-height | アイテムに表示されるハイライトの高さ |
--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 | アイテムの変遷 |
| Name | Description |
|---|
| `` | slotがない状態で提供される場合、コンテンツは名前付きslotの間に配置されます。 |
end | コンテンツは、LTRではアイテムテキストの右側に、RTLでは左側に配置されます。 |
error | 項目の下にコンテンツが配置され、エラーが検出されたときに表示されます。 |
helper | 項目の下にコンテンツを配置し、エラーが検出されない場合に表示されます。 |
start | コンテンツは、LTRではアイテムテキストの左側に、RTLでは右側に配置されます。 |