@singleware/ui-popover NPM

UI-Popover

Custom HTML element used to wrap a simple popover, composed by the slots: input and content. See demo

Usage

Instantiate the component that initializes the custom element.

import * as JSX from '@singleware/jsx';
import * as Popover from '@singleware/ui-popover';

const component = (
  <Popover.Component dismiss>
    <button slot="input">Input</button>
    <div slot="content">Content</div>
  </Popover.Component>
) as Popover.Element;

Show, Hide and Toggle programmatically.

component.show();
component.hide();
component.toggle();

Be informed about the component actions.

component.addEventListener('show', (event: Event) => console.log(`Yes! It's visible now.`));
component.addEventListener('hide', (event: Event) => console.log(`No! It's hidden now.`));

Help

Attributes

Name	Description
dismiss	Assigned when the content can be hidden by clicking anywhere
open	Automatically assigned when the content is shown and removed when hidden

Properties

Name	Type	Description
empty	`bool`	Get the current `empty` state from the `input` slot element
name	`string`	Get and set the property `name` from the `input` slot element
value	`any`	Get and set the property `value` from the `input` slot element
defaultValue	`any`	Get and set the property `defaultValue` from the `input` slot element
required	`bool`	Get and set the `required` state from the `input` slot element
readOnly	`bool`	Get and set the `readOnly` state from the `input` slot element
disabled	`bool`	Get and set the `disabled` state from the `input` slot element
dismiss	`bool`	Get and set the `dismiss` state
open	`bool`	Get the current `open` state
placement	-	Get and set the element `placement` state. Use `top`, `right`, `bottom` or `left`
alignment	-	Get and set the element `alignment` state. Use `start`, `middle` or `end`

Methods

Name	Description
focus	Moves the current focus to the `input` slot element
reset	Reset the current value in the `input` slot element
show	Shows the content element
hide	Hides the content element
toggle	Toggles the content element
checkValidity	Get the validity from the `input` slot element
setCustomValidity	Set a custom validity in the `input` slot element

Slots

Name	Description
input	Element to receive the popover `show` and `hide` actions
content	Element to be displayed while the `open` action is active

Events

Name	Description
show	Dispatched when the alert becomes visible
hide	Dispatched when the alert becomes hidden

Styles

Name	Description
--swe-popover-content-border-radius	Determines the content border radius
--swe-popover-content-border-size	Determines the content border size
--swe-popover-content-border-color	Determines the content border color