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

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

Bottom Sheet

Bottom Sheet

[toc] 概述 OVERVIEW MatBottomSheet可用于在屏幕底部打开Material Design面板。此面板主要用于移动设备的交互,可当作对话框或者菜单的备选方案。 The MatBottomSheet service can be used to open Material Design panels to the bottom of the screen. These panels are intended primarily as an interaction on mobile devices where they can be used as an alternative to dialogs and menus. 你可以通过调用open方法来打开一个底部菜单,加载一个组件与一个可选的配置对象。open方法将返回一个MatBottomSheetRef实例: You can open a bottom sheet by calling the open method with a component to be loaded and an optional config object. The open method will return an instance of MatBottomSheetRef: const bottomSheetRef = bottomSheet.open(SocialShareComponent, { ariaLabel: ‘Share on…

阅读全文 Read More

Slide toggle

Slide toggle

[toc] 概述 OVERVIEW <mat-slide-toggle>是一个可以通过点击或者拖动来切换的一个开关控件。 <mat-slide-toggle> is an on/off control that can be toggled via clicking or dragging. 切换开关的行为与复选框相似,但不支持<mat-checkbox>中的indeterminate状态。 The slide-toggle behaves similarly to a checkbox, though it does not support an indeterminate state like <mat-checkbox>. 此组件的滑动行为需要在页面加载HammerJS Note: the sliding behavior for this component requires that HammerJS is loaded on the page. 滑动开关标签 Slide-toggle label 可以在<mat-slide-toggle>元素的内容中提供滑动开关标签。 The slide-toggle label is provided as the content to the <mat-slide-toggle> element. 如果不想标签显示在滑动开关的旁边,可以通过aria-label或者aria-lab…

阅读全文 Read More

Slider

Slider

[toc] 概述 OVERVIEW <mat-slider>允许用鼠标、触摸或者键盘在一个范围内选择一个值,与<input type=”range”>相似。 <mat-slider> allows for the selection of a value from a range via mouse, touch, or keyboard, similar to <input type=”range”>. 注意:此组件的滑动行为需要在页面加载HammerJS。 Note: the sliding behavior for this component requires that HammerJS is loaded on the page. 选择一个值 Selecting a value slider默认的最小值是0,最大值是100,滑块的步进是1。可通过min, max, step属性来分别设置各个值。如果没有其他设置,初始值为最小值。 By default the minimum value of the slider is 0, the maximum value is 100, and the thumb moves in increments of 1. These values can be changed by setting the min, max, and step attributes respectively. The init…

阅读全文 Read More

Select

Select

[toc] 概述 OVERVIEW <mat-select>是用来在选项集合中选择一个值的表单控件,与原生的<select>元素类似。你可以在Material Design spec中阅读更多关于下拉框的信息。此组件用于<mat-form-field>元素内。 <mat-select> is a form control for selecting a value from a set of options, similar to the native <select> element. You can read more about selects in the Material Design spec. It is designed to work inside of a <mat-form-field> element. 在<mat-select>中增加<mat-option>元素,可在下拉框中增加选项。每个<mat-option>都由一个value属性,当用户选择一个选项时,这个值可用于设置下拉框的值。<mat-option>的内容用于对用户展示。 To add options to the select, add <mat-option> elements to the <mat-select>. Each <mat-option> h…

阅读全文 Read More

Datepicker

Datepicker

[toc] 概述 OVERVIEW 日期选择器允许用户通过文本输入一个日期,或者通过日历选择一个日期。由多个组件和指令协作构成。 The datepicker allows users to enter a date either through text input, or by choosing a date from the calendar. It is made up of several components and directives that work together. 在input中关联一个日期选择器 Connecting a datepicker to an input 日期选择器由一个文本输入框和一个弹出日历组成,在文本输入框中通过matDatepicker属性关联。 A datepicker is composed of a text input and a calendar pop-up, connected via the matDatepicker property on the text input. <input [matDatepicker]=”myDatepicker”> <mat-datepicker #myDatepicker></mat-datepicker> 提供了一个可选的日期选择器切换按钮。可在上述例子中添加一个切换: An optional datepicker toggle button is availa…

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

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