JSPM – @spectrum-web-components/action-menu@0.9.5-beta.11+2a8a1b3c

Package Exports

@spectrum-web-components/action-menu
@spectrum-web-components/action-menu/custom-elements.json
@spectrum-web-components/action-menu/package.json
@spectrum-web-components/action-menu/sp-action-menu
@spectrum-web-components/action-menu/sp-action-menu.js
@spectrum-web-components/action-menu/src/ActionMenu.d.ts
@spectrum-web-components/action-menu/src/ActionMenu.js
@spectrum-web-components/action-menu/src/ActionMenu.js.map
@spectrum-web-components/action-menu/src/ActionMenu.ts
@spectrum-web-components/action-menu/src/action-menu.css
@spectrum-web-components/action-menu/src/action-menu.css.d.ts
@spectrum-web-components/action-menu/src/action-menu.css.js
@spectrum-web-components/action-menu/src/action-menu.css.js.map
@spectrum-web-components/action-menu/src/action-menu.css.ts
@spectrum-web-components/action-menu/src/index.d.ts
@spectrum-web-components/action-menu/src/index.js
@spectrum-web-components/action-menu/src/index.js.map
@spectrum-web-components/action-menu/src/index.ts

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@spectrum-web-components/action-menu) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Description

An <sp-action-menu> is an action button with a Popover. Use an <sp-menu> element to outline the items that will be made available to the user when interacting with the sp-action-menu element.

Usage

yarn add @spectrum-web-components/action-menu

Import the side effectful registration of <sp-action-menu> via:

import '@spectrum-web-components/action-menu/sp-action-menu.js';

When looking to leverage the ActionMenu base class as a type and/or for extension purposes, do so via:

import { ActionMenu } from '@spectrum-web-components/action-menu';

Example

<sp-action-menu>
    <span slot="label">More Actions</span>
    <sp-menu-item>
        Deselect
    </sp-menu-item>
    <sp-menu-item>
        Select inverse
    </sp-menu-item>
    <sp-menu-item>
        Feather...
    </sp-menu-item>
    <sp-menu-item>
        Select and mask...
    </sp-menu-item>
    <sp-menu-divider></sp-menu-divider>
    <sp-menu-item>
        Save selection
    </sp-menu-item>
    <sp-menu-item disabled>
        Make work path
    </sp-menu-item>
</sp-action-menu>

Variants

No visible label

The visible label that is be provided via the default <slot> interface can be ommitted in preference of an icon only interface. In this context be sure that the <sp-action-menu> continued to be accessible to screen readers by applying the label attribute. This will apply an aria-label attribute of the same value to the <button> element that toggles the menu list.

<sp-action-menu label="More Actions">
    <sp-menu-item>
        Deselect
    </sp-menu-item>
    <sp-menu-item>
        Select inverse
    </sp-menu-item>
    <sp-menu-item>
        Feather...
    </sp-menu-item>
    <sp-menu-item>
        Select and mask...
    </sp-menu-item>
    <sp-menu-divider></sp-menu-divider>
    <sp-menu-item>
        Save selection
    </sp-menu-item>
    <sp-menu-item disabled>
        Make work path
    </sp-menu-item>
</sp-action-menu>

Alternate icon

A custom icon can be supplied via the icon slot in order to replace the default meatballs icon.

<sp-action-menu>
    <sp-icon-settings slot="icon"></sp-icon-settings>
    <span slot="label">Actions under the gear</span>
    <sp-menu-item>
        Deselect
    </sp-menu-item>
    <sp-menu-item>
        Select inverse
    </sp-menu-item>
    <sp-menu-item>
        Feather...
    </sp-menu-item>
    <sp-menu-item>
        Select and mask...
    </sp-menu-item>
    <sp-menu-divider></sp-menu-divider>
    <sp-menu-item>
        Save selection
    </sp-menu-item>
    <sp-menu-item disabled>
        Make work path
    </sp-menu-item>
</sp-action-menu>

Accessibility

An <sp-action-menu> parent will ensure that the internal <sp-menu> features a role of listbox and contains children with the role option. Upon focusing the <sp-action-menu> using ArrowDown will also open the menu while throwing focus into first selected (or unselected when none are selected) menu item to assist in selecting of a new value.