Zum Hauptinhalt springen

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.

Konstruktion

Code

Beispiel

Verwendung

Best practices

Tastatursteuerung

TasteFunktion
Tab??
Enter??

Properties

PropertyAttributeDescriptionTypeDefault
_accessKey_access-keyGibt an, mit welcher Tastenkombination man den Button auslösen oder fokussieren kann.string | undefinedundefined
_ariaControls_aria-controlsGibt an, welche Elemente kontrolliert werden. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)string | undefinedundefined
_ariaCurrent_aria-currentGibt an, welchen aktuellen Auswahlstatus der Button hat. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)"date" | "location" | "page" | "step" | "time" | boolean | undefinedundefined
_ariaExpanded_aria-expandedGibt an, ob durch den Button etwas aufgeklappt wurde. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)boolean | undefinedundefined
_ariaLabel_aria-labelGibt einen beschreibenden Text für den Screenreader an. Damit die Sprachsteuerung von interaktiven Elementen funktioniert, muss der Aria-Label-Text mit dem Label-Text des Buttons beginnen. - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelstring | undefinedundefined
_ariaSelected_aria-selectedGibt an, ob Element ausgewählt ist (role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)boolean | undefinedundefined
_customClass_custom-classGibt an, welche Custom-Class übergeben werden soll, wenn _variant="custom" gesetzt ist.string | undefinedundefined
_disabled_disabledGibt an, ob der Button deaktiviert ist.boolean | undefinedfalse
_hideLabel_hide-labelBlendet den Text aus und zeigt nur das gewählte Icon an, der Text wird in den Tooltip verschoben.boolean | undefinedfalse
_icon_iconIconklasse (z.B.: "codicon codicon-home")string | undefinedundefined
_iconOnly_icon-only[DEPRECATED] use _hide-label

Blendet den Text aus und zeigt nur das gewählte Icon an, der Text wird in den Tooltip verschoben.
boolean | undefinedfalse
_label (required)_labelSetzt den sichtbaren Text des Elements.stringundefined
_on--Gibt die EventCallback-Funktionen für die Button-Events an.undefined | { onClick: KoliBriSplitButtonCallback; }undefined
_role_roleGibt an, welche Rolle der Schalter hat."button" | "link" | "tab" | undefinedundefined
_showDropdown_show-dropdownGibt an, welche Rolle der Schalter hat.boolean | undefinedfalse
_tabIndex_tab-indexGibt an, welchen Tab-Index der Button hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)number | undefinedundefined
_tooltipAlign_tooltip-alignSetzt die gewünschte Ausrichtung des Tooltips (_icon-only)."bottom" | "left" | "right" | "top" | undefined'top'
_type_typeSetzt den Typ der Schaltfläche."button" | "reset" | "submit" | undefined'button'
_value--Gibt einen Wert an, den der Schalter bei einem Klick zurückgibt.unknownundefined
_variant_variantGibt an, welche Ausprägung der Button hat."custom" | "danger" | "ghost" | "normal" | "primary" | "secondary" | undefined'normal'

Slots

SlotDescription
Ermöglicht das Einfügen beliebigen HTML's in das dropdown.

Dependencies

Depends on

  • kol-button-wc

Graph


Live-Editor

Beispiele