Element: <oj-drawer-popup>

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

Since:
  • 11.0.0
Module:
  • ojdrawerpopup

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

QuickNav

Slots

Attributes

Events

Methods

Other Topics


JET Drawer Popup

Description: A drawer popup is an isolated element. A drawer is a panel that slides into the viewport.


<oj-drawer-popup>
   Start drawer content
</oj-drawer-popup>

<oj-drawer-popup edge="end" opened="true">
   End drawer content
</oj-drawer-popup>

<oj-drawer-popup edge="bottom">
   Bottom drawer content
</oj-drawer-popup>

Main section content

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

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

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

Keyboard End User Information

Target Key Action
Drawer element Esc Close the drawer

Accessibility

role

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

 <oj-drawer-popup 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 DrawerPopupElement

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

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

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.

Attributes

auto-dismiss :("focus-loss"|"none")

Controls the close auto-dismiss behaviour to close the drawer. Click or tap on the scrim closes the drawer.
Default Value:
  • 'focus-loss'
Names
Item Name
Property autoDismiss
Property change event autoDismissChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-auto-dismiss-changed

close-gesture :("swipe"|"none")

Controls the close gesture to close the drawer.
Default Value:
  • 'swipe'
Names
Item Name
Property closeGesture
Property change event closeGestureChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-close-gesture-changed

edge :("start"|"end"|"bottom")

Specifies at what edge the drawer opens.
Default Value:
  • 'start'
Names
Item Name
Property edge
Property change event edgeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-edge-changed

modality :("modal"|"modeless")

Controls the modality of the drawer.
Default Value:
  • 'modal'
Names
Item Name
Property modality
Property change event modalityChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-modality-changed

opened :boolean

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

Events

ojBeforeClose

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

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