Question

Ionic4项目中我们可以使用Ionic4列表项组件ion-item-group对项目进行布局。

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

Item groups are containers that organize similar items together. They can contain item dividers to divide the items into multiple sections.

ion-item-group　用法(Usage)

angularjavascriptreactvue

  
    A
  

  
    Angola
  
  
    Argentina
  
  
    Armenia
  



  
    B
  

  
    Bangladesh
  
  
    Belarus
  
  
    Belgium
  





  
    
      Fruits
    
  

  
    
      
        
Grapes
      
    
    
      
        Favorite
      
    
  

  
    
      
        
Apples
      
    
    
      
        Favorite
      
    
  



  
    
      Vegetables
    
  

  
    
      
        
Carrots
      
    
    
      
        Favorite
      
    
  

  
    
      
        
Celery
      
    
    
      
        Favorite
      
    
  
</ion-item-group>

  
    A
  

  
    Angola
  
  
    Argentina
  
  
    Armenia
  



  
    B
  

  
    Bangladesh
  
  
    Belarus
  
  
    Belgium
  





  
    
      Fruits
    
  

  
    
      
        
Grapes
      
    
    
      
        Favorite
      
    
  

  
    
      
        
Apples
      
    
    
      
        Favorite
      
    
  



  
    
      Vegetables
    
  

  
    
      
        
Carrots
      
    
    
      
        Favorite
      
    
  

  
    
      
        
Celery
      
    
    
      
        Favorite
      
    
  
</ion-item-group>

import React from 'react';

import { IonItemGroup, IonItemDivider, IonLabel, IonItem, IonItemSliding, IonItemOptions, IonItemOption } from '@ionic/react';

const Example: React.SFC = () => (
  
    
      
        A
      

      
        Angola
      
      
        Argentina
      
      
        Armenia
      
    

    
      
        B
      

      
        Bangladesh
      
      
        Belarus
      
      
        Belgium
      
    


    {/*-- They can also be used to group sliding items --*/}
    
      
        
          Fruits
        
      

      
        
          
            
Grapes
          
        
        
          
            Favorite
          
        
      

      
        
          
            
Apples
          
        
        
          
            Favorite
          
        
      
    

    
      
        
          Vegetables
        
      

      
        
          
            
Carrots
          
        
        
          
            Favorite
          
        
      

      
        
          
            
Celery
          
        
        
          
            Favorite
          
        
      
    
  
);

export default Example;

  
    
      A
    

    
      Angola
    
    
      Argentina
    
    
      Armenia
    
  

  
    
      B
    

    
      Bangladesh
    
    
      Belarus
    
    
      Belgium
    
  


  
  
    
      
        Fruits
      
    

    
      
        
          
Grapes
        
      
      
        
          Favorite
        
      
    

    
      
        
          
Apples
        
      
      
        
          Favorite
        
      
    
  

  
    
      
        Vegetables
      
    

    
      
        
          
Carrots
        
      
      
        
          Favorite
        
      
    

    
      
        
          
Celery