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

ion-header

Contents

Headerは、toolbarコンポーネントを保持する親コンポーネントです。 ion-header はページの3つのルート要素のうちの1つでなければならないことに注意してください。

Fade Header

The collapse property can be set to 'fade' on a page's main ion-header to have the background color of the toolbars fade in as users scroll. This provides the same fade effect that is found in many native iOS applications.

This functionality can be combined with Collapsible Large Titles as well. The collapse="condense" value should be set on the ion-header inside of your ion-content. The collapse="fade" value should be set on the ion-header outside of your ion-content.

Usage

<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>My Navigation Bar</ion-title>
</ion-toolbar>

<ion-toolbar>
<ion-title>Subheader</ion-title>
</ion-toolbar>
</ion-header>

<!-- Header without a border -->
<ion-header class="ion-no-border">
<ion-toolbar>
<ion-title>Header - No Border</ion-title>
</ion-toolbar>
</ion-header>

<ion-content>
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">My Navigation Bar</ion-title>
</ion-toolbar>
</ion-header>
</ion-content>

<!-- Fade Header with collapse header -->
<ion-header collapse="fade" [translucent]="true">
<ion-toolbar>
<ion-title>Header</ion-title>
</ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Header</ion-title>
</ion-toolbar>
</ion-header>
</ion-content>

Properties

collapse

DescriptionDescribes the scroll effect that will be applied to the header.
Only applies in iOS mode.

Typically used for Collapsible Large Titles
Attributecollapse
Type"condense" | "fade" | undefined
Defaultundefined

mode

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

translucent

DescriptionIf true, the header will be translucent.
Only applies when the mode is "ios" and the device supports
backdrop-filter.

Note: In order to scroll content behind the header, the fullscreen
attribute needs to be set on the content.
Attributetranslucent
Typeboolean
Defaultfalse