Logo for jsDocs.io

@material/top-app-bar

  • Version 14.0.0
  • Published
  • 1.13 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

Variables

Classes

Interfaces

Variables

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;
    };

      Classes

      class MDCFixedTopAppBarFoundation

      class MDCFixedTopAppBarFoundation extends MDCTopAppBarFoundation {}

        method handleTargetScroll

        handleTargetScroll: () => void;

        • Scroll handler for applying/removing the modifier class on the fixed top app bar.

        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.

                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?: MDCRippleFactory) => 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.

                                                  method handleWindowResize

                                                  handleWindowResize: () => void;

                                                  • Top app bar resize handler that throttle/debounce functions that execute updates.

                                                  Interfaces

                                                  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.

                                                      Package Files (8)

                                                      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>