Navigation Drawer
<gstock-navigation-drawer>
|
GstockNavigationDrawer
API
Properties
| Name | Description | Reflects | Type | Default |
|---|---|---|---|---|
modal
|
Exposes the internal modal utility that controls focus trapping. To
temporarily disable focus trapping and allow third-party modals spawned
from an active Gstock modal, call
modal.activateExternal() when the third-party modal opens.
Upon closing, call modal.deactivateExternal() to restore
Gstock’s focus trapping.
|
-
|
new GstockModal(this)
|
|
open
|
Indicates whether or not the navigation drawer is open. You can toggle
this attribute to show and hide the navigation drawer, or you can use the
show() and hide() methods and this attribute
will reflect the navigation drawer’s open state.
|
|
boolean
|
false
|
label
|
The navigation drawer’s label as displayed in the header. You should
always include a relevant label even when using
no-header, as it is required for proper accessibility.
|
|
string
|
''
|
updateComplete
|
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties .
Events
| Name | React Event | Description | Event Detail |
|---|---|---|---|
gstock-show-event
|
onGstockShowEvent
|
Emitted when the navigation drawer opens. | - |
gstock-after-show-event
|
onGstockAfterShowEvent
|
Emitted after the navigation drawer opens and all animations are complete. | - |
gstock-hide-event
|
onGstockHideEvent
|
Emitted when the navigation drawer closes. | - |
gstock-after-hide-event
|
onGstockAfterHideEvent
|
Emitted after the navigation drawer closes and all animations are complete. | - |
gstock-initial-focus-event
|
onGstockInitialFocusEvent
|
Emitted when the navigation drawer opens and is ready to receive focus.
Calling event.preventDefault() will prevent focusing and
allow you to set it on a different element, such as an input.
|
- |
gstock-request-close-event
|
onGstockRequestCloseEvent
|
Emitted when the user attempts to close the navigation drawer by clicking
the close button, clicking the overlay, or pressing escape. Calling
event.preventDefault() will keep the navigation drawer open.
Avoid using this unless closing the navigation drawer will result in
destructive behavior such as data loss.
|
{ source: 'keyboard' | 'overlay' }
|
Learn more about events .
Slots
| Name | Description |
|---|---|
default
|
The navigation drawer’s main content. |
Learn more about slots .
Methods
| Name | Description |
|---|---|
show( )
|
Shows the navigation drawer. |
hide( )
|
Hides the navigation drawer |
Learn more about methods .
Custom Properties
| Name | Description | Default |
|---|---|---|
--size
|
The preferred size of the navigation drawer. This will be applied to the navigation drawer’s width. Note that the navigation drawer will shrink to accommodate smaller screens. | |
--body-spacing
|
The amount of padding to use for the body. |
Learn more about custom properties .
CSS Parts
| Name | Description |
|---|---|
base
|
The component’s base wrapper. |
overlay
|
The overlay that covers the screen behind the navigation drawer. |
panel
|
The navigation drawer’s panel (where the navigation drawer and its content are rendered). |
body
|
The navigation drawer’s body. |
Learn more about CSS parts .
Animations
| Name | Description |
|---|---|
navigation-drawer.show
|
The animation to use when showing a navigation drawer. |
navigation-drawer.hide
|
The animation to use when hiding a navigation drawer. |
navigation-drawer.denyClose
|
The animation to use when a request to close the navigation drawer is denied. |
navigation-drawer.overlay.show
|
The animation to use when showing the navigation drawer’s overlay. |
navigation-drawer.overlay.hide
|
The animation to use when hiding the navigation drawer’s overlay. |
Learn more about animations .
Dependencies
This component automatically imports the following dependencies.