ion-list-header
ListHeader a header component for a list. Unlike ItemDivider, ListHeaders are styled to be stand-out from the rest of the list items.
Usage
<ion-list>
<ion-list-header>
<ion-label>Items</ion-label>
</ion-list-header>
<ion-item>Item 1</ion-item>
<ion-item>Item 2</ion-item>
<ion-item>Item 3</ion-item>
<ion-item>Item 4</ion-item>
<ion-item>Item 5</ion-item>
</ion-list>import React from 'react';
import { IonList, IonItem, IonLabel, IonContent, IonListHeader } from '@ionic/react';
export const ListHeaderExample: React.FC = () => (
<IonContent>
<IonList>
<IonListHeader>
<IonLabel>Items</IonLabel>
</IonListHeader>
<IonItem>Item 1</IonItem>
<IonItem>Item 2</IonItem>
<IonItem>Item 3</IonItem>
<IonItem>Item 4</IonItem>
<IonItem>Item 5</IonItem>
</IonList>
</IonContent>
);Properties
color | |
|---|---|
| Description | The color to use from your application's color palette.
Default options are:
|
| Attribute | color |
| Type | string | undefined |
mode | |
| Description | The mode determines which platform styles to use. |
| Attribute | mode |
| Type | "ios" | "md" |
CSS Custom Properties
| Name | Description |
|---|---|
--background | Background of the list header |
--color | Color of the list header text |