The Drawer frame
A container that slides in from the side of the viewport.
The Drawer frame is a container that slides into view when visible. You can add multiple instances of the Drawer frame that operate independently.
Properties
All properties for this object with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read property values.
enableFullBleed
Whether to expand the contents to fill available space.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
| ||||
| Default | |
Examples
true
footerPadding
The amount of padding used within the footer.
| Type | string | |||||||||
| Format | Plain Text | |||||||||
| Mutability |
| |||||||||
| Allowed Values |
| |||||||||
| Default | |
Examples
"8px 12px"
headerPadding
The amount of padding used within the header.
| Type | string | |||||||||
| Format | Plain Text | |||||||||
| Mutability |
| |||||||||
| Allowed Values |
| |||||||||
| Default | |
Examples
"8px 12px"
hidden
Whether this object is hidden from view.
| Type | boolean | ||||||
| Format | True/False | ||||||
| Mutability |
| ||||||
| Default | |
Examples
true
hideOnEscape
Whether to toggle hidden to true when the Esc key is pressed.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
| ||||
| Default | |
Examples
true
loading
Whether to display a loading indicator.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
| ||||
| Default | |
Examples
true
overlayInteraction
Whether to toggle hidden to true if the user clicks outside of the content area.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
| ||||
| Default | |
Examples
true
padding
The amount of padding to render inside.
| Type | string | ||||||
| Format | Plain Text | ||||||
| Mutability |
| ||||||
| Allowed Values |
| ||||||
| Default | |
Examples
4px 8px
showBorder
Whether to show a border.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
| ||||
| Default | |
Examples
true
showFooter
Whether to show the footer area.
| Type | boolean | ||||||
| Mutability |
|
showFooterBorder
Whether to show a border above the footer.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
|
Examples
true
showHeader
Whether to show the header area.
| Type | boolean | ||||||
| Format | True/False | ||||||
| Mutability |
| ||||||
| Default | |
Examples
true
showHeaderBorder
Whether to show a border under the header.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
| ||||
| Default | |
Examples
true
showOverlay
Whether to display a darkened overlay when visible.
| Type | boolean | ||||
| Format | True/False | ||||
| Mutability |
|
Examples
true
tooltipText
The tooltip text to display next to the label on hover.
| Type | string | ||||
| Format | Markdown | ||||
| Mutability |
| ||||
| Default | |
Examples
Submit
Methods
JavaScript API methods for this object. You can write JavaScript almost anywhere in Retool and use methods to manipulate data and property values.
drawer.scrollIntoView()
Scrolls the canvas or parent container so that the selected component appears in the visible area.
drawer.scrollIntoView(options)
Parameters
options Required
The scroll options.
Object Properties
behavior Required
The scroll behavior.
Supported Values
auto | Scroll immediately to the specified position. |
smooth | Scroll gradually to the specified position. |
block Required
The scroll position relative to the component.
Supported Values
nearest | Scrolls only the minimum amount required for the component to appear in the visible area. Scrolling does not occur if the component is already in view. |
start | Scrolls to position the component at the top of the visible area. |
center | Scrolls to position the component in the middle of the visible area. |
end | Scrolls to position the component at the bottom of the visible area. |
Examples
Scroll the minimum amount to immediately bring drawer into view.
drawer.scrollIntoView({behavior: 'auto', block: 'nearest'});
drawer.setHidden()
Set the hidden value to toggle whether the component is visible. Defaults to true without a parameter.
drawer.setHidden(hidden)
Parameters
hidden
Whether this object is hidden from view.
Examples
Hide drawer.
drawer.setHidden(true);
Unhide drawer.
drawer.setHidden(false);
drawer.showFooter(showFooter)
Parameters
showFooter
Whether to show the footer area.
Examples
Show the footer of drawer.
drawer.setShowFooter(true);
Hide the footer of drawer.
drawer.setShowFooter(false);
drawer.showHeader(showHeader)
Parameters
showHeader
Whether to show the header area.
Examples
Show the header of drawer.
drawer.setShowHeader(true);
Hide the header of drawer.
drawer.setShowHeader(false);
drawer.toggleHidden()
Examples
Toggle the hidden value of drawer.
drawer.toggleHidden();