Element: <oj-drawer-layout>

Oracle® JavaScript Extension Toolkit (JET)
11.0.0
F37993-01

Since:
  • 11.0.0
Module:
  • ojdrawerlayout

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

QuickNav

Slots

Attributes

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.

end

Container for End drawer content.

start

Container for Start drawer content.

Attributes

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

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