Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
sjtrimble wants to merge 7 commits into from
Closed

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
187a492
feat(docs-infra): implement figure styles
sjtrimble Oct 18, 2019
343bfe1
fixup! feat(docs-infra): implement figure styles
sjtrimble Oct 21, 2019
65e6295
fixup! feat(docs-infra): implement figure styles
sjtrimble Oct 21, 2019
5d987c6
fixup! feat(docs-infra): implement figure styles
sjtrimble Oct 22, 2019
f588c65
fixup! feat(docs-infra): implement figure styles
sjtrimble Oct 22, 2019
81d5340
fixup! feat(docs-infra): implement figure styles
sjtrimble Oct 22, 2019
771a723
fixup! feat(docs-infra): implement figure styles
gkalpak Oct 23, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions aio/content/guide/animations.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,10 @@ Let's animate a simple transition that changes a single HTML element from one st

In HTML, these attributes are set using ordinary CSS styles such as color and opacity. In Angular, use the `style()` function to specify a set of CSS styles for use with animations. You can collect a set of styles in an animation state, and give the state a name, such as `open` or `closed`.

<figure>
<img src="generated/images/guide/animations/open-closed.png" alt="open and closed states">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/animations/open-closed.png" alt="open and closed states">
</div>
</figure>

### Animation state and styles
Expand Down Expand Up @@ -166,8 +168,10 @@ The `trigger()` function describes the property name to watch for changes. When

In this example, we'll name the trigger `openClose`, and attach it to the `button` element. The trigger describes the open and closed states, and the timings for the two transitions.

<figure>
<img src="generated/images/guide/animations/triggering-the-animation.png" alt="triggering the animation">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/animations/triggering-the-animation.png" alt="triggering the animation">
</div>
</figure>

<div class="alert is-helpful">
Expand Down
24 changes: 16 additions & 8 deletions aio/content/guide/architecture-components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,10 @@ You define a component's view with its companion template. A template is a form

Views are typically arranged hierarchically, allowing you to modify or show and hide entire UI sections or pages as a unit. The template immediately associated with a component defines that component's *host view*. The component can also define a *view hierarchy*, which contains *embedded views*, hosted by other components.

<figure>
<img src="generated/images/guide/architecture/component-tree.png" alt="Component tree" class="left">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/architecture/component-tree.png" alt="Component tree" class="left">
</div>
</figure>

A view hierarchy can include views from components in the same NgModule, but it also can (and often does) include views from components that are defined in different NgModules.
Expand Down Expand Up @@ -81,8 +83,10 @@ Angular supports *two-way data binding*, a mechanism for coordinating the parts

The following diagram shows the four forms of data binding markup. Each form has a direction: to the DOM, from the DOM, or both.

<figure>
<img src="generated/images/guide/architecture/databinding.png" alt="Data Binding" class="left">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/architecture/databinding.png" alt="Data Binding" class="left">
</div>
</figure>

This example from the `HeroListComponent` template uses three of these forms.
Expand Down Expand Up @@ -110,14 +114,18 @@ as with event binding.
Angular processes *all* data bindings once for each JavaScript event cycle,
from the root of the application component tree through all child components.

<figure>
<img src="generated/images/guide/architecture/component-databinding.png" alt="Data Binding" class="left">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/architecture/component-databinding.png" alt="Data Binding" class="left">
</div>
</figure>

Data binding plays an important role in communication between a template and its component, and is also important for communication between parent and child components.

<figure>
<img src="generated/images/guide/architecture/parent-child-binding.png" alt="Parent/Child binding" class="left">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/architecture/parent-child-binding.png" alt="Parent/Child binding" class="left">
</div>
</figure>

### Pipes
Expand Down
16 changes: 8 additions & 8 deletions aio/content/guide/architecture-modules.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,20 +35,20 @@ Here's a simple root NgModule definition.

NgModules provide a *compilation context* for their components. A root NgModule always has a root component that is created during bootstrap, but any NgModule can include any number of additional components, which can be loaded through the router or created through the template. The components that belong to an NgModule share a compilation context.

<figure>

<img src="generated/images/guide/architecture/compilation-context.png" alt="Component compilation context" class="left">

<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/architecture/compilation-context.png" alt="Component compilation context" class="left">
</div>
</figure>

<br class="clear">

A component and its template together define a *view*. A component can contain a *view hierarchy*, which allows you to define arbitrarily complex areas of the screen that can be created, modified, and destroyed as a unit. A view hierarchy can mix views defined in components that belong to different NgModules. This is often the case, especially for UI libraries.

<figure>

