@spectrum-web-components/quick-actions v0.49.0
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>
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
7 months ago
3 months ago
6 months ago
5 months ago
5 months ago
7 months ago
4 months ago
4 months ago
4 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
12 months 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
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
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 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
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago