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.
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. Call
event.preventDefault()
in the event listener to veto the event synchronously, which prevents the drawer from closing. Callevent.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. -
ojClose
-
Triggered immediately after the drawer closes.
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