ion-list

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4列表组件ion-list对项目进行布局。ion-list中有ionic ion-list 用法(Usage) ,ionic ion-list 属性(Properties) ,ionic ion-list 内置方法(Methods)等

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)

angular javascript

<ion-list>
  <ion-item>
    <ion-label>Pokémon Yellowion-label>
  ion-item>
  <ion-item>
    <ion-label>Mega Man Xion-label>
  ion-item>
  <ion-item>
    <ion-label>The Legend of Zeldaion-label>
  ion-item>
  <ion-item>
    <ion-label>Pac-Manion-label>
  ion-item>
  <ion-item>
    <ion-label>Super Mario Worldion-label>
  ion-item>
ion-list>


<ion-list>
  <ion-item>
    <ion-label>Inpution-label>
    <ion-input>ion-input>
  ion-item>
  <ion-item>
    <ion-label>Toggleion-label>
    <ion-toggle slot="end">ion-toggle>
  ion-item>
  <ion-item>
    <ion-label>Radioion-label>
    <ion-radio slot="end">ion-radio>
  ion-item>
  <ion-item>
    <ion-label>Checkboxion-label>
    <ion-checkbox slot="start">ion-checkbox>
  ion-item>
ion-list>


<ion-list>
  <ion-item-sliding>
    <ion-item>
      <ion-label>Itemion-label>
    ion-item>
    <ion-item-options side="end">
      <ion-item-option (click)="unread(item)">Unreadion-item-option>
    ion-item-options>
  ion-item-sliding>

  <ion-item-sliding>
    <ion-item>
      <ion-label>Itemion-label>
    ion-item>
    <ion-item-options side="end">
      <ion-item-option (click)="unread(item)">Unreadion-item-option>
    ion-item-options>
  ion-item-sliding>
ion-list>

<ion-list>
  <ion-item>
    <ion-label>Pokémon Yellowion-label>
  ion-item>
  <ion-item>
    <ion-label>Mega Man Xion-label>
  ion-item>
  <ion-item>
    <ion-label>The Legend of Zeldaion-label>
  ion-item>
  <ion-item>
    <ion-label>Pac-Manion-label>
  ion-item>
  <ion-item>
    <ion-label>Super Mario Worldion-label>
  ion-item>
ion-list>


<ion-list>
  <ion-item>
    <ion-label>Inpution-label>
    <ion-input>ion-input>
  ion-item>
  <ion-item>
    <ion-label>Toggleion-label>
    <ion-toggle slot="end">ion-toggle>
  ion-item>
  <ion-item>
    <ion-label>Radioion-label>
    <ion-radio slot="end">ion-radio>
  ion-item>
  <ion-item>
    <ion-label>Checkboxion-label>
    <ion-checkbox slot="start">ion-checkbox>
  ion-item>
ion-list>


<ion-list>
  <ion-item-sliding>
    <ion-item>
      <ion-label>Itemion-label>
    ion-item>
    <ion-item-options side="end">
      <ion-item-option onClick="unread(item)">Unreadion-item-option>
    ion-item-options>
  ion-item-sliding>

  <ion-item-sliding>
    <ion-item>
      <ion-label>Itemion-label>
    ion-item>
    <ion-item-options side="end">
      <ion-item-option onClick="unread(item)">Unreadion-item-option>
    ion-item-options>
  ion-item-sliding>
ion-list>

ion-list 属性(Properties)

inset

Description

If true, the list will have margin around it and rounded corners.

Attribute inset
Type boolean

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