mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
a369962fdf* fix(expandable-tile): set tile max height using Resize Observer * docs(expandable-tile): update and re-work examples
74 lines
2 KiB
Text
74 lines
2 KiB
Text
<script>
|
|
import { ExpandableTile, Button } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
## Default
|
|
|
|
This component uses a [resize observer](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) to determine the height of the above-the-fold content.
|
|
|
|
It's unexpanded by default.
|
|
|
|
<ExpandableTile>
|
|
<div slot="above">
|
|
<div>
|
|
Above the fold content here
|
|
</div>
|
|
<br />
|
|
<br />
|
|
<div>
|
|
More above the fold content
|
|
</div>
|
|
</div>
|
|
<div slot="below">Below the fold content here</div>
|
|
</ExpandableTile>
|
|
|
|
## Custom tile heights
|
|
|
|
Set a custom height for the tiles on the "above" and "below" slots.
|
|
|
|
<ExpandableTile>
|
|
<div slot="above" style="height: 10rem">Above the fold content here</div>
|
|
<div slot="below" style="height: 10rem">Below the fold content here</div>
|
|
</ExpandableTile>
|
|
|
|
## Expanded
|
|
|
|
<ExpandableTile expanded>
|
|
<div slot="above">Above the fold content here</div>
|
|
<div slot="below">Below the fold content here</div>
|
|
</ExpandableTile>
|
|
|
|
## Light variant
|
|
|
|
<ExpandableTile light>
|
|
<div slot="above">Above the fold content here</div>
|
|
<div slot="below">Below the fold content here</div>
|
|
</ExpandableTile>
|
|
|
|
## With icon labels
|
|
|
|
<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
|
|
<div slot="above">Above the fold content here</div>
|
|
<div slot="below">Below the fold content here</div>
|
|
</ExpandableTile>
|
|
|
|
## With interactive content
|
|
|
|
For tiles containing interactive content, use `stopPropagation` to prevent the tile from toggling.
|
|
|
|
<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
|
|
<div slot="above">
|
|
<a href="/" on:click|preventDefault|stopPropagation={() => console.log("Hello world")}>
|
|
Native element
|
|
</a>
|
|
<br /><br />
|
|
<Button on:click={e => {
|
|
e.stopPropagation();
|
|
console.log("Hello world");
|
|
}}>
|
|
Svelte component
|
|
</Button>
|
|
</div>
|
|
<div slot="below">Below the fold content here</div>
|
|
</ExpandableTile>
|