ion-header
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>
<!-- 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>
CopyCopied
<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>
CopyCopied
import React from 'react';
import { IonHeader, IonContent, IonToolbar, IonButtons, IonBackButton, IonTitle } from '@ionic/react';
export const HeaderExample: React.FC = () => (
<>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonBackButton defaultHref="/" />
</IonButtons>
<IonTitle>My Navigation Bar</IonTitle>
</IonToolbar>
<IonToolbar>
<IonTitle>Subheader</IonTitle>
</IonToolbar>
</IonHeader>
{/*-- Header without a border --*/}
<IonHeader className="ion-no-border">
<IonToolbar>
<IonTitle>Header - No Border</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">My Navigation Bar</IonTitle>
</IonToolbar>
</IonHeader>
</IonContent>
</>
);
CopyCopied
import { Component, h } from '@stencil/core';
@Component({
tag: 'header-example',
styleUrl: 'header-example.css'
})
export class HeaderExample {
render() {
return [
<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>
];
}
}
CopyCopied
<template>
<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>
</template>
<script>
import {
IonBackButton,
IonButtons,
IonContent,
IonHeader,
IonTitle,
IonToolbar
} from '@ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
components: {
IonBackButton,
IonButtons,
IonContent,
IonHeader,
IonTitle,
IonToolbar
}
});
</script>
CopyCopied
プロパティ
collapse | |
---|---|
Description | Describes the scroll effect that will be applied to the header Typically used for Collapsible Large Titles |
Attribute | collapse |
Type | "condense" | undefined |
mode | |
Description | The mode determines which platform styles to use. |
Attribute | mode |
Type | "ios" | "md" |
translucent | |
Description | If Note: In order to scroll content behind the header, the |
Attribute | translucent |
Type | boolean |
Default | false |