Add animated gifs to demo the code

This commit is contained in:
Ward Bell 2015-10-31 23:54:11 -07:00
parent b68ef96472
commit 2b4b028d73
4 changed files with 7 additions and 4 deletions

View File

@ -55,10 +55,11 @@ include ../../../../_includes/_util-fns
We then use [interpolation](./template-syntax.html#interpolation) We then use [interpolation](./template-syntax.html#interpolation)
to display the `values` property back on screen. to display the `values` property back on screen.
Enter the letters "abcd", backspace to remove them, and we should see: Enter the letters "abc", backspace to remove them, and we should see:
code-example(). code-example().
a | ab | abc | abcd | abc | ab | a | | a | ab | abc | ab | a | |
figure.image-display
img(src='/resources/images/devguide/user-input/keyup1-anim.gif' alt="key up 1")
:markdown :markdown
.l-main-section .l-main-section
@ -113,6 +114,8 @@ code-example().
inside the event expression rather than in the component ... inside the event expression rather than in the component ...
because we can ... even if it is a dubious practice. because we can ... even if it is a dubious practice.
+makeExample('user-input/ts/src/app/app.ts', 'key-up3-component') +makeExample('user-input/ts/src/app/app.ts', 'key-up3-component')
figure.image-display
img(src='/resources/images/devguide/user-input/keyup3-anim.gif' alt="key up 3")
.l-main-section .l-main-section
:markdown :markdown
@ -138,7 +141,7 @@ code-example().
elsewhere on the page. elsewhere on the page.
figure.image-display figure.image-display
img(src='/resources/images/devguide/user-input/little-tour.png' alt="Little Tour of Heroes") img(src='/resources/images/devguide/user-input/little-tour-anim.gif' alt="Little Tour of Heroes")
:markdown :markdown
Below is the entire "Little Tour of Heroes" micro-app in a single component. Below is the entire "Little Tour of Heroes" micro-app in a single component.
We'll call out the highlights after we bask briefly in its minimalist glory. We'll call out the highlights after we bask briefly in its minimalist glory.

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB