@anguless/angulux/splitbutton

splitbutton

1 declarations3 demos

import

import { SplitButtonModule } from '@anguless/angulux/splitbutton';

Basic

A split button pairs a default action with a menu of the rest.

<agl-splitButton label="Save" [model]="items" />

Severity

Severity defines the colour, exactly as it does for Button.

<agl-splitButton label="Save" [model]="items" /><agl-splitButton label="Success" [model]="items" severity="success" /><agl-splitButton label="Warn" [model]="items" severity="warn" /><agl-splitButton label="Danger" [model]="items" severity="danger" />

Styles

Outlined, text and raised are the same style switches Button has.

<agl-splitButton label="Outlined" [model]="items" [outlined]="true" /><agl-splitButton label="Text" [model]="items" [text]="true" /><agl-splitButton label="Raised" [model]="items" [raised]="true" />

API

Generated from the committed corpus, which check:corpus holds to the built library.

SplitButton

componentagl-splitbutton, agl-splitButton, agl-split-button

SplitButton groups a set of commands in an overlay with a default command.

Input	Type	Default	Description
model	MenuItem[] \| undefined	not documented	MenuModel instance to define the overlay items.
severity	'success' \| 'info' \| 'warn' \| 'danger' \| 'help' \| 'primary' \| 'secondary' \| 'contrast' \| null \| undefined	not documented	Defines the style of the button.
raised	boolean	not documented	Add a shadow to indicate elevation.
rounded	boolean	not documented	Add a circular border radius to the button.
text	boolean	not documented	Add a textual class to the button without a background initially.
outlined	boolean	not documented	Add a border class without a background initially.
size	'small' \| 'large' \| undefined \| null	not documented	Defines the size of the button.
plain	boolean	not documented	Add a plain textual class to the button without a background initially.
icon	string \| undefined	not documented	Name of the icon.
iconPos	SplitButtonIconPosition	not documented	Position of the icon.
label	string \| undefined	not documented	Text of the button.
tooltip	string \| undefined	not documented	Tooltip for the main button.
tooltipOptions	TooltipOptions \| undefined	not documented	Tooltip options for the main button.
styleClass deprecated — since v20.0.0, use `class` instead.	string \| undefined	not documented	Class of the element.
menuStyle	{ [klass: string]: any } \| null \| undefined	not documented	Inline style of the overlay menu.
menuStyleClass	string \| undefined	not documented	Style class of the overlay menu.
dropdownIcon	string \| undefined	not documented	Name of the dropdown icon.
appendTo	HTMLElement \| ElementRef \| TemplateRef<any> \| 'self' \| 'body' \| null \| undefined \| any	'body'	Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).
dir	string \| undefined	not documented	Indicates the direction of the element.
expandAriaLabel	string \| undefined	not documented	Defines a string that labels the expand button for accessibility.
showTransitionOptions deprecated — since v21.0.0. Use `motionOptions` instead.	string	not documented	Transition options of the show animation.
hideTransitionOptions deprecated — since v21.0.0. Use `motionOptions` instead.	string	not documented	Transition options of the hide animation.
motionOptions	MotionOptions \| undefined	not documented	The motion options.
buttonProps	ButtonProps \| undefined	not documented	Button Props
menuButtonProps	MenuButtonProps \| undefined	not documented	Menu Button Props
autofocus	boolean \| undefined	not documented	When present, it specifies that the component should automatically get focus on load.
disabled		not documented	When present, it specifies that the element should be disabled.
tabindex	number \| undefined	not documented	Index of the element in tabbing order.
menuButtonDisabled	boolean	not documented	When present, it specifies that the menu button element should be disabled.
buttonDisabled	boolean	not documented	When present, it specifies that the button element should be disabled.

Output	Type	Description
onClick	EventEmitter<MouseEvent>	Callback to invoke when default command button is clicked.
onMenuHide	EventEmitter<any>	Callback to invoke when overlay menu is hidden.
onMenuShow	EventEmitter<any>	Callback to invoke when overlay menu is shown.
onDropdownClick	EventEmitter<MouseEvent>	Callback to invoke when dropdown button is clicked.

Template slot	Description
<ng-template #content>	Custom content template.
<ng-template #dropdownicon>	Custom dropdown icon template.

Inherited from BaseComponent

inherited

Input	Type	Default	Description
dt	Object \| undefined	undefined	Defines scoped design tokens of the component.
unstyled	boolean \| undefined	undefined	Indicates whether the component should be rendered without styles.
pt	PT \| undefined	undefined	Used to pass attributes to DOM elements inside the component. TRUSTED INPUT ONLY. Whatever you put here is applied to the DOM as given: keys become attributes, and a key that names a DOM property is assigned to that property directly, with no sanitizer in between. That is what makes the API useful, and it means a value reaching it from a user, a database or a CMS can execute script. Treat it like markup you wrote yourself, not like data you received.
ptOptions	PassThroughOptions \| undefined	undefined	Used to configure passthrough(pt) options of the component.