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
- Angular
- Javascript
- React
- Stencil
- Vue
<!-- Default List Header -->
<ion-list-header>
<ion-label>List Header</ion-label>
</ion-list-header>
<!-- List Header with Button -->
<ion-list-header>
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<!-- List Header with Outline Button -->
<ion-list-header>
<ion-label>New This Week</ion-label>
<ion-button fill="outline">See All</ion-button>
</ion-list-header>
<!-- List Header Full Lines -->
<ion-list-header lines="full">
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<!-- List Header Inset Lines -->
<ion-list-header lines="inset">
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<!-- List Headers in Lists -->
<ion-list>
<ion-list-header lines="inset">
<ion-label>Recent</ion-label>
<ion-button>Clear</ion-button>
</ion-list-header>
<ion-item lines="none">
<ion-label color="primary">
<h1>I got you babe</h1>
</ion-label>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header lines="inset">
<ion-label>Trending</ion-label>
</ion-list-header>
<ion-item>
<ion-label color="primary">
<h1>harry styles</h1>
</ion-label>
</ion-item>
<ion-item>
<ion-label color="primary">
<h1>christmas</h1>
</ion-label>
</ion-item>
<ion-item lines="none">
<ion-label color="primary">
<h1>falling</h1>
</ion-label>
</ion-item>
</ion-list>
<!-- Default List Header -->
<ion-list-header>
<ion-label>List Header</ion-label>
</ion-list-header>
<!-- List Header with Button -->
<ion-list-header>
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<!-- List Header with Outline Button -->
<ion-list-header>
<ion-label>New This Week</ion-label>
<ion-button fill="outline">See All</ion-button>
</ion-list-header>
<!-- List Header Full Lines -->
<ion-list-header lines="full">
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<!-- List Header Inset Lines -->
<ion-list-header lines="inset">
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<!-- List Headers in Lists -->
<ion-list>
<ion-list-header lines="inset">
<ion-label>Recent</ion-label>
<ion-button>Clear</ion-button>
</ion-list-header>
<ion-item lines="none">
<ion-label color="primary">
<h1>I got you babe</h1>
</ion-label>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header lines="inset">
<ion-label>Trending</ion-label>
</ion-list-header>
<ion-item>
<ion-label color="primary">
<h1>harry styles</h1>
</ion-label>
</ion-item>
<ion-item>
<ion-label color="primary">
<h1>christmas</h1>
</ion-label>
</ion-item>
<ion-item lines="none">
<ion-label color="primary">
<h1>falling</h1>
</ion-label>
</ion-item>
</ion-list>
import React from 'react';
import { IonButton, IonContent, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react';
export const ListHeaderExample: React.FC = () => (
<IonContent>
{/*-- Default List Header --*/}
<IonListHeader>
<IonLabel>List Header</IonLabel>
</IonListHeader>
{/*-- List Header with Button --*/}
<IonListHeader>
<IonLabel>New This Week</IonLabel>
<IonButton>See All</IonButton>
</IonListHeader>
{/*-- List Header with Outline Button --*/}
<IonListHeader>
<IonLabel>New This Week</IonLabel>
<IonButton fill="outline">See All</IonButton>
</IonListHeader>
{/*-- List Header Full Lines --*/}
<IonListHeader lines="full">
<IonLabel>New This Week</IonLabel>
<IonButton>See All</IonButton>
</IonListHeader>
{/*-- List Header Inset Lines --*/}
<IonListHeader lines="inset">
<IonLabel>New This Week</IonLabel>
<IonButton>See All</IonButton>
</IonListHeader>
{/*-- List Headers in Lists --*/}
<IonList>
<IonListHeader lines="inset">
<IonLabel>Recent</IonLabel>
<IonButton>Clear</IonButton>
</IonListHeader>
<IonItem lines="none">
<IonLabel color="primary">
<h1>I got you babe</h1>
</IonLabel>
</IonItem>
</IonList>
<IonList>
<IonListHeader lines="inset">
<IonLabel>Trending</IonLabel>
</IonListHeader>
<IonItem>
<IonLabel color="primary">
<h1>harry styles</h1>
</IonLabel>
</IonItem>
<IonItem>
<IonLabel color="primary">
<h1>christmas</h1>
</IonLabel>
</IonItem>
<IonItem lines="none">
<IonLabel color="primary">
<h1>falling</h1>
</IonLabel>
</IonItem>
</IonList>
</IonContent>
);
import { Component, h } from '@stencil/core';
@Component({
tag: 'list-header-example',
styleUrl: 'list-header-example.css',
})
export class ListHeaderExample {
render() {
return [
// Default List Header
<ion-list-header>
<ion-label>List Header</ion-label>
</ion-list-header>,
// List Header with Button
<ion-list-header>
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>,
// List Header with Outline Button
<ion-list-header>
<ion-label>New This Week</ion-label>
<ion-button fill="outline">See All</ion-button>
</ion-list-header>,
// List Header Full Lines
<ion-list-header lines="full">
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>,
// List Header Inset Lines
<ion-list-header lines="inset">
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>,
// List Headers in Lists
<ion-list>
<ion-list-header lines="inset">
<ion-label>Recent</ion-label>
<ion-button>Clear</ion-button>
</ion-list-header>
<ion-item lines="none">
<ion-label color="primary">
<h1>I got you babe</h1>
</ion-label>
</ion-item>
</ion-list>,
<ion-list>
<ion-list-header lines="inset">
<ion-label>Trending</ion-label>
</ion-list-header>
<ion-item>
<ion-label color="primary">
<h1>harry styles</h1>
</ion-label>
</ion-item>
<ion-item>
<ion-label color="primary">
<h1>christmas</h1>
</ion-label>
</ion-item>
<ion-item lines="none">
<ion-label color="primary">
<h1>falling</h1>
</ion-label>
</ion-item>
</ion-list>,
];
}
}
<template>
<!-- Default List Header -->
<ion-list-header>
<ion-label>List Header</ion-label>
</ion-list-header>
<!-- List Header with Button -->
<ion-list-header>
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<!-- List Header with Outline Button -->
<ion-list-header>
<ion-label>New This Week</ion-label>
<ion-button fill="outline">See All</ion-button>
</ion-list-header>
<!-- List Header Full Lines -->
<ion-list-header lines="full">
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<!-- List Header Inset Lines -->
<ion-list-header lines="inset">
<ion-label>New This Week</ion-label>
<ion-button>See All</ion-button>
</ion-list-header>
<!-- List Headers in Lists -->
<ion-list>
<ion-list-header lines="inset">
<ion-label>Recent</ion-label>
<ion-button>Clear</ion-button>
</ion-list-header>
<ion-item lines="none">
<ion-label color="primary">
<h1>I got you babe</h1>
</ion-label>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header lines="inset">
<ion-label>Trending</ion-label>
</ion-list-header>
<ion-item>
<ion-label color="primary">
<h1>harry styles</h1>
</ion-label>
</ion-item>
<ion-item>
<ion-label color="primary">
<h1>christmas</h1>
</ion-label>
</ion-item>
<ion-item lines="none">
<ion-label color="primary">
<h1>falling</h1>
</ion-label>
</ion-item>
</ion-list>
</template>
<script>
import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: { IonItem, IonLabel, IonList, IonListHeader },
});
</script>
Properties
color
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 | string | undefined |
Default | undefined |
lines
Description | How the bottom border should be displayed on the list header. |
Attribute | lines |
Type | "full" | "inset" | "none" | undefined |
Default | undefined |
mode
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
Default | undefined |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
Name | Description |
---|---|
--background | Background of the list header |
--border-color | Color of the list header border |
--border-style | Style of the list header border |
--border-width | Width of the list header border |
--color | Color of the list header text |
--inner-border-width | Width of the inner list header border |
Slots
No slots available for this component.