0.49.0 • Published 2 months ago

@spectrum-web-components/quick-actions v0.49.0

Weekly downloads
267
License
Apache-2.0
Repository
github
Last release
2 months 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

See it on NPM! How big is this package in your project? Try it on webcomponents.dev

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>
0.50.0-beta.8

2 months ago

0.50.0-beta.7

2 months ago

0.50.0-beta.6

2 months ago

0.50.0-beta.5

2 months ago

0.50.0-beta.4

2 months ago

0.50.0-beta.3

2 months ago

0.50.0-beta.2

2 months ago

1.0.0-rc.0

2 months ago

0.50.0-beta.1

2 months ago

0.50.0-beta.0

2 months ago

0.49.0

2 months ago

0.49.0-beta.2

2 months ago

0.49.0-beta.1

2 months ago

0.48.1

3 months ago

0.48.0-beta.0

3 months ago

0.48.0-beta.1

3 months ago

0.48.0-beta.2

3 months ago

0.49.0-beta.0

3 months ago

0.43.0

7 months ago

0.48.0

3 months ago

0.44.0

6 months ago

0.45.0

5 months ago

0.46.0

5 months ago

0.42.5

7 months ago

0.47.1

4 months ago

0.47.2

4 months ago

0.47.0

4 months ago

0.42.4

8 months ago

0.42.3

8 months ago

0.42.2

9 months ago

0.42.1

9 months ago

0.42.0

9 months ago

0.41.2

10 months ago

0.41.1

10 months ago

0.41.0

11 months ago

0.40.5

11 months ago

0.40.4

11 months ago

0.40.3

12 months ago

0.40.2

1 year ago

0.40.1

1 year ago

0.36.0

1 year ago

0.40.0

1 year ago

0.35.1-rc.15

1 year ago

0.37.0

1 year ago

0.34.1-rc.0

1 year ago

0.35.1-rc.25

1 year ago

0.35.1-rc.26

1 year ago

0.35.1-rc.24

1 year ago

0.38.0

1 year ago

0.35.1-rc.34

1 year ago

0.34.0

1 year ago

0.35.1-rc.43

1 year ago

0.35.1-rc.41

1 year ago

0.39.1

1 year ago

0.39.0

1 year ago

0.35.0

1 year ago

0.39.4

1 year ago

0.39.3

1 year ago

0.39.2

1 year ago

0.31.1-react.21

2 years ago

0.32.0

2 years ago

0.31.1-react.3

2 years ago

0.31.1-react.1

2 years ago

0.31.1-react.2

2 years ago

0.33.2

2 years ago

0.33.0

2 years ago

0.30.0

2 years ago

0.31.0

2 years ago

0.7.8-overlay.9

2 years ago

0.7.8-overlay.8

2 years ago

0.7.8-overlay.22

2 years ago

0.7.9

2 years ago

0.7.8

2 years ago

0.7.7

2 years ago

0.7.6-react.75

2 years ago

0.7.6

2 years ago

0.7.6-react.48

2 years ago

0.7.6-react.49

2 years ago

0.7.6-react.50

2 years ago

0.7.6-react.32

2 years ago

0.7.4

2 years ago

0.7.3

2 years ago

0.7.5

2 years ago

0.7.3-react.54

2 years ago

0.7.2

2 years ago

0.7.1

2 years ago

0.7.0-devmode.0

2 years ago

0.6.10

2 years ago

0.6.12

2 years ago

0.6.11

2 years ago

0.6.13-devmode.0

2 years ago

0.7.0

2 years ago

0.6.12-devmode.0

2 years ago

0.6.12-devmode.7

2 years ago

0.6.7

3 years ago

0.6.9

3 years ago

0.6.8

3 years ago

0.6.6

3 years ago

0.6.5

3 years ago

0.6.4

3 years ago

0.6.3-express.12

3 years ago

0.6.2-express.41

3 years ago

0.6.4-express.9

3 years ago

0.6.3

3 years ago

0.6.2

3 years ago

0.5.1

3 years ago

0.6.1

3 years ago

0.6.0

3 years ago

0.5.1-lit-next.0

3 years ago

0.5.0

3 years ago

0.4.9

3 years ago

0.4.8

3 years ago

0.4.9-lit-next.0

3 years ago

0.4.8-alpha.69

3 years ago

0.4.8-alpha.40

3 years ago

0.4.8-alpha.1

3 years ago

0.4.7

3 years ago

0.4.7-alpha.59

3 years ago

0.4.7-alpha.1

4 years ago

0.4.6

4 years ago

0.4.6-alpha.74

4 years ago

0.4.6-alpha.73

4 years ago

0.4.6-alpha.72

4 years ago

0.4.6-alpha.61

4 years ago

0.4.6-alpha.27

4 years ago

0.4.6-alpha.0

4 years ago

0.4.5

4 years ago

0.4.4-alpha.26

4 years ago

0.4.4

4 years ago

0.4.4-alpha.23

4 years ago

0.4.4-alpha.21

4 years ago

0.4.4-beta.15

4 years ago

0.4.4-beta.14

4 years ago

0.4.4-beta.17

4 years ago

0.4.4-beta.16

4 years ago

0.4.4-beta.11

4 years ago

0.4.4-beta.10

4 years ago

0.4.4-beta.13

4 years ago

0.4.4-beta.12

4 years ago

0.4.4-alpha.17

4 years ago

0.4.4-alpha.12

4 years ago

0.4.4-alpha.11

4 years ago

0.4.4-alpha.9

4 years ago

0.4.3

4 years ago

0.4.2

4 years ago

0.4.1

4 years ago

0.4.0

4 years ago

0.3.1-alpha.70

4 years ago

0.3.1

4 years ago

0.3.0

4 years ago

0.2.0-alpha.40

4 years ago

0.2.0

4 years ago

0.1.4-alpha.178

4 years ago

0.1.4-alpha.169

4 years ago

0.1.4-alpha.85

4 years ago

0.1.4-alpha.84

4 years ago

0.1.4-alpha.60

4 years ago

0.1.2

4 years ago

0.1.3-alpha.0

4 years ago

0.1.3

4 years ago

0.1.2-beta.17

4 years ago

0.1.2-alpha.17

4 years ago

0.1.1

4 years ago

0.1.0

4 years ago

0.0.2-alpha.1038

4 years ago