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): improve docs

Browse source
This commit is contained in:
Eric Liu 2025-05-03 10:33:33 -07:00
commit b6570f0b1b
1 changed files with 12 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,9 +3,11 @@
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
</script> </script>
`Popover` provides a floating container that displays content relative to a trigger element. It supports various alignments, caret indicators, and visual variants.
## Default ## Default
By default, the position of the popover component is absolute. Create a basic popover with absolute positioning.
<div data-outline> <div data-outline>
Parent Parent
@ -16,7 +18,7 @@ By default, the position of the popover component is absolute.
## Relative position ## Relative position
Set `relative` to `true` to use a relative position. Set `relative` to `true` to position the popover relative to its parent element.
<div data-outline> <div data-outline>
Parent Parent
@ -27,7 +29,7 @@ Set `relative` to `true` to use a relative position.
## Close on outside click ## Close on outside click
Set `closeOnOutsideClick` to set `open` to `false` when clicking outside of the popover. Enable automatic closing when clicking outside the popover using `closeOnOutsideClick`.
<div data-outline> <div data-outline>
Parent Parent
@ -111,6 +113,8 @@ The default `align` value is `"top"`.
## With caret ## With caret
Add a caret indicator to the popover using the `caret` prop.
<div data-outline> <div data-outline>
Parent Parent
<Popover caret open> <Popover caret open>
@ -120,9 +124,7 @@ The default `align` value is `"top"`.
## Custom caret alignment ## Custom caret alignment
By default, the caret is aligned "top". 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"`.
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> <div data-outline>
Parent Parent
@ -133,6 +135,8 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
## Light variant ## Light variant
Enable the light variant for use on dark backgrounds.
<div data-outline> <div data-outline>
Parent Parent
<Popover light open> <Popover light open>
@ -142,6 +146,8 @@ Possible `align` values include `"top"`, `"top-left"`, `"top-right"`, `"bottom"`
## High contrast variant ## High contrast variant
Enable the high contrast variant for improved visibility.
<div data-outline> <div data-outline>
Parent Parent
<Popover highContrast open> <Popover highContrast open>