cargdev/angular
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(docs-infra): implement figure styles (#33259)

Browse Source 
PR#28396 originally addressed an update via issue #23983 to make images more visible with a white background (implementation of gray "lightbox").

This PR implements those styles defined in PR#28396.

PR Close #33259
This commit is contained in:
Stefanie Fluin
2019-10-18 16:22:06 -07:00
committed by Andrew Kushnir
parent 355e54a410
commit ba29e4d953
46 changed files with 666 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
aio/content/guide/language-service.md
View File

@ -25,8 +25,10 @@ contextual possibilities and hints as you type.
This example shows autocomplete in an interpolation. As you type it out,
you can hit tab to complete.
<figure>
<img src="generated/images/guide/language-service/language-completion.gif" alt="autocompletion">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/language-service/language-completion.gif" alt="autocompletion">
</div>
</figure>
There are also completions within elements. Any elements you have as a component selector will
@ -37,8 +39,10 @@ show up in the completion list.
The Angular Language Service can forewarn you of mistakes in your code.
In this example, Angular doesn't know what `orders` is or where it comes from.
<figure>
<img src="generated/images/guide/language-service/language-error.gif" alt="error checking">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/language-service/language-error.gif" alt="error checking">
</div>
</figure>
### Quick info and navigation
@ -46,8 +50,10 @@ In this example, Angular doesn't know what `orders` is or where it comes from.
The quick-info feature allows you to hover to see where components, directives, modules, and so on come from.
You can then click "Go to definition" or press F12 to go directly to the definition.
<figure>
<img src="generated/images/guide/language-service/language-navigation.gif" alt="navigation">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/language-service/language-navigation.gif" alt="navigation">
</div>
</figure>