<img src="generated/images/guide/architecture/view-hierarchy.png" alt="View hierarchy" class="left">

<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/architecture/view-hierarchy.png" alt="View hierarchy" class="left">
</div>
</figure>

<br class="clear">
Expand Down
6 changes: 4 additions & 2 deletions aio/content/guide/architecture-services.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,8 +70,10 @@ When all requested services have been resolved and returned, Angular can call th

The process of `HeroService` injection looks something like this.

<figure>
<img src="generated/images/guide/architecture/injector-injects.png" alt="Service" class="left">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/architecture/injector-injects.png" alt="Service" class="left">
</div>
</figure>

### Providing services
Expand Down
6 changes: 4 additions & 2 deletions aio/content/guide/architecture.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,8 +113,10 @@ To define navigation rules, you associate *navigation paths* with your component

You've learned the basics about the main building blocks of an Angular application. The following diagram shows how these basic pieces are related.

<figure>
<img src="generated/images/guide/architecture/overview2.png" alt="overview">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/architecture/overview2.png" alt="overview">
</div>
</figure>

* Together, a component and template define an Angular view.
Expand Down
18 changes: 12 additions & 6 deletions aio/content/guide/attribute-directives.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,8 +175,10 @@ Here's the updated directive in full:
Run the app and confirm that the background color appears when
the mouse hovers over the `p` and disappears as it moves out.

<figure>
<img src="generated/images/guide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight">
</div>
</figure>

{@a bindings}
Expand Down Expand Up @@ -271,8 +273,10 @@ Revise the `AppComponent.color` so that it has no initial value.

Here are the harness and directive in action.

<figure>
<img src="generated/images/guide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2">
</div>
</figure>

{@a second-property}
Expand Down Expand Up @@ -307,8 +311,10 @@ because you made it _public_ with the `@Input` decorator.

Here's how the harness should work when you're done coding.

<figure>
<img src="generated/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/attribute-directives/highlight-directive-final-anim.gif" alt="Final Highlight">
</div>
</figure>

## Summary
Expand Down
36 changes: 24 additions & 12 deletions aio/content/guide/component-interaction.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,10 @@ and each iteration's `hero` instance to the child's `hero` property.
The running application displays three heroes:


<figure>
<img src="generated/images/guide/component-interaction/parent-to-child.png" alt="Parent-to-child">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/component-interaction/parent-to-child.png" alt="Parent-to-child">
</div>
</figure>


Expand Down Expand Up @@ -94,8 +96,10 @@ Here's the `NameParentComponent` demonstrating name variations including a name



<figure>
<img src="generated/images/guide/component-interaction/setter.png" alt="Parent-to-child-setter">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/component-interaction/setter.png" alt="Parent-to-child-setter">
</div>
</figure>


Expand Down Expand Up @@ -152,8 +156,10 @@ The `VersionParentComponent` supplies the `minor` and `major` values and binds b
Here's the output of a button-pushing sequence:


<figure>
<img src="generated/images/guide/component-interaction/parent-to-child-on-changes.gif" alt="Parent-to-child-onchanges">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/component-interaction/parent-to-child-on-changes.gif" alt="Parent-to-child-onchanges">
</div>
</figure>


Expand Down Expand Up @@ -206,8 +212,10 @@ The framework passes the event argument&mdash;represented by `$event`&mdash;to t
and the method processes it:


<figure>
<img src="generated/images/guide/component-interaction/child-to-parent.gif" alt="Child-to-parent">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/component-interaction/child-to-parent.gif" alt="Child-to-parent">
</div>
</figure>


Expand Down Expand Up @@ -268,8 +276,10 @@ uses interpolation to display the child's `seconds` property.
Here we see the parent and child working together.


<figure>
<img src="generated/images/guide/component-interaction/countdown-timer-anim.gif" alt="countdown timer">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/component-interaction/countdown-timer-anim.gif" alt="countdown timer">
</div>
</figure>


Expand Down Expand Up @@ -421,8 +431,10 @@ the parent `MissionControlComponent` and the `AstronautComponent` children,
facilitated by the service:


<figure>
<img src="generated/images/guide/component-interaction/bidirectional-service.gif" alt="bidirectional-service">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/component-interaction/bidirectional-service.gif" alt="bidirectional-service">
</div>
</figure>


Expand Down
60 changes: 40 additions & 20 deletions aio/content/guide/dependency-injection-in-action.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,10 @@ and the framework resolves the nested dependencies.

When all dependencies are in place, `AppComponent` displays the user information.

<figure>
<img src="generated/images/guide/dependency-injection-in-action/logged-in-user.png" alt="Logged In User">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/dependency-injection-in-action/logged-in-user.png" alt="Logged In User">
</div>
</figure>

