Blox Material v1.0.0

List

Directives for creating material designed lists and list-groups.

Single Line List

Connectivity

  • network_wifiWi-Fisignal_wifi_4_bar
  • bluetoothBluetoothbluetooth_searching
  • data_usageData Usageshow_chart

Folders

  • insert_drive_filePhotosstar
  • insert_drive_fileMoviesstar

Customize list:


Selection mode:


Two Line List

Connectivity

  • network_wifiWi-FiStrong signalsignal_wifi_4_bar
  • bluetoothBluetoothSearching for signalbluetooth_searching
  • data_usageData UsageInside your bundleshow_chart

Folders

  • insert_drive_filePhotos21 new photosstar
  • insert_drive_fileMovies2 new moviesstar

Customize list:

Selection mode:

API

Directive: MdcListDividerDirective

Selector: [mdcListDivider]

Directive for a separator in a list (between list items), or as a separator in a list group (between lists).

Accessibility

This directive adds a role=separator attribute when it is used as a separator between list items.

Property Description
@Input()
inset
boolean

When this input is defined and does not have value false, the divider is styled with an inset.
@Input()
padded
boolean

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 (list items) of an mdcList.

Children

  • Use mdcListItemText for the text content of the list. One line and two line lists are supported. See mdcListItemText for more info.
  • Optional: mdcListItemGraphic for a starting detail (typically icon or image).
  • Optional: mdcListItemMeta for the end detail (typically icon or image).

Accessibility

  • All items in a list will get a tabindex=-1 attribute to make them focusable, but not tabbable. The focused, active/current, or first (in that preference) item will get tabindex=0, so that the list can be tabbed into. Keyboard navigation between list items is done with arrow, home, and end keys. Keyboard based selection of an item (when items are selectable), can be done with the enter or space key.
  • The role attribute with be set to option for single selection lists, checkbox for list items that can be selected with embedded checkbox inputs, radio for for list items that can be selected with embedded radio inputs, menuitem when the list is part of an mdcMenu. Otherwise there will be no role attribute, so the default role for a standard list item (role=listitem) will apply.
  • Single selection lists set the aria-selected or aria-current attributes, based on the chosen selectionMode of the list. Please see WAI-ARIA aria-current for recommendations.
  • aria-checked will be set for lists with embedded checkbox or radio inputs.
  • Disabled list items will be included in the keyboard navigation. This follows focusability of disabled controls recommendations in the ARIA practices article. Exception: when the list is part of an mdcMenu or mdcSelect, disabled items are not included in the keyboard navigation.
  • As the user navigates through the list, any button and anchor elements within list items that are not focused will receive tabindex=-1. When the list item receives focus, those elements will receive tabindex=0. This allows for the user to tab through list item elements and then tab to the first element after the list.
  • Lists are interactive by default (unless nonInteractive is set on the mdcList). List items will show ripples when interacted with.
  • aria-disabled will be set for disabled list items. When the list uses checkbox or radio inputs to control the checked state, the disabled state will mirror the state of those inputs.
Property Description
@Output()
action
EventEmitter<void>

Event emitted for user action on the list item, including keyboard and mouse actions. This will not emit when the mdcList has nonInteractive set.
@Output()
selectedChange
EventEmitter<boolean>

Event emitted when the active state of a list item in a single-selection list (selectionMode is single or active) is changed. This event does not emit for lists that do not have the mentioned selectionMode, and therefore does also not emit for lists where the active/selected state is controlled by embedded checkbox or radio inputs. (Note that for lists controlled by an mdcSelect, the selectionMode will be either single or active).
@Input()
disabled
boolean

If set to a value other than false, the item will be disabled. This affects styling and selectability, and may affect keyboard navigation. This input is ignored for lists where the selection is controlled by embedded checkbox or radio inputs. In those cases the disabled state of the input will be used instead.
@Input()
value
string

Assign this field with a value that should be reflected in the value property of a selectionMode=single|active or and mdcMenu or mdcSelect for the active property. Ignored for lists that don't offer a selection, and for lists that use checkbox/radio inputs for selection.
@Input()
selected
boolean

This input can be used to change the active or selected state of the item. This should not be used for lists inside an mdcSelect/mdcMenu, or for lists that use checkbox/radio inputs for selection. Depending on the selectionMode of the list this will update the selected or active state of the item.

Directive: MdcListItemTextDirective

Selector: [mdcListItemText]

Directive to mark the text portion(s) of an mdcListItem. This directive should be the child of an mdcListItem. For single line lists, the text can be added directly to this directive. For two line lists, add mdcListItemPrimaryText and mdcListItemSecondaryText children.

Directive: MdcListItemPrimaryTextDirective

Selector: [mdcListItemPrimaryText]

Directive to mark the first line of an item with "two line list" styling. This directive, if used, should be the child of an mdcListItemText. Using this directive will put the list "two line" mode.

Directive: MdcListItemSecondaryTextDirective

Selector: [mdcListItemSecondaryText]

Directive for the secondary text of an item with "two line list" styling. This directive, if used, should be the child of an mdcListItemText, and come after the mdcListItemPrimaryText.

Directive: MdcListItemGraphicDirective

Selector: [mdcListItemGraphic]

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

Directive: MdcListItemMetaDirective

Selector: [mdcListItemMeta]

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

Directive: MdcListDirective

Selector: [mdcList]

Lists are continuous, vertical indexes of text or images. They can be interactive, and may support selaction/activation of list of items. Single-line and Two-line lists are supported, as well as starting and end details (images or controls) on a list. A list contains mdcListItem children, and may also contain mdcListDivider children.

A list can be used by itself, or contained inside mdcListGroup, mdcMenu, or mdcSelect.

Accessibility

  • See Accessibility section of mdcListItem for navigation, focus, and tab(index) affordances.
  • The role attribute will be set to listbox for single selection lists (selectionMode is single or active), to radiogroup when selection is triggered by embedded radio inputs, to checkbox when selection is triggered by embedded checkbox inputs, to menu when used inside mdcMenu. Otherwise there will be no role attribute, so the default role for a standard list (role=list) will apply.
  • You should set an appropriate label for checkbox based selection lists. The label will be reflected to the aria-label attribute.
Property Description
@Input()
dense
boolean

When this input is defined and does not have value false, the list will be styled more compact.
@Input()
selectionMode
"single" | "active"

When set to single or active, the list will act as a single-selection-list. This enables the enter and space keys for selecting/deselecting a list item, and sets the appropriate accessibility options. When not set, the list will not act as a single-selection-list.

When using single, the active selection is announced with aria-selected attributes on the list elements. When using active, the active selection is announced with aria-current. See WAI-ARIA aria-current article for recommendations on usage.

The selectionMode is ignored when there are embedded checkbox or radio inputs inside the list, in which case those inputs will trigger selection of list items.
@Input()
nonInteractive
boolean

When this input is defined and does not have value false, the list will be made non-interactive. Users will not be able to interact with list items, and the styling will reflect this (e.g. by not adding ripples to the items).
@Input()
wrapFocus
boolean

When this input is defined and does not have value false, focus will wrap from last to first and vice versa when using keyboard navigation through list items.
@Input()
avatarList
boolean

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. Lists may be separated by mdcListSeparator directives.