Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

List

ion-list

Improve this doc

The List is a widely used interface element in almost any mobile app, and can include content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.

Both the list, which contains items, and the list items themselves can be any HTML element.

Using the List and Item components make it easy to support various interaction modes such as swipe to edit, drag to reorder, and removing items.

Instance Members

closeSlidingItems()

Close any sliding items that are open.

Input Properties

Attr Type Details
mode string

The mode determines which platform styles to use. Possible values are: "ios", "md", or "wp". For more information, see Platform Styles.

sliding boolean

If true, the sliding items will be enabled.

Advanced

Enable the sliding items.

import { Component, ViewChild } from '@angular/core';
import { List } from 'ionic-angular';

@Component({...})
export class MyClass {
  @ViewChild(List) list: List;

  constructor() { }

  stopSliding() {
    this.list.enableSlidingItems(false);
  }
}

Sass Variables

Property Default Description
$list-ios-margin-top 10px

Margin top of the list

$list-ios-margin-right 0

Margin right of the list

$list-ios-margin-bottom 32px

Margin bottom of the list

$list-ios-margin-left 0

Margin left of the list

$list-inset-ios-margin-top 16px

Margin top of the inset list

$list-inset-ios-margin-right 16px

Margin right of the inset list

$list-inset-ios-margin-bottom 16px

Margin bottom of the inset list

$list-inset-ios-margin-left 16px

Margin left of the inset list

$list-inset-ios-border-radius 4px

Border radius of the inset list

$list-ios-header-padding-left $item-ios-padding-left

Padding left of the header in a list

$list-ios-header-border-bottom $hairlines-width solid $list-ios-border-color

Border bottom of the header in a list

$list-ios-header-font-size 1.2rem

Font size of the header in a list

$list-ios-header-font-weight 500

Font weight of the header in a list

$list-ios-header-letter-spacing .1rem

Letter spacing of the header in a list

$list-ios-header-text-transform uppercase

Text transform of the header in a list

$list-ios-header-color #333

Text color of the header in a list

$list-ios-header-background-color transparent

Background color of the header in a list

Property Default Description
$list-md-margin-top 16px

Margin top of the list

$list-md-margin-right 0

Margin right of the list

$list-md-margin-bottom 16px

Margin bottom of the list

$list-md-margin-left 0

Margin left of the list

$list-inset-md-margin-top 16px

Margin top of the inset list

$list-inset-md-margin-right 16px

Margin right of the inset list

$list-inset-md-margin-bottom 16px

Margin bottom of the inset list

$list-inset-md-margin-left 16px

Margin left of the inset list

$list-inset-md-border-radius 2px

Border radius of the inset list

$list-md-header-margin-bottom 13px

Margin bottom of the header in a list

$list-md-header-padding-left $item-md-padding-left

Padding left of the header in a list

$list-md-header-min-height 4.5rem

Minimum height of the header in a list

$list-md-header-border-top 1px solid $list-md-border-color

Border top of the header in a list

$list-md-header-font-size 1.4rem

Font size of the header in a list

$list-md-header-color #757575

Text color of the header in a list

Property Default Description
$list-wp-margin-top 16px

Margin top of the list

$list-wp-margin-right 0

Margin right of the list

$list-wp-margin-bottom 16px

Margin bottom of the list

$list-wp-margin-left 0

Margin left of the list

$list-inset-wp-margin-top 16px

Margin top of the inset list

$list-inset-wp-margin-right 16px

Margin right of the inset list

$list-inset-wp-margin-bottom 16px

Margin bottom of the inset list

$list-inset-wp-margin-left 16px

Margin left of the inset list

$list-inset-wp-border-radius 2px

Border radius of the inset list

$list-wp-header-padding-left $item-wp-padding-left

Padding left of the header in a list

$list-wp-header-border-bottom 1px solid $list-wp-border-color

Border bottom of the header in a list

$list-wp-header-font-size 2rem

Font size of the header in a list

$list-wp-header-color $list-wp-text-color

Text color of the header in a list

Related

List Component Docs

API

Native

General