List

Directives for creating material designed lists and list-groups.

Single Line List Demo

Connectivity

  • network_wifi Wi-Fi signal_wifi_4_bar
  • bluetooth Bluetooth bluetooth_searching
  • data_usage Data Usage show_chart

Folders

  • insert_drive_file Photos star
  • insert_drive_file Movies star

Customize list:


Two Line List Demo

Connectivity

  • network_wifi Wi-Fi Strong signalsignal_wifi_4_bar
  • bluetooth Bluetooth Searching for signalbluetooth_searching
  • data_usage Data Usage Inside your bundleshow_chart

Folders

  • insert_drive_file Photos 21 new photosstar
  • insert_drive_file Movies 2 new moviesstar

Customize list:

API

Directive: MdcListDividerDirective

Selector: [mdcListDivider]

Directive for a separator in a list (between list items), or as a separator between lists. This directive also adds a "role" attribute to its element (depending on the context where the divider is used).

PropertyDescription
@Input()
inset
any

When this input is defined and does not have value false, the divider is styled with an inset.

@Input()
padded
any

When this input is defined and does not have value false, the divider leaves gaps on each site to match the padding of mdcListItemMeta.

Directive: MdcListItemDirective

Selector: [mdcListItem]

Directive for the items of a material list. This directive should be used for the direct children of a MdcListDirective.

PropertyDescription
@Input()
value

When a list is used inside an mdcMenu, or mdcSelect, this property can be used to assign a value to this choice/selection item.

@Input()
disabled
any

When a list is used inside an mdcMenu, or mdcSelect, this property can be used to disable the item. When disabled, the list-item will have the aria-disabled attribute, and for mdcMenu, or mdcSelect will set the tabindex to -1.

@Input()
selected
any

When this value is set to a value other than false, the list item will be styled in a selected state. Note: selection and activation are different things. Multiple items in a list can be selected, only one can be activated. Selection is likely to change soon, activation is more permanent than selection.

@Input()
activated
any

When this value is set to a value other than false, the list item will be styled in an activated state. Note: selection and activation are different things. Multiple items in a list can be selected, only one can be activated. Selection is likely to change soon, activation is more permanent than selection.

Directive: MdcListItemTextDirective

Selector: [mdcListItemText]

Directive to mark the first line of an item with "two line list" styling according to the Material Design spec. This directive, if used, should be the child of an MdcListItemDirective. Using this directive inside any mdcListItem will put the list "two line" mode.

Directive: MdcListItemSecondaryTextDirective

Selector: [mdcListItemSecondaryText]

Directive for the secondary text of an item with "two line list" styling.

Directive: MdcListItemGraphicDirective

Selector: [mdcListItemGraphic]

Directive for the start detail item of a list item. This directive, if used, should be the child of an MdcListItemDirective.

Directive: MdcListItemMetaDirective

Selector: [mdcListItemMeta]

Directive for the end detail item of a list item. This directive, if used, should be the child of an MdcListItemDirective.

Directive: MdcListDirective

Selector: [mdcList]

Directive for a material list. The children of this directive should either be MdcListItemDirective, or MdcListDividerDirective elements. This directive can optionally be contained in a MdcListGroupDirective, in a MdcMenuDirective, or in a MdcSelectDirective.

PropertyDescription
@Input()
dense
any

When this input is defined and does not have value false, the list will be styled more compact.

@Input()
nonInteractive
any

When this input is defined and does not have value false, interactivity affordances for the list will be disabled.

@Input()
avatarList
any

When this input is defined and does not have value false, elements with directive mdcListItemGraphic will be styled for avatars: large, circular elements that lend themselves well to contact images, profile pictures, etc.

Directive: MdcListGroupSubHeaderDirective

Selector: [mdcListGroupSubHeader]

Directive for a header inside a list group (mdcListGroup) directive.

Directive: MdcListGroupDirective

Selector: [mdcListGroup]

Directive for a material designed list group, grouping several mdcList lists. List groups should contain elements with mdcListGroupSubHeader, and mdcList directives.