[ { "id": "oj-c.ButtonsetMultiple", "name": "ButtonsetMultiple", "memberof": "oj-c", "kind": "class", "meta": { "filename": "buttonset-multiple.tsx", "path": "web/components/oj-c/buttonset-multiple" }, "ojcomponent": true, "isvcomponent": true, "since": "17.0.0", "longname": "oj-c.ButtonsetMultiple", "pack": "oj-c", "classdesc": "

\n JET Buttonset Multiple\n \n

\n\n

Description: A Buttonset Multiple is a grouping of related buttons where any number of buttons may be selected.\n\n

<oj-c-buttonset-multiple aria-label=\"Pick Items\" value=\"{{value}}\" items=\"[[items]]\">\n</oj-c-buttonset-multiple>\n
\n\n

\nToolbar Usage\n

\n

Note that oj-c-buttonset-multiple is not intended for usage inside oj-toolbar, it is only\nsupported in oj-c-toolbar.

\n\n

\n Touch End User Information\n \n

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TargetGestureAction
Push Toggle ButtonTapToggle the button.
\n\n

\n Keyboard End User Information\n \n

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TargetKeyAction
Buttonset MultipleEnter or SpaceToggle the focused Button.
Buttonset MultipleRight ArrowMove focus to the next enabled Button, wrapping as needed.
Buttonset MultipleLeft ArrowMove focus to the previous enabled Button, wrapping as needed.
\n\n

\n Accessibility\n \n

\n\n

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

\naria-label=\"Choose beverages.\"\naria-controls=\"myTextEditor\"\n
\n\n

An aria-label conveying the \"choose multiple\" semantics should be included for a buttonset-multiple.\n\n

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

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

", "scope": "static", "tagWithoutBrackets": "oj-c-buttonset-multiple", "tagWithBrackets": "", "domInterface": "CButtonsetMultipleElement", "ojPageTitle": "<oj-c-buttonset-multiple>", "camelCaseName": "ButtonsetMultiple", "ojPageTitlePrefix": "Element: ", "ojtsvcomponent": true, "tstype": { "target": "Type", "value": "interface CButtonsetMultipleElement extends JetElement" }, "ojsignature": [ { "target": "Type", "value": "interface CButtonsetMultipleElement extends JetElement" } ], "tsdeprecated": [ { "type": "supersedes", "since": "17.0.0", "value": [ "oj-buttonset-many" ] } ], "extension": { "catalog": { "category": "Controls" }, "vbdt": { "module": "oj-c/buttonset-multiple" }, "oracle": { "icon": "oj-ux-ico-buttonset-multiple", "uxSpecs": [ "Toggle%20Button" ] } }, "ojmodule": "buttonset-multiple" }, { "id": "oj-c.ButtonsetMultiple#value", "name": "value", "memberof": "oj-c.ButtonsetMultiple", "meta": { "filename": "buttonset-multiple.tsx", "path": "web/components/oj-c/buttonset-multiple" }, "kind": "member", "longname": "oj-c.ButtonsetMultiple#value", "scope": "instance", "type": { "names": [ "Array" ] }, "optional": true, "ojwriteback": true, "ojshortdesc": "Specifies which toggle button is selected", "description": "Specifies which toggle button is selected" }, { "id": "oj-c.ButtonsetMultiple#items", "name": "items", "memberof": "oj-c.ButtonsetMultiple", "meta": { "filename": "buttonset-multiple.tsx", "path": "web/components/oj-c/buttonset-multiple" }, "kind": "member", "longname": "oj-c.ButtonsetMultiple#items", "scope": "instance", "type": { "names": [ "Array" ] }, "optional": true, "ojshortdesc": "Specifies the toggle buttons rendered by the buttonset.", "description": "Specifies the toggle buttons rendered by the buttonset.", "defaultvalue": "[]", "tstype": [ { "target": "Type", "value": "Array", "jsdocOverride": true } ] }, { "id": "oj-c.ButtonsetMultiple#display", "name": "display", "memberof": "oj-c.ButtonsetMultiple", "meta": { "filename": "buttonset-multiple.tsx", "path": "web/components/oj-c/buttonset-multiple" }, "kind": "member", "longname": "oj-c.ButtonsetMultiple#display", "scope": "instance", "type": { "names": [ "\"all\"", "\"label\"", "\"icons\"" ] }, "optional": true, "ojshortdesc": "Display just the label, the icons, or all.", "description": "Display just the label, the icons, or all.", "ojvalues": [ { "name": "all", "description": "Display both the label and icons.", "displayName": "All", "type": { "names": [ "string" ] } }, { "name": "icons", "description": "Display only the icons.", "displayName": "Icons", "type": { "names": [ "string" ] } }, { "name": "label", "description": "Display only the text label.", "displayName": "label", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true, "defaultvalue": "'all'" }, { "id": "oj-c.ButtonsetMultiple#disabled", "name": "disabled", "memberof": "oj-c.ButtonsetMultiple", "meta": { "filename": "buttonset-multiple.tsx", "path": "web/components/oj-c/buttonset-multiple" }, "kind": "member", "longname": "oj-c.ButtonsetMultiple#disabled", "scope": "instance", "type": { "names": [ "boolean" ] }, "optional": true, "ojshortdesc": "Specifies that the buttonset should be disabled.", "description": "Specifies that the buttonset should be disabled.", "defaultvalue": false }, { "id": "oj-c.ButtonsetMultiple#size", "name": "size", "memberof": "oj-c.ButtonsetMultiple", "meta": { "filename": "buttonset-multiple.tsx", "path": "web/components/oj-c/buttonset-multiple" }, "kind": "member", "longname": "oj-c.ButtonsetMultiple#size", "scope": "instance", "type": { "names": [ "\"sm\"", "\"md\"", "\"lg\"" ] }, "optional": true, "ojshortdesc": "Specifies the size of the toggle buttons", "description": "Specifies the size of the toggle buttons", "ojvalues": [ { "name": "sm", "description": "Display a small button.", "displayName": "Small", "type": { "names": [ "string" ] } }, { "name": "md", "description": "Display a default size button.", "displayName": "Medium", "type": { "names": [ "string" ] } }, { "name": "lg", "description": "Display a large button.", "displayName": "Large", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true, "defaultvalue": "'md'" }, { "id": "oj-c.ButtonsetMultiple#width", "name": "width", "memberof": "oj-c.ButtonsetMultiple", "meta": { "filename": "buttonset-multiple.tsx", "path": "web/components/oj-c/buttonset-multiple" }, "kind": "member", "longname": "oj-c.ButtonsetMultiple#width", "scope": "instance", "type": { "names": [ "number|string" ] }, "optional": true, "ojshortdesc": "Specifies the buttonset width", "description": "Specifies the buttonset width" }, { "id": "oj-c.ButtonsetMultiple#maxWidth", "name": "maxWidth", "memberof": "oj-c.ButtonsetMultiple", "meta": { "filename": "buttonset-multiple.tsx", "path": "web/components/oj-c/buttonset-multiple" }, "kind": "member", "longname": "oj-c.ButtonsetMultiple#maxWidth", "scope": "instance", "type": { "names": [ "number|string" ] }, "optional": true, "ojshortdesc": "Specifies the buttonset max width", "description": "Specifies the buttonset max width" }, { "id": "oj-c.ButtonsetMultiple#chroming", "name": "chroming", "memberof": "oj-c.ButtonsetMultiple", "meta": { "filename": "buttonset-multiple.tsx", "path": "web/components/oj-c/buttonset-multiple" }, "kind": "member", "longname": "oj-c.ButtonsetMultiple#chroming", "scope": "instance", "type": { "names": [ "\"borderless\"", "\"outlined\"" ] }, "optional": true, "ojshortdesc": "Indicates in what states the button has chromings in background and border.", "description": "Indicates in what states the button has chromings in background and border.", "ojvalues": [ { "name": "borderless", "description": "Borderless buttons are a less prominent variation.", "displayName": "Borderless", "type": { "names": [ "string" ] } }, { "name": "outlined", "description": "Outlined buttons are a more prominent variation.", "displayName": "Outlined", "type": { "names": [ "string" ] } } ], "ojvalueskeeporder": true, "defaultvalue": "'outlined'" }, { "id": "oj-c.ButtonsetMultiple#layoutWidth", "name": "layoutWidth", "memberof": "oj-c.ButtonsetMultiple", "meta": { "filename": "buttonset-multiple.tsx", "path": "web/components/oj-c/buttonset-multiple" }, "kind": "member", "longname": "oj-c.ButtonsetMultiple#layoutWidth", "scope": "instance", "type": { "names": [ "\"auto\"", "\"equal\"" ] }, "optional": true, "ojshortdesc": "Specifies if button width should be equal or based on contents.", "description": "Specifies if button width should be equal or based on contents." }, { "id": "oj-c.ButtonsetMultiple#focus", "name": "focus", "memberof": "oj-c.ButtonsetMultiple", "meta": { "filename": "buttonset-multiple.tsx", "path": "web/components/oj-c/buttonset-multiple" }, "kind": "function", "longname": "oj-c.ButtonsetMultiple#focus", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "description": "" }, { "id": "oj-c.ButtonsetMultiple#blur", "name": "blur", "memberof": "oj-c.ButtonsetMultiple", "meta": { "filename": "buttonset-multiple.tsx", "path": "web/components/oj-c/buttonset-multiple" }, "kind": "function", "longname": "oj-c.ButtonsetMultiple#blur", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "description": "" }, { "id": "oj-c.ButtonsetMultiple#setProperty", "name": "setProperty", "memberof": "oj-c.ButtonsetMultiple", "meta": { "filename": "buttonset-multiple.tsx", "path": "web/components/oj-c/buttonset-multiple" }, "kind": "function", "longname": "oj-c.ButtonsetMultiple#setProperty", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "ojshortdesc": "Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.", "description": "Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a corresponding event.", "params": [ { "name": "property", "description": "The property name to set. Supports dot notation for subproperty access.", "type": { "names": [ "string" ] } }, { "name": "value", "description": "The new value to set the property to.", "type": { "names": [ "any" ] } } ] }, { "id": "oj-c.ButtonsetMultiple#getProperty", "name": "getProperty", "memberof": "oj-c.ButtonsetMultiple", "meta": { "filename": "buttonset-multiple.tsx", "path": "web/components/oj-c/buttonset-multiple" }, "kind": "function", "longname": "oj-c.ButtonsetMultiple#getProperty", "scope": "instance", "returns": [ { "type": { "names": [ "any" ] } } ], "ojshortdesc": "Retrieves the value of a property or a subproperty.", "description": "Retrieves the value of a property or a subproperty.", "params": [ { "name": "property", "description": "The property name to get. Supports dot notation for subproperty access.", "type": { "names": [ "string" ] } } ] }, { "id": "oj-c.ButtonsetMultiple#setProperties", "name": "setProperties", "memberof": "oj-c.ButtonsetMultiple", "meta": { "filename": "buttonset-multiple.tsx", "path": "web/components/oj-c/buttonset-multiple" }, "kind": "function", "longname": "oj-c.ButtonsetMultiple#setProperties", "scope": "instance", "returns": [ { "type": { "names": [ "void" ] } } ], "ojshortdesc": "Performs a batch set of properties.", "description": "Performs a batch set of properties.", "params": [ { "name": "properties", "description": "An object containing the property and value pairs to set.", "type": { "names": [ "object" ] } } ] }, { "id": "oj-c.ButtonsetMultiple.touchDoc", "name": "touchDoc", "kind": "member", "longname": "oj-c.ButtonsetMultiple.touchDoc", "description": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TargetGestureAction
Push Toggle ButtonTapToggle the button.
", "memberof": "oj-c.ButtonsetMultiple", "meta": { "filename": "buttonset-multiple.tsx", "path": "web/components/oj-c/buttonset-multiple" }, "ojfragment": true }, { "id": "oj-c.ButtonsetMultiple.keyboardDoc", "name": "keyboardDoc", "kind": "member", "longname": "oj-c.ButtonsetMultiple.keyboardDoc", "description": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
TargetKeyAction
Buttonset MultipleEnter or SpaceToggle the focused Button.
Buttonset MultipleRight ArrowMove focus to the next enabled Button, wrapping as needed.
Buttonset MultipleLeft ArrowMove focus to the previous enabled Button, wrapping as needed.
", "memberof": "oj-c.ButtonsetMultiple", "meta": { "filename": "buttonset-multiple.tsx", "path": "web/components/oj-c/buttonset-multiple" }, "ojfragment": true }, { "id": "oj-c.ButtonsetMultiple.ToggleItem", "name": "ToggleItem", "kind": "typedef", "memberof": "oj-c.ButtonsetMultiple", "meta": { "filename": "buttonset-multiple.tsx", "path": "web/components/oj-c/buttonset-multiple" }, "longname": "oj-c.ButtonsetMultiple.ToggleItem", "type": { "names": [ "Object" ] }, "scope": "static", "description": "", "properties": [ { "name": "label", "description": "The toggle item label.", "optional": false, "type": { "names": [ "string" ] }, "ojshortdesc": "The toggle item label." }, { "name": "value", "description": "The toggle item value.", "optional": false, "type": { "names": [ "string" ] }, "ojshortdesc": "The toggle item value." }, { "name": "disabled", "description": "Specifies if the toggle item is disabled (enabled by default).", "optional": true, "type": { "names": [ "boolean" ] }, "ojshortdesc": "Specifies if the toggle item is disabled (enabled by default)." }, { "name": "startIcon", "description": "Optional icon to render at the start of the toggle item.", "optional": true, "type": { "names": [ "object" ] }, "tstype": [ { "target": "Type", "value": "{ type?: 'class'; class: string; }|{ type: 'img'; src: string; }", "jsdocOverride": true, "for": "startIcon" } ], "ojshortdesc": "Optional icon to render at the start of the toggle item." }, { "name": "endIcon", "description": "Optional icon to render at the end of the toggle item.", "optional": true, "type": { "names": [ "object" ] }, "tstype": [ { "target": "Type", "value": "{ type?: 'class'; class: string; }|{ type: 'img'; src: string; }", "jsdocOverride": true, "for": "endIcon" } ], "ojshortdesc": "Optional icon to render at the end of the toggle item." } ] } ]