Question

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)

angularjavascriptreactvue

  
    
      
    
  




  
    
      
    
  




  
    
      
      
    
  




  
    
      
    
  




  
    
      
      
    
  
</ion-header>

  
    
      
    
  




  
    
      
    
  




  
    
      
    
  




  
    
      
    
  




  
    
      
      
    
  
</ion-header>

import React from 'react';

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

const Example: React.SFC = () => (
  
    {/*-- Default back button --*/}
    
      
        
           {}} />
        
      
    

    {/*-- Back button with a default href --*/}
    
      
        
           {}} defaultHref="home" />
        
      
    

    {/*-- Back button with custom text and icon --*/}
    
      
        
           {}}
            text="buttonText"
            icon="buttonIcon"
          />
        
      
    

    {/*-- Back button with no text and custom icon --*/}
    
      
        
           {}} text="" icon="add" />
        
      
    

    {/*-- Danger back button next to a menu button --*/}
    
      
        
          
           {}} color="danger" />
        
      
    
  
);

export default Example;

  
  
    
      
        
      
    
  

  
  
    
      
        
      
    
  

  
  
    
      
        
        
      
    
  

  
  
    
      
        
      
    
  

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