@material/top-app-bar

  • Version 11.0.0
  • Published
  • 1.11 MB
  • 9 dependencies
  • MIT license

Install

npm i @material/top-app-bar
yarn add @material/top-app-bar
pnpm add @material/top-app-bar

Overview

The Material Components for the web top app bar component

Index

Namespaces

namespace @material/top-app-bar

module '@material/top-app-bar' {}

    variable cssClasses

    const cssClasses: {
    FIXED_CLASS: string;
    FIXED_SCROLLED_CLASS: string;
    SHORT_CLASS: string;
    SHORT_COLLAPSED_CLASS: string;
    SHORT_HAS_ACTION_ITEM_CLASS: string;
    };
    • Copyright 2018 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 numbers

    const numbers: {
    DEBOUNCE_THROTTLE_RESIZE_TIME_MS: number;
    MAX_TOP_APP_BAR_HEIGHT: number;
    };

      variable strings

      const strings: {
      ACTION_ITEM_SELECTOR: string;
      NAVIGATION_EVENT: string;
      NAVIGATION_ICON_SELECTOR: string;
      ROOT_SELECTOR: string;
      TITLE_SELECTOR: string;
      };

        class MDCFixedTopAppBarFoundation

        class MDCFixedTopAppBarFoundation extends MDCTopAppBarFoundation {}

          method handleTargetScroll

          handleTargetScroll: () => void;
          • Scroll handler for applying/removing the modifier class on the fixed top app bar.

            Modifiers

            • @override

          class MDCShortTopAppBarFoundation

          class MDCShortTopAppBarFoundation extends MDCTopAppBarBaseFoundation {}

            constructor

            constructor(adapter?: Partial<MDCTopAppBarAdapter>);

              property isCollapsed

              readonly isCollapsed: boolean;

                method getAlwaysCollapsed

                getAlwaysCollapsed: () => boolean;

                  method handleTargetScroll

                  handleTargetScroll: () => void;
                  • Scroll handler for applying/removing the collapsed modifier class on the short top app bar.

                    Modifiers

                    • @override

                  method init

                  init: () => void;

                    method setAlwaysCollapsed

                    setAlwaysCollapsed: (value: boolean) => void;
                    • Set if the short top app bar should always be collapsed.

                      Parameter value

                      When true, bar will always be collapsed. When false, bar may collapse or expand based on scroll.

                    class MDCTopAppBar

                    class MDCTopAppBar extends MDCComponent<MDCTopAppBarBaseFoundation> {}

                      method attachTo

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

                        method destroy

                        destroy: () => void;

                          method getDefaultFoundation

                          getDefaultFoundation: () => MDCTopAppBarBaseFoundation;

                            method initialize

                            initialize: (rippleFactory?: any) => void;

                              method initialSyncWithDOM

                              initialSyncWithDOM: () => void;

                                method setScrollTarget

                                setScrollTarget: (target: EventTarget) => void;

                                  class MDCTopAppBarBaseFoundation

                                  class MDCTopAppBarBaseFoundation extends MDCFoundation<MDCTopAppBarAdapter> {}

                                    constructor

                                    constructor(adapter?: Partial<MDCTopAppBarAdapter>);

                                      property cssClasses

                                      static readonly cssClasses: {
                                      FIXED_CLASS: string;
                                      FIXED_SCROLLED_CLASS: string;
                                      SHORT_CLASS: string;
                                      SHORT_COLLAPSED_CLASS: string;
                                      SHORT_HAS_ACTION_ITEM_CLASS: string;
                                      };

                                        property defaultAdapter

                                        static readonly defaultAdapter: MDCTopAppBarAdapter;

                                        property numbers

                                        static readonly numbers: {
                                        DEBOUNCE_THROTTLE_RESIZE_TIME_MS: number;
                                        MAX_TOP_APP_BAR_HEIGHT: number;
                                        };

                                          property strings

                                          static readonly strings: {
                                          ACTION_ITEM_SELECTOR: string;
                                          NAVIGATION_EVENT: string;
                                          NAVIGATION_ICON_SELECTOR: string;
                                          ROOT_SELECTOR: string;
                                          TITLE_SELECTOR: string;
                                          };

                                            method handleNavigationClick

                                            handleNavigationClick: () => void;

                                              method handleTargetScroll

                                              handleTargetScroll: () => void;
                                              • Other variants of TopAppBar foundation overrides this method

                                              method handleWindowResize

                                              handleWindowResize: () => void;
                                              • Other variants of TopAppBar foundation overrides this method

                                              class MDCTopAppBarFoundation

                                              class MDCTopAppBarFoundation extends MDCTopAppBarBaseFoundation {}

                                                constructor

                                                constructor(adapter?: Partial<MDCTopAppBarAdapter>);

                                                  method destroy

                                                  destroy: () => void;

                                                    method handleTargetScroll

                                                    handleTargetScroll: () => void;
                                                    • Scroll handler for the default scroll behavior of the top app bar.

                                                      Modifiers

                                                      • @override

                                                    method handleWindowResize

                                                    handleWindowResize: () => void;
                                                    • Top app bar resize handler that throttle/debounce functions that execute updates.

                                                      Modifiers

                                                      • @override

                                                    interface MDCTopAppBarAdapter

                                                    interface MDCTopAppBarAdapter {}
                                                    • 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 getTopAppBarHeight

                                                    getTopAppBarHeight: () => number;
                                                    • Gets the height of the top app bar.

                                                    method getTotalActionItems

                                                    getTotalActionItems: () => number;

                                                      method getViewportScrollY

                                                      getViewportScrollY: () => number;

                                                        method hasClass

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

                                                        method notifyNavigationIconClicked

                                                        notifyNavigationIconClicked: () => void;
                                                        • Emits an event when the navigation icon is clicked.

                                                        method removeClass

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

                                                        method setStyle

                                                        setStyle: (property: string, value: string) => void;
                                                        • Sets the specified inline style property on the root Element to the given value.

                                                        namespace @material/top-app-bar/adapter

                                                        module '@material/top-app-bar/adapter' {}

                                                          interface MDCTopAppBarAdapter

                                                          interface MDCTopAppBarAdapter {}
                                                          • 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 getTopAppBarHeight

                                                          getTopAppBarHeight: () => number;
                                                          • Gets the height of the top app bar.

                                                          method getTotalActionItems

                                                          getTotalActionItems: () => number;

                                                            method getViewportScrollY

                                                            getViewportScrollY: () => number;

                                                              method hasClass

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

                                                              method notifyNavigationIconClicked

                                                              notifyNavigationIconClicked: () => void;
                                                              • Emits an event when the navigation icon is clicked.

                                                              method removeClass

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

                                                              method setStyle

                                                              setStyle: (property: string, value: string) => void;
                                                              • Sets the specified inline style property on the root Element to the given value.

                                                              namespace @material/top-app-bar/component

                                                              module '@material/top-app-bar/component' {}

                                                                class MDCTopAppBar

                                                                class MDCTopAppBar extends MDCComponent<MDCTopAppBarBaseFoundation> {}

                                                                  method attachTo

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

                                                                    method destroy

                                                                    destroy: () => void;

                                                                      method getDefaultFoundation

                                                                      getDefaultFoundation: () => MDCTopAppBarBaseFoundation;

                                                                        method initialize

                                                                        initialize: (rippleFactory?: any) => void;

                                                                          method initialSyncWithDOM

                                                                          initialSyncWithDOM: () => void;

                                                                            method setScrollTarget

                                                                            setScrollTarget: (target: EventTarget) => void;

                                                                              namespace @material/top-app-bar/constants

                                                                              module '@material/top-app-bar/constants' {}

                                                                                variable cssClasses

                                                                                const cssClasses: {
                                                                                FIXED_CLASS: string;
                                                                                FIXED_SCROLLED_CLASS: string;
                                                                                SHORT_CLASS: string;
                                                                                SHORT_COLLAPSED_CLASS: string;
                                                                                SHORT_HAS_ACTION_ITEM_CLASS: string;
                                                                                };
                                                                                • Copyright 2018 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 numbers

                                                                                const numbers: {
                                                                                DEBOUNCE_THROTTLE_RESIZE_TIME_MS: number;
                                                                                MAX_TOP_APP_BAR_HEIGHT: number;
                                                                                };

                                                                                  variable strings

                                                                                  const strings: {
                                                                                  ACTION_ITEM_SELECTOR: string;
                                                                                  NAVIGATION_EVENT: string;
                                                                                  NAVIGATION_ICON_SELECTOR: string;
                                                                                  ROOT_SELECTOR: string;
                                                                                  TITLE_SELECTOR: string;
                                                                                  };

                                                                                    namespace @material/top-app-bar/fixed/foundation

                                                                                    module '@material/top-app-bar/fixed/foundation' {}

                                                                                      class MDCFixedTopAppBarFoundation

                                                                                      class MDCFixedTopAppBarFoundation extends MDCTopAppBarFoundation {}

                                                                                        method handleTargetScroll

                                                                                        handleTargetScroll: () => void;
                                                                                        • Scroll handler for applying/removing the modifier class on the fixed top app bar.

                                                                                          Modifiers

                                                                                          • @override

                                                                                        namespace @material/top-app-bar/foundation

                                                                                        module '@material/top-app-bar/foundation' {}

                                                                                          class MDCTopAppBarBaseFoundation

                                                                                          class MDCTopAppBarBaseFoundation extends MDCFoundation<MDCTopAppBarAdapter> {}

                                                                                            constructor

                                                                                            constructor(adapter?: Partial<MDCTopAppBarAdapter>);

                                                                                              property cssClasses

                                                                                              static readonly cssClasses: {
                                                                                              FIXED_CLASS: string;
                                                                                              FIXED_SCROLLED_CLASS: string;
                                                                                              SHORT_CLASS: string;
                                                                                              SHORT_COLLAPSED_CLASS: string;
                                                                                              SHORT_HAS_ACTION_ITEM_CLASS: string;
                                                                                              };

                                                                                                property defaultAdapter

                                                                                                static readonly defaultAdapter: MDCTopAppBarAdapter;

                                                                                                property numbers

                                                                                                static readonly numbers: {
                                                                                                DEBOUNCE_THROTTLE_RESIZE_TIME_MS: number;
                                                                                                MAX_TOP_APP_BAR_HEIGHT: number;
                                                                                                };

                                                                                                  property strings

                                                                                                  static readonly strings: {
                                                                                                  ACTION_ITEM_SELECTOR: string;
                                                                                                  NAVIGATION_EVENT: string;
                                                                                                  NAVIGATION_ICON_SELECTOR: string;
                                                                                                  ROOT_SELECTOR: string;
                                                                                                  TITLE_SELECTOR: string;
                                                                                                  };

                                                                                                    method handleNavigationClick

                                                                                                    handleNavigationClick: () => void;

                                                                                                      method handleTargetScroll

                                                                                                      handleTargetScroll: () => void;
                                                                                                      • Other variants of TopAppBar foundation overrides this method

                                                                                                      method handleWindowResize

                                                                                                      handleWindowResize: () => void;
                                                                                                      • Other variants of TopAppBar foundation overrides this method

                                                                                                      namespace @material/top-app-bar/short/foundation

                                                                                                      module '@material/top-app-bar/short/foundation' {}

                                                                                                        class MDCShortTopAppBarFoundation

                                                                                                        class MDCShortTopAppBarFoundation extends MDCTopAppBarBaseFoundation {}

                                                                                                          constructor

                                                                                                          constructor(adapter?: Partial<MDCTopAppBarAdapter>);

                                                                                                            property isCollapsed

                                                                                                            readonly isCollapsed: boolean;

                                                                                                              method getAlwaysCollapsed

                                                                                                              getAlwaysCollapsed: () => boolean;

                                                                                                                method handleTargetScroll

                                                                                                                handleTargetScroll: () => void;
                                                                                                                • Scroll handler for applying/removing the collapsed modifier class on the short top app bar.

                                                                                                                  Modifiers

                                                                                                                  • @override

                                                                                                                method init

                                                                                                                init: () => void;

                                                                                                                  method setAlwaysCollapsed

                                                                                                                  setAlwaysCollapsed: (value: boolean) => void;
                                                                                                                  • Set if the short top app bar should always be collapsed.

                                                                                                                    Parameter value

                                                                                                                    When true, bar will always be collapsed. When false, bar may collapse or expand based on scroll.

                                                                                                                  namespace @material/top-app-bar/standard/foundation

                                                                                                                  module '@material/top-app-bar/standard/foundation' {}

                                                                                                                    class MDCTopAppBarFoundation

                                                                                                                    class MDCTopAppBarFoundation extends MDCTopAppBarBaseFoundation {}

                                                                                                                      constructor

                                                                                                                      constructor(adapter?: Partial<MDCTopAppBarAdapter>);

                                                                                                                        method destroy

                                                                                                                        destroy: () => void;

                                                                                                                          method handleTargetScroll

                                                                                                                          handleTargetScroll: () => void;
                                                                                                                          • Scroll handler for the default scroll behavior of the top app bar.

                                                                                                                            Modifiers

                                                                                                                            • @override

                                                                                                                          method handleWindowResize

                                                                                                                          handleWindowResize: () => void;
                                                                                                                          • Top app bar resize handler that throttle/debounce functions that execute updates.

                                                                                                                            Modifiers

                                                                                                                            • @override

                                                                                                                          Package Files (1)

                                                                                                                          Dependencies (9)

                                                                                                                          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/top-app-bar.

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