We use essential cookies for the website to function, as well as analytics cookies for analyzing and creating statistics of the website performance. To agree to the use of analytics cookies, click "Accept All". You can manage your preferences at any time by clicking "Cookie Settings" on the footer. More Information.

Only Essential Cookies

Accept All

English

Products
Solutions
Events
Programs
Community
Training
Support

Materials Console

drawer

Last updated: 2023-07-14 09:12

Content overview

Version Change History

Expand

Overview

If the drawer element is used, the drawer is not displayed by default. You can swipe from the screen side or call an API to display it. The flex layout is supported.

Application Scope

Expand

Item	Description
Applicable devices	Mobile phones, tablets, and telematics devices
Applicable regions	Global

Subelements

Subelements are supported, for example, the drawer-navigation element.

Attribute

In addition to general attributes, the attribute listed in the following table is supported.

Expand

Attribute	Type	Default Value	Mandatory	Description
enableswipe	boolean	true	No	Controls whether the drawer can be opened or closed by swiping. This feature is enabled by default.

Styles

Common styles are supported.

Events

In addition to common events, the events listed in the following table are supported.

Expand

Event	Parameter	Description
change	{direction:directionValue, state: stateValue}	Callback upon the drawer opening or closing. direction: position of the drawer. start: drawer on the left side. end: drawer on the right side. state: status of the drawer. 0: closed. 1: opened.
scroll	{direction:directionValue, slideOffset:offsetValue, state:stateValue}	Event callback upon drawer scrolling. direction: position of the drawer during scrolling. slideOffset: indicates the slide offset of the drawer. The value ranges from 0.0 to 1.0. state: current status of a drawer. 0: A drawer is not scrolling. 1: A drawer is being swiped by the user. 2: A user took fingers off the screen and the drawer is scrolling to the target position.

Event

Parameter

Description

change

{direction:directionValue, state: stateValue}

Callback upon the drawer opening or closing.

direction: position of the drawer.
- start: drawer on the left side.
- end: drawer on the right side.
state: status of the drawer.
- 0: closed.
- 1: opened.

scroll

{direction:directionValue, slideOffset:offsetValue, state:stateValue}

Event callback upon drawer scrolling.

direction: position of the drawer during scrolling.
slideOffset: indicates the slide offset of the drawer. The value ranges from 0.0 to 1.0.
state: current status of a drawer.
- 0: A drawer is not scrolling.
- 1: A drawer is being swiped by the user.
- 2: A user took fingers off the screen and the drawer is scrolling to the target position.

Methods

Expand

Method	Parameter	Description
openDrawer	object	Opens the drawer in the specified position.
closeDrawer	object	Closes the drawer in the specified position.

openDrawer parameters

Expand

Parameter	Type	Mandatory	Default Value	Description
direction	string	No	-	The value can be start or end. If the value of direction is not set, and there exists only one drawer-navigation, the drawer-navigation is opened by default. If the left draw-navigation and right draw-navigation both exist, the left draw-navigation is opened by default. This parameter does not take effect when the specified value does not match the value of direction in drawer-navigation.

Parameter

Type

Mandatory

Default Value

Description

direction

string

The value can be start or end.

If the value of direction is not set, and there exists only one drawer-navigation, the drawer-navigation is opened by default. If the left draw-navigation and right draw-navigation both exist, the left draw-navigation is opened by default. This parameter does not take effect when the specified value does not match the value of direction in drawer-navigation.

closeDrawer parameters

Expand

Parameter	Type	Mandatory	Default Value	Description
direction	string	No	-	The value can be start or end. If the value of direction is not set, and there exists only one drawer-navigation, the drawer-navigation is closed by default. If the left draw-navigation and right draw-navigation both exist, the value of direction must be specified. This parameter does not take effect when the specified value does not match the value of direction in drawer-navigation.

Parameter

Type

Mandatory

Default Value

Description

direction

string

The value can be start or end.

If the value of direction is not set, and there exists only one drawer-navigation, the drawer-navigation is closed by default. If the left draw-navigation and right draw-navigation both exist, the value of direction must be specified. This parameter does not take effect when the specified value does not match the value of direction in drawer-navigation.

Sample Code

Collapse
Word wrap
Dark theme
Copy code
<template>
  <drawer class="drawer" id="drawer" enableswipe="{{enableSwipe}}" onchange="onDrawerStateChanged" onscroll="onDrawerScroll">
    <div class="content">
      <input class="btn" type="button" value="Toggle enableswipe" onclick="toggleEnableSwipe" />
      <input class="btn" type="button" value="Open Left" onclick="openLeft" />
      <input class="btn" type="button" value="Open Right" onclick="openRight" />
      <input class="btn" type="button" value="Open Default" onclick="openDefault" />
    </div>
    <drawer-navigation class="navigation" direction="start">
      <input class="btn" type="button" value="Toggle enableswipe" onclick="toggleEnableSwipe" />
      <input class="btn" type="button" value="Close Left" onclick="closeLeft" />
      <input class="btn" type="button" value="Close Default" onclick="closeDefault" />
    </drawer-navigation>
    <drawer-navigation class="navigation" direction="end">
      <input class="btn" type="button" value="Toggle enableswipe" onclick="toggleEnableSwipe" />
      <input class="btn" type="button" value="Close Right" onclick="closeRight" />
    </drawer-navigation>
  </drawer>
</template>
<style>
  .drawer {
    width: 100%;
    height: 100%;
  }
  .content {
    background-color: #808080;
    flex-direction: column;
    align-items: center;
  }
  .btn {
    width: 400px;
    height: 100px;
    margin: 16px;
    background-color: #00bfff;
    color: #ffffff;
  }
  .navigation {
    width: 70%;
    height: 100%;
    background-color: #ffffff;
    flex-direction: column;
    align-items: center;
  }
</style>
<script>
  module.exports = {
    data: {
      enableSwipe: true
    },
    onDrawerStateChanged(params) {
      console.log("change - direction:" + params.direction + " state:" + params.state);
    },
    onDrawerScroll(params) {
      console.log("scroll - direction:" + params.direction + " slideOffset:" + params.slideOffset + " state:" + params.state);
    },
    toggleEnableSwipe() {
      this.enableSwipe = !this.enableSwipe
    },
    openLeft() {
      this.$element('drawer').openDrawer({ direction: 'start' })
    },
    openRight() {
      this.$element('drawer').openDrawer({ direction: 'end' })
    },
    openDefault() {
      this.$element('drawer').openDrawer()
    },
    closeLeft() {
      this.$element('drawer').closeDrawer({ direction: 'start' })
    },
    closeRight() {
      this.$element('drawer').closeDrawer({ direction: 'end' })
    },
    closeDefault() {
      this.$element('drawer').closeDrawer()
    },
  }
</script>