ion-list-header

shadow

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

基本的な使い方

<ion-list>
  <ion-list-header>
    <ion-label>Video Games</ion-label>
  </ion-list-header>
  <ion-item>
    <ion-label>Pokémon Yellow</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Mega Man X</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>The Legend of Zelda</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Pac-Man</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Super Mario World</ion-label>
  </ion-item>
</ion-list>

リストヘッダーのボタン

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

<ion-list>
  <ion-list-header>
    <ion-label>Video Games</ion-label>
    <ion-button>See All</ion-button>
  </ion-list-header>
  <ion-item>
    <ion-label>Pokémon Yellow</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Mega Man X</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>The Legend of Zelda</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Pac-Man</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Super Mario World</ion-label>
  </ion-item>
</ion-list>

List Headerの下線

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

<ion-list>
  <ion-list-header>
    <ion-label>Default</ion-label>
  </ion-list-header>
  <ion-item>
    <ion-label>Item</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Item</ion-label>
  </ion-item>
</ion-list>

<ion-list>
  <ion-list-header lines="inset">
    <ion-label>Inset</ion-label>
  </ion-list-header>
  <ion-item>
    <ion-label>Item</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Item</ion-label>
  </ion-item>
</ion-list>

<ion-list>
  <ion-list-header lines="full">
    <ion-label>Full</ion-label>
  </ion-list-header>
  <ion-item>
    <ion-label>Item</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Item</ion-label>
  </ion-item>
</ion-list>

テーマ

Colors

<ion-list-header>
  <ion-label>Default</ion-label>
</ion-list-header>
<ion-list-header color="primary">
  <ion-label>Primary</ion-label>
</ion-list-header>
<ion-list-header color="secondary">
  <ion-label>Secondary</ion-label>
</ion-list-header>
<ion-list-header color="tertiary">
  <ion-label>Tertiary</ion-label>
</ion-list-header>
<ion-list-header color="success">
  <ion-label>Success</ion-label>
</ion-list-header>
<ion-list-header color="warning">
  <ion-label>Warning</ion-label>
</ion-list-header>
<ion-list-header color="danger">
  <ion-label>Danger</ion-label>
</ion-list-header>
<ion-list-header color="light">
  <ion-label>Light</ion-label>
</ion-list-header>
<ion-list-header color="medium">
  <ion-label>Medium</ion-label>
</ion-list-header>
<ion-list-header color="dark">
  <ion-label>Dark</ion-label>
</ion-list-header>

CSSカスタムプロパティ

src/app/example.component.css

ion-list-header {
  --background: #19422d;
  --color: #fff;

  --border-width: 0 0 4px 0;
  --border-color: #f24aec;
  --border-style: double;
}

src/app/example.component.html

<ion-list-header>
  <ion-label>Custom List Header</ion-label>
</ion-list-header>

プロパティ

color

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

lines

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

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

イベント

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カスタムプロパティ

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

Slots

No slots available for this component.