Popout

Popouts are small overlays that open on demand. They let users access additional content and actions without cluttering the page.

Examples (4)
Example Code
<as-popout popout-id="mypopout" button-text="Toggle" button-class="btn" popout-position="top" popout-align="span-left">[content]</as-popout>
<as-popout button-text="Select action" button-class="btn" popout-position="bottom" popout-align="span-right">[content]</as-popout>





<as-popout popout-id="filters-test" button-text="Select action" button-class="btn" popout-position="bottom" popout-align="span-right">[content]</as-popout>
<as-popout breakpoint="800"hidden popout-id="mypopout2" button-text="Toggle" button-class="btn" popout-position="bottom" popout-align="span-right">[content]</as-popout>
Properties (6)
Property name Description Type
popout-position Required: Represents popout position relative to the toggle button. Values are: top, center, bottom. string
popout-align Required: Represents popout alignment relative to the toggle button. Values are: left, right, span-left, span-right, span-all, span-top, span-bottom, center. Last three values are valid only with popout-position: center string
popout-id Optional: When present is used to tie button and popout element with custom ID, defaults to dynamically generated random ID. string
button-text Optional: When present defines text used on the popout toggle button, defaults to Open popout. string
button-class Optional: When present defines class used on the popout toggle button, defaults to btn. string
breakpoint Optional: When present defines breakpoint in pixels below which the popout is displayed inline. Defaults to 0. number
Events (3)
Event name Description Example value
as-popout:created Fired when component is rendered. Has detail object. {id: "79d95b10-ecc4-42ca-b893-8e23b01f17da", action: "created"}
as-popout:toggle Fired when popout is opened. Has detail object. {id: "79d95b10-ecc4-42ca-b893-8e23b01f17da", state: "open"}
as-popout:toggle Fired when popout is closed. Has detail object. {id: "79d95b10-ecc4-42ca-b893-8e23b01f17da", state: "close"}
Files