Button
Button widget, wraps and styles a regular <button> element. Can display text and icon and also allows specifying button color. Supports different appearances, by setting rendition to one of:
- 'text' - Flat appearance with text only, no background or border
- 'outlined' - Transparent button with border
- 'tonal' - Flat appearance with "soft" background color
- 'filled' - Flat appearance with stronger background color
- 'elevated' - Raised appearance
// Green button with text and icon
const button = new Button({
appendTo : document.body,
icon : 'fa fa-plus-circle',
text : 'Add',
color : 'b-green',
onClick : () => {}
});
Button with menu
Buttons can also have a menu that is shown on click, or on click or hover of only the menu icon part of the button (if split is set):
const button = new Button({
appendTo : document.body,
icon : 'fa fa-chart',
menu : {
items : [
{
text : 'Click me',
onItem : () => console.log('I was clicked')
}
]
}
});
Click handling in a complex widget
In the case of a button which is part of a complex UI within a larger Bryntum widget, use of the string form for handlers is advised. A handler which starts with 'up.' will be resolved by looking in owning widgets of the Button. For example a Calendar may have handlers for its buttons configured in:
new Calendar({
appendTo : document.body,
project : myProjectConfig,
sidebar : {
items : {
addNew : {
weight : 0,
text : 'New',
// The Button's ownership will be traversed to find this function name.
// It will be called on the outermost Calendar widget.
onClick : 'up.onAddNewClick'
}
}
},
// Button handler found here
onAddNewClick() {
// Use Calendar API which creates event in the currently active date
this.createEvent();
}
});
This class may be operated by the keyboard. Space presses the button and invokes any click handler, and ArrowDown activates any configured menu.
Configs
Configs are options you supply in a configuration object when creating an instance of this class-
The button behavioral type, will be applied as a
typeattribute to this button's element.Has a corresponding runtime behaviorType property.
-
Button icon alignment. May be
'start'or'end'. Defaults to'start'Has a corresponding runtime iconAlign property.
-
A CSS class to add to the pressed state of the button. A
b-pressedCSS class is always added, when a button is pressed.Has a corresponding runtime pressedCls property.
-
Set to
trueto perform action on clicking the button if it's already pressed and belongs to a toggleGroup. -
Enabled toggling of the button (stays pressed when pressed).
Has a corresponding runtime toggleable property.
Properties
Properties are getters/setters or publicly accessible variables on this class-
Identifies an object as an instance of Button class, or subclass thereof.
-
The button behavioral type, will be applied as a
typeattribute to this button's element.Has a corresponding behaviorType config.
-
Button icon alignment. May be
'start'or'end'. Defaults to'start'Has a corresponding iconAlign config.
-
A CSS class to add to the pressed state of the button. A
b-pressedCSS class is always added, when a button is pressed.Has a corresponding pressedCls config.
-
Enabled toggling of the button (stays pressed when pressed).
Has a corresponding toggleable config.
-
Identifies an object as an instance of Button class, or subclass thereof.
Functions
Functions are methods available for calling on the class-
onInternalClick( )internal
Triggers events when user clicks button
Triggers: click, action