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

feat(popover): add Popover component

Browse source
This commit is contained in:
Eric Y Liu 2021-03-19 06:34:42 -07:00
commit a3a4a02d94
10 changed files with 280 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

67
docs/src/pages/components/Popover.svx Normal file
View file

@ -0,0 +1,67 @@
<script>
import { Popover } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte";
</script>
### Default
By default, the position of the popover component is absolute.
<div data-outline="relative">
Parent
<Popover open>
<div style="padding: var(--cds-spacing-05)">Content</div>
</Popover>
</div>
### Relative
Set `relative` to `true` to use a relative position.
<div data-outline="relative">
Parent
<Popover relative open>
<div style="padding: var(--cds-spacing-05)">Content</div>
</Popover>
</div>
### With caret
<div data-outline="relative">
Parent
<Popover caret open>
<div style="padding: var(--cds-spacing-05)">Content</div>
</Popover>
</div>
### Custom caret alignment
By default, the caret is aligned "top".
Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`, `"bottom-left"`, `"bottom-right"`, `"left"`, `"left-bottom"`, `"left-top"`, `"right"`, `"right-bottom"` or `"right-top"`.
<div data-outline="relative">
Parent
<Popover caret align="top-left" open>
<div style="padding: var(--cds-spacing-05)">Content</div>
</Popover>
</div>
### Light variant
<div data-outline="relative">
Parent
<Popover light open>
<div style="padding: var(--cds-spacing-05)">Content</div>
</Popover>
</div>
### High contrast variant
<div data-outline="relative">
Parent
<Popover highContrast open>
<div style="padding: var(--cds-spacing-05)">Content</div>
</Popover>
</div>