List
ion-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 to apply to this component. Mode can be |
sliding | boolean |
shouldEnable whether the item-sliding should be enabled or not |
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 |