メインコンテンツまでスキップ
Version: v6

ion-list-header

shadow

List headers are block elements that are used to describe the contents of a list. Unlike item dividers, list headers should only be used once at the top of a list of items.

Basic Usage

Buttons in List Headers

A button placed in a list header can be useful for showing part of a list and redirecting to the full list with the button.

List Header Lines

List headers do not show a bottom border by default. The lines property can be modified to "full" or "inset" which will show a full width border or an inset border with left padding, respectively.

Theming

Colors

CSS Custom 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
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Defaultundefined

lines

DescriptionHow the bottom border should be displayed on the list header.
Attributelines
Type"full" | "inset" | "none" | undefined
Defaultundefined

mode

DescriptionThe mode determines which platform styles to use.
Attributemode
Type"ios" | "md"
Defaultundefined

イベント

No events available for this component.

メソッド

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

NameDescription
--backgroundBackground of the list header
--border-colorColor of the list header border
--border-styleStyle of the list header border
--border-widthWidth of the list header border
--colorColor of the list header text
--inner-border-widthWidth of the inner list header border

Slots

No slots available for this component.