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

12
docs/src/pages/components/Popover.svx
View file

@ -36,12 +36,6 @@ Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the
</Popover> </Popover>
</div> </div>
## Manage open state with a Button
You can bind the `open` prop and manage the open state of the popover with an external button.
<FileSource src="/framed/Popover/WithButton" />
## Popover alignment ## Popover alignment
Customize the popover alignment using the `align` prop. Valid values include: `"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top"`. Customize the popover alignment using the `align` prop. Valid values include: `"top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "left" | "left-bottom" | "left-top" | "right" | "right-bottom" | "right-top"`.
@ -154,3 +148,9 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
<div style="padding: var(--cds-spacing-05)">Content</div> <div style="padding: var(--cds-spacing-05)">Content</div>
</Popover> </Popover>
</div> </div>
## External element
Use the `open` prop to manage state with an external element, like a button.
<FileSource src="/framed/Popover/WithButton" />

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

@ -2,36 +2,19 @@
import { Popover, Button } from "carbon-components-svelte"; import { Popover, Button } from "carbon-components-svelte";
let open = true; let open = true;
let containerRef = null; let ref = null;
</script> </script>
<div data-outline> <div bind:this="{ref}" style:position="relative">
<div <Button on:click="{() => (open = !open)}">Toggle popover</Button>
bind:this="{containerRef}"
style:position="relative"
style:display="inline-block"
>
<Button on:click="{() => (open = !open)}">Click to open</Button>
<Popover <Popover
bind:open bind:open
align="bottom-left" align="bottom-left"
on:click:outside="{({ detail }) => { on:click:outside="{({ detail }) => {
console.log('on:click:outside'); console.log('on:click:outside');
if (!containerRef.contains(detail.target)) { open = ref.contains(detail.target);
open = false;
}
}}" }}"
> >
<div style="padding: var(--cds-spacing-05)">Content</div> <div style="padding: var(--cds-spacing-05)">Content</div>
</Popover> </Popover>
</div> </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>