Merge pull request #173 from todoubaba/component-styles
Polish component-styles.jade
This commit is contained in:
Rex
GitHub
commit
5f3bc5361d
@ -6,12 +6,13 @@ block includes
|
||||
everything we know about CSS stylesheets, selectors, rules, and media queries
|
||||
to our Angular applications directly.
|
||||
|
||||
Angular 2应用使用标准的CSS来设置样式。这意味着我们可以把关于CSS的那些知识和技能直接用于我们的Angular程序中，比如：样式表、选择器、规则，以及媒体查询等。
|
||||
Angular 应用使用标准的 CSS 来设置样式。这意味着我们可以把关于 CSS
|
||||
的那些知识和技能直接用于我们的 Angular 程序中，例如：样式表、选择器、规则以及媒体查询等。
|
||||
|
||||
On top of this, Angular has the ability to bundle *component styles*
|
||||
with our components enabling a more modular design than regular stylesheets.
|
||||
|
||||
在此基础上，Angular还能把*组件样式*紧紧的“捆绑”在我们的组件上，以实现一种比标准样式表更加模块化的设计。
|
||||
在此基础上，Angular 还能把*组件样式*捆绑在我们的组件上，以实现比标准样式表更加模块化的设计。
|
||||
|
||||
In this chapter we learn how to load and apply these *component styles*.
|
||||
|
||||
@ -21,17 +22,28 @@ block includes
|
||||
# 目录
|
||||
|
||||
* [Using Component Styles](#using-component-styles)
|
||||
* [使用组件样式](#using-component-styles)
|
||||
|
||||
[使用组件样式](#using-component-styles)
|
||||
|
||||
* [Special selectors](#special-selectors)
|
||||
* [特殊的选择器](#special-selectors)
|
||||
|
||||
[特殊的选择器](#special-selectors)
|
||||
|
||||
* [Loading Styles into Components](#loading-styles)
|
||||
* [把样式加载进组件](#loading-styles)
|
||||
|
||||
[把样式加载进组件](#loading-styles)
|
||||
|
||||
* [Controlling View Encapsulation: Emulated, Native, and None](#view-encapsulation)
|
||||
* [控制视图的包装模式：仿真(Emulated)、原生(Native)或无(None)](#view-encapsulation)
|
||||
|
||||
[控制视图的封装模式：仿真 (Emulated)、原生 (Native) 或无 (None)](#view-encapsulation)
|
||||
|
||||
* [Appendix 1: Inspecting the generated runtime component styles](#inspect-generated-css)
|
||||
* [附录1: 审查生成的运行时组件样式](#inspect-generated-css)
|
||||
|
||||
[附录 1：审查生成的运行时组件样式](#inspect-generated-css)
|
||||
|
||||
* [Appendix 2: Loading Styles with Relative URLs](#relative-urls)
|
||||
* [附录2：使用相对URL加载样式](#relative-urls)
|
||||
|
||||
[附录 2：使用相对 URL 加载样式](#relative-urls)
|
||||
|
||||
Run the <live-example></live-example> of the code shown in this chapter.
|
||||
|
||||
@ -40,20 +52,21 @@ block includes
|
||||
.l-main-section
|
||||
:marked
|
||||
## Using Component Styles
|
||||
|
||||
## 使用组件样式
|
||||
|
||||
For every Angular component we write, we may define not only an HTML template,
|
||||
but also the CSS styles that go with that template,
|
||||
specifying any selectors, rules, and media queries that we need.
|
||||
|
||||
对于我们写的每个Angular组件来说，除了定义HTML模板之外，我们还要用于模板的CSS样式、
|
||||
指定需要的选择器、规则和媒体查询。
|
||||
对于我们写的每个 Angular 组件来说，除了定义 HTML 模板之外，我们还要定义用于模板的 CSS 样式、
|
||||
指定任意的选择器、规则和媒体查询。
|
||||
|
||||
One way to do this is to set the `styles` property in the component metadata.
|
||||
The `styles` property takes #{_an} #{_array} of strings that contain CSS code.
|
||||
Usually we give it one string as in this example:
|
||||
|
||||
它的实现方式之一，是在组件的元数据中设置`styles`属性。
|
||||
实现方式之一，是在组件的元数据中设置`styles`属性。
|
||||
`styles`属性可以接受一个包含 CSS 代码的字符串数组。
|
||||
通常我们只给它一个字符串就行了，如同下例：
|
||||
|
||||
@ -69,7 +82,7 @@ block includes
|
||||
in the template of `HeroAppComponent`. Any `<h1>` elements elsewhere in
|
||||
the application are unaffected.
|
||||
|
||||
首先，我们放在组件样式中的选择器，只会应用在组件自身的模板中。上面这个例子中的`h1`选择器只会对
|
||||
首先，我们放在组件样式中的选择器，*只会应用在组件自身的模板中*。上面这个例子中的`h1`选择器只会对
|
||||
`HeroAppComponent`模板中的`<h1>`标签生效，而对应用中其它地方的`<h1>`元素毫无影响。
|
||||
|
||||
This is a big improvement in modularity compared to how CSS traditionally works:
|
||||
@ -78,45 +91,47 @@ block includes
|
||||
|
||||
1. We can use the CSS class names and selectors that make the most sense in the context of each component.
|
||||
|
||||
1. 只有在每个组件的情境中使用CSS类名和选择器，才是最有意义的。
|
||||
可以使用对每个组件最有意义的 CSS 类名和选择器。
|
||||
|
||||
1. Class names and selectors are local to the component and won't collide with
|
||||
classes and selectors used elsewhere in the application.
|
||||
|
||||
1. 类名和选择器是仅属于组件内部的，它不会和应用中其它地方的类名和选择器出现冲突。
|
||||
类名和选择器是仅属于组件内部的，它不会和应用中其它地方的类名和选择器出现冲突。
|
||||
|
||||
1. Our component's styles *cannot* be changed by changes to styles elsewhere in the application.
|
||||
|
||||
1. 我们组件的样式*不会*因为别的地方修改了样式而被意外改变。
|
||||
我们组件的样式*不会*因为别的地方修改了样式而被意外改变。
|
||||
|
||||
1. We can co-locate the CSS code of each component with the TypeScript and HTML code of the component,
|
||||
which leads to a neat and tidy project structure.
|
||||
|
||||
1. 我们可以让每个组件的CSS代码和它的TypeScript代码、HTML代码放在一起，这将促成清爽整洁的项目结构。
|
||||
我们可以让每个组件的 CSS 代码和它的 TypeScript、HTML 代码放在一起，这将促成清爽整洁的项目结构。
|
||||
|
||||
1. We can change or remove component CSS code in the future without trawling through the
|
||||
whole application to see where else it may have been used. We just look at the component we're in.
|
||||
|
||||
1. 将来我们可以修改或移除组件的CSS代码，而不用遍历整个应用来看它有没有被别处用到，只要看看当前组件就可以了。
|
||||
将来我们可以修改或移除组件的 CSS 代码，而不用遍历整个应用来看它有没有被别处用到，只要看看当前组件就可以了。
|
||||
|
||||
a(id="special-selectors")
|
||||
.l-main-section
|
||||
:marked
|
||||
## Special selectors
|
||||
|
||||
## 特殊的选择器
|
||||
|
||||
Component styles have a few special *selectors* from the world of
|
||||
[shadow DOM style scoping](https://www.w3.org/TR/css-scoping-1):
|
||||
|
||||
“组件样式”中有一些从[Shadow DOM style scoping(范围化样式)](https://www.w3.org/TR/css-scoping-1)领域引入的特殊*选择器*：
|
||||
组件样式中有一些从[影子 DOM 样式范围 (Shadow DOM style scoping)](https://www.w3.org/TR/css-scoping-1) 领域引入的特殊*选择器*：
|
||||
|
||||
### :host
|
||||
|
||||
### :host
|
||||
|
||||
Use the `:host` pseudo-class selector to target styles in the element that *hosts* the component (as opposed to
|
||||
targeting elements *inside* the component's template):
|
||||
|
||||
使用`:host`伪类选择器，用来选择组件*宿主*元素中的元素(相对于组件模板*内部*的元素)。
|
||||
使用`:host`伪类选择器，用来选择组件*宿主*元素中的元素（相对于组件模板*内部*的元素）。
|
||||
|
||||
+makeExample('component-styles/ts/app/hero-details.component.css', 'host')(format='.')
|
||||
|
||||
@ -125,7 +140,8 @@ a(id="special-selectors")
|
||||
it from inside the component with other selectors, because it is not part of the
|
||||
component's own template. It is in a parent component's template.
|
||||
|
||||
这是我们能以宿主元素为目标的*唯一*方式。除此之外，我们将没办法指定它，因为宿主不是组件自身模板的一部分，而是父组件模板的一部分。
|
||||
这是我们能以宿主元素为目标的*唯一*方式。除此之外，我们将没办法指定它，
|
||||
因为宿主不是组件自身模板的一部分，而是父组件模板的一部分。
|
||||
|
||||
Use the *function form* to apply host styles conditionally by
|
||||
including another selector inside parentheses after `:host`.
|
||||
@ -140,6 +156,7 @@ a(id="special-selectors")
|
||||
|
||||
:marked
|
||||
### :host-context
|
||||
|
||||
### :host-context
|
||||
|
||||
Sometimes it is useful to apply styles based on some condition *outside* a component's view.
|
||||
@ -147,7 +164,7 @@ a(id="special-selectors")
|
||||
we want to change how our component looks based on that.
|
||||
|
||||
有时候，基于某些来自组件视图*外部*的条件应用样式是很有用的。
|
||||
比如，在文档的`<body>`元素上可能有一个用于表示样式主题(Theme)的CSS类，而我们应当基于它来决定组件的样式。
|
||||
例如，在文档的`<body>`元素上可能有一个用于表示样式主题 (theme) 的 CSS 类，而我们应当基于它来决定组件的样式。
|
||||
|
||||
Use the `:host-context()` pseudo-class selector. It works just like the function
|
||||
form of `:host()`. It looks for a CSS class in *any ancestor* of the component host element, all the way
|
||||
@ -165,11 +182,12 @@ a(id="special-selectors")
|
||||
|
||||
:marked
|
||||
### /deep/
|
||||
|
||||
### /deep/
|
||||
|
||||
Component styles normally apply only to the HTML in the component's own template.
|
||||
|
||||
“组件样式”通常只会作用于组件自身的HTML上。
|
||||
组件样式通常只会作用于组件自身的 HTML 上。
|
||||
|
||||
We can use the `/deep/` selector to force a style down through the child component tree into all the child component views.
|
||||
The `/deep/` selector works to any depth of nested components, and it applies *both to the view
|
||||
@ -195,42 +213,52 @@ a(id="special-selectors")
|
||||
[Controlling View Encapsulation](#view-encapsulation)
|
||||
section for more details.
|
||||
|
||||
`/deep/`和`>>>`选择器只能被用在**仿真(Emulated)**模式下。
|
||||
这种方式是默认值，也是用得最多的方式。要了解更多，请参阅[控制视图包装模式](#view-encapsulation)一节。
|
||||
`/deep/`和`>>>`选择器只能被用在**仿真 (emulated) **模式下。
|
||||
这种方式是默认值，也是用得最多的方式。
|
||||
更多信息，见[控制视图封装模式](#view-encapsulation)一节。
|
||||
|
||||
a(id='loading-styles')
|
||||
.l-main-section
|
||||
:marked
|
||||
## Loading Styles into Components
|
||||
|
||||
## 把样式加载进组件中
|
||||
|
||||
We have several ways to add styles to a component:
|
||||
|
||||
我们有几种方式来把样式加入组件：
|
||||
|
||||
* inline in the template HTML
|
||||
* 内联在模板的HTML中
|
||||
|
||||
内联在模板的 HTML 中
|
||||
|
||||
* by setting `styles` or `styleUrls` metadata
|
||||
* 设置`styles`或`styleUrls`元数据
|
||||
|
||||
设置`styles`或`styleUrls`元数据
|
||||
|
||||
* with CSS imports
|
||||
* 通过CSS文件导入
|
||||
|
||||
通过 CSS 文件导入
|
||||
|
||||
The scoping rules outlined above apply to each of these loading patterns.
|
||||
|
||||
上述局限化规则对所有这些加载模式都适用。
|
||||
上述作用域规则对所有这些加载模式都适用。
|
||||
|
||||
### Styles in Metadata
|
||||
|
||||
### 元数据中的样式
|
||||
|
||||
We can add a `styles` #{_array} property to the `@Component` #{_decorator}.
|
||||
Each string in the #{_array} (usually just one string) defines the CSS.
|
||||
|
||||
我们可以给`@Component`#{_decoratorCn}添加一个`styles`数组型属性。
|
||||
这个数组中的每一个字符串(通常也只有一个)定义一份CSS。
|
||||
这个数组中的每一个字符串（通常也只有一个）定义一份 CSS。
|
||||
|
||||
+makeExample('component-styles/ts/app/hero-app.component.ts')
|
||||
|
||||
:marked
|
||||
### Template Inline Styles
|
||||
|
||||
### 模板内联样式
|
||||
|
||||
We can embed styles directly into the HTML template by putting them
|
||||
@ -242,6 +270,7 @@ a(id='loading-styles')
|
||||
|
||||
:marked
|
||||
### Style URLs in Metadata
|
||||
|
||||
### 元数据中的样式表 URL
|
||||
|
||||
We can load styles from external CSS files by adding a `styleUrls` attribute
|
||||
@ -292,6 +321,7 @@ block module-bundlers
|
||||
|
||||
:marked
|
||||
### Template Link Tags
|
||||
|
||||
### 模板中的 link 标签
|
||||
|
||||
We can also embed `<link>` tags into the component's HTML template.
|
||||
@ -307,12 +337,14 @@ block module-bundlers
|
||||
|
||||
:marked
|
||||
### CSS @imports
|
||||
|
||||
### CSS @imports
|
||||
|
||||
We can also import CSS files into our CSS files by using the standard CSS
|
||||
[`@import` rule](https://developer.mozilla.org/en/docs/Web/CSS/@import).
|
||||
|
||||
我们还可以利用标准的CSS[`@import`规则](https://developer.mozilla.org/en/docs/Web/CSS/@import)来把其它CSS文件导入到我们的CSS文件中。
|
||||
我们还可以利用标准的 CSS [`@import`规则](https://developer.mozilla.org/en/docs/Web/CSS/@import)来把其它
|
||||
CSS 文件导入到我们的 CSS 文件中。
|
||||
|
||||
block css-import-url
|
||||
:marked
|
||||
@ -326,44 +358,47 @@ a#view-encapsulation
|
||||
.l-main-section
|
||||
:marked
|
||||
## Controlling View Encapsulation: Native, Emulated, and None
|
||||
## 控制视图的包装模式：原生(Native)，仿真(Emulated)和无(None)
|
||||
|
||||
## 控制视图的封装模式：原生 (Native)、仿真 (Emulated) 和无 (None)
|
||||
|
||||
As discussed above, component CSS styles are *encapsulated* into the component's own view and do
|
||||
not affect the rest of the application.
|
||||
|
||||
像上面讨论过的一样，组件的CSS样式被包装进了自己的视图中，而不会影响到应用程序的其它部分。
|
||||
像上面讨论过的一样，组件的 CSS 样式被封装进了自己的视图中，而不会影响到应用程序的其它部分。
|
||||
|
||||
We can control how this encapsulation happens on a *per
|
||||
component* basis by setting the *view encapsulation mode* in the component metadata. There
|
||||
are three modes to choose from:
|
||||
|
||||
通过在组件的元数据上设置*视图包装模式*，我们可以分别控制*每个组件*的包装模式。
|
||||
可选的包装模式一共有三种：
|
||||
通过在组件的元数据上设置*视图封装模式*，我们可以分别控制*每个组件*的封装模式。
|
||||
可选的封装模式一共有三种：
|
||||
|
||||
* `Native` view encapsulation uses the browser's native [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM)
|
||||
implementation to attach a Shadow DOM to the component's host element, and then puts the component
|
||||
view inside that Shadow DOM. The component's styles are included within the Shadow DOM.
|
||||
* `Native`模式使用浏览器原生的[Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM)
|
||||
|
||||
`Native`模式使用浏览器原生的 [Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM)
|
||||
实现来为组件的宿主元素附加一个 Shadow DOM。组件的样式被包裹在这个 Shadow DOM 中。(译注：不进不出，没有样式能进来，组件样式出不去。)
|
||||
|
||||
* `Emulated` view encapsulation (**the default**) emulates the behavior of Shadow DOM by preprocessing
|
||||
(and renaming) the CSS code to effectively scope the CSS to the component's view.
|
||||
See [Appendix 1](#inspect-generated-css) for details.
|
||||
|
||||
* `Emulated`模式(**默认值**)通过预处理(并改名)CSS代码来仿真Shadow DOM的行为，以达到把CSS样式局限在组件视图中的目的。
|
||||
参见[附录1](#inspect-generated-css)了解详情。(译注：只进不出，全局样式能进来，组件样式出不去)
|
||||
`Emulated`模式（**默认值**）通过预处理（并改名）CSS 代码来模拟 Shadow DOM 的行为，以达到把 CSS 样式局限在组件视图中的目的。
|
||||
更多信息，见[附录 1](#inspect-generated-css) 。(译注：只进不出，全局样式能进来，组件样式出不去)
|
||||
|
||||
* `None` means that Angular does no view encapsulation.
|
||||
Angular adds the CSS to the global styles.
|
||||
The scoping rules, isolations, and protections discussed earlier do not apply.
|
||||
This is essentially the same as pasting the component's styles into the HTML.
|
||||
* `None`意味着Angular不使用视图包装。
|
||||
Angular会把CSS添加到全局样式中。而不会应用上前面讨论过的那些局限化规则、隔离和保护等规则。
|
||||
|
||||
`None`意味着 Angular 不使用视图封装。
|
||||
Angular 会把 CSS 添加到全局样式中。而不会应用上前面讨论过的那些作用域规则、隔离和保护等。
|
||||
从本质上来说，这跟把组件的样式直接放进 HTML 是一样的。(译注：能进能出。)
|
||||
|
||||
Set the components encapsulation mode using the `encapsulation` property in the component metadata:
|
||||
|
||||
通过组件元数据中的`encapsulation`属性来设置组件包装模式：
|
||||
通过组件元数据中的`encapsulation`属性来设置组件封装模式：
|
||||
|
||||
+makeExample('component-styles/ts/app/quest-summary.component.ts', 'encapsulation.native')(format='.')
|
||||
|
||||
@ -385,13 +420,13 @@ a#inspect-generated-css
|
||||
When using the default emulated view encapsulation, Angular preprocesses
|
||||
all component styles so that they approximate the standard Shadow CSS scoping rules.
|
||||
|
||||
当使用默认的“仿真”模式时，Angular会对组件的所有样式进行预处理，让它们模仿出标准的Shadow CSS局限化规则。
|
||||
当使用默认的仿真模式时，Angular 会对组件的所有样式进行预处理，让它们模仿出标准的 Shadow CSS 作用域规则。
|
||||
|
||||
When we inspect the DOM of a running Angular application with emulated view
|
||||
encapsulation enabled, we see that each DOM element has some extra attributes
|
||||
attached to it:
|
||||
|
||||
当我们查看启用了“仿真”模式的Angular应用时，我们看到每个DOM元素都被加上了一些额外的属性。
|
||||
当我们查看启用了仿真模式的 Angular 应用时，我们看到每个 DOM 元素都被加上了一些额外的属性。
|
||||
|
||||
code-example(format="").
|
||||
<hero-details _nghost-pmm-5>
|
||||
@ -408,13 +443,13 @@ code-example(format="").
|
||||
* An element that would be a Shadow DOM host in native encapsulation has a
|
||||
generated `_nghost` attribute. This is typically the case for component host elements.
|
||||
|
||||
* 一个元素在原生包装方式下可能是Shadow DOM的宿主，在这里被自动添加上一个`_nghost`属性。
|
||||
一个元素在原生封装方式下可能是 Shadow DOM 的宿主，在这里被自动添加上一个`_nghost`属性。
|
||||
这是组件宿主元素的典型情况。
|
||||
|
||||
* An element within a component's view has a `_ngcontent` attribute
|
||||
that identifies to which host's emulated Shadow DOM this element belongs.
|
||||
|
||||
* 组件视图中的每一个元素，都有一个`_ngcontent`属性，它会标记出该元素是哪个宿主的模拟Shadow DOM。
|
||||
组件视图中的每一个元素，都有一个`_ngcontent`属性，它会标记出该元素是哪个宿主的模拟 Shadow DOM。
|
||||
|
||||
The exact values of these attributes are not important. They are automatically
|
||||
generated and we never refer to them in application code. But they are targeted
|
||||
@ -440,7 +475,7 @@ code-example(format="").
|
||||
These extra selectors enable the scoping rules described in this guide.
|
||||
|
||||
这些就是我们写的那些样式被处理后的结果，于是每个选择器都被增加了`_nghost`或`_ngcontent`属性选择器。
|
||||
在这些附加选择器的帮助下，我们实现了本指南中所描述的这些局限化规则。
|
||||
在这些附加选择器的帮助下，我们实现了本指南中所描述的这些作用域规则。
|
||||
|
||||
We'll likely live with *emulated* mode until shadow DOM gains traction.
|
||||
|
||||
@ -467,7 +502,7 @@ code-example(format='').
|
||||
it would be nice to refer to them by name without also having to specify a path back to the root of the application.
|
||||
|
||||
我们会通过设置元数据的`templateUrl`和`styleUrls`属性把模板和 CSS 文件包含进来。
|
||||
既然这些文件都与组件(代码)文件放在一起，那么通过名字，而不是到应用程序根目录的全路径来指定它，就会是一个漂亮的方式。
|
||||
既然这些文件都与组件（代码）文件放在一起，那么通过名字，而不是到应用程序根目录的全路径来指定它，就会是一个漂亮的方式。
|
||||
|
||||
block module-id
|
||||
:marked
|
||||
@ -479,4 +514,4 @@ block module-id
|
||||
:marked
|
||||
Learn more about `moduleId` in the [Component-Relative Paths](../cookbook/component-relative-paths.html) chapter.
|
||||
|
||||
要学习更多关于`moduleId`的知识，请参见[相对于组件的路径](../cookbook/component-relative-paths.html)一章。
|
||||
更多关于`moduleId`的信息，见[相对于组件的路径](../cookbook/component-relative-paths.html)。
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user