mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(expandable-tile): add "With interactive content" example (#1465)

Browse source 
* style(docs): apply `code-01` styles to component api type, default value

* docs(expandable-tile): add "With interactive content" example (#1464)

* docs(overflow-menu): do not open flipped example by default
This commit is contained in:
metonym 2022-08-27 11:30:02 -07:00 • committed by GitHub
commit 6ec48312ff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 40 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

24
docs/src/pages/components/ExpandableTile.svx
View file

@ -3,7 +3,7 @@ source: Tile/ExpandableTile.svelte
---
<script>
import { ExpandableTile } from "carbon-components-svelte";
import { ExpandableTile, Button } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
@ -33,4 +33,24 @@ source: Tile/ExpandableTile.svelte
<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>
</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>