mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 18:31: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

14
docs/src/COMPONENT_API.json
View file

@ -217,13 +217,25 @@
"isRequired": false,
"constant": false,
"reactive": false
},
{
"name": "tag",
"kind": "let",
"description": "Specify the tag name",
"type": "keyof HTMLElementTagNameMap",
"value": "\"div\"",
"isFunction": false,
"isFunctionDeclaration": false,
"isRequired": false,
"constant": false,
"reactive": false
}
],
"moduleExports": [],
"slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
"events": [],
"typedefs": [],
"rest_props": { "type": "Element", "name": "div" }
"rest_props": { "type": "Element", "name": "svelte:element" }
},
{
"moduleName": "Breadcrumb",

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>