mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 10:51:06 +00:00
dce2dda72a* chore(docs): run "npx browserslist@latest --update-db" * chore(docs): upgrade carbon-icons-svelte to latest * refactor(docs): re-use styles from css/all.scss * chore(docs): add pnpm install command * chore(docs): upgrade prettier, prettier-plugin-svelte * docs(date-picker): improve "DatePicker in a modal" example * fix(docs): restore "scripts-markup-styles" svelte sort order * chore(docs): upgrade mdsvex * chore(deps-dev): bump prettier, prettier-plugin-svelte, svelte * refactor(docs): use svelte:fragment where applicable * fix(docs): include missing "options" in svelteSortOrder prettier config
46 lines
No EOL
1.6 KiB
Text
46 lines
No EOL
1.6 KiB
Text
<script>
|
|
import { ImageLoader, Button, InlineLoading } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
|
|
let key = 0;
|
|
</script>
|
|
|
|
This utility component uses the [Image API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image) to programmatically load an image with slottable loading and error states.
|
|
|
|
### Default
|
|
|
|
<ImageLoader src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />
|
|
|
|
### Slots
|
|
|
|
Use the "loading" and "error" named slots to render an element when the image is loading or has an error.
|
|
|
|
<ImageLoader src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg">
|
|
<svelte:fragment slot="loading">
|
|
<InlineLoading />
|
|
</svelte:fragment>
|
|
<svelte:fragment slot="error">
|
|
An error occurred.
|
|
</svelte:fragment>
|
|
</ImageLoader>
|
|
|
|
### With aspect ratio
|
|
|
|
If `ratio` is set, this component uses the [AspectRatio](/components/AspectRatio) to constrain the image.
|
|
|
|
Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`.
|
|
|
|
<ImageLoader ratio="16x9" src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />
|
|
|
|
### Fade in
|
|
|
|
Set `fadeIn` to `true` to fade in the image if successfully loaded.
|
|
|
|
<Button kind="ghost" on:click="{() => { key++;}}">Reload image</Button>
|
|
{#key key}<ImageLoader fadeIn ratio="16x9" src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />{/key}
|
|
|
|
### Programmatic usage
|
|
|
|
In this example, a component reference is obtained to programmatically trigger the `loadImage` method.
|
|
|
|
<FileSource src="/framed/ImageLoader/ProgrammaticImageLoader" /> |