@spectrum-web-components/overlay-trigger
v0.1.6 spectrum css web components lit-element lit-html
Overview
An overlay-trigger is used to overlay content that is positioned relative to
another control. Two kinds of triggers are supported, hover
and click
. Each
may have it's own content.
Please note that you need to wrap your UI in an
overlay-root
component, which acts as a host for
the overlay content. You only need a single overlay-root
for all of your
overlays.
Example
<style>
overlay-root {
position: relative;
width: 100%;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
overlay-trigger {
flex: none;
}
.tooltip {
background-color: var(--spectrum-global-color-gray-800);
color: var(--spectrum-global-color-gray-50);
padding: 4px 10px;
font-size: 10px;
}
</style>
<overlay-root placement="bottom" offset="6">
<overlay-trigger id="trigger" placement="bottom" offset="6">
<sp-button variant="primary" slot="trigger">
Bottom Popover
</sp-button>
<sp-popover dialog slot="click-content" direction="bottom" tip open>
<div class="options-popover-content">
<sp-slider
value="5"
step="0.5"
min="0"
max="20"
label="Awesomeness"
></sp-slider>
<sp-button>Press Me</sp-button>
</div>
</sp-popover>
<div slot="hover-content" class="tooltip" delay="100">
Tooltip
</div>
</overlay-trigger>
</overlay-root>
npm i @spectrum-web-components/[email protected]
Metadata
- Apache-2.0
- Whatever
- Unknown
- released 11/27/2019