Element: <oj-drawer-layout>

Oracle® JavaScript Extension Toolkit (JET)
15.1.0
F83698-01

Since:
  • 11.0.0
Module:
  • ojdrawerlayout

Note: This component is not supported in the following themes: Alta

QuickNav

Slots

Attributes

Events

Methods

Other Topics


JET Drawer Layout

Description: A drawer layout can be used for managing content with one ore more drawers. A drawer is a panel that can slide from the layout edges into it. Depending on the drawer layout size and configuration, the main content can be re-arranged (reflow mode) or overlaid when the drawer is opened.


<oj-drawer-layout end-opened="true">

   <div slot="start">Start drawer content </div>
   <div slot="end">End drawer content </div>

   Main section content

</oj-drawer-layout>

JET DrawerLayout and DrawerPopup look similar, but are intended to be used for different purposes.

Use DrawerLayout when you need to switch from 'reflow' display mode (big screens) to 'overlay' (small screens).

Use DrawerPopup when you need to always show 'overlay' drawers.

Keyboard End User Information

Target Key Action
Drawer element Esc Close the drawer

Accessibility

role

By default, the role will be set to Drawer in overlay mode. This can be observed by inspecting the DOM: 

 <div class="oj-drawer-overlay ..." role="dialog">
This can be changed using custom role attribute.

Reading direction

Setting the reading direction (LTR or RTL) is supported by setting the "dir" attribute on the <html> element of the page. As with any JET component, in the unusual case that the reading direction is changed post-init, the page must be reloaded.


Usage

Signature:

interface DrawerLayoutElement

Typescript Import Format
//To typecheck the element APIs, import as below.
import { DrawerLayoutElement } from "ojs/ojdrawerlayout";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojdrawerlayout";

For additional information visit:

Note: Application logic should not interact with the component's properties or invoke its methods until the BusyContext indicates that the component is ready for interaction.


Slots

JET components that allow child content support slots. Please see the slots section of the JET component overview doc for more information on allowed slot content and slot types.

Default

Specifies the default slot.

bottom

Container for Bottom drawer content.

end

Container for End drawer content.

start

Container for Start drawer content.

Attributes

bottom-display :("reflow"|"overlay"|"auto")

Specifies the display mode of the Bottom drawer.
Default Value:
  • 'auto'
Names
Item Name
Property bottomDisplay
Property change event bottomDisplayChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-bottom-display-changed

bottom-opened :boolean

Specifies the 'bottomOpened' state of the Bottom drawer.
Default Value:
  • false
Supports writeback:
  • true
Names
Item Name
Property bottomOpened
Property change event bottomOpenedChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-bottom-opened-changed

end-display :("reflow"|"overlay"|"auto")

Specifies the display mode of the End drawer.
Default Value:
  • 'auto'
Names
Item Name
Property endDisplay
Property change event endDisplayChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-end-display-changed

end-opened :boolean

Specifies the 'endOpened' state of the End drawer.
Default Value:
  • false
Supports writeback:
  • true
Names
Item Name
Property endOpened
Property change event endOpenedChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-end-opened-changed

start-display :("reflow"|"overlay"|"auto")

Specifies the display mode of the Start drawer.
Default Value:
  • 'auto'
Names
Item Name
Property startDisplay
Property change event startDisplayChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-start-display-changed

start-opened :boolean

Specifies the 'opened' state of the Start drawer.
Default Value:
  • false
Supports writeback:
  • true
Names
Item Name
Property startOpened
Property change event startOpenedChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-start-opened-changed

Events

ojBeforeClose

Triggered immediately before the drawer closes. Available only in overlay mode.
Call event.preventDefault() in the event listener to veto the event synchronously, which prevents the drawer from closing.
Call event.detail.accept(Promise.reject()) in the event listener to veto the event asynchronously, which prevents the drawer from closing.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
accept (acceptPromise:Promise<void>) => void This method can be called with an application-created Promise to cancel this event asynchronously. The Promise should be resolved or rejected to accept or cancel the event, respectively.
edge ("start"|"end"|"bottom")

Methods

getProperty(property) : {any}

Retrieves a value for a property or a single subproperty for complex properties.
Parameters:
Name Type Description
property string The property name to get. Supports dot notation for subproperty access.
Returns:
Type
any

setProperties(properties) : {void}

Performs a batch set of properties.
Parameters:
Name Type Description
properties Object An object containing the property and value pairs to set.
Returns:
Type
void

setProperty(property, value) : {void}

Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a [property]Changed event.
Parameters:
Name Type Description
property string The property name to set. Supports dot notation for subproperty access.
value any The new value to set the property to.
Returns:
Type
void