Question

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

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

Items are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements. Generally they are placed in a list with other items. Items can be swiped, deleted, reordered, edited, and more.

Clickable Items

An item is considered "clickable" if it has an href or button property set. Clickable items have a few visual differences that indicate they can be interacted with. For example, a clickable item receives the ripple effect upon activation in md mode, has a highlight when activated in ios mode, and has a detail arrow by default in ios mode.

ion-item　箭头(Detail Arrows)

By default clickable items will display a right arrow icon on ios mode. To hide the right arrow icon on clickable elements, set the detail property to false. To show the right arrow icon on an item that doesn't display it naturally, set the detail property to true.

ion-item　位置(Item Placement)

Item uses named slots in order to position content. This logic makes it possible to write a complex item with simple, understandable markup without having to worry about styling and positioning the elements.

The below chart details the item slots and where it will place the element inside of the item:

Slot	Description
start	Placed to the left of all other content in LTR, and to the right in RTL.
end	Placed to the right of all other content in LTR, and to the left in RTL.
none	Placed inside of the input wrapper.

Text Alignment

Items left align text and add an ellipsis when the text is wider than the item. See the Utility Attributes Documentation for attributes that can be added to <ion-item> to transform the text.

ion-item　输入框高度设置(Input Highlight)

Highlight Height

Items containing an input will highlight the bottom border of the input with a different color when focused, valid, or invalid. By default, md items have a highlight with a height set to 2px and ios has no highlight (technically the height is set to 0). The height can be changed using the --highlight-height CSS property. To turn off the highlight, set this variable to 0. For more information on setting CSS properties, see the theming documentation.

Highlight Color

The highlight color changes based on the item state, but all of the states use Ionic colors by default. When focused, the input highlight will use the primary color. If the input is valid it will use the success color, and invalid inputs will use the danger color. See the ion-item中的CSS 自定义属性 section below for the highlight color variables.

ion-item　用法(Usage)

angularjavascriptreactvue

Basic ion-item　用法(Usage)

  
    Item
  




  
    Button Item
  




  
    Anchor Item
  



  
    Secondary Color Item
  
</ion-item>

ion-item　箭头(Detail Arrows)

  
    Standard Item with Detail Arrow
  



  
    Button Item with Detail Arrow
  



  
    Anchor Item with no Detail Arrow
  
</ion-item>

List Items

  
    
      Item
    
  

  
    
      No Lines Item
    
  

  
    
    Multiline text that should wrap when it is too long
    to fit on one line in the item.
    
  

  
    
      
        
H3 Primary Title
      
      
Paragraph line 1
      
        
Paragraph line 2 secondary
      
    
  

  
    
      Item with Full Lines
    
  

</ion-list>

Item Lines

  Item Lines Inset




  Item Lines Full




  Item Lines None




  
    Full Lines Item 1
  

  
    Full Lines Item 2
  




  
    Inset Lines Item 1
  

  
    Inset Lines Item 2
  




  
    No lines Item 1
  

  
    No lines Item 2
  

  
    No lines Item 3
  
</ion-list>

Media Items

  
    
  
  
    Avatar Start, Button Item
  



  
    Thumbnail End, Anchor Item
  
  
    
  



  
    
  
  
    
H2 Title Text
    
Button on right
  
  View



  
    
  
  
    
H3 Title Text
    
Icon on right
  
  
</ion-item>

Buttons in Items

  
    Start
  
  Button Start/End
  
    End
  



  
    Start Icon
    
  
  Buttons with Icons
  
    
    End Icon
  



  
    
  
  Icon only Buttons
  
    
  
</ion-item>

Icons in Items

  
    Icon End
  
  



  
    Large Icon End
  
  



  
    Small Icon End
  
  



  
  
    Icon Start
  



  
    Two Icons End
  
  
  
</ion-item>

Item Inputs

  Datetime
  



  Select
  
    No Game Console
    NES
    Nintendo64
    PlayStation
    Sega Genesis
    Sega Saturn
    SNES
  



  Toggle
  



  Floating Input
  



  Input (placeholder)
  



  Checkbox
  



  Range</ion-lab