mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-17 19:21:26 +00:00
e51f50da0c* chore(deps-dev): upgrade carbon-components to v10.38.0 * feat(text-input): support read-only variant * docs: use consistent lingo for inline variant examples * docs(popover): add Popover alignment example * fix(file-uploader): adjust markup to avoid accessibility errors Ref:0dfde60e3* fix(inline-loading): use error filled icon * fix(inline-loading): render iconDescription as title in error/warning icons Ref:51c53c923* fix(structured-list): update accessibility attributes * fix(tooltip-definition): use span instead of div Ref:cb6de3025* fix(multi-select): close menu when blurring the last filterable option * fix(multi-select): open/focus field for filterable multiselect #635 * fix(multi-select): unblock focus when blurring input #635 * fix(combo-box): select correct item with keys, allow input after clearing #195 * fix(combo-box): update input text if item is selected * feat(combo-box): render checkmark icon for selected item * fix(ui-shell): toggle SideNav rail when clicking the hamburger menu #699 * fix(context-menu): update context menu classes #684 * docs(context-menu): improve demo instructions #684 * fix(context-menu): close menu when clicking anywhere
150 lines
No EOL
3.8 KiB
Text
150 lines
No EOL
3.8 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>
|
|
Parent
|
|
<Popover open>
|
|
<div style="padding: var(--cds-spacing-05)">Content</div>
|
|
</Popover>
|
|
</div>
|
|
|
|
### Relative position
|
|
|
|
Set `relative` to `true` to use a relative position.
|
|
|
|
<div data-outline>
|
|
Parent
|
|
<Popover relative open>
|
|
<div style="padding: var(--cds-spacing-05)">Content</div>
|
|
</Popover>
|
|
</div>
|
|
|
|
### Close on outside click
|
|
|
|
Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the popover.
|
|
|
|
<div data-outline>
|
|
Parent
|
|
<Popover open closeOnOutsideClick on:click:outside={() => {console.log('on:click:outside')}}>
|
|
<div style="padding: var(--cds-spacing-05)">Content</div>
|
|
</Popover>
|
|
</div>
|
|
|
|
### 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"`.
|
|
|
|
The default `align` value is `"top"`.
|
|
|
|
<div data-outline>
|
|
Parent
|
|
<Popover open align="top-left">
|
|
<div style="padding: var(--cds-spacing-05)">top-left</div>
|
|
</Popover>
|
|
</div>
|
|
<div data-outline>
|
|
Parent
|
|
<Popover open align="top-right">
|
|
<div style="padding: var(--cds-spacing-05)">top-right</div>
|
|
</Popover>
|
|
</div>
|
|
<div data-outline>
|
|
Parent
|
|
<Popover open align="bottom">
|
|
<div style="padding: var(--cds-spacing-05)">bottom</div>
|
|
</Popover>
|
|
</div>
|
|
<div data-outline>
|
|
Parent
|
|
<Popover open align="bottom-left">
|
|
<div style="padding: var(--cds-spacing-05)">bottom-left</div>
|
|
</Popover>
|
|
</div>
|
|
<div data-outline>
|
|
Parent
|
|
<Popover open align="bottom-right">
|
|
<div style="padding: var(--cds-spacing-05)">bottom-right</div>
|
|
</Popover>
|
|
</div>
|
|
<div data-outline>
|
|
Parent
|
|
<Popover open align="left">
|
|
<div style="padding: var(--cds-spacing-05)">left</div>
|
|
</Popover>
|
|
</div>
|
|
<div data-outline>
|
|
Parent
|
|
<Popover open align="left-bottom">
|
|
<div style="padding: var(--cds-spacing-05)">left-bottom</div>
|
|
</Popover>
|
|
</div>
|
|
<div data-outline>
|
|
Parent
|
|
<Popover open align="left-right">
|
|
<div style="padding: var(--cds-spacing-05)">left-right</div>
|
|
</Popover>
|
|
</div>
|
|
<div data-outline>
|
|
Parent
|
|
<Popover open align="right">
|
|
<div style="padding: var(--cds-spacing-05)">right</div>
|
|
</Popover>
|
|
</div>
|
|
<div data-outline>
|
|
Parent
|
|
<Popover open align="right-bottom">
|
|
<div style="padding: var(--cds-spacing-05)">right-bottom</div>
|
|
</Popover>
|
|
</div>
|
|
<div data-outline>
|
|
Parent
|
|
<Popover open align="right-top">
|
|
<div style="padding: var(--cds-spacing-05)">right-top</div>
|
|
</Popover>
|
|
</div>
|
|
|
|
### With caret
|
|
|
|
<div data-outline>
|
|
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>
|
|
Parent
|
|
<Popover caret align="top-left" open>
|
|
<div style="padding: var(--cds-spacing-05)">Content</div>
|
|
</Popover>
|
|
</div>
|
|
|
|
### Light variant
|
|
|
|
<div data-outline>
|
|
Parent
|
|
<Popover light open>
|
|
<div style="padding: var(--cds-spacing-05)">Content</div>
|
|
</Popover>
|
|
</div>
|
|
|
|
### High contrast variant
|
|
|
|
<div data-outline>
|
|
Parent
|
|
<Popover highContrast open>
|
|
<div style="padding: var(--cds-spacing-05)">Content</div>
|
|
</Popover>
|
|
</div> |