Skip to main content
Version: v7

ion-list-header

shadow

リストヘッダーは、リストの内容を記述するために使用されるブロック要素です。アイテムディバイダー](./item-divider)とは異なり、リストヘッダーはアイテムのリストの先頭で一度だけ使用する必要があります。

基本的な使い方

リストヘッダーのボタン

リストのヘッダーに button を配置すると、リストの一部を表示し、ボタンで全リストにリダイレクトするのに便利です。

List Headerの下線

リストヘッダーは、デフォルトでは下部のボーダーが表示されません。 lines プロパティを "full" または "inset" に変更すると、それぞれ全幅のボーダーまたは左paddingを伴う挿入ボーダーが表示されます。

テーマ

Colors

CSSカスタムプロパティ

プロパティ

color

Descriptionアプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", と "dark" です.色に関する詳しい情報は theming を参照してください。
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Defaultundefined

lines

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

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
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
--backgroundリストヘッダーの背景
--border-colorリストヘッダーボーダーの色
--border-styleリストヘッダーボーダーのスタイル
--border-widthリストヘッダー枠の幅
--colorリストヘッダーテキストの色
--inner-border-widthリストヘッダー内枠の幅

Slots

No slots available for this component.