@blox/material
Version:
Material Components for Angular
154 lines (153 loc) • 6.51 kB
TypeScript
import { AfterContentInit, ElementRef, NgZone, OnDestroy, Renderer2 } from '@angular/core';
/**
* A directive for a top-app-bar row. The content of a top-app-bar should always be embedded
* in <code>mdcTopAppBarRow</code> rows. Multiple rows are allowed, which rows are visible
* depends on the style of the toolbar, and the scroll position of the content of
* the page.
*/
export declare class MdcTopAppBarRowDirective {
_elm: ElementRef;
constructor(_elm: ElementRef);
}
/**
* A directive for a top-app-bar section. A top-app-bar row should always be composed of
* <code>mdcTopAppBarSection</code> sections. Multiple sections, with different alignment options,
* are allowed per row.
*/
export declare class MdcTopAppBarSectionDirective {
private _alignEnd;
private _alignStart;
/**
* Make the section align to the start of the toolbar row (default alignment is to the
* center).
*/
get alignStart(): boolean;
set alignStart(val: boolean);
static ngAcceptInputType_alignStart: boolean | '';
/**
* Make the section align to the end of the toolbar row (default alignment is to the
* center).
*/
get alignEnd(): boolean;
set alignEnd(val: boolean);
static ngAcceptInputType_alignEnd: boolean | '';
}
/**
* This directive adds extra styling to toolbar text that represents the title of the toolbar.
* The directive should be a child of an element with the <code>mdcTopAppBarSection</code> directive.
*/
export declare class MdcTopAppBarTitleDirective {
_elm: ElementRef;
constructor(_elm: ElementRef);
}
/**
* Directive for the navigation icon of a top-app-bar. Typically placed on the
* far left (for left-to-right languages). The <code>mdcTopAppBarNavIcon</code>
* directive should be used on a child of an element with the
* <code>mdcTopAppBarSection</code> directive. It typically opens a navigation menu
* or drawer.
*/
export declare class MdcTopAppBarNavIconDirective {
_elm: ElementRef;
constructor(_elm: ElementRef);
}
/**
* Directive for action items of a top-app-bar. Typically placed on the side
* opposite the navigation item. The <code>mdcTopAppBarAction</code> directive
* should be used on a child of an element with the <code>mdcTopAppBarSection</code>
* directive.
*/
export declare class MdcTopAppBarActionDirective {
_elm: ElementRef;
/**
* A label for the action item. The value will be applied to both the
* <code>aria-label</code>, and <code>alt</code> attribute of the item.
*/
label: string | null;
constructor(_elm: ElementRef);
}
/**
* A directive for a top-app-bar. All content inside a top-app-bar should be
* embedded inside <code>mdcTopAppBarRow</code> rows.
*/
export declare class MdcTopAppBarDirective implements AfterContentInit, OnDestroy {
private _rndr;
private _elm;
private zone;
private document;
private handleScroll;
private handleResize;
private updateViewport;
private _viewport;
private _fixedAdjust;
private _type;
private _prominent;
private _dense;
private _collapsedOverride;
private _collapsedState;
private mdcAdapter;
private foundation;
constructor(_rndr: Renderer2, _elm: ElementRef, zone: NgZone, doc: any);
ngAfterContentInit(): void;
ngOnDestroy(): void;
private foundationReInit;
private initFixedAdjust;
private removeScrollListeners;
/**
* The top-app-bar can have different styles. Set this property to <code>fixed</code>
* for a top-app-bar fixed to the top of the screen or viewport.
* Set to <code>short</code> for a top-app-bar that will collapse to the navigation
* icon side when scrolled.
* Otherwise, the default is a top-app-bar that scrolls with the content.
*/
get mdcTopAppBar(): "short" | "fixed" | "default";
set mdcTopAppBar(val: "short" | "fixed" | "default");
static ngAcceptInputType_mdcTopAppBar: 'short' | 'fixed' | 'default' | '';
/**
* If set to a value other than false, the top-app-bar will be styled as a taller
* bar.
*/
get prominent(): boolean;
set prominent(val: boolean);
static ngAcceptInputType_prominent: boolean | '';
/**
* If set to a value other than false, the top-app-bar will be styled a bit more
* compact.
*/
get dense(): boolean;
set dense(val: boolean);
static ngAcceptInputType_dense: boolean | '';
/**
* Set this property to true or false to force the collapsed/uncollapsed state of a short
* top-app-bar. Set this property to null to return to the default handling, where
* <code>collapsed</code> is based on the scroll position of the viewport.
* This property has no effect if the <code>mdcTopAppBar</code> has a value other than
* <code>short</code>.
*/
get collapsed(): boolean;
set collapsed(val: boolean);
static ngAcceptInputType_collapsed: boolean | '';
/**
* Top-app-bars are positioned over the rest of their viewport. This means that
* some of the content will be hidden under the bar, unless the position of that
* content is changed relative to the bar. Assign the <code>HTMLElement</code>
* of the content to this property, so that the <code>mdcTopAppBar</code>
* can add spacing to the content making the top visible when the content is scrolled
* up.
*/
get fixedAdjust(): HTMLElement | null;
set fixedAdjust(el: HTMLElement | null);
/**
* Assign any <code>HTMLElement</code> to this property to place a top-app-bar fixed to that element
* (usually the parent container), instead of to the browser window. This property is mainly added for creating nice
* demos of toolbars embedded inside other pages (such as on this documentation page). It is not recommended to use
* this for a real application toolbar. The position is kept fixed to the container element by listening
* for scroll/resize events, and using javascript to recompute the position. This may influence the smoothness
* of the scrolling experience, especially on mobile devices.
* The viewport element must have css styling: <code>position: relative</code>, and should have a fixed
* height.
*/
get viewport(): HTMLElement | null;
set viewport(elm: HTMLElement | null);
}
export declare const TOP_APP_BAR_DIRECTIVES: (typeof MdcTopAppBarRowDirective | typeof MdcTopAppBarSectionDirective | typeof MdcTopAppBarDirective)[];