Skip to main content
Supported Regions:上海

Drawer

WdDrawer

Applicable Scenarios​

It is used to implement a side drawer display effect, commonly applied in scenarios such as navigation menus, detail panels, and filters. It supports sliding out from all four directions of the page.

Basic Features​

1. Opening/Closing the Drawer​

  • In the drawer's "Default Open Drawer" property, it controls the initial open/close state of the drawer.

  • In the 'Event-Component Methods', call the drawer's opening/closing methods to dynamically control the open/close state of the drawer.

  • When opening or closing the drawer, you can configure info as the passed-in parameter. After it is passed in, obtain the parameter via $w.drawer1.openInfo or $w.drawer1.closeInfo. Here, drawer1 is the drawer component ID.

Example: Button Opening the Drawer​
  1. Add a button and drawer component
  1. Select the drawer component, set the drawer to be closed by default, and disable the drawer property "Default Open Drawer".
  1. Select the button component and add a click event.
  1. Select the drawer to be opened and execute the method. Then select the component on the page and call the "open Drawer" method to implement opening the drawer by clicking the button.

Interactive Preview​

Style API Custom Styles​

Property Description​

External properties received by the component

Property Name
Property Identifier
Type
Description
Disable methodcloseTypearray

Press ESC on the keyboard to close the drawer (PC only)

Multi-selection mode, outerClick-click to close the overlay, esc-click the ESC key to close (only takes effect on PC)

Example: [ "outerClick" ]

Show maskmaskboolean

Example: true

Top slotenableHeaderSlotboolean

Default value: true

Content slotenableContentSlotboolean

Default value: true

bottom slotenableFooterSlotboolean
Drawer default open statusvisibleboolean

Set default open state. Call drawer open/close method in Event-Component Method to dynamically control drawer switch. [View Guide](https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/grid/WdModal#3-Open Close Drawer)

Example: true

drawer directionplacementstring

Drawer direction. Options: left/right/top/bottom

Example: "right"

Event Description​

Events exposed by the component. You can listen to component events to trigger external actions

Event Name
Event Code
Event Output Parameters event.detail
Applicable Scenarios
Description
Drawer onopenobject
  • info:

    透传信息，在触发抽屉打开时接收该信息，信息来自于调用组件open方法的info
Compatible with all platforms

-

drawer when closedcloseobject
  • info:

    透传信息，在触发抽屉关闭时接收该信息，信息来自于调用组件close方法的info
Compatible with all platforms

-

Properties API​

Through the Property API, you can access the internal state and property values of components. You can access internal values using$w.componentId.propertyName, such as $w.input1.value. For details, please refer to Property API

Read-only Property Name
Property Identifier
Type
Description
drawer statusmodalStatestring
openInfo

Transparent transmission of information, info received when the drawer is opened, info comes from the component's open method call

closeInfo

Transparent transmission of information, info received when the drawer is closed, info comes from the component calling the close method

Method API​

Through the Method API, you can programmatically trigger internal methods of components, such as submitting forms, displaying popups, etc. You can call component methods using $w.componentId.methodName, such as $w.form1.submit()

Method Name
Method Identifier
Parameters
Method Description
open the draweropenobject
  • info:

    透传信息，在监听到抽屉打开时会传递该信息

-

close drawercloseobject
  • info:

    透传信息，在监听到抽屉关闭时会传递该信息

-

Style API​

Through the Style API, you can override the styles of internal elements in components to achieve customization. For example, in the low-code editor, you can write styles for all button components using #wd-page-root .wd-btn, and control individual component styles with :scope. For detailed instructions, please refer toStyle API

Name
Class Name
Description and Examples
root element.wd-drawercomponent root element

      :scope.wd-drawer  {
        /* 在这里编写CSS 样式 */
      }
PC-side root element.wd-pc-drawercomponent root element

      :scope.wd-pc-drawer  {
        /* 在这里编写CSS 样式 */
      }
H5 root element.wd-h5-drawerWrite style for H5

      :scope.wd-h5-drawer  {
        /* 在这里编写CSS 样式 */
      }
Mini program root element.wd-mp-drawerWrite style for mini program

      :scope.wd-mp-drawer  {
        /* 可以为 小程序 端的编写样式 */
      }
Drawer mask layer style.wd-drawer-maskWrite styles for the mask layer

      :scope .wd-drawer-mask  {
        /* 可以为遮罩层编写样式 */
        background-color: rgba(0, 0, 0, 0.5)
      }
Drawer main container style.wd-drawer-content-wrapperWrite styles for the main container

      :scope .wd-drawer-content-wrapper  {
        /* 可以为主体容器编写样式 */
        inset-inline-start: auto;
        inset-inline-end: 0;
      }
Drawer top container style.wd-drawer-headerWrite styles for the top container

      :scope .wd-drawer-header  {
        /* 可以为顶部容器编写样式*/
        padding: 0;
      }
Drawer content container style.wd-drawer-bodyWrite styles for the content container

      :scope .wd-drawer-body  {
        /* 可以为内容容器编写样式 */
        padding: 0;
      }
Drawer bottom container style.wd-drawer-footerWrite styles for the bottom container

      :scope .wd-drawer-footer  {
        /* 可以为底部容器编写样式 */
         padding: 0;
      }

Learn about Style API