ButtonGroup JAVASCRIPT UI Component API

ButtonGroup Javascript API

Class

ButtonGroup

ButtonGroup

ButtonGroup creates a set of buttons that can work as normal buttons, radio buttons or checkboxes.

Selector

smart-button-group

Properties

AanimationSets or gets the animation mode. Animation is disabled when the property is set to 'none'
DdataSourceDetermines the buttons configuration. The dataSource can be an array of strings/numbers or objects where the attributes represent the properties of a List Item. For example label, value. It can also be a callback that returns an Array of items as previously described.
SselectionModeDetermines the selection mode for the element.
DdisabledEnables or disables the element.
LlocaleSets or gets the language. Used in conjunction with the property messages.
LlocalizeFormatFunctionCallback used to customize the format of the messages that are returned from the Localization Module.
MmessagesSets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.
NnameSets or gets the name attribute for the element. Name is used when submiting HTML forms.
RreadonlyIf the custom element is readonly, it cannot be interacted with.
RrightToLeftSets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.
TthemeDetermines the theme. Theme defines the look of the element
SselectedValuesSets or gets the button group's selected values. Represents an array of strings.
SselectedIndexesSets or gets the button group's selected indexes. Represents an array of numbers
UunfocusableIf is set to true, the element cannot be focused.

Events

CchangeChange event is triggered when the selectedValues/selectedIndexes are changed.

Methods

SselectSelects/Unselects an item inside the element.

Properties

animation"none" | "simple" | "advanced"

Sets or gets the animation mode. Animation is disabled when the property is set to 'none'

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property. 

 <smart-button-group animation='none'></smart-button-group>

Set the animation property by using the HTML Element's instance. 

 const buttongroup = document.querySelector('smart-button-group');
 buttongroup.animation = 'simple';

Get the animation property. 

 const buttongroup = document.querySelector('smart-button-group');
 let animation = buttongroup.animation;

dataSourceany

Determines the buttons configuration. The dataSource can be an array of strings/numbers or objects where the attributes represent the properties of a List Item. For example label, value. It can also be a callback that returns an Array of items as previously described.

Default value

[]
Try a demo showcasing the dataSource property.

Example

Set the dataSource property. 

 <smart-button-group data-source='[{ label: "item 1", value: "1" }, { label: "item 2", value: "2" }]'></smart-button-group>

Set the dataSource property by using the HTML Element's instance. 

 const buttongroup = document.querySelector('smart-button-group');
 buttongroup.dataSource = ["new item 1", "new item 2"];

Get the dataSource property. 

 const buttongroup = document.querySelector('smart-button-group');
 let dataSource = buttongroup.dataSource;

selectionMode"none" | "one" | "zeroOrOne" | "zeroOrMany"

Determines the selection mode for the element.

Allowed Values

  • "none" - The element does not allow selection.
  • "one" - The element allows one item to be selected. One item must always be selected.
  • "zeroOrOne" - The element allows one or zero items to be selected.
  • "zeroOrMany" - The element allows zero or many items to be selected.

Default value

"one"
Try a demo showcasing the selectionMode property.

Example

Set the selectionMode property. 

 <smart-button-group selection-mode='zeroOrOne'></smart-button-group>

Set the selectionMode property by using the HTML Element's instance. 

 const buttongroup = document.querySelector('smart-button-group');
 buttongroup.selectionMode = 'zeroOrMany';

Get the selectionMode property. 

 const buttongroup = document.querySelector('smart-button-group');
 let selectionMode = buttongroup.selectionMode;

disabledboolean

Enables or disables the element.

Default value

false

Example

Set the disabled property. 

 <smart-button-group disabled></smart-button-group>

Set the disabled property by using the HTML Element's instance. 

 const buttongroup = document.querySelector('smart-button-group');
 buttongroup.disabled = false;

Get the disabled property. 

 const buttongroup = document.querySelector('smart-button-group');
 let disabled = buttongroup.disabled;

localestring

Sets or gets the language. Used in conjunction with the property messages.

Default value

"en"

Example

Set the locale property. 

 <smart-button-group locale='de'></smart-button-group>

Set the locale property by using the HTML Element's instance. 

 const buttongroup = document.querySelector('smart-button-group');
 buttongroup.locale = 'fr';

Get the locale property. 

 const buttongroup = document.querySelector('smart-button-group');
 let locale = buttongroup.locale;

localizeFormatFunctionfunction | null

Callback used to customize the format of the messages that are returned from the Localization Module.

Example

Set the localizeFormatFunction property. 

 <smart-button-group localize-format-function='function(defaultMessage, message, messageArguments){return '...'}'></smart-button-group>

Set the localizeFormatFunction property by using the HTML Element's instance. 

 const buttongroup = document.querySelector('smart-button-group');
 buttongroup.localizeFormatFunction = function(defaultMessage, message, messageArguments){return '...'};

