Popover
Popovers are used to display content in an overlay that can be triggered by a button.
Anchor to propertiesProperties
- Anchor to blockSizeblockSizeSizeUnitsOrAutoDefault: 'auto'
Adjust the block size.
- string
A unique identifier for the element.
- Anchor to inlineSizeinlineSizeSizeUnitsOrAutoDefault: 'auto'
Adjust the inline size.
- Anchor to maxBlockSizemaxBlockSizeSizeUnitsOrNoneDefault: 'none'
Adjust the maximum block size.
- Anchor to maxInlineSizemaxInlineSizeSizeUnitsOrNoneDefault: 'none'
Adjust the maximum inline size.
- Anchor to minBlockSizeminBlockSizeSizeUnitsDefault: '0'
Adjust the minimum block size.
- Anchor to minInlineSizeminInlineSizeSizeUnitsDefault: '0'
Adjust the minimum inline size.
SizeUnitsOrAuto
SizeUnits | "auto"SizeUnits
`${number}px` | `${number}%` | `0`SizeUnitsOrNone
SizeUnits | "none"Was this section helpful?
Anchor to eventsEvents
- Anchor to hidehide((event: CallbackEventListener<typeof tagName>) => void) | null
Callback fired after the overlay is hidden.
- Anchor to showshow((event: CallbackEventListener<typeof tagName>) => void) | null
Callback fired after the overlay is shown.
CallbackEventListener
(EventListener & {
(event: CallbackEvent<TTagName, TEvent>): void;
}) | nullCallbackEvent
TEvent & {
currentTarget: HTMLElementTagNameMap[TTagName];
}Was this section helpful?
Code
<s-button commandFor="popover-veteran-id">Open Popover</s-button>
<s-popover id="popover-veteran-id">
<s-stack gap="base" padding="base" direction="inline">
<s-text-field label="Veteran ID"></s-text-field>
<s-button variant="primary">Validate</s-button>
</s-stack>
</s-popover>
Examples
Code
Default
<s-button commandFor="popover-veteran-id">Open Popover</s-button> <s-popover id="popover-veteran-id"> <s-stack gap="base" padding="base" direction="inline"> <s-text-field label="Veteran ID"></s-text-field> <s-button variant="primary">Validate</s-button> </s-stack> </s-popover>
Preview
