mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-19 11:59:34 +00:00
d139d19524
* Breaking changes * - The `Popover` now uses a different markup. The trigger becomes a child of the component. - The new `PopoverContent` becomes an additional child of the `Popover` component. - remove `relative` property
68 lines
1.3 KiB
TypeScript
68 lines
1.3 KiB
TypeScript
import type { SvelteComponentTyped } from "svelte";
|
|
import type { SvelteHTMLElements } from "svelte/elements";
|
|
|
|
type RestProps = SvelteHTMLElements["span"];
|
|
|
|
export interface PopoverProps extends RestProps {
|
|
/**
|
|
* Set to `true` to display the popover
|
|
* @default false
|
|
*/
|
|
open?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to close the popover on an outside click
|
|
* @default false
|
|
*/
|
|
closeOnOutsideClick?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to render the tab tip variant
|
|
* @default false
|
|
*/
|
|
isTabTip?: boolean;
|
|
|
|
/**
|
|
* Set to `true` render a caret
|
|
* @default undefined
|
|
*/
|
|
caret?: boolean;
|
|
|
|
/**
|
|
* Specify the alignment of the caret
|
|
* @default undefined
|
|
*/
|
|
align?:
|
|
| "top"
|
|
| "top-left"
|
|
| "top-right"
|
|
| "bottom"
|
|
| "bottom-left"
|
|
| "bottom-right"
|
|
| "left"
|
|
| "left-bottom"
|
|
| "left-top"
|
|
| "right"
|
|
| "right-bottom"
|
|
| "right-top";
|
|
|
|
/**
|
|
* Set to `false` to omit the drop shadow
|
|
* @default true
|
|
*/
|
|
dropShadow?: boolean;
|
|
|
|
/**
|
|
* Set to `true` to enable the high contrast variant
|
|
* @default false
|
|
*/
|
|
highContrast?: boolean;
|
|
|
|
[key: `data-${string}`]: any;
|
|
}
|
|
|
|
export default class Popover extends SvelteComponentTyped<
|
|
PopoverProps,
|
|
{ ["click:outside"]: CustomEvent<{ target: HTMLElement }> },
|
|
{ default: {} }
|
|
> {}
|