diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index 7aa72b13..e1fc6e00 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -257,9 +257,9 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ | -| ratio | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2" | "2x1" | Specify the aspect ratio | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ | +| ratio | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | "2x1" | Specify the aspect ratio | ### Slots @@ -1859,16 +1859,16 @@ None. ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :-------- | :----------------- | :------- | :------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | -| error | let | Yes | boolean | false | Set to `true` if an error occurs when loading the image | -| loaded | let | Yes | boolean | false | Set to `true` when the image is loaded | -| loading | let | Yes | boolean | false | Set to `true` when `loaded` is `true` and `error` is false | -| src | let | No | string | "" | Specify the image source | -| alt | let | No | string | "" | Specify the image alt text | -| ratio | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2" | -- | Specify the aspect ratio for the image wrapper | -| fadeIn | let | No | boolean | false | Set to `true` to fade in the image on load
The duration uses the `fast-02` value following Carbon guidelines on motion | -| loadImage | const | No | (url?: string) => void | (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); } | Method invoked to load the image provided a `src` value | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :-------- | :----------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | +| error | let | Yes | boolean | false | Set to `true` if an error occurs when loading the image | +| loaded | let | Yes | boolean | false | Set to `true` when the image is loaded | +| loading | let | Yes | boolean | false | Set to `true` when `loaded` is `true` and `error` is false | +| src | let | No | string | "" | Specify the image source | +| alt | let | No | string | "" | Specify the image alt text | +| ratio | let | No | "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2" | -- | Specify the aspect ratio for the image wrapper | +| fadeIn | let | No | boolean | false | Set to `true` to fade in the image on load
The duration uses the `fast-02` value following Carbon guidelines on motion | +| loadImage | const | No | (url?: string) => void | (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); } | Method invoked to load the image provided a `src` value | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index fa19d2c9..1d1410f9 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -202,7 +202,7 @@ "name": "ratio", "kind": "let", "description": "Specify the aspect ratio", - "type": "\"2x1\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"9x16\" | \"1x2\"", + "type": "\"2x1\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"3x2\" | \"9x16\" | \"1x2\"", "value": "\"2x1\"", "isFunction": false, "constant": false, @@ -4358,7 +4358,7 @@ "name": "ratio", "kind": "let", "description": "Specify the aspect ratio for the image wrapper", - "type": "\"2x1\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"9x16\" | \"1x2\"", + "type": "\"2x1\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"3x2\" | \"9x16\" | \"1x2\"", "isFunction": false, "constant": false, "reactive": false diff --git a/docs/src/pages/components/AspectRatio.svx b/docs/src/pages/components/AspectRatio.svx index 8b920a20..cb7c86e8 100644 --- a/docs/src/pages/components/AspectRatio.svx +++ b/docs/src/pages/components/AspectRatio.svx @@ -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 include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"9x16"` and `"1x2"`. +Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`. ### Default (2x1) @@ -37,6 +37,12 @@ Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `" 3x4 +### Ratio 3x2 + + + 3x2 + + ### Ratio 9x16 diff --git a/docs/src/pages/components/ImageLoader.svx b/docs/src/pages/components/ImageLoader.svx index 9a7057f7..34808896 100644 --- a/docs/src/pages/components/ImageLoader.svx +++ b/docs/src/pages/components/ImageLoader.svx @@ -28,7 +28,7 @@ Use the "loading" and "error" named slots to render an element when the image is 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"`. +Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`. diff --git a/src/AspectRatio/AspectRatio.svelte b/src/AspectRatio/AspectRatio.svelte index a4cb0577..e0af4be0 100644 --- a/src/AspectRatio/AspectRatio.svelte +++ b/src/AspectRatio/AspectRatio.svelte @@ -1,7 +1,7 @@ @@ -13,6 +13,7 @@ class:bx--aspect-ratio--4x3="{ratio === '4x3'}" class:bx--aspect-ratio--1x1="{ratio === '1x1'}" class:bx--aspect-ratio--3x4="{ratio === '3x4'}" + class:bx--aspect-ratio--3x2="{ratio === '3x2'}" class:bx--aspect-ratio--9x16="{ratio === '9x16'}" class:bx--aspect-ratio--1x2="{ratio === '1x2'}" {...$$restProps} diff --git a/src/ImageLoader/ImageLoader.svelte b/src/ImageLoader/ImageLoader.svelte index b8fd4d7f..1c089568 100644 --- a/src/ImageLoader/ImageLoader.svelte +++ b/src/ImageLoader/ImageLoader.svelte @@ -16,7 +16,7 @@ /** * Specify the aspect ratio for the image wrapper - * @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"} + * @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"} */ export let ratio = undefined; diff --git a/types/AspectRatio/AspectRatio.d.ts b/types/AspectRatio/AspectRatio.d.ts index 8e723628..c714dbe3 100644 --- a/types/AspectRatio/AspectRatio.d.ts +++ b/types/AspectRatio/AspectRatio.d.ts @@ -7,7 +7,7 @@ export interface AspectRatioProps * Specify the aspect ratio * @default "2x1" */ - ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"; + ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"; } export default class AspectRatio extends SvelteComponentTyped< diff --git a/types/ImageLoader/ImageLoader.d.ts b/types/ImageLoader/ImageLoader.d.ts index 688bf84c..5fa2383f 100644 --- a/types/ImageLoader/ImageLoader.d.ts +++ b/types/ImageLoader/ImageLoader.d.ts @@ -18,7 +18,7 @@ export interface ImageLoaderProps /** * Specify the aspect ratio for the image wrapper */ - ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"; + ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"; /** * Set to `true` when `loaded` is `true` and `error` is false