Component Panel
Panels are partial screen overlays that interrupt user interaction and demand an action. They are appropriate when user interaction is temporary and needed only to perform a specific action such as filtering.
Example
Props
| Attr | Type | Default | Docs |
|---|---|---|---|
below-header | boolean | false | This boolean property is used to determine if the panel should show over or below header. |
breakpoint | "lg" | "md" | "sm" | "xl" | 'lg' | This property is where the mobile navigation should take effect. |
hide-close-button | boolean | false | This boolean property is used to hide the panel's close button |
position | "left" | "right" | 'left' | This property is where the panel should appear. |
shown | boolean | false | This boolean property is used to display or hide the panel on initial load. |
size | "lg" | "md" | "sm" | 'md' | This property is used to control the panel’s width. The sizes are as follows: |
Methods
| Name | Returns | Docs |
|---|---|---|
close | Promise will resolve when the close animation ends. | This method will close the panel. |
open | Promise will resolve when the open animation ends. | This method will open the panel. |
refresh | Promise will resolve after the refresh. | This method will refresh the panel. This can be used when loading asynchronous data, which allows the component to find focusable elements and provide optimal accessibility support. |
Events
| Event | Detail | Docs |
|---|---|---|
afterClose | any | This event is triggered right after panel is closed. |
afterOpen | any | This event is triggered right after panel is opened. |
beforeClose | any | This event is triggered just before panel is closed. |
beforeOpen | any | This event is triggered just before panel is opened. |
Do you have an idea, or want to help us improve this page? Reach out to us via email.
DTMB-DG-Support@michigan.govNeed help? Visit our Support page to learn how to get assistance, troubleshoot issues, and connect with the team.