FlexDrawer Documentation


Markup

Any <div> element with the flexdrawer class will automatically be transformed into a FlexDrawer UI.

Use data-attributes to configure the FlexDrawer and overwrite default values.

Open the Data-attributes tab to see each data-attribute explained in detail.

Below is the markup for a drawer, 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>
Default configuration

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

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"
    }
});
Data-attributes
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.
  • Note that if specifying the height relative to viewport (vh) or relative to document (%), the max-height will be calculated to allow for the data-offset-top, eg. max-height: calc(100vh - data-offset-top)
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 slide 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.
Events
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 :
  1. 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.
  2. 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.