Skip to main content
Version: v5

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

<!-- 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>

Properties

color

DescriptionThe 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.
Attributecolor
Typestring | undefined
Defaultundefined

lines

Descriptionリストヘッダーの下辺のボーダーをどのように表示するか。
Attributelines
Type"full" | "inset" | "none" | undefined
Defaultundefined

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" | "md"
Defaultundefined

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

NameDescription
--backgroundリストヘッダーの背景
--border-colorリストヘッダーボーダーの色
--border-styleリストヘッダーボーダーのスタイル
--border-widthリストヘッダー枠の幅
--colorリストヘッダーテキストの色
--inner-border-widthリストヘッダー内枠の幅

Slots

No slots available for this component.