List

List

[toc]

概述

OVERVIEW

<mat-list>是一个封装并格式化一系列行项的容器组件。作为基础的列表组件,提供了Material Design样式,但没有自己的行为。

<mat-list> is a container component that wraps and formats a series of line items. As the base list component, it provides Material Design styling, but no behavior of its own.

简单列表

Simple lists

一个<mat-list>元素包含多个<mat-list-item>元素。

An <mat-list> element contains a number of <mat-list-item> elements.

<mat-list>
 <mat-list-item> Pepper </mat-list-item>
 <mat-list-item> Salt </mat-list-item>
 <mat-list-item> Paprika </mat-list-item>
</mat-list>

导航列表

Navigation lists

使用mat-nav-list标签来用列表导航(例如有锚点标签的列表)。

Use mat-nav-list tags for navigation lists (i.e. lists that have anchor tags).

简单的导航列表可直接在锚点标签元素上使用mat-list-item属性。

Simple navigation lists can use the mat-list-item attribute on anchor tag elements directly:

<mat-nav-list>
   <a mat-list-item href="..." *ngFor="let link of links"> {{ link }} </a>
</mat-nav-list>

对于更复杂的导航列表(例如每个选项有多个目标),可在<mat-list-item>中封装锚点元素。

For more complex navigation lists (e.g. with more than one target per item), wrap the belement in an <mat-list-item>.

<mat-nav-list>
  <mat-list-item *ngFor="let link of links">
     <a matLine href="...">{{ link }}</a>
     <button mat-icon-button (click)="showInfo(link)">
        <mat-icon>info</mat-icon>
     </button>
  </mat-list-item>
</mat-nav-list>

可选列表

Selection lists

可选列表提供了一个可选择值的接口,每个列表项都是备选项。

A selection list provides an interface for selecting values, where each list item is an option.

在可选列表中的备选项不能包含多余的交互控制,例如按钮和锚点等。

The options within a selection-list should not contain further interactive controls, such as buttons and anchors.

多行列表

Multi-line lists

对于每个列表项需要多行的列表,用matLine属性注释每一行。可以使用任意一个适合DOM继承的头标签(例如本例中的<h3>)。

For lists that require multiple lines per item, annotate each line with an matLine attribute. Whichever heading tag is appropriate for your DOM hierarchy should be used (not necessarily <h3> as shown in the example).



{{message.from}}

{{message.subject}}
— {{message.content}}


<!-- three line list -->
<mat-list>
  <mat-list-item *ngFor="let message of messages">
    <h3 matLine> {{message.from}} </h3>
    <p matLine> {{message.subject}} </p>
    <p matLine class="demo-2"> {{message.content}} </p>
  </mat-list-item>
</mat-list>

列表图标

Lists with icons

使用matListIcon属性,可在列表项中添加一个图标。

To add an icon to your list item, use the matListIcon attribute.

<mat-list>
  <mat-list-item *ngFor="let message of messages">
    <mat-icon matListIcon>folder</mat-icon>
    <h3 matLine> {{message.from}} </h3>
    <p matLine>
      <span> {{message.subject}} </span>
      <span class="demo-2"> -- {{message.content}} </span>
    </p>
  </mat-list-item>
</mat-list>

列表头像

Lists with avatars

使用matListAvatar增加一个图像标签,可以引入一个头像图像。

To include an avatar image, add an image tag with an matListAvatar attribute.

<mat-list>
  <mat-list-item *ngFor="let message of messages">
    <img matListAvatar src="..." alt="...">
    <h3 matLine> {{message.from}} </h3>
    <p matLine>
      <span> {{message.subject}} </span>
      <span class="demo-2"> -- {{message.content}} </span>
    </p>
  </mat-list-item>
</mat-list>

密集列表

Dense lists

列表同样适用于“密集布局”模式,此模式下会缩小字体大小与列表高度来适应可展示更新信息的UI。可在主mat-list标签中增加dense属性来启用此模式。

Lists are also available in “dense layout” mode, which shrinks the font size and height of the list to suit UIs that may need to display more information. To enable this mode, add a dense attribute to the main mat-list tag.

<mat-list dense>
 <mat-list-item> Pepper </mat-list-item>
 <mat-list-item> Salt </mat-list-item>
 <mat-list-item> Paprika </mat-list-item>
</mat-list>

列表区域

Lists with multiple sections

matSubheader属性注释一个头标签,可在列表中增加副标题。使用<mat-divider>可以增加分割线。

Subheader can be added to a list by annotating a heading tag with an matSubheader attribute. To add a divider, use <mat-divider>.

