docs(aio): update `live-example` docs in authors style guide (#23018)
PR Close #23018
This commit is contained in:
parent
ce43e96d49
commit
b874501025
|
@ -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}
|
||||
|
||||
|
|
Before Width: | Height: | Size: 20 KiB After Width: | Height: | Size: 20 KiB |
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB |
Loading…
Reference in New Issue