Skip to content

Commit 536bae9

Browse files
author
Zhicheng WANG
committed
fix: 翻译完了 ripple 部分
1 parent 888879b commit 536bae9

File tree

4 files changed

+52
-4
lines changed

4 files changed

+52
-4
lines changed

guides/theming.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -305,7 +305,7 @@ the `mat-core-theme` mixin as well, which contains theme-specific styles for com
305305

306306
`angular-material-theme` 混入器将为[本库中的所有组件](https://github.com/angular/material2/blob/master/src/lib/core/theming/_all-theme.scss)输出主题。
307307
如果你只想使用这些组件的一个子集(或要修改特定组件的主题),你可以包含专属于该组件的主题混入器。
308-
你还要包含 `mat-core-theme` 混入器,它包含了常见行为(比如涟漪)的特定于该主题的样式。
308+
你还要包含 `mat-core-theme` 混入器,它包含了常见行为(比如水波)的特定于该主题的样式。
309309

310310
```scss
311311
@import '~@angular/material/theming';

src/lib/button/button.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
Angular Material buttons are native `<button>` or `<a>` elements enhanced with Material Design
22
styling and ink ripples.
33

4-
Angular Material 按钮就是原生的 `<button>``<a>` 元素,但使用 Material Design 的样式和墨水涟漪等效果进行了增强
4+
Angular Material 按钮就是原生的 `<button>``<a>` 元素,但使用 Material Design 的样式和墨水水波等效果进行了增强
55

66
<!-- example(button-overview) -->
77

src/lib/core/ripple/ripple.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
Connect user input to screen reactions by using ripples to both indicate the point of touch, and to
22
confirm that touch input was received. For touch or mouse, this occurs at the point of contact.
33

4+
使用水波可以将用户的输入与屏幕的反应联系起来,以指示触摸点,并确认已收到输入。对于触摸或鼠标,水波都会出现在接触点上。
5+
46
The `matRipple` attribute directive defines an area in which a ripple animates on user interaction.
57

8+
属性型指令 `matRipple` 定义了一个区域,当和用户交互时,该区域就会播放一个水波动画。
9+
610
```html
711
<div matRipple [matRippleColor]="myColor">
812
<ng-content></ng-content>
@@ -13,16 +17,24 @@ By default, a ripple is activated when the host element of the `matRipple` direc
1317
mouse or touch events. Upon being pressed, a ripple will begin fading in from the point of contact,
1418
radiating to cover the host element. Each ripple will fade out only upon release of the mouse or touch.
1519

20+
默认情况下,当 `matRipple` 指令的宿主元素收到鼠标或触摸事件时,就会激活一个水波。当按下时,一个水波就会从接触点出现并逐渐消失,其辐射范围会覆盖宿主元件。当释放鼠标或结束触摸时,其水波就会淡出。
21+
1622
Ripples can also be triggered programmatically by getting a reference to the MatRipple directive
1723
and calling its `launch` method.
1824

25+
还可以获得对 MatRipple 指令的引用并调用其 `launch` 方法,以编程的方式触发水波。
26+
1927
### Ripple trigger
2028

29+
### 水波触发
30+
2131
By default ripples will fade in on interaction with the directive's host element.
2232
In some situations, developers may want to show ripples on interaction with *some other* element,
2333
but still want to have the ripples placed in another location. This can be done by specifying
2434
the `matRippleTrigger` option that expects a reference to an `HTMLElement`.
2535

36+
默认情况下,当指令的宿主元素有交互时,水波会淡入。在某些情况下,开发人员可能希望在与*另一个*元素的交互中显示水波,但仍希望把这些水波在特定的位置播放。要做到这一点,可以为 `matRippleTrigger` 选项指定那个元素的 `HTMLElement` 引用。
37+
2638
```html
2739
<div>
2840
<div matRipple [matRippleTrigger]="trigger" class="my-ripple-container">
@@ -35,8 +47,12 @@ the `matRippleTrigger` option that expects a reference to an `HTMLElement`.
3547

3648
### Manual ripples
3749

50+
### 手动水波
51+
3852
Ripples can be shown programmatically by getting a reference to the `MatRipple` directive.
3953

54+
通过引用 `MatRipple` 指令,可以用编程的方式显示水波。
55+
4056
```ts
4157
class MyComponent {
4258

@@ -59,26 +75,40 @@ class MyComponent {
5975
In the example above, no specific coordinates have been passed, because the `centered`
6076
ripple option has been set to `true` and the coordinates would not matter.
6177

78+
在上面的例子中,并没有传递特定的坐标,因为水波的 `centered` 选项已设置为 `true`,这时坐标就无关紧要了。
79+
6280
Ripples that are being dispatched programmatically can be launched with the `persistent` option.
6381
This means that the ripples will not fade out automatically, and need to be faded out using
6482
the `RippleRef` (*useful for focus indicators*).
6583

84+
那些以编程方式触发的水波可以通过 `persistent` 选项来启动。这意味着水波将不会自动淡出,而是需要使用 `RippleRef` 来让它淡出(*这对焦点指示器很有用*)。
85+
6686
In case, developers want to launch ripples at specific coordinates within the element, the
6787
`launch()` method also accepts `x` and `y` coordinates as parameters. Those coordinates
6888
are relative to the ripple container element.
6989

90+
如果开发人员希望在该元素内的指定坐标处启动水波,那么 `launch()` 方法也会接受 `x``y` 坐标作为参数。这些坐标是相对于该水波的容器元素的。
91+
7092
```ts
7193
const rippleRef = this.ripple.launch(10, 10, {persistent: true});
7294
```
7395

7496
### Global options
7597

98+
### 全局选项
99+
76100
Developers are able to specify options for all ripples inside of their application.
77101

102+
开发人员可以为应用中的所有水波指定一些选项。
103+
78104
The speed of the ripples can be adjusted and the ripples can be disabled globally as well.
79105

106+
可以调节水波的速度,也可以全局禁用它。
107+
80108
Global ripple options can be specified by setting the `MAT_RIPPLE_GLOBAL_OPTIONS` provider.
81109

110+
可以通过设置 `MAT_RIPPLE_GLOBAL_OPTIONS` 提供符来指定全局的水波选项。
111+
82112
```ts
83113
const globalRippleConfig: RippleGlobalOptions = {
84114
disabled: true,
@@ -97,16 +127,24 @@ const globalRippleConfig: RippleGlobalOptions = {
97127

98128
All available global options can be seen in the `RippleGlobalOptions` interface.
99129

130+
所有可用的全局选项都能在 `RippleGlobalOptions` 接口中找到。
131+
100132
### Disabling animation
101133

134+
### 禁用动画
135+
102136
The animation of ripples can be disabled by using the `animation` global option. If the
103137
`enterDuration` and `exitDuration` is being set to `0`, ripples will just appear without any
104138
animation.
105139

140+
使用全局选项 `animation` 可以禁用水波的动画。如果 `enterDuration``exitDuration` 被设置为 `0`,那么当出现水波时就不会产生任何动画。
141+
106142
This is specifically useful in combination with the `disabled` global option, because globally
107143
disabling ripples won't affect the focus indicator ripples. If someone still wants to disable
108144
those ripples for performance reasons, the duration can be set to `0`, to remove the ripple feel.
109145

146+
这在与全局选项 `disabled` 共同出现的时候特别有用,因为全局禁用水波不会影响焦点指示器的水波效果。如果出于性能原因,有人仍要禁用这些水波,那么可以把持续时间设置为 `0`,以消除水波效果。
147+
110148
```ts
111149
const globalRippleConfig: RippleGlobalOptions = {
112150
disabled: true,
@@ -120,19 +158,29 @@ const globalRippleConfig: RippleGlobalOptions = {
120158
**Note**: Ripples will also have no animation if the `NoopAnimationsModule` is being used. This
121159
also means that the durations in the `animation` configuration won't be taken into account.
122160

161+
**注意**:如果正在使用 `NoopAnimationsModule `水波也不会有动画。这意味着不必考虑 `animation` 配置中的持续时间。
162+
123163
### Animation behavior
124164

165+
### 动画行为
166+
125167
There are two different animation behaviors for the fade-out of ripples shown in the Material
126168
Design specifications.
127169

170+
Material Design 规范中所展示的水波淡出有两种不同的动画行为。
171+
128172
By default, all ripples will start fading out if the mouse or touch is released and the enter
129173
animation completed. The second possible behavior, which is also shown in the specifications, is
130174
that ripples start to fade out immediately on mouse or touch release.
131175

176+
默认情况下,如果释放鼠标或触摸并且已完成进场动画,那么所有水波都会淡出。另一种可能的行为,就是在放开鼠标或结束触摸时,水波也会立即淡出,正如规范中所要求的那样。
177+
132178
In some scenarios, developers might prefer that behavior over the default and would like to have
133179
the same for Angular Material. This behavior can be activated by specifying the
134180
`terminateOnPointerUp` global ripple option.
135181

182+
在某些情况下,开发人员可能更喜欢覆盖默认行为,并希望 Angular Material 也这样做。这时可以通过指定全局选项 `terminateOnPointerUp` 来激活第二种行为。
183+
136184
```ts
137185
const globalRippleConfig: RippleGlobalOptions = {
138186
terminateOnPointerUp: true

src/lib/select/select.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -147,12 +147,12 @@ If you want to display a custom trigger label inside a `<mat-select>`, you can u
147147

148148
### Disabling the ripple effect
149149

150-
### 禁用涟漪效果
150+
### 禁用水波效果
151151

152152
By default, when a user clicks on a `<mat-option>`, a ripple animation is shown. This can be disabled
153153
by setting the `disableRipple` property on `<mat-select>`.
154154

155-
默认情况下,当用户点击某个 `<mat-option>` 时,就会显示一个涟漪动画。可以通过设置 `<mat-select>` 上的 `disableRipple` 属性来禁用它。
155+
默认情况下,当用户点击某个 `<mat-option>` 时,就会显示一个水波动画。可以通过设置 `<mat-select>` 上的 `disableRipple` 属性来禁用它。
156156

157157
<!-- example(select-no-ripple) -->
158158

0 commit comments

Comments
 (0)