docs(aio): update `live-example` docs in authors style guide (#23018)

PR Close #23018
This commit is contained in:
George Kalpakas 2018-03-27 14:55:56 +03:00 committed by Igor Minar
parent ce43e96d49
commit b874501025
3 changed files with 4 additions and 7 deletions

View File

@ -740,7 +740,7 @@ Adding `<live-example></live-example>` to the page generates the two default lin
2. a link that downloads that sample. 2. a link that downloads that sample.
Clicking the first link opens the code sample in a new browser tab in the "embedded Stackblitz" style. Clicking the first link opens the code sample on StackBlitz in a new browser tab.
You can change the appearance and behavior of the live example with attributes and classes. You can change the appearance and behavior of the live example with attributes and classes.
@ -810,16 +810,13 @@ You can embed the Stackblitz within the guide page itself by adding the `embedde
For performance reasons, the Stackblitz does not start right away. The reader sees an image instead. Clicking the image starts the sometimes-slow process of launching the embedded Stackblitz within an iframe on the page. For performance reasons, the Stackblitz does not start right away. The reader sees an image instead. Clicking the image starts the sometimes-slow process of launching the embedded Stackblitz within an iframe on the page.
You usually replace the default Stackblitz image with a custom image that better represents the sample. Here's an embedded live example for this guide.
Store that image in the `content/images` directory in a folder with a name matching the corresponding example folder.
Here's an embedded live example for this guide. It has a custom image created from a snapshot of the running app, overlayed with `content/images/Stackblitz/unused/click-to-run.png`.
```html ```html
<live-example embedded img="guide/docs-style-guide/docs-style-guide-Stackblitz.png"></live-example> <live-example embedded></live-example>
``` ```
<live-example embedded img="guide/docs-style-guide/docs-style-guide-Stackblitz.png"></live-example> <live-example embedded></live-example>
{@a anchors} {@a anchors}

View File

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB