docs: 翻译新内容

Author: Zhicheng WANG

guides/creating-a-custom-form-field-control.md

@@ -86,7 +86,7 @@ The first step is to provide our new component as an implementation of the `MatF
 interface that the `<mat-form-field>` knows how to work with. To do this, we will have our class implement `MatFormFieldControl`. Since this is a generic interface, we'll need to include a type parameter indicating the type of data our control will work with, in this case `MyTel`. We then add a provider to our component so that the form field will be able to inject it as a
 `MatFormFieldControl`.
 
-第一步把我们的组件作为 `MatFormFieldControl` 接口的实现提供出来，而 `<mat-form-field>` 知道该如何与该接口协作。 要做到这一点，我们要创建一个自己的类来实现 `MatFormFieldControl`。由于它是一个泛型接口，我们需要包含一个类型参数来标记出这个控件支持的数据类型，在这里也就是 `MyTel`。然后我们为这个组件添加一个提供商，以便表单字段（form-field）能把它作为 `MatFormFieldControl` 注入进去。
+第一步把我们的组件作为 `MatFormFieldControl` 接口的实现提供出来，而 `<mat-form-field>` 知道该如何与该接口协作。 要做到这一点，我们要创建一个自己的类来实现 `MatFormFieldControl`。由于它是一个泛型接口，我们需要包含一个类型参数来标记出这个控件支持的数据类型，在这里也就是 `MyTel`。然后我们为这个组件添加一个提供者，以便表单字段（form-field）能把它作为 `MatFormFieldControl` 注入进去。
 
 ```ts
 @Component({
@@ -217,7 +217,7 @@ Note that if your component implements `ControlValueAccessor`, it may already be
 
 To resolve this, remove the `NG_VALUE_ACCESSOR` provider and instead set the value accessor directly:
 
-要解决这个问题，请移除 `NG_VALUE_ACCESSOR` 提供商，改为直接设置 Value Accessor 的值：
+要解决这个问题，请移除 `NG_VALUE_ACCESSOR` 提供者，改为直接设置 Value Accessor 的值：
 
 ```ts
 @Component({
@@ -251,7 +251,7 @@ export class MyTelInput implements MatFormFieldControl<MyTel> {
 
 For additional information about `ControlValueAccessor` see the [API docs](https://angular.io/api/forms/ControlValueAccessor).
 
-要深入了解 `ControlValueAccessor`，参见其 [API 文档](https://angular.io/api/forms/ControlValueAccessor)。
+要深入了解 `ControlValueAccessor`，参见其 [API 文档](https://angular.cn/api/forms/ControlValueAccessor)。
 
 #### `focused`
 
@@ -403,22 +403,30 @@ This method is used by the `<mat-form-field>` to set element ids that should be
 `aria-describedby` attribute of your control. The ids are controlled through the form field as hints or errors are conditionally displayed and should be reflected in the control's
 `aria-describedby` attribute for an improved accessibility experience. 
 
+此方法被 `<mat-form-field>` 用于设置元素的 ID，这些 ID 会被控件的 `aria-describedby` 属性使用。这些 ID 会由表单字段（form field）控制，用于提示（hints）或错误（errors）的有条件显示，并且应该反映到控件的 `aria-describedby` 属性中，以提升无障碍化体验。
+
 The `setDescribedByIds` method is invoked whenever the control's state changes. Custom controls
 need to implement this method and update the `aria-describedby` attribute based on the specified
 element ids. Below is an example that shows how this can be achieved.
 
+每当控件的状态发生变化时，都会调用 `setDescribedByIds` 方法。自定义控件需要实现这个方法，并根据指定的元素 id 来更新 `aria-describedby` 属性。下面的例子演示了要如何达成这一目标。
+
 Note that the method by default will not respect element ids that have been set manually on the
 control element through the `aria-describedby` attribute. To ensure that your control does not
 accidentally override existing element ids specified by consumers of your control, create an
 input called `userAriaDescribedby`  like followed:
 
+注意，默认情况下该方法不在乎元素上通过 `aria-describedby` 属性手动设置的 ID。为了防止你的控件意外覆盖由控件消费者指定的现有 ID，可以创建一个名为 `userAriaDescribedby` 的输入属性，代码如下：
+
 ```ts
 @Input('aria-describedby') userAriaDescribedBy: string;
 ```
 
 The form field will then pick up the user specified `aria-describedby` ids and merge
 them with ids for hints or errors whenever `setDescribedByIds` is invoked.
 
+然后，表单字段会取得用户指定的 `aria-describedby` ID，并确保每次调用 `setDescribedByIds` 时，都会把它们和为提示或错误提供的那些 ID 合并。
+
 ```ts
 setDescribedByIds(ids: string[]) {
   const controlElement = this._elementRef.nativeElement
@@ -448,22 +456,32 @@ MouseEvent
 
 ### Improving accessibility
 
+### 提升无障碍性
+
 Our custom form field control consists of multiple inputs that describe segments of a phone
 number. For accessibility purposes, we put those inputs as part of a `div` element with
 `role="group"`. This ensures that screen reader users can tell that all those inputs belong
 together.
 
+我们的自定义表单字段控件由多个用于描述电话号码段的输入控件组成。为了提升无障碍性，我们把这些输入作为带有 `role="group"` 属性的 `div` 元素的一部分。这可以确保屏幕阅读器用户知道所有这些输入控件都是一起的。
+
 One significant piece of information is missing for screen reader users though. They won't be able
 to tell what this input group represents. To improve this, we should add a label for the group
 element using either `aria-label` or `aria-labelledby`.
 
+屏幕阅读器用户却缺少一条很重要的信息。他们无法分辨这个输入组所代表的含义。为了改善这一点，我们应该使用 `aria-label` 或者 `aria-labelledby` 为这个分组元素添加一个标签。
+
 It's recommended to link the group to the label that is displayed as part of the parent
 `<mat-form-field>`. This ensures that explicitly specified labels (using `<mat-label>`) are
 actually used for labelling the control.
 
+我们建议把该标签链接到这个组，将其作为父元素 `<mat-form-field>` 的一部分。这可以确保显式指定的标签（使用 `<mat-label>` ）确实被用作了该控件的标签。
+
 In our concrete example, we add an attribute binding for `aria-labelledby` and bind it
 to the label element id provided by the parent `<mat-form-field>`.
 
+在下面的具体例子中，我们添加了一个到 `aria-labelledby` 属性的绑定，并把它绑定到由父 `<mat-form-field>` 提供的标签元素的 id。
+
 ```typescript
 export class MyTelInput implements MatFormFieldControl<MyTel> {
   ...

guides/creating-a-custom-stepper-using-the-cdk-stepper.md

@@ -1,15 +1,25 @@
 # Creating a custom stepper using the CDK stepper
 
+# 用 CDK 步进器创建一个自定义步进器
+
 The [CDK stepper](https://material.angular.io/cdk/stepper/overview) allows to build a custom stepper which you can completely style yourself without any specific Material Design styling.
 
+[CDK 步进器](https://material.angular.cn/cdk/stepper/overview)允许建立一个自定义的步进器，你可以完全使用自己的样式，不用任何 Material Design 特有的样式。
+
 In this guide, we'll learn how we can build our own custom stepper using the CDK stepper. Here is what we'll build by the end of this guide:
 
+在本指南中，我们将学习如何使用 CDK 步进器构建自己的自定义步进器。以下是本指南会做出的成品：
+
 <!-- example(cdk-custom-stepper-without-form) -->
 
 ## Create our custom stepper component
 
+## 创建我们的自定义步进器组件
+
 Now we are ready to create our custom stepper component. Therefore, we need to create a new Angular component which extends `CdkStepper`:
 
+现在，我们准备创建自定义步进器组件。因此，我们需要创建一个扩展了 `CdkStepper` 的新 Angular 组件：
+
 **custom-stepper.component.ts**
 
 ```ts
@@ -30,8 +40,12 @@ export class CustomStepperComponent extends CdkStepper {
 
 After we've extended our component class from `CdkStepper` we can now access different properties from this class like `linear`, `selectedIndex` and `steps` which are defined in the [API documentation](https://material.angular.io/cdk/stepper/api#CdkStepper).
 
+在从 `CdkStepper` 扩展出一个组件类之后，可以从这个类访问不同的属性，比如 `linear`、`selectedIndex` 和 `steps`。这些属性的定义位于这个 [API 文档](https://material.angular.cn/cdk/stepper/api#CdkStepper)中。
+
 This is the HTML template of our custom stepper component:
 
+这是我们自定义步进器组件的 HTML 模板：
+
 **custom-stepper.component.html**
 
 ```html
@@ -60,6 +74,8 @@ This is the HTML template of our custom stepper component:
 
 In the `app.component.css` file we can now style the stepper however we want:
 
+在 `app.component.css` 文件中，我们可以为步进器添加所希望的样式了：
+
 **custom-stepper.component.css**
 
 ```css
@@ -100,8 +116,12 @@ In the `app.component.css` file we can now style the stepper however we want:
 
 ## Using our new custom stepper component
 
+## 使用我们新的自定义步进器组件
+
 Now we are ready to use our new custom stepper component and fill it with steps. Therefore we can, for example, add it to our `app.component.html` and define some steps:
 
+现在，我们已准备好使用新的自定义步进器组件了，并且用一些步骤填充它。我们可以把它添加到 `app.component.html` 中，并定义一些步骤：
+
 **app.component.html**
 
 ```html
@@ -113,8 +133,12 @@ Now we are ready to use our new custom stepper component and fill it with steps.
 
 As you can see in this example, each step needs to be wrapped inside a `<cdk-step>` tag.
 
+如你所见，在这个例子中，各个步骤都需要包裹在一个 `<cdk-step>` 标记里。
+
 If you want to iterate over your steps and use your own custom component you can do it, for example, this way:
 
+你可以迭代这些步骤并使用这个自定义组件了，例子如下：
+
 ```html
 <app-custom-stepper>
   <cdk-step *ngFor="let step of mySteps; let stepIndex = index">
@@ -125,10 +149,16 @@ If you want to iterate over your steps and use your own custom component you can
 
 ## Linear mode
 
+## 线性模式
+
 The above example allows the user to freely navigate between all steps. The `CdkStepper` additionally provides the linear mode which requires the user to complete previous steps before proceeding.
 
+上面的例子允许用户在所有步骤之间自由导航。此外，`CdkStepper` 还提供了线性模式，它可以要求用户在继续之前必须完成之前的步骤。
+
 A simple example without using forms could look this way:
 
+一个不涉及表单的简单例子是这样的：
+
 **app.component.html**
 
 ```html

guides/customizing-component-styles.md

@@ -32,7 +32,7 @@ affect elements that are children of other components within your template. You
 [_The State of CSS in Angular_](https://blog.angular.io/the-state-of-css-in-angular-4a52d4bd2700)
 on the Angular blog.
 
-默认情况下，Angular 组件的样式只会影响该组件的视图本身。也就是说你写的任何样式都只会影响到你这个组件模板中的元素。 它们**不会**影响到你模板中用到的其它组件的任何子元素。你可以到 [Angular 官方文档](https://angular.cn/guide/component-styles#view-encapsulation)中了解关于视图封装的更多知识。还可以到 Angular 官方博客中读一下 [* Angular 中 CSS 的开发状态*](https://blog.angular.io/the-state-of-css-in-angular-4a52d4bd2700)。
+默认情况下，Angular 组件的样式只会影响该组件的视图本身。也就是说你写的任何样式都只会影响到你这个组件模板中的元素。 它们**不会**影响到你模板中用到的其它组件的任何子元素。你可以到 [Angular 官方文档](https://angular.cn/guide/component-styles#view-encapsulation)中了解关于视图封装的更多知识。还可以到 Angular 官方博客中读一下 [* Angular 中 CSS 的开发状态*](https://blog.angular.cn/the-state-of-css-in-angular-4a52d4bd2700)。
 
 ##### Selector specificity
 
@@ -93,4 +93,4 @@ If your component has view encapsulation turned on (default), your component sty
 - Use a deprecated shadow-piercing descendant combinator to force styles to apply to all the child elements. Read more about this deprecated solution in the
   [Angular documentation](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep).
 
-  使用已弃用的 Shadow DOM 穿透组合器，强制这些样式应用于组件的所有子元素。欲知详情，参见 [Angular 官方文档](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep)。
+  使用已弃用的 Shadow DOM 穿透组合器，强制这些样式应用于组件的所有子元素。欲知详情，参见 [Angular 官方文档](https://angular.cn/guide/component-styles#deprecated-deep--and-ng-deep)。

guides/duplicate-theming-styles.md

@@ -1,13 +1,21 @@
 # Avoiding duplicated theming styles
 
+# 避免重复的主题风格
+
 As explained in the [theming guide](./theming.md), a theme in Angular Material consists of
 configurations for the `color`, `density` and `typography` systems. As some of these individual
 systems have default configurations, some usage patterns may cause duplication in the CSS output.
 
+正如[主题指南](./theming.md)中所解释的，Angular Material 中的主题包括 `color`（颜色）、`density`（浓淡）和 `typography`（排版）体系的配置。由于某些独立体系具有其默认配置，因此在某些使用模式下可能导致重复的 CSS 输出。
+
 Below are examples of patterns that generate duplicative theme styles:
 
+下面是一个会生成重复主题样式的使用模式的例子：
+
 **Example #1**
 
+**例子＃1**
+
 ```scss
 $light-theme: mat-light-theme((color: ...));
 $dark-theme: mat-dark-theme((color: ...));
@@ -28,6 +36,8 @@ To fix this, you can use the dedicated mixin for color styles for the `.dark-the
 selector. Replace the `angular-material-theme` mixin and include the dark theme using the
 `angular-material-color` mixin. For example:
 
+为了解决这个问题，你可以使用专门的 mixin 作为 `.dark-theme` 选择器的颜色样式。请替换 `angular-material-theme` mixin 并使用 `angular-material-color` mixin 来包含黑色主题。例如：
+
 ```scss
 ...
 @include angular-material-theme($light-theme);
@@ -40,10 +50,16 @@ selector. Replace the `angular-material-theme` mixin and include the dark theme
 
 Typography can also be configured via Sass mixin; see `angular-material-typography`.
 
+排版也可以通过 Sass mixin 进行配置。参见 `angular-material-typography` 。
+
 **Example #2**
 
+**例子＃2**
+
 Theme styles could also be duplicated if individual theme mixins are used. For example:
 
+如果使用了一些独立的主题 mixins，主题样式也可能重复。例如：
+
 ```scss
 @include angular-material-theme($my-theme);
 
@@ -56,6 +72,8 @@ Theme styles could also be duplicated if individual theme mixins are used. For e
 To avoid this duplication of styles, use the dedicated mixin for the color system and
 extract the configuration for the color system from the theme.
 
+为了避免这种样式重复，可以使用专用的 mixin 作为颜色体系，并从主题中提取颜色体系的配置。
+
 ```scss
 .my-custom-dark-button {
   // This will only generate the color styles for `mat-button`.
@@ -65,9 +83,13 @@ extract the configuration for the color system from the theme.
 
 #### Disabling duplication warnings
 
+#### 禁用重复警告
+
 If your application intentionally duplicates styles, a global Sass variable can be
 set to disable duplication warnings from Angular Material. For example:
 
+如果你的应用要故意重复样式，可以设置一个全局 Sass 变量，以禁用 Angular Material 中的重复警告。例如：
+
 ```scss
 $mat-theme-ignore-duplication-warnings: true;