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

fix(aspect-ratio): add missing 3x2 ratio

Browse source
This commit is contained in:
Eric Y Liu 2021-04-30 16:37:40 -07:00
commit 9a8bed6c1b
8 changed files with 28 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

8
COMPONENT_INDEX.md
View file

@ -258,8 +258,8 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :--------------- | :------- | :------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ | | :-------- | :--------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ |
| ratio | <code>let</code> | No | <code>"2x1" &#124; "16x9" &#124; "4x3" &#124; "1x1" &#124; "3x4" &#124; "9x16" &#124; "1x2"</code> | <code>"2x1"</code> | Specify the aspect ratio | | ratio | <code>let</code> | No | <code>"2x1" &#124; "16x9" &#124; "4x3" &#124; "1x1" &#124; "3x4" &#124; "3x2" &#124; "9x16" &#124; "1x2"</code> | <code>"2x1"</code> | Specify the aspect ratio |
### Slots ### Slots
@ -1860,13 +1860,13 @@ None.
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | Prop name | Kind | Reactive | Type | Default value | Description |
| :-------- | :----------------- | :------- | :------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | | :-------- | :----------------- | :------- | :-------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| error | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` if an error occurs when loading the image | | error | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` if an error occurs when loading the image |
| loaded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` when the image is loaded | | loaded | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` when the image is loaded |
| loading | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` when `loaded` is `true` and `error` is false | | loading | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` when `loaded` is `true` and `error` is false |
| src | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the image source | | src | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the image source |
| alt | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the image alt text | | alt | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the image alt text |
| ratio | <code>let</code> | No | <code>"2x1" &#124; "16x9" &#124; "4x3" &#124; "1x1" &#124; "3x4" &#124; "9x16" &#124; "1x2"</code> | -- | Specify the aspect ratio for the image wrapper | | ratio | <code>let</code> | No | <code>"2x1" &#124; "16x9" &#124; "4x3" &#124; "1x1" &#124; "3x4" &#124; "3x2" &#124; "9x16" &#124; "1x2"</code> | -- | Specify the aspect ratio for the image wrapper |
| fadeIn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to fade in the image on load<br />The duration uses the `fast-02` value following Carbon guidelines on motion | | fadeIn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to fade in the image on load<br />The duration uses the `fast-02` value following Carbon guidelines on motion |
| loadImage | <code>const</code> | No | <code>(url?: string) => void</code> | <code>(url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url &#124;&#124; src; image.onload = () => (loaded = true); image.onerror = () => (error = true); }</code> | Method invoked to load the image provided a `src` value | | loadImage | <code>const</code> | No | <code>(url?: string) => void</code> | <code>(url) => { if (image != null) image = null; loaded = false; error = false; image = new Image(); image.src = url &#124;&#124; src; image.onload = () => (loaded = true); image.onerror = () => (error = true); }</code> | Method invoked to load the image provided a `src` value |

4
docs/src/COMPONENT_API.json
View file

@ -202,7 +202,7 @@
"name": "ratio", "name": "ratio",
"kind": "let", "kind": "let",
"description": "Specify the aspect ratio", "description": "Specify the aspect ratio",
"type": "\"2x1\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"9x16\" | \"1x2\"", "type": "\"2x1\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"3x2\" | \"9x16\" | \"1x2\"",
"value": "\"2x1\"", "value": "\"2x1\"",
"isFunction": false, "isFunction": false,
"constant": false, "constant": false,
@ -4358,7 +4358,7 @@
"name": "ratio", "name": "ratio",
"kind": "let", "kind": "let",
"description": "Specify the aspect ratio for the image wrapper", "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, "isFunction": false,
"constant": false, "constant": false,
"reactive": false "reactive": false

8
docs/src/pages/components/AspectRatio.svx
View file

@ -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. 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) ### Default (2x1)
@ -37,6 +37,12 @@ Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"
3x4 3x4
</AspectRatio> </AspectRatio>
### Ratio 3x2
<AspectRatio ratio="3x2">
3x2
</AspectRatio>
### Ratio 9x16 ### Ratio 9x16
<AspectRatio ratio="9x16"> <AspectRatio ratio="9x16">

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

@ -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. 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"`.
<ImageLoader ratio="16x9" src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" /> <ImageLoader ratio="16x9" src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />

3
src/AspectRatio/AspectRatio.svelte
View file

@ -1,7 +1,7 @@
<script> <script>
/** /**
* Specify the aspect ratio * Specify the aspect ratio
* @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "9x16" | "1x2"} * @type {"2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"}
*/ */
export let ratio = "2x1"; export let ratio = "2x1";
</script> </script>
@ -13,6 +13,7 @@
class:bx--aspect-ratio--4x3="{ratio === '4x3'}" class:bx--aspect-ratio--4x3="{ratio === '4x3'}"
class:bx--aspect-ratio--1x1="{ratio === '1x1'}" class:bx--aspect-ratio--1x1="{ratio === '1x1'}"
class:bx--aspect-ratio--3x4="{ratio === '3x4'}" 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--9x16="{ratio === '9x16'}"
class:bx--aspect-ratio--1x2="{ratio === '1x2'}" class:bx--aspect-ratio--1x2="{ratio === '1x2'}"
{...$$restProps} {...$$restProps}

2
src/ImageLoader/ImageLoader.svelte
View file

@ -16,7 +16,7 @@
/** /**
* Specify the aspect ratio for the image wrapper * 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; export let ratio = undefined;

2
types/AspectRatio/AspectRatio.d.ts vendored
View file

@ -7,7 +7,7 @@ export interface AspectRatioProps
* Specify the aspect ratio * Specify the aspect ratio
* @default "2x1" * @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< export default class AspectRatio extends SvelteComponentTyped<

2
types/ImageLoader/ImageLoader.d.ts vendored
View file

@ -18,7 +18,7 @@ export interface ImageLoaderProps
/** /**
* Specify the aspect ratio for the image wrapper * 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 * Set to `true` when `loaded` is `true` and `error` is false