Browsed by
分类:表单控制

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

Radio button

Radio button

[toc] 概述 OVERVIEW <mat-radio>提供了与原生<input type=”radio”>相同的功能,并增强了Material Design样式与动画。 <mat-radio> provides the same functionality as a native <input type=”radio”> enhanced with Material Design styling and animations. 具有相同name的一组单选按钮,一次只能选中其中一个。 All radio-buttons with the same name comprise a set from which only one may be selected at a time. Radio-button标签 Radio-button label radio-button标签提供为<mat-radio-button>元素的内容。通过设置labelPosition属性为’before’或者’after’,可以指定标签的位置显示在单元按钮前面还是后面。 The radio-button label is provided as the content to the <mat-radio-button> element. The label can be positioned before or after the radio-but…

阅读全文 Read More

Form field

Form field

[toc] 概述 OVERVIEW <mat-form-field>是封装了一些Angular Material组件并应用了常见文本字段样式(例如下划线,浮动标签,提示信息等)的组件。 <mat-form-field> is a component used to wrap several Angular Material components and apply common Text field styles such as the underline, floating label, and hint messages. 在此文档中,“表单字段”代表封装组件<mat-form-field>,“表单字段控制”代表<mat-form-field>封装的组件(例如input,textarea,select等等)。 In this document, “form field” refers to the wrapper component <mat-form-field> and “form field control” refers to the component that the <mat-form-field> is wrapping (e.g. the input, textarea, select, etc.) 以下Angular Material组件可用于<mat…

阅读全文 Read More

Input

Input

[toc] 概述 OVERVIEW matInput是一个可以让原生<input>和<textarea>元素与<mat-form-field>协同工作的指令。 matInput is a directive that allows native <input> and <textarea> elements to work with <mat-form-field>. <input>和<textarea>属性 <input> and <textarea> attributes 一般<input>与<textarea>元素可以使用的属性,都可以在<mat-form-field>中使用。还包括Angular指令,例如ngModel和formControl。 All of the attributes that can be used with normal <input> and <textarea> elements can be used on elements inside <mat-form-field> as well. This includes Angular directives such as ngModel and formControl. 唯一的限制是type属性只能为matInput支持的其…

阅读全文 Read More

Checkbox

Checkbox

[toc] 概述 OVERVIEW <mat-checkbox>提供了与原生<input type=”checkbox”>相同的功能,并增强了Material Design样式与动画。 <mat-checkbox> provides the same functionality as a native <input type=”checkbox”> enhanced with Material Design styling and animations. 复选框标签 Checkbox label 复选框标签是<mat-checkbox>元素的内容。通过设置labelPosition属性为’before’或者’after’,可以将标签放置在复选框的前面或者后面。 The checkbox label is provided as the content to the <mat-checkbox> element. The label can be positioned before or after the checkbox by setting the labelPosition property to ‘before’ or ‘after’. 如果不想复选框旁边出现标签,可以使用aria-label或者aria-labelledby来指定合适的标签。 If you don’t want the label to a…

阅读全文 Read More

Autocomplete

Autocomplete

[toc] 概述 OVERVIEW 自动完成是一个包含建议备选项的普通的文本输入框的扩展。你可以在Material Design spec了解到更多关于自动完成。 The autocomplete is a normal text input enhanced by a panel of suggested options. You can read more about autocompletes in the Material Design spec. 简单的自动完成 Simple autocomplete 我们从添加一个matInput到模板中开始,假定使用ReactiveFormsModule模块中的fromControl指令来跟踪输入的值。 Start by adding a regular matInput to your template. Let’s assume you’re using the formControl directive from ReactiveFormsModule to track the value of the input. 注意:如果你愿意,可以使用模板驱动表单来替代。在此例中我们使用响应式表单,是因为这样做,订阅输入框值的变化非常容易。在这个例子中,在你的NgModule中,引入@angular/forms中的ReactiveFormsModule模块。如果你对使用响应式表单不熟悉,可以在Angular文档中阅读关于这个主题的…

阅读全文 Read More