Add animated gifs to demo the code
This commit is contained in:
parent
b68ef96472
commit
2b4b028d73
|
@ -55,10 +55,11 @@ include ../../../../_includes/_util-fns
|
|||
We then use [interpolation](./template-syntax.html#interpolation)
|
||||
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().
|
||||
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
|
||||
|
||||
.l-main-section
|
||||
|
@ -113,6 +114,8 @@ code-example().
|
|||
inside the event expression rather than in the component ...
|
||||
because we can ... even if it is a dubious practice.
|
||||
+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
|
||||
:markdown
|
||||
|
@ -138,7 +141,7 @@ code-example().
|
|||
elsewhere on the page.
|
||||
|
||||
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
|
||||
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.
|
||||
|
|
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 |
Loading…
Reference in New Issue