Element: <oj-c-drawer-popup>

CORE PACK

Oracle® JavaScript Extension Toolkit (JET)
16.1.0
F92237-01

Since:
  • 16.0.0
Module:
  • drawer-popup

QuickNav

Slots

Attributes

Events

Methods

Other Topics


JET Drawer Popup

Description: Drawer Popup adds a single slide-in side content alongside some primary content to an application window.


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

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

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

Main section content

JET Drawer Popup and Drawer Layout look similar, but are intended to be used for different purposes.

Use Drawer Popup when you need to always show 'overlay' drawers.

Use Drawer Layout 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


Usage

Signature:

interface CDrawerPopupElement

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

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

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.

Attributes

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

Specifies whether a click on the scrim closes the drawer. Supported values are:

focus-loss, none

Default is focus-loss.
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 :"none"|"swipe"

Specifies whether a gesture closes the drawer. Supported values are:

swipe, none

Default is swipe.
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 :"end"|"start"|"bottom"

Specifies at what edge the drawer opens. Supported values are:

start, end, bottom

Default is start.
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"

Specifies the modality of the drawer. Supported detail values are:

modal, modeless

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 whether the Drawer is open.
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. 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 (param: 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 the value of a property or a subproperty.
Parameters:
Name Type Description
property 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 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 The property name to set. Supports dot notation for subproperty access.
value The new value to set the property to.
Returns:
Type
void