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.
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.
@ -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.
You usually replace the default Stackblitz image with a custom image that better represents the sample.
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`.
Here's an embedded live example for this guide.
```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}

View File

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB