Element: <oj-c-buttonset-single>

CORE PACK

Oracle® JavaScript Extension Toolkit (JET)
17.0.0
F92240-01

Since:
  • 17.0.0
Module:
  • buttonset-single

Note: This component supersedes the following component: <oj-buttonset-one>. Migration info available at preceding link.

QuickNav

Attributes

Methods

Type Definitions

Other Topics


JET Buttonset Single

Description: A Buttonset Single is a grouping of related buttons where only one button may be selected. 

<oj-c-buttonset-single aria-label="Pick an Item" value="{{value}}" items="[[items]]">
</oj-c-buttonset-single>

Touch End User Information

Target Gesture Action
Push Toggle Button Tap Toggle the button.

Keyboard End User Information

Target Key Action
Buttonset Single Enter or Space Toggle the focused Button.
Buttonset Single Right Arrow Move focus to the next enabled Button, wrapping as needed.
Buttonset Single Left Arrow Move focus to the previous enabled Button, wrapping as needed.

Accessibility

The application is responsible for applying aria-label and/or aria-controls attributes like the following to the buttonset element, if applicable per the instructions that follow: 

aria-label="Choose only one beverage."
aria-controls="myTextEditor"

An aria-label conveying the "choose only one" semantics should be included for a buttonset-single.

The aria-controls attribute should be included if the buttonset is controlling something else on the page, e.g. bold / italic / underline buttons controlling a rich text editor. If the buttonset is contained in a toolbar, aria-controls should be placed on the toolbar, not on the buttonsets within the toolbar.

Disabled content: JET supports an accessible luminosity contrast ratio, as specified in WCAG 2.0 - Section 1.4.3 "Contrast", in the themes that are accessible. (See the "Theming" chapter of the JET Developer Guide for more information on which themes are accessible.) Note that Section 1.4.3 says that text or images of text that are part of an inactive user interface component have no contrast requirement. Because disabled content may not meet the minimum contrast ratio required of enabled content, it cannot be used to convey meaningful information.


Usage

Signature:

interface CButtonsetSingleElement

Typescript Import Format
//To typecheck the element APIs, import as below.
import { CButtonsetSingleElement } from "oj-c/buttonset-single";

//For the transpiled javascript to load the element's module, import as below
import "oj-c/buttonset-single";

For additional information visit:

Note: Application logic should not interact with the component's properties or invoke its methods until the BusyContext indicates that the component is ready for interaction.


Attributes

chroming :"borderless"|"outlined"

Indicates in what states the button has chromings in background and border.
Supported Values:
Value Description
borderless Borderless buttons are a less prominent variation.
outlined Outlined buttons are a more prominent variation.
Default Value:
  • "outlined"
Names
Item Name
Property chroming
Property change event chromingChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-chroming-changed

disabled :boolean

Specifies that the buttonset should be disabled.
Default Value:
  • false
Names
Item Name
Property disabled
Property change event disabledChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-disabled-changed

display :"all"|"icons"|"label"

Display just the label, the icons, or all.
Supported Values:
Value Description
all Display both the label and icons.
icons Display only the icons.
label Display only the text label.
Default Value:
  • "all"
Names
Item Name
Property display
Property change event displayChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-display-changed

items :Array.<oj-c.ButtonsetSingle.ToggleItem>

TypeDef
ToggleIcon{ type?: 'class'; class: string; } | { type: 'img'; src: string; };
Default Value:
  • []
Names
Item Name
Property items
Property change event itemsChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-items-changed

layout-width :"auto"|"equal"

Specifies if button width should be equal or based on contents.
Names
Item Name
Property layoutWidth
Property change event layoutWidthChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-layout-width-changed

max-width :(number|string)

Specifies the buttonset max width
Names
Item Name
Property maxWidth
Property change event maxWidthChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-max-width-changed

size :"sm"|"md"|"lg"

Specifies the size of the toggle buttons
Supported Values:
Value Description
lg Display a large button.
md Display a default size button.
sm Display a small button.
Default Value:
  • "md"
Names
Item Name
Property size
Property change event sizeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-size-changed

value :string

Specifies which toggle button is selected
Supports writeback:
  • true
Names
Item Name
Property value
Property change event valueChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-value-changed

width :(number|string)

Specifies the buttonset width
Names
Item Name
Property width
Property change event widthChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-width-changed

Methods

getProperty(property) : {any}

Retrieves the value of a property or a subproperty.
Parameters:
Name Type Description
property The property name to get. Supports dot notation for subproperty access.
Returns:
Type
any

setProperties(properties) : {void}

Performs a batch set of properties.
Parameters:
Name Type Description
properties An object containing the property and value pairs to set.
Returns:
Type
void

setProperty(property, value) : {void}

Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.
Parameters:
Name Type Description
property The property name to set. Supports dot notation for subproperty access.
value The new value to set the property to.
Returns:
Type
void

Type Definitions

ToggleItem

Properties:
Name Type Argument
disabled boolean <optional>
endIcon ToggleIcon <optional>
label string
startIcon ToggleIcon <optional>
value string