@spectrum-web-components/split-button v0.42.2
Description
An sp-split-button
surfaces an immediately envokable action via it's main button, as well as a list of alternative actions in its toggleable menu overlay. By default, any actions envoked from the overlay will replace the main action button. When leveraging [type="more"]
the action will be envoked, but the main button will remain the action initally persribed by the implementor.
Usage
yarn add @spectrum-web-components/split-button
Import the side effectful registration of <sp-split-button>
via:
import '@spectrum-web-components/split-button/sp-split-button.js';
The default of <sp-split-button>
will load dependencies in @spectrum-web-components/overlay
asynchronously via a dynamic import. In the case that you would like to import those tranverse dependencies statically, import the side effectful registration of <sp-split-button>
as follows:
import '@spectrum-web-components/split-button/sync/sp-split-button.js';
When looking to leverage the SplitButton
base class as a type and/or for extension purposes, do so via:
import { SplitButton } from '@spectrum-web-components/split-button';
Sizes
<sp-split-button size="s">
<sp-menu-item>Option 1</sp-menu-item>
<sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>
<sp-split-button size="m">
<sp-menu-item>Option 1</sp-menu-item>
<sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>
<sp-split-button size="l">
<sp-menu-item>Option 1</sp-menu-item>
<sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>
<sp-split-button size="xl">
<sp-menu-item>Option 1</sp-menu-item>
<sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>
Variants
CTA
<sp-split-button>
<sp-menu-item>Option 1</sp-menu-item>
<sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>
<sp-split-button left>
<sp-menu-item>Option 1</sp-menu-item>
<sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>
Primary
<sp-split-button variant="primary">
<sp-menu-item>Option 1</sp-menu-item>
<sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>
<sp-split-button left variant="primary">
<sp-menu-item>Option 1</sp-menu-item>
<sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>
Secondary
<sp-split-button variant="secondary">
<sp-menu-item>Option 1</sp-menu-item>
<sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>
<sp-split-button left>
<sp-menu-item>Option 1</sp-menu-item>
<sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>
More button
When using the more
value of the type
attribute, an <sp-split-button>
will maintain its default option value without regard to the most recently used option.
CTA
<sp-split-button type="more">
<sp-menu-item>Option 1</sp-menu-item>
<sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>
<sp-split-button type="more" left>
<sp-menu-item>Option 1</sp-menu-item>
<sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>
Primary
<sp-split-button type="more" variant="primary">
<sp-menu-item>Option 1</sp-menu-item>
<sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>
<sp-split-button type="more" left variant="primary">
<sp-menu-item>Option 1</sp-menu-item>
<sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>
Secondary
<sp-split-button type="more" variant="secondary">
<sp-menu-item>Option 1</sp-menu-item>
<sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>
<sp-split-button type="more" left variant="secondary">
<sp-menu-item>Option 1</sp-menu-item>
<sp-menu-item>Option Extended</sp-menu-item>
</sp-split-button>
24 days ago
25 days ago
1 month ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
4 months ago
4 months ago
5 months ago
9 months ago
9 months ago
9 months ago
8 months ago
9 months ago
9 months ago
9 months ago
7 months ago
7 months ago
6 months ago
6 months ago
7 months ago
8 months ago
5 months ago
8 months ago
10 months ago
10 months ago
9 months ago
10 months ago
10 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
12 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
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
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
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
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
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