iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: add camelCase example to style notation (#40699)

Browse Source 
PR Close #40699
This commit is contained in:
Dan Levy 2021-02-03 23:56:53 -07:00 committed by Joey Perrott
parent 8945d7c7c1
commit 72db3e8d54
2 changed files with 27 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
aio/content/examples/attribute-binding/src/app/single-and-multiple-style-binding.component.ts Normal file
View File

@ -0,0 +1,14 @@
@Component({
selector: 'app-nav-bar',
template: `
<nav [style]='navStyle'>
<a [style.text-decoration]="activeLinkStyle">Home Page</a>
<a [style.text-decoration]="linkStyle">Login</a>
</nav>`
})
export class NavBarComponent {
navStyle = 'font-size: 1.2rem; color: cornflowerblue;';
linkStyle = 'underline';
activeLinkStyle = 'overline';
/* . . . */
}

15
aio/content/guide/attribute-binding.md
View File

@ -174,6 +174,12 @@ Optionally, you can add a unit extension like `em` or `%`, which requires a numb
You can write a style property name in either [dash-case](guide/glossary#dash-case), or
[camelCase](guide/glossary#camelcase).
<code-example language="html">
&lt;nav [style.background-color]="expression"&gt;&lt;/nav&gt;
&lt;nav [style.backgroundColor]="expression"&gt;&lt;/nav&gt;
</code-example>
</div>
### Binding to multiple styles
@ -181,8 +187,8 @@ You can write a style property name in either [dash-case](guide/glossary#dash-ca
To toggle multiple styles, bind to the `[style]` attribute&mdash;for example, `[style]="styleExpression"`.
The `styleExpression` can be one of:
* A string list of styles such as `"width: 100px; height: 100px;"`.
* An object with style names as the keys and style values as the values, such as `{width: '100px', height: '100px'}`.
* A string list of styles such as `"width: 100px; height: 100px; background-color: cornflowerblue;"`.
* An object with style names as the keys and style values as the values, such as `{width: '100px', height: '100px', backgroundColor: 'cornflowerblue'}`.
Note that binding an array to `[style]` is not supported.
@ -193,6 +199,11 @@ Updating the property without changing object identity has no effect.
</div>
#### Single and multiple-style binding example
<code-example path="attribute-binding/src/app/single-and-multiple-style-binding.component.ts" header="nav-bar.component.ts">
</code-example>
If there are multiple bindings to the same style attribute, Angular uses [styling precedence](guide/style-precedence) to determine which binding to use.
The following table summarizes style binding syntax.