<mat-list>
   <h3 matSubheader>Folders</h3>
   <mat-list-item *ngFor="let folder of folders">
      <mat-icon matListIcon>folder</mat-icon>
      <h4 matLine>{{folder.name}}</h4>
      <p matLine class="demo-2"> {{folder.updated}} </p>
   </mat-list-item>
   <mat-divider></mat-divider>
   <h3 matSubheader>Notes</h3>
   <mat-list-item *ngFor="let note of notes">
      <mat-icon matListIcon>note</mat-icon>
      <h4 matLine>{{note.name}}</h4>
      <p matLine class="demo-2"> {{note.updated}} </p>
   </mat-list-item>
</mat-list>

无障碍

Accessibility

默认列表会在纯装饰性的风格下使用,因此没有角色,ARIA属性和键盘快捷键。等同于在页面中有多个元素。任何在列表中的交互内容需要基于应用的特定工作流来指定合适的无障碍方式。

By default, the list assumes that it will be used in a purely decorative fashion and thus sets no roles, ARIA attributes, or keyboard shortcuts. This is equivalent to having a sequence of elements on the page. Any interactive content within the list should be given an appropriate accessibility treatment based on the specific workflow of your application.

如果列表用来表示一系列的非交互内容项,则每个列表元素需要指定role="list",并且每个列表项需要指定role="listitem"

If the list is used to present a list of non-interactive content items, then the list element should be given role="list" and each list item should be given role="listitem".

API

列表(List)的API参考

import {MatListModule} from '@angular/material/list';

指令

Directives

MatListDivider

列表中列表项之间的分割。

Divider between items within a list.

Selector: mat-divider

MatNavList

一个Material Design的列表组件。

A Material Design list component.

Selector: mat-nav-list

Exported as: matNavList

MatList

Selector: mat-list

Exported as: matList

MatListItem

一个Material Design的列表项。

An item within a Material Design list.

Selector: mat-list-item a[mat-list-item]

Exported as: matListItem

MatListOption

可选列表(selection-list)中,列表项(list-option)的组件。每个列表项可自动生成一个checkbox,当选择当前项时,会将当前列表项放入可选列表的selectionModel中。

Component for list-options of selection-list. Each list-option can automatically generate a checkbox and can put current item into the selectionModel of selection-list if the current item is selected.

Selector: mat-list-option

Exported as: matListOption

属性

Properties

属性名 描述 Description
@Input()
checkboxPosition: ‘before’ | ‘after’
标签展示在checkbox的前面还是后面,默认后面。 Whether the label should appear before or after the checkbox. Defaults to ‘after’
@Input()
disabled: any
列表项是否失效。 Whether the option is disabled.
@Input()
selected: boolean
列表项是否被选择。 Whether the option is selected.
@Input()
value: any
列表项的值 Value of the option
selectionList: MatSelectionList
@Output()
Deprecated
selectionChange: EventEmitter
列表项选择状态改变的事件。 Emits a change event whenever the selected state of an option changes.

方法

Methods

方法名 描述 Description
focus 使选项获得焦点。 Allows for programmatic focusing of the option.
toggle 切换选项的选择状态。 Toggles the selection state of the option.

MatSelectionList

每个选项都是可选择的Material Design列表组件。行为与listbox一致。

Material Design list component where each item is a selectable option. Behaves as a listbox.

Selector: mat-selection-list

Exported as: matSelectionList

属性

Properties

属性名 描述 Description
@Output()
selectionChange: EventEmitter
一个选项的选择状态发生改变的事件。 Emits a change event whenever the selected state of an option changes.
onTouched: () => void 当列表或者选项失去焦点时,模型回调的视图。 View to model callback that should be called if the list or its options lost focus.
options: QueryList 在selection-list中的选项组件。 The option components contained within this selection-list.
selectedOptions: SelectionModel 当前选中的选项。 The currently selected options.

方法

Methods

方法名 描述 Description
deselectAll 反选所有选项。 Deselects all of the options.
focus 使selection-list获得焦点 Focus the selection-list.
selectAll 选择所有选项。 Selects all of the options.

附加类

Additional classes

MatListOptionChange

当MatListOption的选择状态发生改变时的事件。

Change event object emitted by MatListOption whenever the selected state changes.

Deprecated

属性

Properties

属性名 描述 Description
selected: boolean 选项的选中状态。 The new selected state of the option.
source: MatListOption 发生改变的列表选项参考。 Reference to the list option that changed.

MatSelectionListChange

当选项的选择状态发生改变时,触发的事件。

Change event that is being fired whenever the selected state of an option changes.

属性

Properties

属性名 描述 Description
option: MatListOption 发生改变的选项的参考。 Reference to the option that has been changed.
source: MatSelectionList 传递此事件的可选列表的参考。 Reference to the selection list that emitted the event.

翻译部分版权归YahaCode团队所有。仅供学习研究之用,任何组织或个人不得私自以此用于任何形式的商业目的

你可能还想看看下面的内容?

发表评论