'%20d='M64%205c-3%2018-15%2026-13%2043-9-5-13-13-13-22C20%2043%2015%2062%2022%2082c7%2022%2023%2037%2042%2041%2022-4%2039-21%2043-43%203-17-3-32-18-45%202%2011%200%2018-6%2025C84%2036%2075%2019%2064%205Z'%20/%3e%3cpath%20fill='url(%23heat)'%20d='M64%2045c-2%2015-14%2022-13%2038-5-4-8-9-9-15-7%2010-8%2020-4%2030%205%2012%2014%2020%2026%2023%2013-3%2023-12%2027-25%203-11%200-20-8-29%200%207-2%2012-6%2016%201-16-5-27-13-38Z'%20/%3e%3c!--%20The%20glasses%20render%20as%20two%20stacked%20stroke%20groups:%20a%20pale%20warm%20casing%20under%20a%20dark%20warm-charcoal%20stroke.%20The%20casing%20keeps%20the%20dark%20strokes%20legible%20where%20they%20leave%20the%20flame%20body%20(temple%20tips,%20lower%20rims)%20on%20dark%20backgrounds,%20and%20reads%20as%20a%20rim%20light%20against%20the%20flame%20on%20light%20ones.%20--%3e%3cg%20fill='none'%20stroke='%23ffe3ae'%20stroke-opacity='0.85'%20stroke-linecap='round'%20stroke-linejoin='round'%3e%3cpath%20stroke-width='14'%20d='M7%2063c12-4%2027-5%2043-1M78%2062c16-4%2031-3%2043%201'/%3e%3crect%20x='12'%20y='58'%20width='46'%20height='35'%20rx='13'%20stroke-width='14'/%3e%3crect%20x='70'%20y='58'%20width='46'%20height='35'%20rx='13'%20stroke-width='14'/%3e%3cpath%20stroke-width='13'%20d='M57%2066c5-4%209-4%2014%200'/%3e%3c/g%3e%3cg%20fill='none'%20stroke='%2333221b'%20stroke-linecap='round'%20stroke-linejoin='round'%3e%3cpath%20stroke-width='8'%20d='M7%2063c12-4%2027-5%2043-1M78%2062c16-4%2031-3%2043%201'/%3e%3crect%20x='12'%20y='58'%20width='46'%20height='35'%20rx='13'%20stroke-width='8'/%3e%3crect%20x='70'%20y='58'%20width='46'%20height='35'%20rx='13'%20stroke-width='8'/%3e%3cpath%20stroke-width='7'%20d='M57%2066c5-4%209-4%2014%200'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Actions and display
Popover
No summary has been written for Popover. Everything below is generated from the declaration shipped in 0.57.40 and describes the real contract.Public export
typescript
import { Popover } from '@happyvertical/smrt-ui/ui';- Import path
@happyvertical/smrt-ui/ui- Props
- 11
- Props described
- 11 of 11
- Bindable state
- 0
- Callback events
- 1
- Verified release
- 0.57.40
Props
NameTypeRequiredDescription
labelstringYesAccessibility label and default trigger text for the popover.triggerSnippetNoContent rendered inside the trigger button in place of the label text.triggerLabelstringNoAccessible name of the trigger button when it shows only an icon (`aria-label`); omit to use its visible content (an icon trigger then falls back to `label`).variant'button' | 'icon'NoTrigger look: `button` (bordered, the default) or `icon`, a borderless 44px round icon button that takes the surrounding text colour (set the colour on the popover's `class`).childrenSnippetNoThe popover content.openbooleanNoWhether the popover is visible.disabledbooleanNoBlocks opening the popover.placement'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'NoPosition of the popover relative to the trigger.closeOnOutsideClickbooleanNoCloses the popover when clicking outside of it.onopenchange(open: boolean) => voidNoFired when the open state changes.classstringNoAdditional CSS class names.Bindable state
This component has no bindable public state.
Callback events
onopenchange(open: boolean) => void