mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(image-loader): add "Dynamic image source" example

Browse source
This commit is contained in:
Eric Liu 2024-02-24 13:36:33 -08:00 • committed by metonym
commit c6af8bdafe
2 changed files with 32 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

6
docs/src/pages/components/ImageLoader.svx
View file

@ -44,3 +44,9 @@ Set `fadeIn` to `true` to fade in the image if successfully loaded.
In this example, a component reference is obtained to programmatically trigger the `loadImage` method. In this example, a component reference is obtained to programmatically trigger the `loadImage` method.
<FileSource src="/framed/ImageLoader/ProgrammaticImageLoader" /> <FileSource src="/framed/ImageLoader/ProgrammaticImageLoader" />
## Dynamic image source
The same `ImageLoader` instance can be used to load different images.
<FileSource src="/framed/ImageLoader/DynamicImageLoader" />

25
docs/src/pages/framed/ImageLoader/DynamicImageLoader.svelte Normal file
View file

@ -0,0 +1,25 @@
<script>
import { ImageLoader, Button } from "carbon-components-svelte";
const images = [
"https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg",
"https://upload.wikimedia.org/wikipedia/commons/b/b9/Carbon-design-system-logo.png",
];
let index = 0;
$: src = images[index];
</script>
<Button
kind="ghost"
on:click="{() => {
index = index === 0 ? 1 : 0;
}}"
>
Toggle image
</Button>
<div style:margin-top="1rem" style:width="100%" style:max-width="120px">
<ImageLoader ratio="1x1" fadeIn src="{src}" alt="{src}" />
</div>