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

fix(expandable-tile): set tile height using resize observer (#1738)

Browse source 
* fix(expandable-tile): set tile max height using Resize Observer

* docs(expandable-tile): update and re-work examples
This commit is contained in:
Eric Liu 2023-06-02 10:08:25 -07:00 • committed by GitHub
commit a369962fdf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 45 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/Tile/ExpandableTile.svelte
View file

@ -32,11 +32,23 @@
/** Obtain a reference to the top-level element */
export let ref = null;
import { afterUpdate } from "svelte";
import { afterUpdate, onMount } from "svelte";
import ChevronDown from "../icons/ChevronDown.svelte";
let refAbove = null;
onMount(() => {
const resizeObserver = new ResizeObserver(([elem]) => {
tileMaxHeight = elem.contentRect.height;
});
resizeObserver.observe(refAbove);
return () => {
resizeObserver.disconnect();
};
});
afterUpdate(() => {
if (tileMaxHeight === 0) {
tileMaxHeight = refAbove.getBoundingClientRect().height;
@ -62,10 +74,8 @@
class:bx--tile--expandable="{true}"
class:bx--tile--is-expanded="{expanded}"
class:bx--tile--light="{light}"
style:max-height="{expanded ? "none" : `${tileMaxHeight + tilePadding}px`}"
{...$$restProps}
style="{expanded
? $$restProps.style
: `${$$restProps.style}; max-height: ${tileMaxHeight + tilePadding}px`}"
on:click
on:click="{() => {
expanded = !expanded;