ion-back-button
Ionic4项目中我们可以使用Ionic4导航条组件ion-back-button对项目进行布局。 ion-back-button官方文档地址:https://ionicframework.com/docs/api/back-buttonThe 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: |
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 |