Popover
Popover is used to display content in an overlay that can be triggered by a button.
Anchor to propertiesProperties
- Anchor to blockSizeblockSizeSizeUnitsOrAuto
Adjust the block size.
- Anchor to inlineSizeinlineSizeSizeUnitsOrAuto
Adjust the inline size.
- Anchor to maxBlockSizemaxBlockSizeSizeUnitsOrNone
Adjust the maximum block size.
- Anchor to maxInlineSizemaxInlineSizeSizeUnitsOrNone
Adjust the maximum inline size.
- Anchor to minBlockSizeminBlockSizeSizeUnits
Adjust the minimum block size.
- Anchor to minInlineSizeminInlineSizeSizeUnits
Adjust the minimum inline size.
SizeUnitsOrAuto
SizeUnits | 'auto'SizeUnits
`${number}px` | `${number}%` | `0`SizeUnitsOrNone
SizeUnits | 'none'Was this section helpful?
Anchor to eventsEvents
Learn more about registering events.
- Anchor to afterhideafterhideCallbackEventListener<TTagName> | null
- Anchor to aftershowaftershowCallbackEventListener<TTagName> | null
- Anchor to aftertoggleaftertoggleCallbackEventListener<TTagName> | null
- Anchor to hidehideCallbackEventListener<TTagName> | null
- Anchor to showshowCallbackEventListener<TTagName> | null
- Anchor to toggletoggleCallbackEventListener<TTagName> | null
CallbackEventListener
(EventListener & {
(event: CallbackEvent<T>): void;
}) | nullCallbackEvent
Event & {
currentTarget: HTMLElementTagNameMap[T];
}Was this section helpful?
Code
<s-button commandFor="product-options-popover">Product options</s-button>
<s-popover id="product-options-popover" accessibilityLabel="Product options">
<s-stack direction="column" gap="small-500" padding="small-200 small-300">
<s-button variant="tertiary">Import</s-button>
<s-button variant="tertiary">Export</s-button>
</s-stack>
</s-popover>
Examples
Code
Default
<s-button commandFor="product-options-popover">Product options</s-button> <s-popover id="product-options-popover" accessibilityLabel="Product options"> <s-stack direction="column" gap="small-500" padding="small-200 small-300"> <s-button variant="tertiary">Import</s-button> <s-button variant="tertiary">Export</s-button> </s-stack> </s-popover>