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

fix(aspect-ratio): add missing "2x3" ratio value (#1276)

Browse source 
* fix(aspect-ratio): add missing "2x3" ratio value

* Run "yarn buld:docs"

* docs(aspect-ratio): add "Ratio 2x3" example
This commit is contained in:
metonym 2022-04-30 09:14:18 -07:00 • committed by GitHub
commit 410ac0c32f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 22 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

4
COMPONENT_INDEX.md
View file

@ -256,8 +256,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; "3x2" &#124; "9x16" &#124; "1x2"</code> | <code>"2x1"</code> | Specify the aspect ratio | | ratio | <code>let</code> | No | <code>"2x1" &#124; "2x3" &#124; "16x9" &#124; "4x3" &#124; "1x1" &#124; "3x4" &#124; "3x2" &#124; "9x16" &#124; "1x2"</code> | <code>"2x1"</code> | Specify the aspect ratio |
### Slots ### Slots

2
docs/src/COMPONENT_API.json
View file

@ -217,7 +217,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\" | \"3x2\" | \"9x16\" | \"1x2\"", "type": "\"2x1\" | \"2x3\" | \"16x9\" | \"4x3\" | \"1x1\" | \"3x4\" | \"3x2\" | \"9x16\" | \"1x2\"",
"value": "\"2x1\"", "value": "\"2x1\"",
"isFunction": false, "isFunction": false,
"isFunctionDeclaration": false, "isFunctionDeclaration": false,

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

@ -13,6 +13,12 @@ Supported aspect ratios include `"2x1"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"
2x1 2x1
</AspectRatio> </AspectRatio>
### Ratio 2x3
<AspectRatio ratio="2x3">
2x3
</AspectRatio>
### Ratio 16x9 ### Ratio 16x9
<AspectRatio ratio="16x9"> <AspectRatio ratio="16x9">

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

11
types/AspectRatio/AspectRatio.svelte.d.ts vendored
View file

@ -7,7 +7,16 @@ export interface AspectRatioProps
* Specify the aspect ratio * Specify the aspect ratio
* @default "2x1" * @default "2x1"
*/ */
ratio?: "2x1" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"; ratio?:
| "2x1"
| "2x3"
| "16x9"
| "4x3"
| "1x1"
| "3x4"
| "3x2"
| "9x16"
| "1x2";
} }
export default class AspectRatio extends SvelteComponentTyped< export default class AspectRatio extends SvelteComponentTyped<