sp-menu-group
NPM
0.48.1
Storybook
View Storybook
Try it on
webcomponents.dev
Attributes and Properties #
ignore
ignore
boolean
false
label
label
string
''
selects
selects
undefined | 'inherit' | 'single' | 'multiple'
value
value
string
''
valueSeparator
value-separator
string
','
Slots #
header
default slot
Events #
change
Event
Announces that the `value` of the element has changed
close
Event
Overview #
An <sp-menu-group>
will gather a collection of <sp-menu-item>
elements into a group as part of the content delivered in an <sp-menu>
element. Supplying content to the header
slot will allow it label the group both visually and for screen readers. Like <sp-menu>
, an <sp-menu-group>
element can maintain a selection as outlined by the value or absence of its selects
attribute.
Usage #
yarn add @spectrum-web-components/menu
Import the side effectful registration of <sp-menu-group>
as follows:
import '@spectrum-web-components/menu/sp-menu-group.js';
When looking to leverage the MenuGroup
base class as a type and/or for extension purposes, do so via:
import { MenuGroup } from '@spectrum-web-components/menu';
Example #
An <sp-menu-group>
can be used to organize <sp-menu-item>
s in an <sp-memu>
in to collections with a shared header. Use an element addressed to the slot="header
to pass the content of that header.
<p> Your favorite park in New York is: <span id="group-1-value"></span> <br><br> Your favorite park in San Fransisco is: <span id="group-2-value"></span> </p> <sp-popover open style="position: relative"> <sp-menu label="What are your favorite parks?" style="width: 200px" onchange="this.parentElement .previousElementSibling .querySelector(`#${arguments[0].target.id}-value`) .textContent = arguments[0].target.value"> <sp-menu-group id="group-1" selects="single" > <span slot="header">New York</span> <sp-menu-item> Central Park </sp-menu-item> <sp-menu-item> Flushing Meadows Corona Park </sp-menu-item> <sp-menu-item> Prospect Park </sp-menu-item> </sp-menu-group> <sp-menu-group id="group-2" selects="single" > <span slot="header">San Fransisco</span> <sp-menu-item> Golden Gate Park </sp-menu-item> <sp-menu-item> John McLaren Park </sp-menu-item> <sp-menu-item> Lake Merced Park </sp-menu-item> </sp-menu-group> </sp-menu> </sp-popover>