@material/drawer

  • Version 12.0.0
  • Published
  • 986 kB
  • 12 dependencies
  • MIT license

Install

npm i @material/drawer
yarn add @material/drawer
pnpm add @material/drawer

Overview

The Material Components Web drawer component

Index

Namespaces

namespace @material/drawer

module '@material/drawer' {}

    variable cssClasses

    const cssClasses: {
    ANIMATE: string;
    CLOSING: string;
    DISMISSIBLE: string;
    MODAL: string;
    OPEN: string;
    OPENING: string;
    ROOT: string;
    };
    • Copyright 2016 Google Inc.

      Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

      The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

      THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

    variable strings

    const strings: {
    APP_CONTENT_SELECTOR: string;
    CLOSE_EVENT: string;
    OPEN_EVENT: string;
    SCRIM_SELECTOR: string;
    LIST_SELECTOR: string;
    LIST_ITEM_ACTIVATED_SELECTOR: string;
    };

      class MDCDismissibleDrawerFoundation

      class MDCDismissibleDrawerFoundation extends MDCFoundation<MDCDrawerAdapter> {}

        constructor

        constructor(adapter?: Partial<MDCDrawerAdapter>);

          property cssClasses

          static readonly cssClasses: {
          ANIMATE: string;
          CLOSING: string;
          DISMISSIBLE: string;
          MODAL: string;
          OPEN: string;
          OPENING: string;
          ROOT: string;
          };

            property defaultAdapter

            static readonly defaultAdapter: MDCDrawerAdapter;

              property strings

              static readonly strings: {
              APP_CONTENT_SELECTOR: string;
              CLOSE_EVENT: string;
              OPEN_EVENT: string;
              SCRIM_SELECTOR: string;
              LIST_SELECTOR: string;
              LIST_ITEM_ACTIVATED_SELECTOR: string;
              };

                method close

                close: () => void;
                • Closes the drawer from the open state.

                method closed

                protected closed: () => void;
                • Extension point for when drawer finishes close animation.

                method destroy

                destroy: () => void;

                  method handleKeydown

                  handleKeydown: (evt: KeyboardEvent) => void;
                  • Keydown handler to close drawer when key is escape.

                  method handleTransitionEnd

                  handleTransitionEnd: (evt: TransitionEvent) => void;
                  • Handles the transitionend event when the drawer finishes opening/closing.

                  method isClosing

                  isClosing: () => boolean;
                  • Returns true if the drawer is animating closed. true if drawer is animating closed.

                  method isOpen

                  isOpen: () => boolean;
                  • Returns true if the drawer is in the open position. true if drawer is in open state.

                  method isOpening

                  isOpening: () => boolean;
                  • Returns true if the drawer is animating open. true if drawer is animating open.

                  method open

                  open: () => void;
                  • Opens the drawer from the closed state.

                  method opened

                  protected opened: () => void;
                  • Extension point for when drawer finishes open animation.

                  class MDCDrawer

                  class MDCDrawer extends MDCComponent<MDCDismissibleDrawerFoundation> {}
                  • MDCDrawer:closed {} Emits when the navigation drawer has closed. MDCDrawer:opened {} Emits when the navigation drawer has opened.

                  property list

                  readonly list: any;

                    property open

                    open: boolean;
                    • boolean Proxies to the foundation's open/close methods. Also returns true if drawer is in the open position.

                    method attachTo

                    static attachTo: (root: Element) => MDCDrawer;

                      method destroy

                      destroy: () => void;

                        method getDefaultFoundation

                        getDefaultFoundation: () => MDCDismissibleDrawerFoundation;

                          method initialize

                          initialize: (
                          focusTrapFactory?: MDCDrawerFocusTrapFactory,
                          listFactory?: any
                          ) => void;

                            method initialSyncWithDOM

                            initialSyncWithDOM: () => void;

                              class MDCModalDrawerFoundation

                              class MDCModalDrawerFoundation extends MDCDismissibleDrawerFoundation {}

                                method closed

                                protected closed: () => void;
                                • Called when drawer finishes close animation.

                                method handleScrimClick

                                handleScrimClick: () => void;
                                • Handles click event on scrim.

                                method opened

                                protected opened: () => void;
                                • Called when drawer finishes open animation.

                                interface MDCDrawerAdapter

                                interface MDCDrawerAdapter {}
                                • Defines the shape of the adapter expected by the foundation. Implement this adapter for your framework of choice to delegate updates to the component in your framework of choice. See architecture documentation for more details. https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md

                                method addClass

                                addClass: (className: string) => void;
                                • Adds a class to the root Element.

                                method elementHasClass

                                elementHasClass: (element: Element, className: string) => boolean;
                                • Returns true if the element contains the given class.

                                  Parameter element

                                  target element to verify class name

                                  Parameter className

                                  class name

                                method focusActiveNavigationItem

                                focusActiveNavigationItem: () => void;
                                • Focuses the active / selected navigation item.

                                method hasClass

                                hasClass: (className: string) => boolean;
                                • Returns true if the root Element contains the given class.

                                method notifyClose

                                notifyClose: () => void;
                                • Emits a custom event "MDCDrawer:closed" denoting the drawer has closed.

                                method notifyOpen

                                notifyOpen: () => void;
                                • Emits a custom event "MDCDrawer:opened" denoting the drawer has opened.

                                method releaseFocus

                                releaseFocus: () => void;
                                • Releases focus trap from root element which was set by trapFocus and restores focus to where it was prior to calling trapFocus.

                                method removeClass

                                removeClass: (className: string) => void;
                                • Removes a class from the root Element.

                                method restoreFocus

                                restoreFocus: () => void;
                                • Restores focus to element previously saved with 'saveFocus'.

                                method saveFocus

                                saveFocus: () => void;
                                • Saves the focus of currently active element.

                                method trapFocus

                                trapFocus: () => void;
                                • Traps focus on root element and focuses the active navigation element.

                                namespace @material/drawer.util

                                namespace @material/drawer.util {}

                                  function createFocusTrapInstance

                                  createFocusTrapInstance: (
                                  surfaceEl: HTMLElement,
                                  focusTrapFactory: MDCDrawerFocusTrapFactory
                                  ) => any;

                                    type MDCDrawerFocusTrapFactory

                                    type MDCDrawerFocusTrapFactory = (
                                    element: HTMLElement,
                                    options: FocusOptions
                                    ) => FocusTrap;

                                      namespace @material/drawer/adapter

                                      module '@material/drawer/adapter' {}

                                        interface MDCDrawerAdapter

                                        interface MDCDrawerAdapter {}
                                        • Defines the shape of the adapter expected by the foundation. Implement this adapter for your framework of choice to delegate updates to the component in your framework of choice. See architecture documentation for more details. https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md

                                        method addClass

                                        addClass: (className: string) => void;
                                        • Adds a class to the root Element.

                                        method elementHasClass

                                        elementHasClass: (element: Element, className: string) => boolean;
                                        • Returns true if the element contains the given class.

                                          Parameter element

                                          target element to verify class name

                                          Parameter className

                                          class name

                                        method focusActiveNavigationItem

                                        focusActiveNavigationItem: () => void;
                                        • Focuses the active / selected navigation item.

                                        method hasClass

                                        hasClass: (className: string) => boolean;
                                        • Returns true if the root Element contains the given class.

                                        method notifyClose

                                        notifyClose: () => void;
                                        • Emits a custom event "MDCDrawer:closed" denoting the drawer has closed.

                                        method notifyOpen

                                        notifyOpen: () => void;
                                        • Emits a custom event "MDCDrawer:opened" denoting the drawer has opened.

                                        method releaseFocus

                                        releaseFocus: () => void;
                                        • Releases focus trap from root element which was set by trapFocus and restores focus to where it was prior to calling trapFocus.

                                        method removeClass

                                        removeClass: (className: string) => void;
                                        • Removes a class from the root Element.

                                        method restoreFocus

                                        restoreFocus: () => void;
                                        • Restores focus to element previously saved with 'saveFocus'.

                                        method saveFocus

                                        saveFocus: () => void;
                                        • Saves the focus of currently active element.

                                        method trapFocus

                                        trapFocus: () => void;
                                        • Traps focus on root element and focuses the active navigation element.

                                        namespace @material/drawer/component

                                        module '@material/drawer/component' {}

                                          class MDCDrawer

                                          class MDCDrawer extends MDCComponent<MDCDismissibleDrawerFoundation> {}
                                          • MDCDrawer:closed {} Emits when the navigation drawer has closed. MDCDrawer:opened {} Emits when the navigation drawer has opened.

                                          property list

                                          readonly list: any;

                                            property open

                                            open: boolean;
                                            • boolean Proxies to the foundation's open/close methods. Also returns true if drawer is in the open position.

                                            method attachTo

                                            static attachTo: (root: Element) => MDCDrawer;

                                              method destroy

                                              destroy: () => void;

                                                method getDefaultFoundation

                                                getDefaultFoundation: () => MDCDismissibleDrawerFoundation;

                                                  method initialize

                                                  initialize: (
                                                  focusTrapFactory?: MDCDrawerFocusTrapFactory,
                                                  listFactory?: any
                                                  ) => void;

                                                    method initialSyncWithDOM

                                                    initialSyncWithDOM: () => void;

                                                      namespace @material/drawer/constants

                                                      module '@material/drawer/constants' {}

                                                        variable cssClasses

                                                        const cssClasses: {
                                                        ANIMATE: string;
                                                        CLOSING: string;
                                                        DISMISSIBLE: string;
                                                        MODAL: string;
                                                        OPEN: string;
                                                        OPENING: string;
                                                        ROOT: string;
                                                        };
                                                        • Copyright 2016 Google Inc.

                                                          Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

                                                          The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

                                                          THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

                                                        variable strings

                                                        const strings: {
                                                        APP_CONTENT_SELECTOR: string;
                                                        CLOSE_EVENT: string;
                                                        OPEN_EVENT: string;
                                                        SCRIM_SELECTOR: string;
                                                        LIST_SELECTOR: string;
                                                        LIST_ITEM_ACTIVATED_SELECTOR: string;
                                                        };

                                                          namespace @material/drawer/dismissible/foundation

                                                          module '@material/drawer/dismissible/foundation' {}

                                                            class MDCDismissibleDrawerFoundation

                                                            class MDCDismissibleDrawerFoundation extends MDCFoundation<MDCDrawerAdapter> {}

                                                              constructor

                                                              constructor(adapter?: Partial<MDCDrawerAdapter>);

                                                                property cssClasses

                                                                static readonly cssClasses: {
                                                                ANIMATE: string;
                                                                CLOSING: string;
                                                                DISMISSIBLE: string;
                                                                MODAL: string;
                                                                OPEN: string;
                                                                OPENING: string;
                                                                ROOT: string;
                                                                };

                                                                  property defaultAdapter

                                                                  static readonly defaultAdapter: MDCDrawerAdapter;

                                                                    property strings

                                                                    static readonly strings: {
                                                                    APP_CONTENT_SELECTOR: string;
                                                                    CLOSE_EVENT: string;
                                                                    OPEN_EVENT: string;
                                                                    SCRIM_SELECTOR: string;
                                                                    LIST_SELECTOR: string;
                                                                    LIST_ITEM_ACTIVATED_SELECTOR: string;
                                                                    };

                                                                      method close

                                                                      close: () => void;
                                                                      • Closes the drawer from the open state.

                                                                      method closed

                                                                      protected closed: () => void;
                                                                      • Extension point for when drawer finishes close animation.

                                                                      method destroy

                                                                      destroy: () => void;

                                                                        method handleKeydown

                                                                        handleKeydown: (evt: KeyboardEvent) => void;
                                                                        • Keydown handler to close drawer when key is escape.

                                                                        method handleTransitionEnd

                                                                        handleTransitionEnd: (evt: TransitionEvent) => void;
                                                                        • Handles the transitionend event when the drawer finishes opening/closing.

                                                                        method isClosing

                                                                        isClosing: () => boolean;
                                                                        • Returns true if the drawer is animating closed. true if drawer is animating closed.

                                                                        method isOpen

                                                                        isOpen: () => boolean;
                                                                        • Returns true if the drawer is in the open position. true if drawer is in open state.

                                                                        method isOpening

                                                                        isOpening: () => boolean;
                                                                        • Returns true if the drawer is animating open. true if drawer is animating open.

                                                                        method open

                                                                        open: () => void;
                                                                        • Opens the drawer from the closed state.

                                                                        method opened

                                                                        protected opened: () => void;
                                                                        • Extension point for when drawer finishes open animation.

                                                                        namespace @material/drawer/modal/foundation

                                                                        module '@material/drawer/modal/foundation' {}

                                                                          class MDCModalDrawerFoundation

                                                                          class MDCModalDrawerFoundation extends MDCDismissibleDrawerFoundation {}

                                                                            method closed

                                                                            protected closed: () => void;
                                                                            • Called when drawer finishes close animation.

                                                                            method handleScrimClick

                                                                            handleScrimClick: () => void;
                                                                            • Handles click event on scrim.

                                                                            method opened

                                                                            protected opened: () => void;
                                                                            • Called when drawer finishes open animation.

                                                                            namespace @material/drawer/util

                                                                            module '@material/drawer/util' {}

                                                                              function createFocusTrapInstance

                                                                              createFocusTrapInstance: (
                                                                              surfaceEl: HTMLElement,
                                                                              focusTrapFactory: MDCDrawerFocusTrapFactory
                                                                              ) => any;

                                                                                type MDCDrawerFocusTrapFactory

                                                                                type MDCDrawerFocusTrapFactory = (
                                                                                element: HTMLElement,
                                                                                options: FocusOptions
                                                                                ) => FocusTrap;

                                                                                  Package Files (1)

                                                                                  Dependencies (12)

                                                                                  Dev Dependencies (0)

                                                                                  No dev dependencies.

                                                                                  Peer Dependencies (0)

                                                                                  No peer dependencies.

                                                                                  Badge

                                                                                  To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                  You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@material/drawer.

                                                                                  • Markdown
                                                                                    [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@material/drawer)
                                                                                  • HTML
                                                                                    <a href="https://www.jsdocs.io/package/@material/drawer"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>