Browsed by
分类:按钮 & 指示器

Badge

Badge

[toc] 概述 OVERVIEW 标记是UI元素的一个小的状态描述。一个标记由一个小圆圈组成,通常包含一个数字或者其他短字母,并紧挨着其他的对象出现。 Badges are small status descriptors for UI elements. A badge consists of a small circle, typically containing a number or other short set of characters, that appears in proximity to another object. 标记位置 Badge position 默认标记的位置是above after。可通过定义matBadgePosition属性为above|below和before|after来改变方向。 By default, the badge will be placed above after. The direction can be changed by defining the attribute matBadgePosition follow by above|below and before|after. <mat-icon matBadge=”22″ matBadgePosition=”above after”>home</mat-icon> 也可以使用matBadgeOverlap来定义标记与其内部内容的交叠。通常你希望交叠的是图…

阅读全文 Read More

Chips

Chips

[toc] 概述 OVERVIEW “展示单独的、键盘可访问的、小圆片状的一系列值。 “ displays a list of values as individual, keyboard accessible, chips. <mat-chip-list> <mat-chip>Papadum</mat-chip> <mat-chip>Naan</mat-chip> <mat-chip>Dal</mat-chip> </mat-chip-list> 非样式化的chips Unstyled chips 会默认应用Material Design样式。使用可使一个chip不应用样式。然后你可以通过添加自己的CSS来自定义样式。 By default, has Material Design styles applied. For a chip with no styles applied, use. You can then customize the chip appearance by adding your own CSS. 提示:除mat-chip类外,“也接收mat-basic-chipCSS类。 Hint: “ receives the mat-basic-chip CSS class in addition to the mat-chip class…

阅读全文 Read More

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

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

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

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

Button

Button

[toc] 概述 OVERVIEW Angular Material是原生的<button>或者<a>元素,并扩展了Material Design样式与墨水效果。 Angular Material buttons are native <button> or <a> elements enhanced with Material Design styling and ink ripples. 原生<button>和<a>元素总是用来给用户提供最直接的交互体验。<button>元素用于执行某个动作。<a>元素用于用户想跳转到另一个视图。 Native <button> and <a> elements are always used in order to provide the most straightforward and accessible experience for users. A <button> element should be used whenever some action is performed. An <a> element should be used whenever the user will navigate to another view. 按钮一共有5种变体,每种对应一个属性: There are five but…

阅读全文 Read More