mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-17 11:11:25 +00:00
27da2a0f8b* docs: link source code to folder for multiple components * chore(docs): remove unused `source` from frontmatter
52 lines
1.6 KiB
Text
52 lines
1.6 KiB
Text
<script>
|
|
import { ExpandableTile, Button } from "carbon-components-svelte";
|
|
import Preview from "../../components/Preview.svelte";
|
|
</script>
|
|
|
|
## Default (unexpanded)
|
|
|
|
<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" style="height: 10rem">Above the fold content here</div>
|
|
<div slot="below" style="height: 10rem">Below the fold content here</div>
|
|
</ExpandableTile>
|
|
|
|
## Light variant
|
|
|
|
<ExpandableTile light>
|
|
<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>
|
|
|
|
## With icon labels
|
|
|
|
<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
|
|
<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>
|
|
|
|
## 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" style="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" style="height: 10rem">Below the fold content here</div>
|
|
</ExpandableTile>
|