Element: <oj-drawer-layout>

Oracle® JavaScript Extension Toolkit (JET)
17.0.0
F92240-01

Since:
  • 11.0.0
Module:
  • ojdrawerlayout

Note: This component is in maintenance mode. Suggested alternative: <oj-c-drawer-layout>. For help updating an existing application, see the migration section.

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 or 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.

Migration

Read about current Core Pack limitations to decide when to migrate.
Please make note of the following:

To migrate from oj-drawer-layout to oj-c-drawer-layout, you need to revise the import statement and references to oj-c-drawer-layout in your app.

Drawer sizing

Side drawers stretch to Drawer Layout container's height and the bottom one to its width. The other axis dimension is not predefined. This dimension's size is determined by its content. If you want to set a custom size, you need to specify it using absolute units (px, rem, etc.). Relative unit size (%) will not work, because there is no fixed-size parent.

Keyboard End User Information

Target Key Action
Drawer element Esc Close the drawer

Accessibility

It is developer’s responsibility to define respective aria properties to meet accessibility requirements. Use aria-labelledby, aria-describedby or aria-label attributes on drawer elements (slots of the Drawer Layout) to make them accessible.

aria-labelledby

If a drawer already has a visible title bar, the text inside that bar can be used to label the dialog itself. Set the value of the aria-labelledby attribute to be the id of the element used to title the drawer. If there isn't appropriate text visible in the DOM that could be referenced with aria-labelledby use the aria-label attribute to define the accessible name of an element.

aria-describedby

If the drawer contains additional descriptive text besides the drawer title, this text can be associated with the drawer using the aria-describedby 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")

ojClose

Triggered immediately after the drawer closes.
Properties:

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

Name Type
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