FlexDrawer Documentation

Most properties can be configured using a configuration object, these properties will be the default values for the individual drawers. Some of these properties can be overwritten by the individual drawers

Configure all drawers

Here is how to set all the configurable properties, these will be identical for all drawers, however most can be overwritten by the individual drawers (only the scrim cannot).

FlexDrawer.configure({
    trigger: "click",
    position: "right",
    backgroundColor: "#f6f6f6",
    zIndex: 1000,
    padding: "10px",
    offsetTop: "0",
    slidingTime: "0.3s",
    width: "80vw",
    height: "100%",
    container: "body",
    scrim: {
        opacity: 0.3,
        backgroundColor: "#aaa"
    }
});

Configure individual drawers

Here is how to create a drawer with all properties that can be overwritten, only the class is mandatory.

<div class="flexdrawer"
    id="someUniqueId"
    data-target="btnTest" 
    data-trigger="click"
    data-position="right" 
    data-width="80vw" 
    data-height="100%" 
    data-background-color="#f6f6f6"
    data-offset-top="0" 
    data-sliding-time="0.3s" 
    data-container="body"
    data-close="outside"
    data-on-close="someFunctionName"
>Some Content</div>

Attribute	Values	Description
class	flexdrawer	Mandatory. A div with class="flexdrawer" will be changed into a drawer.
data-target	html id	Optional, even though most scenarios will set this property. Specifies an element on the page that will trigger the drawer, when either clicked on or hovered, eg. if set to btnTest, FlexDrawer will try to find an element with the id="btnTest" and attach an event handler to that element that when activated will open the drawer.
data-trigger	click \| hover	Optional. Default value : click click : the user needs to click on the element specified by data-target to open the drawer. hover : the user needs to hover on the element specified by data-target to open the drawer. hover is changed to click on mobile. Note that the drawer will only close on mouseout if data-close contains the keyword target (data-close="target,...").
id	html id	Optional An id attribute is convenient if you want to programmatically open and/or close the drawer.
data-position	top \| right \| bottom \| left	Optional. Default value : right top : the drawer will slide down from the top edge of the viewport. right : the drawer will slide out from the right side of the viewport. bottom : the drawer will slide up from the bottom of the viewport. left : the drawer will slide out from the left side of the viewport.
data-width	length specifying the drawer width	Optional. Default value : 80vw The width can be specified in any html valid way, eg in pixels, percents or viewport units say 250px or 50% or 70vw.
data-height	length specifying the drawer height	Optional. Default value : 100% The height can be specified in any html valid way, eg in pixels, percents or viewport units say 250px, 100% or 70vh.
data-padding	css padding	Optional. Default : 10px You can write any valid value for css padding, eg. 5px 10px or 2px 3px 4px 5px or just 0.
data-offset-top	length specifying the offset from the top	Optional. Default value : 0 The offset-top can be specified in any html valid way, eg in pixels, percents or viewport units say 50px, 10% or 10vh. The drawer is often used on mobile phone when clicking a hamburger menu, you may want the drawer to NOT slider over the hamburger button or the whole top menu, set offset-top to avoid that.
data-sliding-time	drawer slide out animation time in seconds	Optional. Default : 0.3s The sliding-time must be specified in the unit 's', eg. 0.3s The sliding-time sets the animation time, how long time it takes for the drawer to slide out.
data-background-color	html color \| none	Optional. Default value : #f6f6f6 html color : can be specified in any html valid way, eg. hex, named or rgba say #ff0000, red or rgba(255, 0, 0, 0.8). none : the background color will not be set, use this if you want to specify the background color of the drawer eg. directly on the drawer element.
data-box-shadow	none \| auto	Optional. Default : auto. auto : the FlexDrawer will add a predefined box-shadow to the drawer depending on the drawers position. none : FlexDrawer will not apply any box-shadow to the drawer, use none if you either want no box-shadow or if you want to style the box-shadow yourself directly on the drawer element.
data-container	body \| parent	Optional. Default : body body : the drawer will be attached to document.body. parent : the drawer will retain it's position in the DOM whereever you put it. This is for special case where you want the drawer to be positioned relative to its positioned parent.
data-close-modes	outside,target,button	Optional. Default value : outside outside : click anywhere outside of the drawer to close the drawer target : will change the target from an open drawer button to a toggle drawer button. button : a close button will be created within the drawer left or right top corner depending on data-position. If the drawer fills the whole page, you should specify button.
data-on-close	function name	Optional. Function to be called when the drawer closes. A typical use case will be if you have an animated button that opens the drawer and you set data-close-modes to outside, when you click the button to open the drawer, the button will be in its open state, but when you click outside the drawer to close the drawer, the click will NOT hit the button even if you click the button and the button will therefore not animate back to its close state - you can use the data-on-close to set a callback function to revert the button back to its closed state.
data-z-index	number	Optional. Default : 1000 Sets the z-index of this particular drawer to accommodate any particular situation where the drawer slides.

API

Action	Code	Description
open	let myDrawer = FlexDrawer.open("<drawerId>")	Open a drawer programmatically using the static .open() function passing the id of the drawer. The static .open() function returns the drawer object in case you need it.
close	myDrawer.close() let closedDrawer = FlexDrawer.close("<drawerId>")	Close a drawer programmatically. There are 2 different ways : If you have a handle on the drawer from a previous call to .open(), you can use that handle to close the drawer using the instance .close() function. If you do NOT have a handle, you can close the drawer using the static close() function passing the drawers id. In addition the static .close() function will return a handle to the closed drawer.