PopoverButton
The PopoverButton is a component that combines a button with an associated popover menu. The popover is shown and hidden by clicking on the button. The label of the button can be set using the _label attribute. The position of the popover can be controlled via _popover-align, whereby the popover can be placed either above, to the right, below or to the left of the button.
The PopoverButton is particularly suitable for:
- Additional Information
- Context menus
- Fold-out controls
Construction
Code
<kol-popover-button _label="Weitere Informationen" _icons="codicon codicon-info" _popover-align="right">
Weitere Informationen im Popover.
</kol-popover-button>
Example
Further information in the popover.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_accessKey | _access-key | Defines the key combination that can be used to trigger or focus the component's interactive element. | string | undefined | undefined |
_ariaControls | _aria-controls | Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | string | undefined | undefined |
_ariaDescription | _aria-description | Defines the value for the aria-description attribute. | string | undefined | undefined |
_ariaSelected | _aria-selected | Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected) | boolean | undefined | undefined |
_customClass | _custom-class | Defines the custom class attribute if _variant="custom" is set. | string | undefined | undefined |
_disabled | _disabled | Makes the element not focusable and ignore all events. | boolean | undefined | false |
_hideLabel | _hide-label | Hides the caption by default and displays the caption text with a tooltip when the interactive element is focused or the mouse is over it. | boolean | undefined | false |
_icons | _icons | Defines the icon classnames (e.g. _icons="fa-solid fa-user"). | KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefined | undefined |
_inline | _inline | Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px. | boolean | undefined | false |
_label (required) | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to false to enable the expert slot. | string | undefined |
_name | _name | Defines the technical name of an input field. | string | undefined | undefined |
_on | -- | Defines the callback functions for button events. | undefined | { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> | undefined; onMouseDown?: EventCallback<MouseEvent> | undefined; } | undefined |
_popoverAlign | _popover-align | Defines where to show the Popover preferably: top, right, bottom or left. | "bottom" | "left" | "right" | "top" | undefined | 'bottom' |
_role | _role | Defines the role of the components primary element. | "tab" | "treeitem" | undefined | undefined |
_shortKey | _short-key | Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud. | string | undefined | undefined |
_tabIndex | _tab-index | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | number | undefined | undefined |
_tooltipAlign | _tooltip-align | Defines where to show the Tooltip preferably: top, right, bottom or left. | "bottom" | "left" | "right" | "top" | undefined | 'top' |
_type | _type | Defines either the type of the component or of the components interactive element. | "button" | "reset" | "submit" | undefined | 'button' |
_value | _value | Defines the value of the element. | boolean | null | number | object | string | undefined | undefined |
_variant | _variant | Defines which variant should be used for presentation. | "custom" | "danger" | "ghost" | "normal" | "primary" | "secondary" | "tertiary" | undefined | 'normal' |
Methods
hidePopover
hidePopover() => Promise<void>
Hides the popover programmatically by calling the native hidePopover method.
Returns
Type: Promise<void>
kolFocus() => Promise<void>
Sets focus on the internal element.
Returns
Type: Promise<void>
showPopover() => Promise<void>
Show the popover programmatically by calling the native showPopover method.
Returns
Type: Promise<void>
Slots
| Slot | Description |
|---|---|
| The popover content. |