Browsed by
分类:快速开始

自定义组件样式

自定义组件样式

自定义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

CDK数据表

CDK数据表

CDK数据表 <cdk-table> 是非常灵活、可定制化data-table,拥有完全模板化的API、动态列、以及可访问的DOM结构。任何人都可以利用它为自己打造专用的数据表。 The <cdk-table> is an unopinionated, customizable data-table with a fully-templated API, dynamic columns, and an accessible DOM structure. This component acts as the core upon which anyone can build their own tailored data-table experience. 表格还为更多特性(如排序和分页等)的实现提供了基础。因为它对于这些特性非常开放,开发者可以完全控制表格的交互模式。 The table provides a foundation upon which other features, such as sorting and pagination, can be built. Because it enforces no opinions on these matters, developers have full control over the interaction patterns associated with the table. 对于Material Design风…

阅读全文 Read More

使用Angular Material的排版

使用Angular Material的排版

使用Angular Material排版 [TOC] 什么是排版 What is typography? 排版是一种排列方式,可以让文字易读易懂,显示美观。Angular Material的排版是基于Material Design Spec的规范分成了不同的排版层级。每一个层级都包含了font-size,line-height和font-weight。层级如下: Typography is a way of arranging type to make text legible, readable, and appealing when displayed. Angular Material’s typography is based on the guidelines from the Material Design Spec and is arranged into typography levels. Each level has a font-size, line-height and font-weight. The available levels are: display-4, display-3, display-2和display-1,大的一次性的头部, 通常在页面顶部 (e.g. a hero header). headline – 对应<h1>标签的段落标题。 title – 对应<h2>标签的段落标题。 subhea…

阅读全文 Read More

定制你的组件主题

定制你的组件主题

定制你的组件主题 [toc] 为了使用Angular Material工具改变你的组件样式,组件样式必须使用Sass进行定义 In order to style your own components with Angular Material’s tooling, the component’s styles must be defined with Sass. 使用 @mixin 自动应用主题 Using @mixin to automatically apply a theme 为什么使用@mixin Why using @mixin 使用@mixin方法的优点是,每当你更改主题的时候,使用的每个文件都会被自动更新。可以在应用或者组件中调用@mixin的时候引入不同的主题参数,来使用多重主题。 The advantage of using a @mixin function is that when you change your theme, every file that uses it will be automatically updated. Calling the @mixin with a different theme argument allows multiple themes within the app or component. 如何使用@mixin How to use @mixin 通过把@mixin方法添加到主题文件中,然后调用这个方法应…

阅读全文 Read More

主题化你的Material应用

主题化你的Material应用

主题化你的Material应用 Theming your Angular Material app [toc] 什么是主题 What is a theme? 主题是由不同颜色构成的一种组合,可以应用到Angular Material组件上。主题库用法可以参考Material Design说明 产品指导。 A theme is the set of colors that will be applied to the Angular Material components. The library’s approach to theming is based on the guidance from the Material Design spec. 在Angular Material中主题是通过多个色调组合来创建的。特别说明,一个主题由以下组成: In Angular Material, a theme is created by composing multiple palettes. In particular, a theme consists of: 主色调:全部屏幕和组件中广泛使用的颜色。 强调色调:浮动操作按钮和交互元素中使用的颜色。 警告色调:提示错误状态的颜色。 前景色调:字体和图标的颜色。 背景色调:元素背景的颜色。 A primary palette: colors most widely used across all screens and components….

阅读全文 Read More

开始

开始

开始 Getting started [toc] 通过检出Angular CLI开始创建你的第一个Angular应用。 For help getting started with a new Angular app, check out the Angular CLI. 如果已经创建app,可以按照下面步骤开始使用Angular Material。 For existing apps, follow these steps to begin using Angular Material. 第一步:安装 Angular Material 与 Angular CDK Step 1: Install Angular Material and Angular CDK npm install –save @angular/material @angular/cdk 由主线分支的最新的快照版本也可供下载,但是需要注意的是,这个快照版本不是稳定的,在发布期间也可能中断。 A snapshot build with the latest changes from master is also available. Note that this snapshot build should not be considered stable and may break between releases. npm install –save angular/material2-builds angular/cdk-bu…

阅读全文 Read More