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

feat(aspect-ratio)!: integration with v11 (#1955)

Browse source
This commit is contained in:
Eric Liu 2024-04-21 11:14:52 -07:00 • committed by GitHub
commit 08036e105c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 48 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -7,7 +7,9 @@ The `AspectRatio` component is useful for constraining fluid content within an a
Supported aspect ratios include `"2x1"`, `"2x3"`, `"16x9"`, `"4x3"`, `"1x1"`, `"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`.
## Default (2x1)
## Ratio 2x1
The default aspect ratio is `2x1`.
<AspectRatio>
2x1
@ -61,8 +63,19 @@ Supported aspect ratios include `"2x1"`, `"2x3"`, `"16x9"`, `"4x3"`, `"1x1"`, `"
1x2
</AspectRatio>
## Custom tag
By default, the `AspectRatio` component renders a `div` element. You can change this by specifying a `tag`.
<AspectRatio tag="h1" ratio="16x9">
Content
</AspectRatio>
## Tile (16x9)
<AspectRatio ratio="16x9">
<Tile style="height: 100%">Content</Tile>
</AspectRatio>
<Tile style="position: absolute; height: 100%; width: 100%">
Content
</Tile>
</AspectRatio>