List

`ion-list`

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
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

iOS Material Design Windows Platform

Property	Default	Description
`$list-ios-margin-top`	`10px`	Margin top of the list
`$list-ios-margin-end`	`$list-ios-margin-right`	Margin end of the list
`$list-ios-margin-bottom`	`32px`	Margin bottom of the list
`$list-ios-margin-start`	`$list-ios-margin-left`	Margin start of the list
`$list-inset-ios-margin-top`	`16px`	Margin top of the inset list
`$list-inset-ios-margin-end`	`$list-inset-ios-margin-right`	Margin end of the inset list
`$list-inset-ios-margin-bottom`	`16px`	Margin bottom of the inset list
`$list-inset-ios-margin-start`	`$list-inset-ios-margin-left`	Margin start of the inset list
`$list-inset-ios-border-radius`	`4px`	Border radius of the inset list
`$list-ios-header-padding-start`	`$list-ios-header-padding-left`	Padding start 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-end`	`$list-md-margin-right`	Margin end of the list
`$list-md-margin-bottom`	`16px`	Margin bottom of the list
`$list-md-margin-start`	`$list-md-margin-left`	Margin start of the list
`$list-inset-md-margin-top`	`16px`	Margin top of the inset list
`$list-inset-md-margin-end`	`$list-inset-md-margin-right`	Margin end of the inset list
`$list-inset-md-margin-bottom`	`16px`	Margin bottom of the inset list
`$list-inset-md-margin-start`	`$list-inset-md-margin-left`	Margin start 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-start`	`$list-md-header-padding-left`	Padding start 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-end`	`$list-wp-margin-right`	Margin end of the list
`$list-wp-margin-bottom`	`16px`	Margin bottom of the list
`$list-wp-margin-start`	`$list-wp-margin-left`	Margin start of the list
`$list-inset-wp-margin-top`	`16px`	Margin top of the inset list
`$list-inset-wp-margin-end`	`$list-inset-wp-margin-right`	Margin end of the inset list
`$list-inset-wp-margin-bottom`	`16px`	Margin bottom of the inset list
`$list-inset-wp-margin-start`	`$list-inset-wp-margin-left`	Margin start of the inset list
`$list-inset-wp-border-radius`	`2px`	Border radius of the inset list
`$list-wp-header-padding-start`	`$list-wp-header-padding-left`	Padding start 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

List Component Docs