Skip to content

Commit

Permalink
feat(aspect-ratio)!: integration with v11
Browse files Browse the repository at this point in the history
  • Loading branch information
metonym committed Apr 21, 2024
1 parent 0e8909a commit a640bb8
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 7 deletions.
1 change: 1 addition & 0 deletions COMPONENT_INDEX.md
Original file line number Diff line number Diff line change
Expand Up @@ -250,6 +250,7 @@ None.
| Prop name | Required | Kind | Reactive | Type | Default value | Description |
| :-------- | :------- | :--------------- | :------- | ---------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------------ |
| ratio | No | <code>let</code> | No | <code>"2x1" &#124; "2x3" &#124; "16x9" &#124; "4x3" &#124; "1x1" &#124; "3x4" &#124; "3x2" &#124; "9x16" &#124; "1x2"</code> | <code>"2x1"</code> | Specify the aspect ratio |
| tag | No | <code>let</code> | No | <code>keyof HTMLElementTagNameMap</code> | <code>"div"</code> | Specify the tag name |

### Slots

Expand Down
14 changes: 13 additions & 1 deletion docs/src/COMPONENT_API.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
19 changes: 16 additions & 3 deletions docs/src/pages/components/AspectRatio.svx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>

13 changes: 11 additions & 2 deletions src/AspectRatio/AspectRatio.svelte
Original file line number Diff line number Diff line change
@@ -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'}"
Expand All @@ -20,4 +29,4 @@
{...$$restProps}
>
<slot />
</div>
</svelte:element>
8 changes: 7 additions & 1 deletion types/AspectRatio/AspectRatio.svelte.d.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { SvelteComponentTyped } from "svelte";
import type { SvelteHTMLElements } from "svelte/elements";

type RestProps = SvelteHTMLElements["div"];
type RestProps = SvelteHTMLElements["svelte:element"];

export interface AspectRatioProps extends RestProps {
/**
Expand All @@ -19,6 +19,12 @@ export interface AspectRatioProps extends RestProps {
| "9x16"
| "1x2";

/**
* Specify the tag name
* @default "div"
*/
tag?: keyof HTMLElementTagNameMap;

[key: `data-${string}`]: any;
}

Expand Down

0 comments on commit a640bb8

Please sign in to comment.