cargdev/angular
1
0
Fork 0
Code Issues 7 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

54
aio/content/guide/structural-directives.md
View File

@ -125,8 +125,10 @@ The `ngIf` directive doesn't hide elements with CSS. It adds and removes them ph
Confirm that fact using browser developer tools to inspect the DOM.
<figure>
<img src='generated/images/guide/structural-directives/element-not-in-dom.png' alt="ngIf=false element not in DOM">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/structural-directives/element-not-in-dom.png' alt="ngIf=false element not in DOM">
</div>
</figure>
@ -151,8 +153,10 @@ A directive could hide the unwanted paragraph instead by setting its `display` s
While invisible, the element remains in the DOM.
<figure>
<img src='generated/images/guide/structural-directives/element-display-in-dom.png' alt="hidden element still in DOM">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/structural-directives/element-display-in-dom.png' alt="hidden element still in DOM">
</div>
</figure>
@ -211,8 +215,10 @@ Internally, Angular translates the `*ngIf` _attribute_ into a `<ng-template>` _e
The first form is not actually rendered, only the finished product ends up in the DOM.
<figure>
<img src='generated/images/guide/structural-directives/hero-div-in-dom.png' alt="hero div in DOM">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/structural-directives/hero-div-in-dom.png' alt="hero div in DOM">
</div>
</figure>
@ -559,8 +565,10 @@ That's the fate of the middle "Hip!" in the phrase "Hip! Hip! Hooray!".
Angular erases the middle "Hip!", leaving the cheer a bit less enthusiastic.
<figure>
<img src='generated/images/guide/structural-directives/template-rendering.png' alt="template tag rendering">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/structural-directives/template-rendering.png' alt="template tag rendering">
</div>
</figure>
@ -617,8 +625,10 @@ You also have a CSS style rule that happens to apply to a `<span>` within a `<p>
The constructed paragraph renders strangely.
<figure>
<img src='generated/images/guide/structural-directives/bad-paragraph.png' alt="spanned paragraph with bad style">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/structural-directives/bad-paragraph.png' alt="spanned paragraph with bad style">
</div>
</figure>
@ -639,8 +649,10 @@ When you try this,
the drop down is empty.
<figure>
<img src='generated/images/guide/structural-directives/bad-select.png' alt="spanned options don't work">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/structural-directives/bad-select.png' alt="spanned options don't work">
</div>
</figure>
@ -662,8 +674,10 @@ Here's the conditional paragraph again, this time using `<ng-container>`.
It renders properly.
<figure>
<img src='generated/images/guide/structural-directives/good-paragraph.png' alt="ngcontainer paragraph with proper style">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/structural-directives/good-paragraph.png' alt="ngcontainer paragraph with proper style">
</div>
</figure>
@ -678,8 +692,10 @@ Now conditionally exclude a _select_ `<option>` with `<ng-container>`.
The drop down works properly.
<figure>
<img src='generated/images/guide/structural-directives/select-ngcontainer-anim.gif' alt="ngcontainer options work properly">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/structural-directives/select-ngcontainer-anim.gif' alt="ngcontainer options work properly">
</div>
</figure>
<div class="alert is-helpful">
@ -828,8 +844,10 @@ When the `condition` is falsy, the top (A) paragraph appears and the bottom (B)
When the `condition` is truthy, the top (A) paragraph is removed and the bottom (B) paragraph appears.
<figure>
<img src='generated/images/guide/structural-directives/unless-anim.gif' alt="UnlessDirective in action">
<figure class="lightbox">
<div class="card">
<img src='generated/images/guide/structural-directives/unless-anim.gif' alt="UnlessDirective in action">
</div>
</figure>