Element: <oj-c-drawer-layout>

CORE PACK

Oracle® JavaScript Extension Toolkit (JET)
21.0.0
G39657-01

Since:
  • 17.0.0
Module:
  • drawer-layout

Note: This component supersedes the following component: <oj-drawer-layout>. Migration info available at preceding link.

QuickNav

Slots

Attributes

Events

Methods

Type Definitions

Documentation-only Types

Other Topics


JET Drawer Layout

Description: A Drawer Layout adds expandable side contents (drawers) alongside some primary content. These drawers automatically swap 'reflow' and 'overlay' display mode based on width of the page and can be placed at the 'start', 'end' or 'bottom' edge. 


<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 Drawer Popup and Drawer Layout look similar, but are intended to be used for different purposes.

Use Drawer Layout

  • If you need to switch between the ‘reflow’ display mode (big screens) and ‘overlay’ (small screens).
  • If the drawer should only fill a specific part of the viewport rather than take its full height (start/end) or full width (bottom).
  • If modality is not required.

Use Drawer Popup

  • If you need to display ‘overlay’ drawers attached to the edge of the viewport that stretch over the full viewport height or width.
  • If you need modality.

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.

Sizing

On mobile resolution side drawers stretch full-height. On non-mobile resolution side drawers stretch to Drawer Layout container's height. The bottom drawer always stretch to Drawer Layout container's 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 can use units like px, rem, etc. However because there is no fixed-size parent percentages (%) won’t work, but you can use vw (viewport width) or vh (viewport height) units to achieve a similar effect.

  • Note the side drawer's built-in minimal width limit in the 'Overlay' mode.
  • Note that DrawerLayout animates opening and closing. However, it is app developer's responsibility to add animations for custom runtime changes to a drawer size. See the 'Sizing' cookbook demo for an example.


Usage

Signature:

interface CDrawerLayoutElement

Typescript Import Format
//To typecheck the element APIs, import as below.
import { CDrawerLayoutElement } from "oj-c/drawer-layout";

//For the transpiled javascript to load the element's module, import as below
import "oj-c/drawer-layout";

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

The default slot is the content of the Drawer Popup.

bottom

The content node to be shown within the Bottom Drawer

end

The content node to be shown within the End Drawer

start

The content node to be shown within the Start Drawer

Attributes

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

Specifies 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 whether the Bottom drawer is open.
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 :"auto"|"overlay"|"reflow"

Specifies display mode of the Start 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 whether the End drawer is open.
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 :"auto"|"overlay"|"reflow"

Specifies 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 whether the Start drawer is open.
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

Note: The event detail contains the following properties: oj-c.DrawerLayout.OnCloseDetail

Triggered immediately before the drawer closes. 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.

See Events and Listeners for additional information.

ojClose

Note: The event detail contains the following properties: oj-c.DrawerLayout.OnTransitionEndDetail

Triggered immediately after the drawer closes.

See Events and Listeners for additional information.

Methods

getProperty(property) : {any}

Retrieves the value of a property or a subproperty.
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 corresponding 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

Type Definitions

Documentation-only Types

Note: Type definitions in this section have been provided for documentation purposes and cannot be imported into application code.

OnCloseDetail

Properties:
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 "end" | "start" | "bottom" edge from which the drawer slides into the layout.
reason "escapeKey" reason for closing the drawer

OnTransitionEndDetail

Properties:
Name Type Description
edge "end" | "start" | "bottom" edge from which the drawer slides into the layout.
value boolean opened value