@spectrum-web-components/quick-actions NPM | npm.io

0.42.2 • Published 28 days ago

Install

Weekly downloads

267

License

Apache-2.0

Repository

Last release

28 days ago

Description

<sp-quick-actions> allow users to perform contextual actions when hovering or focusing on a specific component. They're shortcuts meant to make workflows more efficient. Spectrum guidelines suggest a <sp-quick-action> element feature only text buttons OR only icon buttons, and never both.

Usage

yarn add @spectrum-web-components/quick-actions

Import the side effectful registration of <sp-quick-actions> via:

import '@spectrum-web-components/quick-actions/sp-quick-actions.js';

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

import { QuickActions } from '@spectrum-web-components/quick-actions';

Example

<div
    style="padding: 2em; background-color: var(--spectrum-transparent-black-300);"
>
    <sp-quick-actions opened>
        <sp-action-button quiet label="Info">
            <sp-icon-info slot="icon"></sp-icon-info>
        </sp-action-button>
        <sp-action-button quiet label="Magnify">
            <sp-icon-magnify slot="icon"></sp-icon-magnify>
        </sp-action-button>
        <sp-action-button quiet label="Star">
            <sp-icon-star slot="icon"></sp-icon-star>
        </sp-action-button>
    </sp-quick-actions>
</div>

Text Only

When the buttons have text only, be sure to include the text-only attribute to ensure correct layout of your actions.

<div
    style="padding: 2em; background-color: var(--spectrum-transparent-black-300);"
>
    <sp-quick-actions opened text-only>
        <sp-action-button quiet>Edit</sp-action-button>
        <sp-action-button quiet>Copy</sp-action-button>
        <sp-action-button quiet>Delete</sp-action-button>
    </sp-quick-actions>
</div>

spectrum css web components lit-element lit-html

@spectrum-web-components/base

@infinitebrahmanuniverse/nolb-_spe @everything-registry/sub-chunk-857 @webtone/player @spectrum-web-components/card @spectrum-web-components/coachmark @spectrum-web-components/bundle @swc-react/quick-actions

28 days ago

28 days ago

1 month ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

5 months ago

9 months ago

6 months ago

9 months ago

9 months ago

10 months ago

9 months ago

9 months ago

9 months ago

8 months ago

9 months ago

10 months ago

9 months ago

9 months ago

7 months ago

7 months ago

9 months ago

6 months ago

7 months ago

7 months ago

0.33.3-overlay.66

10 months ago

0.33.3-overlay.65

10 months ago

0.33.3-overlay.61

10 months ago

0.31.1-react.21

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

0.30.1-overlay.30

12 months ago

0.33.1-overlay.39

11 months ago

0.30.1-overlay.31

12 months ago

11 months ago

11 months ago

0.30.1-overlay.38

12 months ago

0.30.1-overlay.37

12 months ago

0.30.1-overlay.41

12 months ago

0.30.1-overlay.42

12 months ago

0.30.1-overlay.40

12 months ago

12 months ago

0.33.1-overlay.41

11 months ago

0.32.1-overlay.33

11 months ago

0.32.1-overlay.41

11 months ago

12 months ago

0.31.1-overlay.29

12 months ago

0.7.8-overlay.9

1 year ago

0.7.8-overlay.8

1 year ago

0.7.8-overlay.22

1 year ago

0.7.10-overlay.11

1 year ago

0.7.10-overlay.10

1 year ago

0.7.10-overlay.13

1 year ago

0.7.10-overlay.12

1 year ago

0.7.10-overlay.15

1 year ago

0.7.10-overlay.14

1 year ago

0.7.10-overlay.17

1 year ago

0.7.10-overlay.18

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.7.5-overlay-warning.19

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

0.7.0-devmode.0

2 years ago

2 years ago

2 years ago

2 years ago

0.6.13-devmode.0

2 years ago

2 years ago

0.6.12-devmode.0

2 years ago

0.6.13-devmode2.0

2 years ago

0.6.12-devmode.7

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.6.3-express.12

2 years ago

0.6.2-express.41

2 years ago

0.6.4-express.9

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

0.5.1-lit-next.0

2 years ago

2 years ago

0.4.10-lit-next.47

3 years ago

0.4.10-lit-next.24

3 years ago

0.4.10-lit-next.0

3 years ago

3 years ago

0.4.9-lit-next.42

3 years ago

3 years ago

0.4.9-lit-next.0

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.1.4-alpha.178

3 years ago

0.1.4-alpha.169

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

0.0.2-alpha.1038

4 years ago