Browsed by
分类:布局

Tree

Tree

[toc] 概述 OVERVIEW mat-tree提供了一个Material Design样式的树,可用于展示分级的数据。 The mat-tree provides a Material Design styled tree that can be used to display hierarchy data. 此树控件基于CDK树控件构建,并且使用了类似的数据源输入和模板接口,不同的是其元素和属性选择器的前缀使用mat-代替了cdk-。 This tree builds on the foundation of the CDK tree and uses a similar interface for its data source input and template, except that its element and attribute selectors will be prefixed with mat- instead of cdk-. 树有两种类型:平面树与嵌套树。两种树的DOM结构不同。 There are two types of trees: Flat tree and nested tree. The DOM structures are different for these two types of trees. 平面树 Flat tree 在一个平面树中,其分级是平面的;节点不在节点内部渲染,但会在相邻序列中渲染。一个TreeFlattener的实例是用于生成分…

阅读全文 Read More

Tabs

Tabs

[toc] 概述 OVERVIEW Angular Material标签页将内容分配到不同的视图中,一次只有一个视图可见。每个标签页的标签显示在标签页头部,激活的标签页的标签会有一个动态墨水样式条。当标签页的标签列表超过头部的宽度时,会出现分页控件来让用户左右滚动标签。 Angular Material tabs organize content into separate views where only one view can be visible at a time. Each tab’s label is shown in the tab header and the active tab’s label is designated with the animated ink bar. When the list of tab labels exceeds the width of the header, pagination controls appear to let the user scroll left and right across the labels. 激活的标签页可通过selectedIndex输入来设置,或者当用户选择头部的标签页标签时也可以激活。 The active tab may be set using the selectedIndex input or when the user selects one of the tab lab…

阅读全文 Read More

Stepper

Stepper

[toc] 概述 OVERVIEW Angular Material的stepper通过分割内容为逻辑的步骤,提供了一个向导式的工作流。 Angular Material’s stepper provides a wizard-like workflow by dividing content into logical steps. Material的stepper基于CDK stepper构建,用于驱动步骤化的工作流逻辑。Material stepper继承了CDK stepper并应用了Material Design样式。 Material stepper builds on the foundation of the CDK stepper that is responsible for the logic that drives a stepped workflow. Material stepper extends the CDK stepper and has Material Design styling. Stepper变量 Stepper variants stepper组件有两种:mat-horizontal-stepper和mat-vertical-stepper。使用方法相同,不同的只是方向。mat-horizontal-stepper选择器可用于创建水平的stepper,mat-vertical-stepper用于创建垂直的stepper。mat-step组件可…

阅读全文 Read More

Expansion Panel

Expansion Panel

[toc] 概述 OVERVIEW <mat-expansion-panel>提供了一个可扩展的细节概要视图。 <mat-expansion-panel> provides an expandable details-summary view. 扩展面板内容 Expansion-panel content 每个扩展面板都必须包含一个头部,可能包含一个操作条。 Each expansion-panel must include a header and may optionally include an action bar. 头部 Header <mat-expansion-panel-header>展示了面板内容概要并控制面板的展开和收缩。头部可以包含一个<mat-panel-title>和一个<mat-panel-description>,用于格式化头部的内容以适配Material Design标准。 The <mat-expansion-panel-header> shows a summary of the panel content and acts as the control for expanding and collapsing. This header may optionally contain an <mat-panel-title> and an <mat-panel-descript…

阅读全文 Read More

Card

Card

[toc] 概述 OVERVIEW <mat-card>是同一个主题中的文本、照片、操作等的一个内容容器。 <mat-card> is a content container for text, photos, and actions in the context of a single subject. 基本卡片区域 Basic card sections 大多数基本卡片只需要包含某些内容的一个元素。但Angular Material提供了一些在中使用的预设区域: The most basic card needs only an element with some content. However, Angular Material provides a number of preset sections that you can use inside of an : 元素 描述 Description <mat-card-title> 卡片标题 Card title <mat-card-subtitle> 卡片副标题 Card subtitle <mat-card-content> 卡片主要内容。主要为内容块 Primary card content. Intended for blocks of text <img mat-card-image> 卡片图片。图片宽度为容器宽度 Card image. Stretches …

阅读全文 Read More

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

Grid list

Grid list

[toc] 概述 OVERVIEW mat-grid-list是一个排列基于网格布局的单元格的二维列表视图。可以点击此处查看Material Design说明。 mat-grid-list is a two-dimensional list view that arranges cells into grid-based layout. See Material Design spec here. 设置列数 Setting the number of columns mat-grid-list必须指定cols属性,设置网格的列数。行数将基于列数与总项数自动确定。 An mat-grid-list must specify a cols attribute which sets the number of columns in the grid. The number of rows will be automatically determined based on the number of columns and the number of items. 设置行高 Setting the row height 通过rowHeight属性可以设置网格列表中的行高。有三种方式计算列表行高: The height of the rows in a grid list can be set via the rowHeight attribute. Row height for the list can b…

阅读全文 Read More

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标签来用列表导航(…

阅读全文 Read More