Angular Drawer Properties

This section describes options that configure the Drawer widget's contents, behavior and appearance.

See Also

activeStateEnabled

Specifies whether or not the widget changes its state when interacting with a user.

Type:

Boolean

Default Value: false

This option is used when the widget is displayed on a platform whose guidelines include the active state change for widgets.

animationDuration

Specifies the duration of the drawer's opening and closing animation (in milliseconds). Applies only if animationEnabled is true.

Type:

Number

Default Value: 400

animationEnabled

Specifies whether to use an opening and closing animation.

Type:

Boolean

Default Value: true

See Also

closeOnOutsideClick

Specifies whether to close the drawer if a user clicks or taps the view area.

Type:

Boolean

|

Function

Function parameters:
event:

Event (jQuery or EventObject)

The raised event. It is a dxEvent or a jQuery.Event when you use jQuery.

Return Value:

Boolean

true if the widget should be closed; otherwise false.

Default Value: false

The function passed to this option enables you to specify a custom condition for widget closing. For instance, you can prevent closing until a user clicks a specific element on the view:

jQuery
JavaScript
$(function() {
    $("#drawerContainer").dxDrawer({
        // ...
        closeOnOutsideClick: function(e) {
            return e.target === $("#someElement").get()[0];
        }
    });
});
Angular
TypeScript
HTML
import { DxDrawerModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
    drawer_closeOnOutsideClick(e) {
        return e.target === document.getElementById("someElement");
    }
}
@NgModule({
     imports: [
         // ...
         DxDrawerModule
     ],
     // ...
 })
<dx-drawer ...
    [closeOnOutsideClick]="drawer_closeOnOutsideClick">
</dx-drawer>

component

An alias for the template property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

disabled

Specifies whether the widget responds to user interaction.

Type:

Boolean

Default Value: false

elementAttr

Specifies the attributes to be attached to the widget's root element.

Type:

Object

Default Value: {}

jQuery
$(function(){
    $("#drawerContainer").dxDrawer({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});
Angular
HTML
TypeScript
<dx-drawer ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-drawer>
import { DxDrawerModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDrawerModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxDrawer ...
        :element-attr="drawerAttributes">
    </DxDrawer>
</template>

<script>
import DxDrawer from 'devextreme-vue/drawer';

export default {
    components: {
        DxDrawer
    },
    data() {
        return {
            drawerAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>
React
App.js
import React from 'react';

import Drawer from 'devextreme-react/drawer';

class App extends React.Component {
    drawerAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <Drawer ...
                elementAttr={this.drawerAttributes}>
            </Drawer>
        );
    }
}
export default App;

height

Specifies the view's height.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The widget's height.

Default Value: undefined

This option accepts a value of one of the following types:

  • Number
    The height in pixels.

  • String
    A CSS-accepted measurement of height. For example, "55px", "80%", "inherit".

  • Function
    A function returning either of the above. For example:

    JavaScript
    height: function() {
    return window.innerHeight / 1.5;
}

hint

Specifies text for a hint that appears when a user pauses on the widget.

Type:

String

Default Value: undefined

hoverStateEnabled

Specifies whether the widget changes its state when a user pauses on it.

Type:

Boolean

Default Value: false

maxSize

Specifies the drawer's width or height (depending on the drawer's position) in the opened state.

Type:

Number

Default Value: null

See Also

minSize

Specifies the drawer's width or height (depending on the drawer's position) in the closed state.

Type:

Number

Default Value: null

See Also

onDisposing

A function that is executed before the widget is disposed of.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Drawer

The widget's instance.
element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model

Object

Model data. Available only if you use Knockout.
Default Value: null

onInitialized

A function used in JavaScript frameworks to save the widget instance.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Drawer

The widget's instance.
element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
Default Value: null

See Also

onOptionChanged

A function that is executed after a widget option is changed.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
model

Object

Model data. Available only if you use Knockout.
fullName

String

The path to the modified option that includes all parent options.
element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
component

Drawer

The widget's instance.
name

String

The modified option if it belongs to the first level. Otherwise, the first-level option it is nested into.
value any

The modified option's new value.
Default Value: null

opened

Specifies whether the drawer is opened.

Type:

Boolean

Default Value: false
Raised Events: onOptionChanged

See Also

openedStateMode

Specifies how the drawer interacts with the view in the opened state.

Type:

String

Default Value: 'shrink'
Accepted Values: 'overlap' | 'shrink' | 'push'

The following modes are available:

  • "overlap"
    The drawer overlaps the view.

  • "shrink"
    The view's width decreases to accommodate the drawer.

  • "push"
    The drawer partially displaces the view.

View Demo

Use the DrawerOpenedStateMode enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Overlap, Shrink, and Push.

See Also

position

Specifies the drawer's position in relation to the view.

Type:

String

Default Value: 'left'
Accepted Values: 'left' | 'right' | 'top' | 'bottom' | 'before' | 'after'

Use "before" and "after" if the Drawer should be positioned differently in right-to-left and regular representations. The following table shows the dependency between the rtlEnabled value and "before" and "after" positions:

"before" "after"
rtlEnabled: false left side of the view right side of the view
rtlEnabled: true right side of the view left side of the view

Top or Bottom Position Demo Left or Right Position Demo

Use the DrawerPosition enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Left, Right, Top, Bottom, Before, and After.

render

An alias for the template property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

revealMode

Specifies the drawer's reveal mode.

Type:

String

Default Value: 'slide'
Accepted Values: 'slide' | 'expand'

The following modes are available:

  • "slide"
    The drawer slides in. The drawer and its content are animated.

  • "expand"
    The drawer expands from the closed position. The drawer's width is animated; its content is not.

View Demo

Use the DrawerRevealMode enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Slide and Expand.

See Also

rtlEnabled

Switches the widget to a right-to-left representation.

Type:

Boolean

Default Value: false

When this option is set to true, the widget text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

JavaScript
DevExpress.config({
    rtlEnabled: true
});
See Also

shading

Specifies whether to shade the view when the drawer is opened.

Type:

Boolean

Default Value: false

See Also

target

Specifies a CSS selector for the element in which the drawer should be rendered. Applies only when the openedStateMode is "overlap".

Type:

String

|

Element

|

jQuery

This option accepts one of the following values.

  • A CSS selector, or a jQuery selector if you use jQuery

    target: '#targetElement';

  • A jQuery wrapper

    target: $('#targetElement');

  • A DOM element

    target: document.getElementById('#targetElement');
See Also

template

Specifies the drawer's content.

Type:

template

Template Data: undefined
Default Name: 'panel'

DevExtreme HTML5 JavaScript Drawer

View Demo

See Also

visible

Specifies whether the Drawer widget (including the view) is visible.

Type:

Boolean

Default Value: true

width

Specifies the view's width.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The widget's width.

Default Value: undefined

This option accepts a value of one of the following types:

  • Number
    The width in pixels.

  • String
    A CSS-accepted measurement of width. For example, "55px", "80%", "auto", "inherit".

  • Function
    A function returning either of the above. For example:

    JavaScript
    width: function() {
    return window.innerWidth / 1.5;
}