Skip to main content

Split-Button

Diese neue Komponente wird als ungetestet markiert, da der vollständige Barrierefreiheitstest noch aussteht. Der vollständige Test kann bei neuen Komponenten und Funktionalitäten auch erst nach einem abgeschlossenen Release erfolgen.

Die SplitButton-Komponente kann genutzt werden, um einen zweigeteilten Button darzustellen. Dabei wird der Primär-Button üblicherweise für eine Haupt-Aktion genutzt, während der sekundäre Button ein Kontext-Menü ("Popover") öffnet, hinter dem sich weitere Aktionen verbergen.

  • Der Sekundär-Button togglet grundsätzlich das Kontextmenü.
  • Für den Primär-Button kann ein individueller Event-Handler hinterlegt werden, wird dies nicht getan togglet er ebenfalls das Kontextmenü.

Konstruktion

Code

<kol-split-button _label="Split-Button">Split-Button Popover</kol-split-button>

Initial geöffnet:

<kol-split-button _label="Split-Button" _show-dropdown>Split-Button Popover</kol-split-button>

Beispiel

Split-Button Popover

Split-Button Popover

Properties

PropertyAttributeDescriptionTypeDefault
_accessKey_access-keyDefines which key combination can be used to trigger or focus the interactive element of the component.string | undefinedundefined
_ariaControls_aria-controlsDefines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)string | undefinedundefined
_ariaExpanded_aria-expandedDefines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)boolean | undefinedundefined
_ariaLabel_aria-label[DEPRECATED] use _label instead

Deprecated: Setzt die semantische Beschriftung der Komponente.
string | undefinedundefined
_ariaSelected_aria-selectedDefines 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 | undefinedundefined
_customClass_custom-classDefines the custom class attribute if _variant="custom" is set.string | undefinedundefined
_disabled_disabledMakes the element not focusable and ignore all events.boolean | undefinedfalse
_hideLabel_hide-labelHides 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 | undefinedfalse
_icon_icon[DEPRECATED] Use _icons.

KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefinedundefined
_icons_iconsDefines the icon classnames (e.g. _icons="fa-solid fa-user").KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefinedundefined
_id_idDefines the internal ID of the primary component element.string | undefinedundefined
_label (required)_labelDefines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).stringundefined
_name_nameDefines the technical name of an input field.string | undefinedundefined
_on--Defines the callback functions for button events.undefined | { onClick?: EventValueOrEventCallback<MouseEvent, StencilUnknown> | undefined; onMouseDown?: EventCallback<MouseEvent> | undefined; }undefined
_role_roleDefines the role of the components primary element."button" | "link" | "tab" | undefinedundefined
_show_showMakes the element show up.boolean | undefinedfalse
_showDropdown_show-dropdown[DEPRECATED] use _show instead

Deprecated: Defines whether to show the dropdown menu.
boolean | undefinedfalse
_tabIndex_tab-indexDefines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)number | undefinedundefined
_tooltipAlign_tooltip-alignDefines where to show the Tooltip preferably: top, right, bottom or left."bottom" | "left" | "right" | "top" | undefined'top'
_type_typeDefines either the type of the component or of the components interactive element."button" | "reset" | "submit" | undefined'button'
_value_valueDefines the value that the button emits on click.boolean | null | number | object | string | undefinedundefined
_variant_variantDefines which variant should be used for presentation."custom" | "danger" | "ghost" | "normal" | "primary" | "secondary" | "tertiary" | undefined'normal'

Slots

SlotDescription
Ermöglicht das Einfügen beliebigen HTMLs in das dropdown.

Live-Editor