Question

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

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

The Buttons component is a container element. Buttons placed in a toolbar should be placed inside of the <ion-buttons> element.

The <ion-buttons> element can be positioned inside of the toolbar using a named slot. The below chart has a description of each slot.

Slot	Description
secondary	Positions element to the left of the content in ios mode, and directly to the right in md mode.
primary	Positions element to the right of the content in ios mode, and to the far right in md mode.
start	Positions to the left of the content in LTR, and to the right in RTL.
end	Positions to the right of the content in LTR, and to the left in RTL.

ion-buttons　用法(Usage)

angularjavascriptreactvue

  
    
  
  Back Button



  
    
      
    
    
      
    
  
  Default Buttons
  
    
      
    
  



  
    
      
    
  
  Right side menu toggle
  
    
  
</ion-toolbar>

  
    
  
  Back Button



  
    
      
    
    
      
    
  
  Default Buttons
  
    
      
    
  



  
    
      
    
  
  Right side menu toggle
  
    
      
        
      
    
  
</ion-toolbar>

import React from 'react';

import { IonButtons, IonToolbar, IonBackButton, IonTitle, IonButton, IonIcon, IonMenuButton } from '@ionic/react';

const Example: React.SFC = () => (
  
    
      
         {}} />
      
      Back Button
    

    
      
        
          
        
         />
          
        
      
      Default Buttons
      
         />
          
        
      
    

    
      
         {}}>
          
        
      
      Right side menu toggle
      
        
      
    
  
);

export default Example;

  
    
      
    
    Back Button
  

  
    
      
        
      
      
        
      
    
    Default Buttons
    
      
        
      
    
  

  
    
      
        
      
    
    Right side menu toggle
    
      
    
  
</template>