mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 19:46:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs(expandable-tile): update and re-work examples

Browse source
This commit is contained in:
Eric Liu 2023-05-28 10:11:31 -07:00
commit c3bb05aa2d
1 changed files with 31 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,7 +3,29 @@
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
## Default (unexpanded) ## 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> <ExpandableTile>
<div slot="above" style="height: 10rem">Above the fold content here</div> <div slot="above" style="height: 10rem">Above the fold content here</div>
@ -13,22 +35,22 @@
## Expanded ## Expanded
<ExpandableTile expanded> <ExpandableTile expanded>
<div slot="above" style="height: 10rem">Above the fold content here</div> <div slot="above">Above the fold content here</div>
<div slot="below" style="height: 10rem">Below the fold content here</div> <div slot="below">Below the fold content here</div>
</ExpandableTile> </ExpandableTile>
## Light variant ## Light variant
<ExpandableTile light> <ExpandableTile light>
<div slot="above" style="height: 10rem">Above the fold content here</div> <div slot="above">Above the fold content here</div>
<div slot="below" style="height: 10rem">Below the fold content here</div> <div slot="below">Below the fold content here</div>
</ExpandableTile> </ExpandableTile>
## With icon labels ## With icon labels
<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more"> <ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
<div slot="above" style="height: 10rem">Above the fold content here</div> <div slot="above">Above the fold content here</div>
<div slot="below" style="height: 10rem">Below the fold content here</div> <div slot="below">Below the fold content here</div>
</ExpandableTile> </ExpandableTile>
## With interactive content ## With interactive content
@ -36,7 +58,7 @@
For tiles containing interactive content, use `stopPropagation` to prevent the tile from toggling. For tiles containing interactive content, use `stopPropagation` to prevent the tile from toggling.
<ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more"> <ExpandableTile tileExpandedLabel="View less" tileCollapsedLabel="View more">
<div slot="above" style="height: 10rem"> <div slot="above">
<a href="/" on:click|preventDefault|stopPropagation={() => console.log("Hello world")}> <a href="/" on:click|preventDefault|stopPropagation={() => console.log("Hello world")}>
Native element Native element
</a> </a>
@ -48,5 +70,5 @@ For tiles containing interactive content, use `stopPropagation` to prevent the t
Svelte component Svelte component
</Button> </Button>
</div> </div>
<div slot="below" style="height: 10rem">Below the fold content here</div> <div slot="below">Below the fold content here</div>
</ExpandableTile> </ExpandableTile>