mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 19:46:36 +00:00
feat: add ImageLoader component
This commit is contained in:
Eric Y Liu
parent
a222d23037
commit
0dba95affd
11 changed files with 380 additions and 3 deletions
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"total": 158,
|
||||
"total": 159,
|
||||
"components": [
|
||||
{
|
||||
"moduleName": "Accordion",
|
||||
|
|
@ -4052,6 +4052,101 @@
|
|||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "div" }
|
||||
},
|
||||
{
|
||||
"moduleName": "ImageLoader",
|
||||
"filePath": "src/ImageLoader/ImageLoader.svelte",
|
||||
"props": [
|
||||
{
|
||||
"name": "src",
|
||||
"kind": "let",
|
||||
"description": "Specify the image source",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "alt",
|
||||
"kind": "let",
|
||||
"description": "Specify the image alt text",
|
||||
"type": "string",
|
||||
"value": "\"\"",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "ratio",
|
||||
"kind": "let",
|
||||
"description": "Specify the aspect ratio for the image wrapper",
|
||||
"type": "\"2x1\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"9x16\" | \"1x2\"",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "loading",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` when `loaded` is `true` and `error` is false",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "loaded",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` when the image is loaded",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "error",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` if an error occurs when loading the image",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": true
|
||||
},
|
||||
{
|
||||
"name": "fadeIn",
|
||||
"kind": "let",
|
||||
"description": "Set to `true` to fade in the image on load\nThe duration uses the `fast-02` value following Carbon guidelines on motion",
|
||||
"type": "boolean",
|
||||
"value": "false",
|
||||
"isFunction": false,
|
||||
"constant": false,
|
||||
"reactive": false
|
||||
},
|
||||
{
|
||||
"name": "loadImage",
|
||||
"kind": "const",
|
||||
"description": "Method invoked to load the image provided a `src` value",
|
||||
"type": "(url?: string) => void",
|
||||
"value": "(url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url || src; image.onload = () => (loaded = true); image.onerror = () => (error = true); }",
|
||||
"isFunction": true,
|
||||
"constant": true,
|
||||
"reactive": false
|
||||
}
|
||||
],
|
||||
"slots": [
|
||||
{ "name": "error", "default": false, "slot_props": "{}" },
|
||||
{ "name": "loading", "default": false, "slot_props": "{}" }
|
||||
],
|
||||
"events": [
|
||||
{ "type": "dispatched", "name": "load", "detail": "any" },
|
||||
{ "type": "dispatched", "name": "error", "detail": "any" }
|
||||
],
|
||||
"typedefs": [],
|
||||
"rest_props": { "type": "Element", "name": "img" }
|
||||
},
|
||||
{
|
||||
"moduleName": "InlineLoading",
|
||||
"filePath": "src/InlineLoading/InlineLoading.svelte",
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
import Footer from "../components/Footer.svelte";
|
||||
|
||||
const deprecated = ["ToggleSmall", "Icon"];
|
||||
const new_components = ["ImageLoader"];
|
||||
|
||||
let isOpen = false;
|
||||
let isSideNavOpen = true;
|
||||
|
|
@ -106,6 +107,9 @@
|
|||
{#if deprecated.includes(child.title)}
|
||||
<Tag size="sm" type="red">Deprecated</Tag>
|
||||
{/if}
|
||||
{#if new_components.includes(child.title)}
|
||||
<Tag size="sm" type="blue">New</Tag>
|
||||
{/if}
|
||||
</SideNavMenuItem>
|
||||
{/each}
|
||||
</SideNavMenu>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
|
||||
The `AspectRatio` component is useful for constraining fluid content within an aspect ratio. To demo this, resize your browser for the examples below.
|
||||
|
||||
Supported aspect ratios: `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"9x16"`, `"1x2"`
|
||||
Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"9x16"` and `"1x2"`.
|
||||
|
||||
### Default (2x1)
|
||||
|
||||
|
|
|
|||
46
docs/src/pages/components/ImageLoader.svx
Normal file
46
docs/src/pages/components/ImageLoader.svx
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<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">
|
||||
<div slot="loading">
|
||||
<InlineLoading />
|
||||
</div>
|
||||
<div slot="error">
|
||||
An error occurred.
|
||||
</div>
|
||||
</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"`, `"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" />
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<script>
|
||||
import { ImageLoader, Button } from "carbon-components-svelte";
|
||||
|
||||
const src =
|
||||
"https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg";
|
||||
const srcError = src + "1";
|
||||
|
||||
let imageLoader;
|
||||
let error;
|
||||
</script>
|
||||
|
||||
<Button
|
||||
kind="ghost"
|
||||
disabled="{!imageLoader || error}"
|
||||
on:click="{() => imageLoader.loadImage(srcError)}"
|
||||
>
|
||||
Simulate error
|
||||
</Button>
|
||||
|
||||
<ImageLoader bind:this="{imageLoader}" bind:error fadeIn src="{src}">
|
||||
<div slot="error">
|
||||
<Button kind="ghost" on:click="{() => imageLoader.loadImage(src)}">
|
||||
Error. Try again
|
||||
</Button>
|
||||
</div>
|
||||
</ImageLoader>
|
||||
Loading…
Add table
Add a link
Reference in a new issue