Browsed by
标签:Material

Material Demo

Material Demo

最近把Material的现有组件整理了下,做成了一个集成的Demo,可以即时看各种组件的效果,以及各自的一些特性与功能。   当然还没有做完,因为是边学边做,自己都没搞明白的也就还没有坐上去,后续是会慢慢更新的。 希望可以多接收到一些反馈和意见。   点下面链接可以查看: Material Demo

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

自定义组件样式

自定义组件样式

自定义Angular Material组件样式 Customizing Angular Material component styles 样式原则 Styling concepts 在自定义Angular Material组件样式的时,需要注意三个问题: There are 3 questions to keep in mind while customizing the styles of Angular Material components: 你的样式封装了吗? 你的样式比默认样式更特殊吗? 这个组件是你的组件中的子组件,或者是存在于DOM中的某处吗? Are your styles encapsulated? Are your styles more specific than the defaults? Is the component a child of your component, or does it exist elsewhere in the DOM? 视图封装 View encapsulation 默认Angular组件样式只影响组件视图。这意味着你写的样式将会影响你的组件模板中的所有元素。它们不会影响你组件模板中的其它子组件内的元素。你可以通过Angular文档阅读更多关于视图封装的知识。你也可以在Angular博客中看一看Angular中的CSS状态查看更多。 By default, Angular component styles are scoped to aff…

阅读全文 Read More

创建自定义表单字段控件

创建自定义表单字段控件

创建自定义表单字段控件 Creating a custom form field control 现在可以实现在<mat-form-field>内部创建自定义表单字段控件了。如果你需要创建一个组件,用来与表单字段分享许多共同行为,这将是非常有用的,但是需要添加一些额外的的逻辑。 It is possible to create custom form field controls that can be used inside <mat-form-field>. This can be useful if you need to create a component that shares a lot of common behavior with a form field, but adds some additional logic. 举个例子,在本指南中我们会学习怎样创建一个美式电话号码自定义输入框并把它与<mat-form-field>绑定。 For example in this guide we’ll learn how to create a custom input for inputting US telephone numbers and hook it up to work with <mat-form-field>. Here is what we’ll build by the end of this …

阅读全文 Read More

使用elevation助手

使用elevation助手

使用elevation助手 Using elevation helpers Angular Material的elevation类与mixins允许你沿z轴在元素中增加间隔。所有的material design元素都有静止高度。一些元素可能会随用户操作改变其高度。在Material Design手册中有说明高度的使用方法。 Angular Material’s elevation classes and mixins allow you to add separation between elements along the z-axis. All material design elements have resting elevations. In addition, some elements may change their elevation in response to user interaction. The Material Design spec explains how to best use elevation. Angular Material提供了两种方法来控制元素的高度:预定义的CSS类与mixins。 Angular Material provides two ways to control the elevation of elements: predefined CSS classes and mixins. 预定义CSS类 Predefined CS…

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