carbon-components-svelte/tests/AspectRatio.test.svelte
2020-11-19 14:16:01 -08:00

35 lines
863 B
Svelte

<script lang="ts">
import { AspectRatio, Tile } from "../types";
</script>
<AspectRatio style="outline: 1px solid var(--cds-interactive-04)">
2x1
</AspectRatio>
<AspectRatio ratio="16x9" style="outline: 1px solid var(--cds-interactive-04)">
16x9
</AspectRatio>
<AspectRatio ratio="4x3" style="outline: 1px solid var(--cds-interactive-04)">
4x3
</AspectRatio>
<AspectRatio ratio="1x1" style="outline: 1px solid var(--cds-interactive-04)">
1x1
</AspectRatio>
<AspectRatio ratio="3x4" style="outline: 1px solid var(--cds-interactive-04)">
3x4
</AspectRatio>
<AspectRatio ratio="9x16" style="outline: 1px solid var(--cds-interactive-04)">
9x16
</AspectRatio>
<AspectRatio ratio="1x2" style="outline: 1px solid var(--cds-interactive-04)">
1x2
</AspectRatio>
<AspectRatio ratio="16x9">
<Tile style="height: 100%">Content</Tile>
</AspectRatio>