mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-18 11:36:36 +00:00
67 lines
No EOL
1.5 KiB
Text
67 lines
No EOL
1.5 KiB
Text
<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> |