Get the localizeFormatFunction property. 

 const buttongroup = document.querySelector('smart-button-group');
 let localizeFormatFunction = buttongroup.localizeFormatFunction;

messagesobject

Sets or gets an object specifying strings used in the widget that can be localized. Used in conjunction with the property locale.

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."

}

Example

Set the messages property. 

 <smart-button-group messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss."}}'></smart-button-group>

Set the messages property by using the HTML Element's instance. 

 const buttongroup = document.querySelector('smart-button-group');
 buttongroup.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."}};

Get the messages property. 

 const buttongroup = document.querySelector('smart-button-group');
 let messages = buttongroup.messages;

namestring

Sets or gets the name attribute for the element. Name is used when submiting HTML forms.

Default value

""""

Example

Set the name property. 

 <smart-button-group name='Name'></smart-button-group>

Set the name property by using the HTML Element's instance. 

 const buttongroup = document.querySelector('smart-button-group');
 buttongroup.name = 'New Name';

Get the name property. 

 const buttongroup = document.querySelector('smart-button-group');
 let name = buttongroup.name;

readonlyboolean

If the custom element is readonly, it cannot be interacted with.

Default value

false

Example

Set the readonly property. 

 <smart-button-group readonly></smart-button-group>

Set the readonly property by using the HTML Element's instance. 

 const buttongroup = document.querySelector('smart-button-group');
 buttongroup.readonly = false;

Get the readonly property. 

 const buttongroup = document.querySelector('smart-button-group');
 let readonly = buttongroup.readonly;

rightToLeftboolean

Sets or gets the value indicating whether the element is aligned to support locales using right-to-left fonts.

Default value

false
Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property. 

 <smart-button-group right-to-left></smart-button-group>

Set the rightToLeft property by using the HTML Element's instance. 

 const buttongroup = document.querySelector('smart-button-group');
 buttongroup.rightToLeft = true;

Get the rightToLeft property. 

 const buttongroup = document.querySelector('smart-button-group');
 let rightToLeft = buttongroup.rightToLeft;

themestring

Determines the theme. Theme defines the look of the element

Default value

""

Example

Set the theme property. 

 <smart-button-group theme='blue'></smart-button-group>

Set the theme property by using the HTML Element's instance. 

 const buttongroup = document.querySelector('smart-button-group');
 buttongroup.theme = 'red';

Get the theme property. 

 const buttongroup = document.querySelector('smart-button-group');
 let theme = buttongroup.theme;

selectedValuesstring[]

Sets or gets the button group's selected values. Represents an array of strings.

Example

Set the selectedValues property. 

 <smart-button-group selected-values='["item 1"]'></smart-button-group>

Set the selectedValues property by using the HTML Element's instance. 

 const buttongroup = document.querySelector('smart-button-group');
 buttongroup.selectedValues = ["item 1", "item 2"];

Get the selectedValues property. 

 const buttongroup = document.querySelector('smart-button-group');
 let selectedValues = buttongroup.selectedValues;

selectedIndexesnumber[]

Sets or gets the button group's selected indexes. Represents an array of numbers

Example

Set the selectedIndexes property. 

 <smart-button-group selected-indexes='[1,2,3]'></smart-button-group>

Set the selectedIndexes property by using the HTML Element's instance. 

 const buttongroup = document.querySelector('smart-button-group');
 buttongroup.selectedIndexes = [0];

Get the selectedIndexes property. 

 const buttongroup = document.querySelector('smart-button-group');
 let selectedIndexes = buttongroup.selectedIndexes;

unfocusableboolean

If is set to true, the element cannot be focused.

Default value

false

Example

Set the unfocusable property. 

 <smart-button-group unfocusable></smart-button-group>

Set the unfocusable property by using the HTML Element's instance. 

 const buttongroup = document.querySelector('smart-button-group');
 buttongroup.unfocusable = false;

Get the unfocusable property. 

 const buttongroup = document.querySelector('smart-button-group');
 let unfocusable = buttongroup.unfocusable;

Events

changeCustomEvent

Change event is triggered when the selectedValues/selectedIndexes are changed.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onChange

Arguments

evCustomEvent

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of change event. 

const buttongroup = document.querySelector('smart-button-group');
buttongroup.addEventListener('change', function (event) {
	// event handling code goes here.
})

Methods

select( value: number | string): void

Selects/Unselects an item inside the element.

Arguments

valuenumber | string

The index or the value of the item to be selected/unselected.


Invoke the select method.

const buttongroup = document.querySelector('smart-button-group');
buttongroup.select("'a'","0");

CSS Variables

--smart-button-text-transformvar()

Default value

"uppercase"

Controls the capitalization of the item's text. Could be set as uppercase/lowercase/capitalize.

--smart-button-paddingvar()

Default value

"8px 16px"

Sets the ButtonGroup items's paddings.