<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" height="10rem">
    <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>
