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

iOS Material Design Windows Platform

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

List Component Docs