ion-header

Contents

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

利用方法

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

<ion-content></ion-content>
import React from 'react';
import { IonHeader, IonContent, IonToolbar, IonButtons, IonBackButton, IonTitle } from '@ionic/react';

export const HeaderExample: React.FunctionComponent = () => (
  <>
    <IonHeader>
      <IonToolbar>
        <IonButtons slot="start">
          <IonBackButton defaultHref="/" />
        </IonButtons>
        <IonTitle>My Navigation Bar</IonTitle>
      </IonToolbar>

      <IonToolbar>
        <IonTitle>Subheader</IonTitle>
      </IonToolbar>
    </IonHeader>

    <IonContent />
  </>
);

プロパティ

mode

Description

The mode determines which platform styles to use.

Attributemode
Type"ios" | "md"

translucent

Description

If 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