@rdkmaster/jigsaw-labs/component/drawer/drawer.d.ts

Jigsaw, the next generation component set for RDK

import { EventEmitter, OnInit, ElementRef } from "@angular/core";
import { AbstractJigsawComponent } from "../common";
/**
 * 本组件模拟了一个类似抽屉的效果，用于收纳UI上重要性不高的视图。
 *
 * $since = v1.1.7
 */
export declare class JigsawDrawer extends AbstractJigsawComponent implements OnInit {
    private _elementRef;
    constructor(_elementRef: ElementRef);
    private _position;
    /**
     * 用于设置抽屉的位置，支持上下左右4个方向。
     *
     * $demo = drawer/basic
     */
    position: "left" | "right" | "top" | "bottom";
    private _open;
    /**
     * 代表了抽屉的状态，`true`为打开状态，`false`为关闭状态。在双绑模式下，改变此属性的值可以打开或者关闭抽屉。
     *
     * $demo = drawer/basic
     */
    open: boolean;
    /**
     * 当抽屉的状态发生变化时，Jigsaw发出此事件
     *
     * $demo = drawer/basic
     *
     * @type {EventEmitter<boolean>}
     */
    openChange: EventEmitter<boolean>;
    /**
     * 容器的selector，支持'.className'、'#id'、'[attr]'、'tagName'
     * 向上寻找离抽屉最近的匹配节点作为抽屉的容器
     *
     * $demo = drawer/with-div
     * $demo = drawer/with-scrollbar
     * $demo = drawer/with-tab
     */
    container: string;
    private _offsetTop;
    private _offsetLeft;
    private _offsetRight;
    private _offsetBottom;
    /**
     * $demo = drawer/with-div
     */
    offsetTop: string;
    /**
     * $demo = drawer/with-div
     */
    offsetLeft: string;
    /**
     * $demo = drawer/with-div
     */
    offsetRight: string;
    /**
     * $demo = drawer/with-div
     */
    offsetBottom: string;
    /**
     * $demo = drawer/with-div
     */
    width: string;
    /**
     * $demo = drawer/with-div
     */
    height: string;
    /**
     * $demo = drawer/in-dom
     */
    floating: boolean;
    private _drawerEl;
    private _$hostWidth;
    private _$hostHeight;
    private _setHostSize();
    /**
     * host(jigsaw-drawer)宽高的计算方法：
     * 浮动模式下：不做任何处理。
     * 文档流模式下：
     * host是inline-block的模式，所以width和height属性没值时，默认按内容计算尺寸；
     * 有值时则为width和height的属性值
     */
    private _calcHostWidth();
    private _calcHostHeight();
    /**
     * @internal
     */
    _$handleStyle: {};
    private _setStyle();
    /**
     * 抽屉(div.jigsaw-drawer)宽高的计算方法：
     *
     * 在浮动模式下：
     * 有width和height属性值时，按照width和height的值；
     * 否则position为top或bottom时，宽度为100%，跟随容器的宽度，高度为auto，按内容撑开；
     * position为left或right时，宽度为auto，按内容撑开，高度为100%，跟随容器的宽度；
     *
     * 在文档流模式下：
     * 当有width和height属性值时，因为width和height是设置在host上的，所以采用计算值calc(100% - 14px)
     * 当没有width和height属性值时，则宽高设置为auto，按照内容撑开
     */
    private _calcWidth();
    private _calcDrawerWidth();
    private _calcHeight();
    private _calcDrawerHeight();
    /**
     * @internal
     */
    _$handleClass: {};
    /**
     * @internal
     */
    _$onAnimation: boolean;
    private _setClass();
    _$toggleOpen(e: any): void;
    private _setContainer();
    private _update();
    ngOnInit(): void;
}
export declare class JigsawDrawerModule {
}