Skip to content

Commit 15e11be

Browse files
author
Zhicheng WANG
committed
docs: 迁移以前的翻译
1 parent 0911820 commit 15e11be

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

70 files changed

+4330
-777
lines changed

‎guides/bidirectionality.md

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,44 @@
11
# Angular Material bi-directionality
22

3+
# Angular Material 的双向文字
4+
35
### Setting a text-direction for your application
6+
7+
### 设置应用的文字方向
8+
49
The [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
5-
is typically applied to `<html>` or `<body>` element of a page. However, it can be used on any
6-
element, within your Angular app, to apply a text-direction to a smaller subset of the page.
10+
is typically applied to `<html>` or `<body>` element of a page. However, it can be used on any element, within your Angular app, to apply a text-direction to a smaller subset of the page.
11+
12+
[`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) 通常会应用于页面的 `<html>` 或 `<body>` 元素上。 不过，它也可以用在应用中的任何元素上，以为页面中一个小型子集指定文字方向。
713

8-
All Angular Material components automatically reflect the LTR/RTL direction
9-
of their container.
14+
All Angular Material components automatically reflect the LTR/RTL direction of their container.
15+
16+
所有 Angular Material 组件都会自动跟随其容器的 LTR/RTL 方向。
1017

1118
### Reading the text-direction in your own components
12-
`@angular/cdk/bidi` provides a `Directionality` injectable that can be used by any component
13-
in your application. To consume it, you must import `BidiModule` from `@angular/cdk/bidi`.
19+
20+
### 在自己的组件中读取文字方向
21+
22+
`@angular/cdk/bidi` provides a `Directionality` injectable that can be used by any component in your application. To consume it, you must import `BidiModule` from `@angular/cdk/bidi`.
23+
24+
`@angular/cdk/bidi` 提供了一个可注入对象 `Directionality`，它可以供应用中的任何一个组件使用。 要使用该服务，你必须从 `@angular/cdk/bidi` 中导入 `BidiModule`。
1425

1526
`Directionality` provides two useful properties:
27+
28+
`Directionality` 提供了两个有用的属性：
29+
1630
* `value`: the current text direction, either `'ltr'` or `'rtl'`.
17-
* `change`: an `Observable` that emits whenever the text-direction changes. Note that this only
18-
captures changes from `dir` attributes _inside the Angular application context_. It will not
19-
emit for changes to `dir` on `<html>` and `<body>`, as they are assumed to be static.
31+
32+
`value`：当前的文字方向，或者是 `'ltr'` 或者是 `'rtl'`。
33+
34+
* `change`: an `Observable` that emits whenever the text-direction changes. Note that this only captures changes from `dir` attributes _inside the Angular application context_. It will not emit for changes to `dir` on `<html>` and `<body>`, as they are assumed to be static.
35+
36+
`change` 一个 `Observable`，当文字方向改变时就会发出事件。注意，它只会捕获*Angular 应用上下文内部*的 `dir` 属性变更。 它不会报告 `<html>` 和 `<body>` 上的 `dir` 属性的变更，我们可以假设它们都是静态的。
2037

2138
#### Example
39+
40+
#### 范例
41+
2242
```ts
2343
@Component({ /* ... */ })
2444
export class MyCustomComponent {

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

Lines changed: 215 additions & 147 deletions
Large diffs are not rendered by default.

‎guides/customizing-component-styles.md

Lines changed: 60 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,96 @@
11
# Customizing Angular Material component styles
22

3+
# 自定义 Angular Material 组件的样式
4+
35
### Styling concepts
46

5-
There are 3 questions to keep in mind while customizing the styles of Angular Material
6-
components:
7+
### 样式相关的概念
8+
9+
There are 3 questions to keep in mind while customizing the styles of Angular Material components:
10+
11+
当定制 Angular Material 组件的样式时，要牢记三个问题：
712

813
1. Are your styles encapsulated?
14+
15+
你的样式是封装过的吗？
16+
917
2. Are your styles more specific than the defaults?
18+
19+
你的样式是否比默认的更具体？
20+
1021
3. Is the component a child of your component, or does it exist elsewhere in the DOM?
1122

23+
该组件是始终用作其它组件的子组件，还是可以出现在 DOM 中的任何位置？
24+
1225
##### View encapsulation
1326

14-
By default, Angular component styles are scoped to affect the component's view. This means that
15-
the styles you write will affect all the elements in your component template. They will *not*
16-
affect elements that are children of other components within your template. You can read more
17-
about view encapsulation in the
18-
[Angular documentation](https://angular.io/guide/component-styles#view-encapsulation). You may
19-
also wish to take a look at
27+
##### 视图封装
28+
29+
By default, Angular component styles are scoped to affect the component's view. This means that the styles you write will affect all the elements in your component template. They will *not*
30+
affect elements that are children of other components within your template. You can read more about view encapsulation in the
31+
[Angular documentation](https://angular.io/guide/component-styles#view-encapsulation). You may also wish to take a look at
2032
[_The State of CSS in Angular_](https://blog.angular.io/the-state-of-css-in-angular-4a52d4bd2700)
2133
on the Angular blog.
2234

35+
默认情况下，Angular 组件的样式只会影响该组件的视图本身。也就是说你写的任何样式都只会影响到你这个组件模板中的元素。 它们**不会**影响到你模板中用到的其它组件的任何子元素。你可以到 [Angular 官方文档](https://angular.cn/guide/component-styles#view-encapsulation)中了解关于视图封装的更多知识。还可以到 Angular 官方博客中读一下 [* Angular 中 CSS 的开发状态*](https://blog.angular.io/the-state-of-css-in-angular-4a52d4bd2700)。
36+
2337
##### Selector specificity
2438

25-
Each CSS declaration has a level of *specificity* based on the type and number of selectors used.
26-
More specific styles will take precedence over less specific styles. Angular Material uses the
27-
least specific selectors possible for its components in order to make it easy to override them.
28-
You can read more about specificity and how it is calculated on the
39+
##### 选择器的特异度
40+
41+
Each CSS declaration has a level of *specificity* based on the type and number of selectors used. More specific styles will take precedence over less specific styles. Angular Material uses the least specific selectors possible for its components in order to make it easy to override them. You can read more about specificity and how it is calculated on the
2942
[MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity).
3043

44+
每个 CSS 声明都具有一个*特异度*级别，取决于所用到的选择器的类型和数量。 特异度较高的样式也会有较高的优先级。Angular Material 会在组件中使用尽可能小的特异度，以便你更容易覆盖它们。 你可以到 [MDN Web 文档](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)中深入了解特异度及其计算方法。
45+
3146
##### Component location
3247

33-
Some Angular Material components, specifically overlay-based ones like MatDialog, MatSnackbar, etc.,
34-
do not exist as children of your component. Often they are injected elsewhere in the DOM. This is
35-
important to keep in mind, since even using high specificity and shadow-piercing selectors will
36-
not target elements that are not direct children of your component. Global styles are recommended
37-
for targeting such components.
48+
##### 组件位置
49+
50+
Some Angular Material components, specifically overlay-based ones like MatDialog, MatSnackbar, etc., do not exist as children of your component. Often they are injected elsewhere in the DOM. This is important to keep in mind, since even using high specificity and shadow-piercing selectors will not target elements that are not direct children of your component. Global styles are recommended for targeting such components.
51+
52+
有些 Angular Material 组件（特别是基于浮层的组件，如 MatDialog、MatSnackbar 等）不是以子组件的形式存在的，而是插入到 DOM 中某些别的位置。 这一点一定要记住，因为即使使用了高特异性的和能够穿透 Shadow DOM 的选择器，也没法影响这些不是子元素的元素。对这些元素，建议使用全局样式来定制。
3853

3954
### Styling overlay components
4055

41-
Overlay-based components have a `panelClass` property (or similar) that can be used to target the
42-
overlay pane. For example, to remove the padding from a dialog:
56+
### 为浮层组件定制样式
57+
58+
Overlay-based components have a `panelClass` property (or similar) that can be used to target the overlay pane. For example, to remove the padding from a dialog:
59+
60+
基于浮层的组件都有一个形如 `panelClass` 的属性，它可用作用于浮层面板。比如，要从对话框中移除衬距：
4361

4462
```scss
4563
// Add this to your global stylesheet after your theme setup
4664
.myapp-no-padding-dialog .mat-dialog-container {
47-
padding: 0;
65+
padding: 0;
4866
}
4967
```
5068

5169
```ts
52-
this.dialog.open(MyDialogComponent, {panelClass: 'myapp-no-padding-dialog'})
70+
this.dialog.open(MyDialogComponent, { panelClass: 'myapp-no-padding-dialog' })
5371
```
5472

55-
Since you are adding the styles to your global stylesheet, it is good practice to scope
56-
them appropriately. Try prefixing your selector with your app name or "custom". Also note that
57-
the `mat-dialog-container`'s padding is added by default via a selector with specificity of 1. The
58-
customizing styles have a specificity of 2, so they will always take precedence.
73+
Since you are adding the styles to your global stylesheet, it is good practice to scope them appropriately. Try prefixing your selector with your app name or "custom". Also note that the `mat-dialog-container`'s padding is added by default via a selector with specificity of 1. The customizing styles have a specificity of 2, so they will always take precedence.
74+
75+
由于你要把这些样式添加到全局样式表中，那么就要尽量把它们限制到最合适的范围。 建议给它们的选择器加上你的应用名或 "custom" 作为前缀。 另外，注意 `mat-dialog-container` 默认的衬距是使用一个特异度为 1 的选择器添加的，而这里的自定义样式使用的特异度是 2，所以这个自定义样式的优先级更高。
5976

6077
### Styling other components
6178

62-
If your component has view encapsulation turned on (default), your component styles will only
63-
affect the top level children in your template. HTML elements belonging to child components cannot
64-
be targeted by your component styles unless you do one of the following:
65-
66-
- Add the overriding style to your global stylesheet. Scope the selectors so that it only affects
67-
the specific elements you need it to.
68-
- Turn view encapsulation off on your component. If you do this, be sure to scope your styles
69-
appropriately, or else you may end up incidentally targeting other components elsewhere in your
70-
application.
71-
- Use a deprecated shadow-piercing descendant combinator to force styles to apply to all the child
72-
elements. Read more about this deprecated solution in the
73-
[Angular documentation](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep).
79+
### 为其它组件定制样式
80+
81+
If your component has view encapsulation turned on (default), your component styles will only affect the top level children in your template. HTML elements belonging to child components cannot be targeted by your component styles unless you do one of the following:
82+
83+
如果你的组件开启了样式封装（默认行为），那么你的组件样式将只会影响到模板中的顶级子元素。而属于子组件的 HTML 元素不会受到这些组件样式的影响，除非你这样做：
84+
85+
- Add the overriding style to your global stylesheet. Scope the selectors so that it only affects the specific elements you need it to.
86+
87+
把用来覆盖的样式添加到全局样式表中。要注意限制这些选择器的范围，让它只影响你希望影响的那些特定元素。
88+
89+
- Turn view encapsulation off on your component. If you do this, be sure to scope your styles appropriately, or else you may end up incidentally targeting other components elsewhere in your application.
90+
91+
关闭组件的样式封装特性。如果这样做，要注意给你的样式限定适当的范围，否则它就可能意外影响到你应用中的其它组件。
92+
93+
- 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
94+
[Angular documentation](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep).
95+
96+
使用已弃用的 Shadow DOM 穿透组合器，强制这些样式应用于组件的所有子元素。欲知详情，参见 [Angular 官方文档](https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep)。

‎guides/elevation.md

Lines changed: 34 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,74 @@
1-
Angular Material's elevation classes and mixins allow you to add separation between elements along
2-
the z-axis. All material design elements have resting elevations. In addition, some elements may
3-
change their elevation in response to user interaction. The
1+
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
42
[Material Design spec](https://material.io/design/environment/elevation.html)
53
explains how to best use elevation.
64

7-
Angular Material provides two ways to control the elevation of elements: predefined CSS classes
8-
and mixins.
5+
Angular Material 的高程（elevation）类和混入器（mixin）让你可以沿着 Z 轴区分开各个元素。所有的 Material Design 元素都有一个静止状态的高程。此外，有些元素可能会改变它们的高程，以响应用户操作。
6+
[Material Design 规范](https://material.io/design/environment/elevation.html)解释了关于高程的最佳实践。
7+
8+
Angular Material provides two ways to control the elevation of elements: predefined CSS classes and mixins.
9+
10+
Angular Material 提供了两种方式来控制元素的高程：预定义的 CSS 类和混入器。
911

1012
### Predefined CSS classes
1113

14+
### 预定义 CSS 类
15+
1216
The easiest way to add elevation to an element is to simply add one of the predefined CSS classes
13-
`mat-elevation-z#` where `#` is the elevation number you want, 0-24. Dynamic elevation can be
14-
achieved by switching elevation classes:
17+
`mat-elevation-z#` where `#` is the elevation number you want, 0-24. Dynamic elevation can be achieved by switching elevation classes:
18+
19+
为元素添加高程的最简单方式是为其添加预定义的 CSS 类 `mat-elevation-z#`，这里的 `#` 是你要用的高程数字，介于 0~24 之间。 可以通过切换高程类来实现动态高程：
1520

1621
```html
22+
1723
<div [class.mat-elevation-z2]="!isActive" [class.mat-elevation-z8]="isActive"></div>
1824
```
1925

2026
<!-- example(elevation-overview) -->
2127

2228
### Mixins
2329

24-
Elevations can also be added in CSS via the `mat-elevation` mixin, which takes a number 0-24
25-
indicating the elevation of the element as well as optional arguments for the elevation shadow's
26-
color tone and opacity.
30+
### 混入器
31+
32+
Elevations can also be added in CSS via the `mat-elevation` mixin, which takes a number 0-24 indicating the elevation of the element as well as optional arguments for the elevation shadow's color tone and opacity.
33+
34+
还可以在 CSS 中使用 `mat-elevation` 混入器来添加高程，它接受一个介于 0~24 之间的高程数，还有一个可选的参数用于表示高程投影的色调和透明度。
2735

2836
Since an elevation shadow consists of multiple shadow components of varying opacities, the
29-
`$opacity` argument of the mixin is considered a factor by which to scale these initial values
30-
rather than an absolute value.
37+
`$opacity` argument of the mixin is considered a factor by which to scale these initial values rather than an absolute value.
38+
39+
高程投影由多个具有不同透明度的投影组件构成，这个混入器的 `$opacity` 参数会作为一个缩放初始值的因子，而不是作为绝对值。
3140

3241
In order to use the mixin, you must import `~@angular/material/theming`:
3342

43+
要使用这个混入器，你必须导入 `~@angular/material/theming`：
44+
3445
```scss
3546
@import '~@angular/material/theming';
3647

3748
.my-class-with-default-shadow {
38-
// Adds a shadow for elevation level 2 with default color and full opacity:
39-
@include mat-elevation(2);
49+
// Adds a shadow for elevation level 2 with default color and full opacity:
50+
@include mat-elevation(2);
4051
}
4152

4253
.my-class-with-custom-shadow {
43-
// Adds a shadow for elevation level 2 with color #e91e63 and 80% of the default opacity:
44-
@include mat-elevation(2, #e91e63, 0.8);
54+
// Adds a shadow for elevation level 2 with color #e91e63 and 80% of the default opacity:
55+
@include mat-elevation(2, #e91e63, 0.8);
4556
}
4657
```
4758

48-
For convenience, you can use the `mat-elevation-transition` mixin to add a transition when the
49-
elevation changes:
59+
For convenience, you can use the `mat-elevation-transition` mixin to add a transition when the elevation changes:
60+
61+
当高程变化时，你可以用 `mat-elevation-transition` 混入器来简便的添加转场动画：
5062

5163
```scss
5264
@import '~@angular/material/theming';
5365

5466
.my-class {
55-
@include mat-elevation-transition;
56-
@include mat-elevation(2);
67+
@include mat-elevation-transition;
68+
@include mat-elevation(2);
5769

58-
&:active {
59-
@include mat-elevation(8);
70+
&:active {
71+
@include mat-elevation(8);
6072
}
6173
}
6274
```

0 commit comments

Comments
 (0)