mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-16 10:51:06 +00:00
feat(aspect-ratio)!: integration with v11 (#1955)
This commit is contained in:
parent
0e8909ae59
commit
08036e105c
5 changed files with 48 additions and 7 deletions
|
@ -1,12 +1,21 @@
|
|||
<script>
|
||||
// @ts-check
|
||||
|
||||
/**
|
||||
* Specify the aspect ratio
|
||||
* @type {"2x1" | "2x3" | "16x9" | "4x3" | "1x1" | "3x4" | "3x2" | "9x16" | "1x2"}
|
||||
*/
|
||||
export let ratio = "2x1";
|
||||
|
||||
/**
|
||||
* Specify the tag name
|
||||
* @type {keyof HTMLElementTagNameMap}
|
||||
*/
|
||||
export let tag = "div";
|
||||
</script>
|
||||
|
||||
<div
|
||||
<svelte:element
|
||||
this="{tag}"
|
||||
class:bx--aspect-ratio="{true}"
|
||||
class:bx--aspect-ratio--2x1="{ratio === '2x1'}"
|
||||
class:bx--aspect-ratio--2x3="{ratio === '2x3'}"
|
||||
|
@ -20,4 +29,4 @@
|
|||
{...$$restProps}
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</svelte:element>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue