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

docs(popover): simplify external element example

Browse source
This commit is contained in:
Eric Liu 2022-12-07 20:13:13 -08:00
commit a3204cc131
2 changed files with 19 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

41
docs/src/pages/framed/Popover/WithButton.svelte
View file

@ -2,36 +2,19 @@
import { Popover, Button } from "carbon-components-svelte";
let open = true;
let containerRef = null;
let ref = null;
</script>
<div data-outline>
<div
bind:this="{containerRef}"
style:position="relative"
style:display="inline-block"
<div bind:this="{ref}" style:position="relative">
<Button on:click="{() => (open = !open)}">Toggle popover</Button>
<Popover
bind:open
align="bottom-left"
on:click:outside="{({ detail }) => {
console.log('on:click:outside');
open = ref.contains(detail.target);
}}"
>
<Button on:click="{() => (open = !open)}">Click to open</Button>
<Popover
bind:open
align="bottom-left"
on:click:outside="{({ detail }) => {
console.log('on:click:outside');
if (!containerRef.contains(detail.target)) {
open = false;
}
}}"
>
<div style="padding: var(--cds-spacing-05)">Content</div>
</Popover>
</div>
<div>
<br />
Anim eu laboris veniam in est elit ullamco enim irure id. Lorem est culpa ex
in enim enim. Culpa quis incididunt magna officia et aliqua. Ullamco deserunt
aute enim cupidatat. Culpa quis enim sint sint anim qui irure exercitation labore
occaecat in reprehenderit proident. Nisi laborum ut et amet commodo amet ullamco
commodo non aliqua magna ad eu. Ad aliquip minim nostrud id enim elit velit ullamco
pariatur eu excepteur pariatur cillum.
</div>
<div style="padding: var(--cds-spacing-05)">Content</div>
</Popover>
</div>