Browsed by
月份:2018年2月

Progress bar

Progress bar

[toc] 概述 OVERVIEW <mat-progress-bar>是一个指示进度和活动的水平的进度条。 <mat-progress-bar> is a horizontal progress-bar for indicating progress and activity. 进度模式 Progress mode 进度条支持四种模式:determinate, indeterminate, buffer和query. The progress-bar supports four modes: determinate, indeterminate, buffer and query. Determinate 已知操作完成度的百分比的,应使用此模式。 Operations where the percentage of the operation complete is known should use the determinate indicator. 此模式为默认模式,使用value属性来表示进度值。 This is the default mode and the progress is represented by the value property. Indeterminate 当需要用户等待某操作完成,并且不需要指示具体需要多久时,应使用此模式。 Operations where the user is asked to wait while something…

阅读全文 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

Sidenav

Sidenav

[toc] 概述 OVERVIEW Angular Material提供了两组组件,用来添加在主内容旁边的可折叠的侧边内容(通常用于导航)。这些是侧边导航和抽屉组件。 Angular Material provides two sets of components designed to add collapsible side content (often navigation, though it can be any content) alongside some primary content. These are the sidenav and drawer components. 侧边导航组件用于添加全屏应用的侧边内容。设置侧边导航需要使用三个组件:内容和侧边导航的结构化容器<mat-sidenav-container>,表示主要内容的<mat-sidenav-content>,表示已添加的侧边内容的<mat-sidenav>。 The sidenav components are designed to add side content to a fullscreen app. To set up a sidenav we use three components: <mat-sidenav-container> which acts as a structural container for our content and sidena…

阅读全文 Read More

Progress spinner

Progress spinner

[toc] 概述 OVERVIEW <mat-progress-spinner>和<mat-spinner>是一个进度与活动的环形指示器。 <mat-progress-spinner> and <mat-spinner> are a circular indicators of progress and activity. 进度模式 Progress mode 进度旋转器支持两种模式,“确定”(”determinate”)与“未决”(”indeterminate”)。<mat-spinner>组件是<mat-progress-spinner mode=”indeterminate”>的一个别名。 The progress-spinner supports two modes, “determinate” and “indeterminate”. The <mat-spinner> component is an alias for <mat-progress-spinner mode=”indeterminate”>. 模式 描述 Description determinate 标准进度指示器,从0%到100% Standard progress indicator, fills from 0% to 100%…

阅读全文 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

Button toggle

Button toggle

[toc] 概述 OVERVIEW <mat-button-toggle>是一个按钮外观的开关切换。切换行为可以配置为单选按钮或者多选框。当单独使用时,通常是作为mat-button-toggle-group的一部分。 <mat-button-toggle> are on/off toggles with the appearance of a button. These toggles can be configured to behave as either radio-buttons or checkboxes. While they can be standalone, they are typically part of a mat-button-toggle-group. 单选和多选 Exclusive selection vs. multiple selection mat-button-toggle-group默认情况下与radio-button group类似,只允许选择一个。在这种模式下,mat-button-toggle-group的value值为选择的按钮的值,并且支持ngModel。 By default, mat-button-toggle-group acts like a radio-button group- only one item can be selected. In this mode, the value of the mat-b…

阅读全文 Read More