Ionic CSS - List

Content

 

List (ion-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.

 
<!-- List of Text Items -->
<ion-list>
  <ion-item>
    <ion-label>Pokémon Yellow</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Mega Man X</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>The Legend of Zelda</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Pac-Man</ion-label>
  </ion-item>
  <ion-item>
    <ion-label>Super Mario World</ion-label>
  </ion-item>
</ion-list>

<!-- List of Input Items -->
<ion-list>
  <ion-item>
    <ion-label>Input</ion-label>
    <ion-input></ion-input>
  </ion-item>
  <ion-item>
    <ion-label>Toggle</ion-label>
    <ion-toggle slot="end"></ion-toggle>
  </ion-item>
  <ion-item>
    <ion-label>Radio</ion-label>
    <ion-radio slot="end"></ion-radio>
  </ion-item>
  <ion-item>
    <ion-label>Checkbox</ion-label>
    <ion-checkbox slot="start"></ion-checkbox>
  </ion-item>
</ion-list>

<!-- List of Sliding Items -->
<ion-list>
  <ion-item-sliding>
    <ion-item>
      <ion-label>Item</ion-label>
    </ion-item>
    <ion-item-options side="end">
      <ion-item-option (click)="unread(item)">Unread</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>

  <ion-item-sliding>
    <ion-item>
      <ion-label>Item</ion-label>
    </ion-item>
    <ion-item-options side="end">
      <ion-item-option (click)="unread(item)">Unread</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

 

Properties

  • inset
    • Description: If true, the list will have a 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" 

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>

 

List Header (ion-list-header)

ListHeader a header component for a list. Unlike ItemDivider, ListHeaders are styled to be stand-out from the rest of the list items.

 

<ion-list>
  <ion-list-header>
    <ion-label>Items</ion-label>
  </ion-list-header>
  <ion-item>Item 1</ion-item>
  <ion-item>Item 2</ion-item>
  <ion-item>Item 3</ion-item>
  <ion-item>Item 4</ion-item>
  <ion-item>Item 5</ion-item>
</ion-list>

 

Properties

  • color
    • Description: The color to use from your application's color palette. Default options are: "primary""secondary""tertiary""success""warning""danger""light""medium", and "dark"
    • Attribute: color
    • Type: string | undefined 
  • mode
    • Description: The mode determines which platform styles to use.
    • Attribute: mode
    • Type: "ios" | "md"