{@a service-scope}
Expand Down Expand Up @@ -131,8 +133,10 @@ The template displays this data-bound property.
Find this example in <live-example name="dependency-injection-in-action">live code</live-example>
and confirm that the three `HeroBioComponent` instances have their own cached hero data.

<figure>
<img src="generated/images/guide/dependency-injection-in-action/hero-bios.png" alt="Bios">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/dependency-injection-in-action/hero-bios.png" alt="Bios">
</div>
</figure>

{@a qualify-dependency-lookup}
Expand Down Expand Up @@ -191,8 +195,10 @@ placing it in the `<ng-content>` slot of the `HeroBioComponent` template.

The result is shown below, with the hero's telephone number from `HeroContactComponent` projected above the hero description.

<figure>
<img src="generated/images/guide/dependency-injection-in-action/hero-bio-and-content.png" alt="bio and contact">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/dependency-injection-in-action/hero-bio-and-content.png" alt="bio and contact">
</div>
</figure>


Expand Down Expand Up @@ -221,8 +227,10 @@ When the property is marked as optional, Angular sets `loggerService` to null an

Here's `HeroBiosAndContactsComponent` in action.

<figure>
<img src="generated/images/guide/dependency-injection-in-action/hero-bios-and-contacts.png" alt="Bios with contact into">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/dependency-injection-in-action/hero-bios-and-contacts.png" alt="Bios with contact into">
</div>
</figure>


Expand All @@ -232,8 +240,10 @@ until it finds the logger at the `AppComponent` level.
The logger logic kicks in and the hero display updates
with the "!!!" marker to indicate that the logger was found.

<figure>
<img src="generated/images/guide/dependency-injection-in-action/hero-bio-contact-no-host.png" alt="Without @Host">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/dependency-injection-in-action/hero-bio-contact-no-host.png" alt="Without @Host">
</div>
</figure>


Expand Down Expand Up @@ -294,8 +304,10 @@ first without a value (yielding the default color) and then with an assigned col

The following image shows the effect of mousing over the `<hero-bios-and-contacts>` tag.

<figure>
<img src="generated/images/guide/dependency-injection-in-action/highlight.png" alt="Highlighted bios">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/dependency-injection-in-action/highlight.png" alt="Highlighted bios">
</div>
</figure>

{@a providers}
Expand Down Expand Up @@ -347,8 +359,10 @@ You learned about some other methods in [Dependency Providers](guide/dependency-
The following `HeroOfTheMonthComponent` example demonstrates many of the alternatives and why you need them.
It's visually simple: a few properties and the logs produced by a logger.

<figure>
<img src="generated/images/guide/dependency-injection-in-action/hero-of-month.png" alt="Hero of the month">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/dependency-injection-in-action/hero-of-month.png" alt="Hero of the month">
</div>
</figure>

The code behind it customizes how and where the DI framework provides dependencies.
Expand Down Expand Up @@ -460,8 +474,10 @@ The following example puts `MinimalLogger` to use in a simplified version of `He

The `HeroOfTheMonthComponent` constructor's `logger` parameter is typed as `MinimalLogger`, so only the `logs` and `logInfo` members are visible in a TypeScript-aware editor.

<figure>
<img src="generated/images/guide/dependency-injection-in-action/minimal-logger-intellisense.png" alt="MinimalLogger restricted API">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/dependency-injection-in-action/minimal-logger-intellisense.png" alt="MinimalLogger restricted API">
</div>
</figure>


Expand All @@ -472,8 +488,10 @@ Behind the scenes, Angular sets the `logger` parameter to the full service regis

This is illustrated in the following image, which displays the logging date.

<figure>
<img src="generated/images/guide/dependency-injection-in-action/date-logger-entry.png" alt="DateLoggerService entry">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/dependency-injection-in-action/date-logger-entry.png" alt="DateLoggerService entry">
</div>
</figure>

</div>
Expand Down Expand Up @@ -627,8 +645,10 @@ and then pass them down to the base class through the constructor.
In this contrived example, `SortedHeroesComponent` inherits from `HeroesBaseComponent`
to display a *sorted* list of heroes.

<figure>
<img src="generated/images/guide/dependency-injection-in-action/sorted-heroes.png" alt="Sorted Heroes">
<figure class="lightbox">
<div class="card">
<img src="generated/images/guide/dependency-injection-in-action/sorted-heroes.png" alt="Sorted Heroes">
</div>
</figure>

The `HeroesBaseComponent` can stand on its own.
Expand Down
Loading