Question

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

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

Lists are made up of multiple rows of items which can contain text, buttons, toggles, icons, thumbnails, and much more. Lists generally contain items with similar data content, such as images and text.

Lists support several interactions including swiping items to reveal options, dragging to reorder items within the list, and deleting items.

ion-list　用法(Usage)

angularjavascriptreactvue

  
    Pokémon Yellow
  
  
    Mega Man X
  
  
    The Legend of Zelda
  
  
    Pac-Man
  
  
    Super Mario World
  




  
    Input
    
  
  
    Toggle
    
  
  
    Radio
    
  
  
    Checkbox
    
  




  
    
      Item
    
    
      Unread
    
  

  
    
      Item
    
    
      Unread
    
  
</ion-list>

  
    Pokémon Yellow
  
  
    Mega Man X
  
  
    The Legend of Zelda
  
  
    Pac-Man
  
  
    Super Mario World
  




  
    Input
    
  
  
    Toggle
    
  
  
    Radio
    
  
  
    Checkbox
    
  




  
    
      Item
    
    
      Unread
    
  

  
    
      Item
    
    
      Unread
    
  
</ion-list>

import React from 'react';

import { IonList, IonItem, IonLabel, IonInput, IonToggle, IonRadio, IonCheckbox, IonItemSliding, IonItemOption, IonItemOptions } from '@ionic/react';

const Example: React.SFC = () => (
  
    {/*-- List of Text Items --*/}
    
      
        Pokémon Yellow
      
      
        Mega Man X
      
      
        The Legend of Zelda
      
      
        Pac-Man
      
      
        Super Mario World
      
    

    {/*-- List of Input Items --*/}
    
      
        Input
        
      
      
        Toggle
        
      
      
        Radio
        
      
      
        Checkbox
        
      
    

    {/*-- List of Sliding Items --*/}
    
      
        
          Item
        
        
           {}}>Unread
        
      

      
        
          Item
        
        
           {}}>Unread
        
      
    
  
);

export default Example;

  
  
    
      Pokémon Yellow
    
    
      Mega Man X
    
    
      The Legend of Zelda
    
    
      Pac-Man
    
    
      Super Mario World
    
  

  
  
    
      Input
      
    
    
      Toggle
      
    
    
      Radio
      
    
    
      Checkbox
      
    
  

  
  
    
      
        Item
      
      
        Unread
      
    

    
      
        Item
      
      
        Unread
      
    
  
</template>

ion-list　属性(Properties)

inset
Description	If true, the list will have margin around it and rounded corners.
Attribute	inset
Type	boolean
Default	false
lines
Description	How the bottom border should be displayed on all items.
Attribute	lines
Type	"full" | "inset" | "none" | undefined
mode
Description	The mode determines which platform styles to use.
Attribute	mode
Type	"ios" | "md"

ion-list　内置方法(Methods)

closeSlidingItems
Description	If ion-item-sliding are used inside the list, this method closes any open sliding item. Returns true if an actual ion-item-sliding is closed.
Signature	closeSlidingItems() => Promise<boolean>