Working with List Components
1. Using IonList Component
| Property | Values | Description |
|---|---|---|
| lines | 'full', 'inset', 'none' |
Mode of the lines in the list |
| disabled | true, false |
Disables the list |
| sticky | true, false |
Makes the header sticky to the top of the list |
Example: Basic IonList Usage
<ion-list>
<ion-item>
<ion-label>Item 1</ion-label>
</ion-item>
<ion-item>
<ion-label>Item 2</ion-label>
</ion-item>
</ion-list>Example: IonList with Lines
<ion-list lines="full">
<ion-item>
<ion-label>Item 1</ion-label>
</ion-item>
<ion-item>
<ion-label>Item 2</ion-label>
</ion-item>
</ion-list>
Note: The
lines property can be used to control the appearance of list items.
2. Creating List Items
| Property | Description | Values |
|---|---|---|
| ion-item | Base component for list items | <ion-item> |
| button | Makes item behave like a button | true or false |
| detail | Shows a chevron icon at the end of item | true or false |
| disabled | Disables the item | true or false |
Example: List Item with Detail
<ion-item detail>
<ion-label>Item with Detail</ion-label>
</ion-item>3. Using Item Labels
| Property | Values | Description |
|---|---|---|
| text | string |
Primary text content of the item label |
| color | string |
Color of the label text (e.g., primary, secondary) |
| size | small, medium, large |
Size of the label text |
| wrap | true, false |
Whether to wrap long text content |
Example: Label with Color and Size
<ion-item>
<ion-label color="secondary" size="large">Secondary Large Label</ion-label>
</ion-item>4. Using Item Icons
| Property | Values | Description |
|---|---|---|
| icon | string |
The icon name to display. Uses Ionic's built-in icon set. |
| slot | start | end |
Position of the icon within the item. Defaults to start. |
| color | primary | secondary | tertiary | success | warning | danger | light | medium | dark |
Color of the icon. |
Example: Basic Icon Usage
<ion-item>
<ion-icon slot="start" name="home"></ion-icon>
<ion-label>Home</ion-label>
</ion-item>Example: Icon with Color
<ion-item>
<ion-icon slot="start" name="star" color="warning"></ion-icon>
<ion-label>Favorites</ion-label>
</ion-item>
Note: Icon names should match those in Ionic's icon set. Use
ion-icon component to display icons.
5. Using Item Avatars
| Property | Values | Description |
|---|---|---|
| avatar | true |
Applies avatar styling to the item |
| src | string |
URL or path to the avatar image |
Example: Avatar in List Item
<ion-item>
<ion-avatar slot="start">
<img alt="User avatar" src="avatar.jpg">
</ion-avatar>
<ion-label>John Doe</ion-label>
</ion-item>
Note: The
slot="start" attribute positions the avatar on the left side of the item.
6. Using Item Thumbnails
| Property | Values | Description |
|---|---|---|
| thumbnail | string |
URL or path to the thumbnail image |
| slot | start | end |
Determines placement of the thumbnail in the item |
Example: Basic Thumbnail Usage
<ion-item>
<ion-thumbnail slot="start">
<img src="assets/img/thumbnail.jpg" alt="Thumbnail">
</ion-thumbnail>
<ion-label>Item with Thumbnail</ion-label>
</ion-item>Example: Thumbnail with Icon
<ion-item>
<ion-thumbnail slot="start">
<ion-icon name="heart"></ion-icon>
</ion-thumbnail>
<ion-label>Heart Icon Thumbnail</ion-label>
</ion-item>
Note: Thumbnails should be square-shaped for best visual results.
7. Using List Dividers
| Property | Description | Default | Notes |
|---|---|---|---|
| divider | Displays a divider line above the list item | false |
Can be set to true or a string for custom text |
| dividerText | Custom text for the divider | null |
Only used when divider is a string |
Example: Basic List with Dividers
<ion-list>
<ion-item divider>Section A</ion-item>
<ion-item>Item 1</ion-item>
<ion-item>Item 2</ion-item>
<ion-item divider>Section B</ion-item>
<ion-item>Item 3</ion-item>
<ion-item>Item 4</ion-item>
</ion-list>Example: Custom Divider Text
<ion-list>
<ion-item divider="true">Section A</ion-item>
<ion-item>Item 1</ion-item>
<ion-item divider="true">Section B</ion-item>
<ion-item>Item 2</ion-item>
</ion-list>
Note: The
divider property can be used on any <ion-item> to create a visual separation between sections in the list.
8. Creating Grouped Lists
| Property | Description | Values |
|---|---|---|
| ion-item-group | Container for grouping ion-item components | <ion-item-group> |
| ion-item-divider | Header for a group of items, can be sticky or non-sticky | <ion-item-divider> |
Example: Basic Grouped List
<ion-item-group>
<ion-item-divider sticky="true">
<ion-label>Section A</ion-label>
</ion-item-divider>
<ion-item>
<ion-label>Item 1</ion-label>
</ion-item>
<ion-item>
<ion-label>Item 2</ion-label>
</ion-item>
</ion-item-group>Example: Multiple Groups
<ion-item-group>
<ion-item-divider sticky="true">
<ion-label>Section A</ion-label>
</ion-item-divider>
<ion-item>
<ion-label>Item 1</ion-label>
</ion-item>
<ion-item>
<ion-label>Item 2</ion-label>
</ion-item>
<ion-item-divider sticky="true">
<ion-label>Section B</ion-label>
</ion-item-divider>
<ion-item>
<ion-label>Item 3</ion-label>
</ion-item>
<ion-item>
<ion-label>Item 4</ion-label>
</ion-item>
</ion-item-group>
Note: The
sticky property on ion-item-divider makes the divider stay visible when scrolling through the list.
9. Making Items Clickable
| Property | Values | Description |
|---|---|---|
| clickable | true | false |
Makes the item clickable and adds visual feedback. |
| detail | true | false |
Adds a chevron icon to indicate the item is clickable. |
| routerLink | string |
Defines the route to navigate to when the item is clicked. |
Example: Making an Item Clickable with Router Link
<ion-item clickable routerLink="/profile">
<ion-label>Go to Profile</ion-label>
</ion-item>Example: Using Click Handler
handleItemClick() {
console.log("Item clicked");
}<ion-item clickable (click)="handleItemClick()">
<ion-label>Click Me</ion-label>
</ion-item>10. Configuring Item Lines
| Property | Values | Description |
|---|---|---|
| lines | 'full', 'inset', 'none' |
Configures the line style for list items. 'full' shows a full-width line, 'inset' shows a line inset from the edges, and 'none' hides the line. |