Navigation Drawer

<gstock-navigation-drawer> | GstockNavigationDrawer

API

Nombre	Descripción	Tipo	Por defecto
`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.

Nombre	React Event	Descripción	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' }`

Aprende más sobre eventos .

Nombre	Descripción
`default`	The navigation drawer’s main content.

Aprende más sobre slots .

Nombre	Descripción
`show( )`	Shows the navigation drawer.
`hide( )`	Hides the navigation drawer

Aprende más sobre métodos .

Nombre	Descripción	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.

Nombre	Descripción
`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.

Aprende más sobre partes CSS .

Nombre	Descripción
`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.

Aprende más sobre animaciones .

Este componente importa automáticamente las siguientes dependencias.