修订完component-styles
This commit is contained in:
parent
b83320c3da
commit
8eff508115
@ -19,11 +19,13 @@ block includes
|
|||||||
在本章中,我们将学到如何加载和使用这些*组件样式*。
|
在本章中,我们将学到如何加载和使用这些*组件样式*。
|
||||||
|
|
||||||
## Table Of Contents
|
## Table Of Contents
|
||||||
|
|
||||||
# 目录
|
# 目录
|
||||||
|
|
||||||
* [Using component styles](#using-component-styles)
|
* [Using component styles](#using-component-styles)
|
||||||
|
|
||||||
[使用组件样式](#using-component-styles)
|
[使用组件样式](#using-component-styles)
|
||||||
|
|
||||||
* [Special selectors](#special-selectors)
|
* [Special selectors](#special-selectors)
|
||||||
|
|
||||||
[特殊的选择器](#special-selectors)
|
[特殊的选择器](#special-selectors)
|
||||||
@ -82,6 +84,8 @@ block includes
|
|||||||
|
|
||||||
This is a big improvement in modularity compared to how CSS traditionally works.
|
This is a big improvement in modularity compared to how CSS traditionally works.
|
||||||
|
|
||||||
|
这种模块化相对于 CSS 的传统工作方式是一个巨大的改进。
|
||||||
|
|
||||||
* You can use the CSS class names and selectors that make the most sense in the context of each component.
|
* You can use the CSS class names and selectors that make the most sense in the context of each component.
|
||||||
|
|
||||||
可以使用对每个组件最有意义的 CSS 类名和选择器。
|
可以使用对每个组件最有意义的 CSS 类名和选择器。
|
||||||
@ -117,7 +121,7 @@ a(id="special-selectors")
|
|||||||
[W3C](https://www.w3.org) site).
|
[W3C](https://www.w3.org) site).
|
||||||
The following sections describe these selectors.
|
The following sections describe these selectors.
|
||||||
|
|
||||||
组件样式中有一些从[影子 DOM 样式范围 (Shadow DOM style scoping)](https://www.w3.org/TR/css-scoping-1) 领域引入的特殊*选择器*:
|
组件样式中有一些从影子(Shadow) DOM 样式范围领域(记录在[W3C](https://www.w3.org)的[CSS Scoping Module Level 1](https://www.w3.org/TR/css-scoping-1)中) 引入的特殊*选择器*:
|
||||||
|
|
||||||
### :host
|
### :host
|
||||||
|
|
||||||
@ -274,7 +278,9 @@ a(id='loading-styles')
|
|||||||
If you use module bundlers like Webpack, you can also use the `styles` attribute
|
If you use module bundlers like Webpack, you can also use the `styles` attribute
|
||||||
to load styles from external files at build time. You could write:
|
to load styles from external files at build time. You could write:
|
||||||
|
|
||||||
像 Webpack 这类模块打包器的用户可能会使用`styles`属性来在构建时从外部文件中加载样式。它们可能这样写:`styles: [require('my.component.css')]`
|
像 Webpack 这类模块打包器的用户可能会使用`styles`属性来在构建时从外部文件中加载样式。它们可能这样写:
|
||||||
|
|
||||||
|
`styles: [require('my.component.css')]`
|
||||||
|
|
||||||
Set the `styles` property, notthe `styleUrls` property. The module
|
Set the `styles` property, notthe `styleUrls` property. The module
|
||||||
bundler loads the CSS strings, not Angular.
|
bundler loads the CSS strings, not Angular.
|
||||||
@ -314,6 +320,7 @@ a(id='loading-styles')
|
|||||||
application root, not the component file.
|
application root, not the component file.
|
||||||
|
|
||||||
像`styleUrls`标签一样,这个 link 标签的`href`指向的 URL 也是相对于应用的根目录的,而不是组件文件。
|
像`styleUrls`标签一样,这个 link 标签的`href`指向的 URL 也是相对于应用的根目录的,而不是组件文件。
|
||||||
|
|
||||||
+makeExample('component-styles/ts/src/app/hero-team.component.ts', 'stylelink')
|
+makeExample('component-styles/ts/src/app/hero-team.component.ts', 'stylelink')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
@ -350,7 +357,7 @@ a#view-encapsulation
|
|||||||
Choose from the following modes:
|
Choose from the following modes:
|
||||||
|
|
||||||
通过在组件的元数据上设置*视图封装模式*,我们可以分别控制*每个组件*的封装模式。
|
通过在组件的元数据上设置*视图封装模式*,我们可以分别控制*每个组件*的封装模式。
|
||||||
可选的封装模式一共有三种:
|
可选的封装模式一共有如下几种:
|
||||||
|
|
||||||
* `Native` view encapsulation uses the browser's native shadow DOM implementation (see
|
* `Native` view encapsulation uses the browser's native shadow DOM implementation (see
|
||||||
[Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM)
|
[Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM)
|
||||||
@ -465,7 +472,9 @@ a#relative-urls
|
|||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## Appendix 2: Loading styles with relative URLs
|
## Appendix 2: Loading styles with relative URLs
|
||||||
|
|
||||||
## 附录 2:使用相对 URL 加载样式
|
## 附录 2:使用相对 URL 加载样式
|
||||||
|
|
||||||
It's common practice to split a component's code, HTML, and CSS into three separate files in the same directory:
|
It's common practice to split a component's code, HTML, and CSS into three separate files in the same directory:
|
||||||
|
|
||||||
把组件的代码 (ts/js)、HTML 和 CSS 分别放到同一个目录下的三个不同文件,是一个常用的实践:
|
把组件的代码 (ts/js)、HTML 和 CSS 分别放到同一个目录下的三个不同文件,是一个常用的实践:
|
||||||
|
Loading…
x
Reference in New Issue
Block a user