Browsed by
月份:2018年1月

Divider

Divider

[toc] 概述 OVERVIEW <mat-divider>是一个有多个方向选项线条分割,并接受Material样式的组件。 <mat-divider> is a component that allows for Material styling of a line separator with various orientation options. 简单分割 Simple divider <mat-divider>元素可用于创建一个有Material主体样式的水平或者垂直的线条。 A <mat-divider> element can be used on its own to create a horizontal or vertical line styled with a Material theme <mat-divider></mat-divider> 内嵌分割 Inset divider 添加inset属性可设置此分割是否为一个内嵌分割。 Add the inset attribute in order to set whether or not the divider is an inset divider. <mat-divider [inset]=”true”></mat-divider> 垂直分割 Vertical divider 添加vertical属性可设置分割是否为垂直方…

阅读全文 Read More

Toolbar

Toolbar

[toc] 概述 OVERVIEW <mat-toolbar>是头部,标题,或者动作的一个容器。 <mat-toolbar> is a container for headers, titles, or actions. 单行 Single row 在大多数情况下,工具栏位于你应用的顶部,包括应用标题在内只有一行。 In the most situations, a toolbar will be placed at the top of your application and will only have a single row that includes the title of your application. <mat-toolbar> <span>My Application</span> </mat-toolbar> 多行 Multiple rows Material Design规范描述了工具栏也可以有多行。在<mat-toolbar>中使用<mat-toolbar-row>元素,可以在在Angular Material创建多行的工具栏。 The Material Design specifications describe that toolbars can also have multiple rows. Creating toolbars with multiple rows i…

阅读全文 Read More

Icon

Icon

[toc] 概述 OVERVIEW mat-icon可以让你方便地在应用中使用矢量图标。此指令支持图标字体与SVG图标,但不支持位图格式(如png,jpg等)。 mat-icon makes it easier to use vector-based icons in your app. This directive supports both icon fonts and SVG icons, but not bitmap-based formats (png, jpg, etc.). 注册图标 Registering icons MatIconRegistry是一个可注入的服务,可以用于将图标名和SVG URL相关联,并为CSS字体类定义别名。其中的方法在后续的API中有说明。 MatIconRegistry is an injectable service that allows you to associate icon names with SVG URLs and define aliases for CSS font classes. Its methods are discussed below and listed in the API summary. 连体的字体图标 Font icons with ligatures 有些字体会设计为使用连体来展示图标,例如渲染文字”home”为一个home图像。可以将文字放入mat-icon组件中,来使用连体图标。 S…

阅读全文 Read More

Sort header

Sort header

[toc] 概述 OVERVIEW matSort和mat-sort-header分别用于添加排序状态和展示表格数据 The matSort and mat-sort-header are used, respectively, to add sorting state and display to tabular data. 在表头中添加排序 Adding sort to table headers 在每个表头中增加<mat-sort-header>组件并提供一个定义的id,可以为一组表头增加排序行为与样式。这些表头必须包含在有matSort指令的父元素中,当用户在表头中触发排序时,将产生一个matSortChange事件。 To add sorting behavior and styling to a set of table headers, add the <mat-sort-header> component to each header and provide an id that will identify it. These headers should be contained within a parent element with the matSort directive, which will emit an matSortChange event when the user triggers sorting on the header. 用户可以…

阅读全文 Read More

Paginator

Paginator

[toc] 概述 OVERVIEW <mat-paginator>提供了分页信息的导航,通常与表格一同使用。 <mat-paginator> provides navigation for paged information, typically used with a table. 基本用法 Basic use 每个分页器实例都需要如下内容: 每页的数据数量(默认为50) 需要的分页的总数据量 Each paginator instance requires: The number of items per page (default set to 50) The total number of items being paged 当前页数的索引默认为0,但可以通过设置pageIndex来指定。 The current page index defaults to 0, but can be explicitly set via pageIndex. 当用户与分页器交互时,会触发PageEvent事件,可以用来更新任何关联的数据视图。 When the user interacts with the paginator, a PageEvent will be fired that can be used to update any associated data view. 页数选项 Page size options 分页器展示了一个单页数量的下拉框,供用户选择。下拉框…

阅读全文 Read More

Table

Table

[toc] 概述 OVERVIEW mat-table提供了一个用于展示数据行信息的Material Design样式的数据表格。 The mat-table provides a Material Design styled data-table that can be used to display rows of data. 表格模板由两部分组成:列定义和行定义。每个列定义包含列头与单元格的模板。每个行定义包含用于此行并绑定到行元素的各个列。 The table’s template consists of two parts: column definitions and row definitions. Each column definition contains templates for that column’s header and content cells. Each row definition captures the columns used for that row and any bindings applied to the row element. DataSource属性通过传递Observable流,提供了表格需要渲染的数据。每次传递都包含所有需要展示的数据。监听此流的表格会渲染每一行。对于展示数据的任何操作(例如排序、分页、过滤)都需要包含在DataSource中,最后传递表示任何变更的新的数据集合。 A DataSource pr…

阅读全文 Read More

Snackbar

Snackbar

[toc] 概述 OVERVIEW MatSnackBar是一个用于展示snack-bar通知的服务。 MatSnackBar is a service for displaying snack-bar notifications. 打开snack-bar Opening a snack-bar 一个snack-bar中可以包含任意字符串信息或者一个指定的组件。 A snack-bar can contain either a string message or a given component. // Simple message. let snackBarRef = snackBar.open(‘Message archived’); // Simple message with an action. let snackBarRef = snackBar.open(‘Message archived’, ‘Undo’); // Load the given component into the snack-bar. let snackBarRef = snackbar.openFromComponent(MessageArchivedComponent); 无论使用哪种方式,都会返回一个MatSnackBarRef。此对象可用于撤回snack-bar或者接收snack-bar撤回时的通知。对于包含一个操作的简单消息,MatSnackBarRef暴露了一个操作触发时的observable。如果想…

阅读全文 Read More