ion-header

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4导航条组件ion-header对项目进行布局。

ion-header官方文档地址:https://ionicframework.com/docs/api/header

Header is a parent component that holds the toolbar component. It's important to note that ion-header needs to be the one of the three root elements of a page

ion-header　用法(Usage)

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

  <ion-toolbar>
    <ion-title>Subheaderion-title>
  ion-toolbar>
ion-header>

<ion-content>ion-content>

import React from 'react';

import { IonHeader, IonContent, IonToolbar, IonButtons, IonBackButton, IonTitle } from '@ionic/react';

const Example: React.SFC<{}> = () => (
  <>
    <IonHeader>
      <IonToolbar>
        <IonButtons slot="start">
          <IonBackButton goBack={() => {}} />
        IonButtons>
        <IonTitle>My Navigation BarIonTitle>
      IonToolbar>

      <IonToolbar>
        <IonTitle>SubheaderIonTitle>
      IonToolbar>
    IonHeader>

    <IonContent />
  >
);

export default Example

ion-header　属性(Properties)

mode
Description	The mode determines which platform styles to use.
Attribute	`mode`
Type	`"ios" \| "md"`
translucent
Description	If `true`, the header will be translucent. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content.
Attribute	`translucent`
Type	`boolean`
Default	`false`

ion-header

ion-header 用法(Usage)

ion-header 属性(Properties)

mode

translucent

ion-header　用法(Usage)

ion-header　属性(Properties)