ion-back-button

概要(CONTENTS)

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

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

The back button navigates back in the app's history upon click. It is smart enough to know what to render based on the mode and when to show based on the navigation stack.

To change what is displayed in the back button, use the text and icon properties.

ion-back-button 用法(Usage)


<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button>ion-back-button>
    ion-buttons>
  ion-toolbar>
ion-header>


<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button defaultHref="home">ion-back-button>
    ion-buttons>
  ion-toolbar>
ion-header>


<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button
          [text]="buttonText"
          [icon]="buttonIcon">
      ion-back-button>
    ion-buttons>
  ion-toolbar>
ion-header>


<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button text="" icon="add">ion-back-button>
    ion-buttons>
  ion-toolbar>
ion-header>


<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button>ion-menu-button>
      <ion-back-button color="danger">ion-back-button>
    ion-buttons>
  ion-toolbar>
ion-header>

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button>ion-back-button>
    ion-buttons>
  ion-toolbar>
ion-header>


<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button default-href="home">ion-back-button>
    ion-buttons>
  ion-toolbar>
ion-header>


<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button text="Volver" icon="close">ion-back-button>
    ion-buttons>
  ion-toolbar>
ion-header>


<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button text="" icon="add">ion-back-button>
    ion-buttons>
  ion-toolbar>
ion-header>


<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button>ion-menu-button>
      <ion-back-button color="danger">ion-back-button>
    ion-buttons>
  ion-toolbar>
ion-header>
import React from 'react';

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

const Example: React.SFC<{}> = () => (
  <>
    {/*-- Default back button --*/}
    <IonHeader>
      <IonToolbar>
        <IonButtons slot="start">
          <IonBackButton goBack={() => {}} />
        IonButtons>
      IonToolbar>
    IonHeader>

    {/*-- Back button with a default href --*/}
    <IonHeader>
      <IonToolbar>
        <IonButtons slot="start">
          <IonBackButton goBack={() => {}} defaultHref="home" />
        IonButtons>
      IonToolbar>
    IonHeader>

    {/*-- Back button with custom text and icon --*/}
    <IonHeader>
      <IonToolbar>
        <IonButtons slot="start">
          <IonBackButton
            goBack={() => {}}
            text="buttonText"
            icon="buttonIcon"
          />
        IonButtons>
      IonToolbar>
    IonHeader>

    {/*-- Back button with no text and custom icon --*/}
    <IonHeader>
      <IonToolbar>
        <IonButtons slot="start">
          <IonBackButton goBack={() => {}} text="" icon="add" />
        IonButtons>
      IonToolbar>
    IonHeader>

    {/*-- Danger back button next to a menu button --*/}
    <IonHeader>
      <IonToolbar>
        <IonButtons slot="start">
          <IonMenuButton />
          <IonBackButton goBack={() => {}} color="danger" />
        IonButtons>
      IonToolbar>
    IonHeader>
  >
);

export default Example;
<template>
  
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-back-button>ion-back-button>
      ion-buttons>
    ion-toolbar>
  ion-header>

  
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-back-button defaultHref="home">ion-back-button>
      ion-buttons>
    ion-toolbar>
  ion-header>

  
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-back-button
            :text="buttonText"
            :icon="buttonIcon">
        ion-back-button>
      ion-buttons>
    ion-toolbar>
  ion-header>

  
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-back-button text="" icon="add">ion-back-button>
      ion-buttons>
    ion-toolbar>
  ion-header>

  
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-menu-button>ion-menu-button>
        <ion-back-button color="danger">ion-back-button>
      ion-buttons>
    ion-toolbar>
  ion-header>
template>

ion-back-button 属性(Properties)

color

Description

The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.

Attribute color
Type string | undefined

defaultHref

Description

The url to navigate back to by default when there is no history.

Attribute default-href
Type string | undefined

icon

Description

The icon name to use for the back button.

Attribute icon
Type null | string | undefined

mode

Description

The mode determines which platform styles to use.

Attribute mode
Type "ios" | "md"

text

Description

The text to display in the back button.

Attribute text
Type null | string | undefined

ion-back-button中的CSS 自定义属性

Name Description
--background Background of the button
--border-radius Border radius of the button
--color Text color of the button
--icon-font-size Font size of the button icon
--icon-font-weight Font weight of the button icon
--icon-margin-bottom Margin bottom of the button icon
--icon-margin-end Margin end of the button icon
--icon-margin-start Margin start of the button icon
--icon-margin-top Margin top of the button icon
--icon-padding-bottom Padding bottom of the button icon
--icon-padding-end Padding end of the button icon
--icon-padding-start Padding start of the button icon
--icon-padding-top Padding top of the button icon
--margin-bottom Margin bottom of the button
--margin-end Margin end of the button
--margin-start Margin start of the button
--margin-top Margin top of the button
--min-height Minimum height of the button
--min-width Minimum width of the button
--opacity Opacity of the button
--padding-bottom Padding bottom of the button
--padding-end Padding end of the button
--padding-start Padding start of the button
--padding-top Padding top of the button
--ripple-color Color of the button ripple effect
--transition Transition of the button