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

Started refactoring AspectRatio for V11 Styles

Browse source
This commit is contained in:
mabentley85 2024-04-02 15:34:17 -07:00
commit 286f014df4
1 changed files with 3 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/AspectRatio/AspectRatio.svelte
View file

@ -1,23 +1,12 @@
<script>
/**
* Specify the aspect ratio
* Specify the ratio to be used by the aspect ratio container.
* This will determine what aspect ratio your content will be displayed in.
* @type {"2x1" | "2x3" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"}
*/
export let ratio = "2x1";
</script>
<div
class:bx--aspect-ratio="{true}"
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--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}
>
<div class="{`bx--aspect-ratio bx--aspect-ratio--${ratio}`}" {...$$restProps}>
<slot />
</div>