com.vaadin.polymer.app.AppDrawerLayoutElement Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of vaadin-gwt-polymer-elements Show documentation
vaadin-gwt-polymer-elements
The newest version!
/*
 * This code was generated with Vaadin Web Component GWT API Generator, 
 * from app-layout project by The Polymer Authors
 * that is licensed with https://polymer.github.io/LICENSE.txt license.
 */
package com.vaadin.polymer.app;

import com.vaadin.polymer.elemental.*;
import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.core.client.JsArray;
import jsinterop.annotations.JsOverlay;
import jsinterop.annotations.JsProperty;
import jsinterop.annotations.JsType;

/**
 * app-drawer-layout is a wrapper element that positions an app-drawer and other content. When
the viewport width is smaller than responsiveWidth, this element changes to narrow layout.
In narrow layout, the drawer will be stacked on top of the main content. The drawer will slide
in/out to hide/reveal the main content.
 * By default the drawer is aligned to the start, which is left in LTR layouts:
 * <app-drawer-layout>
 *   <app-drawer>
 *     drawer content
 *   </app-drawer>
 *   <div>
 *     main content
 *   </div>
 * </app-drawer-layout>
 * 
 * Align the drawer at the end:
 * <app-drawer-layout>
 *   <app-drawer align="end">
 *      drawer content
 *   </app-drawer>
 *   <div>
 *     main content
 *   </div>
 * </app-drawer-layout>
 * 
 * With an app-header-layout:
 * <app-drawer-layout>
 *   <app-drawer>
 *     drawer-content
 *   </app-drawer>
 *   <app-header-layout>
 *     <app-header>
 *       <app-toolbar>
 *         <div main-title>App name</div>
 *       </app-toolbar>
 *     </app-header>
 * 
 *     main content
 * 
 *   </app-header-layout>
 * </app-drawer-layout>
 * 
 * Add the drawer-toggle attribute to elements inside app-drawer-layout that toggle the drawer on tap events:
 * <app-drawer-layout>
 *   <app-drawer>
 *     drawer-content
 *   </app-drawer>
 *   <app-header-layout>
 *     <app-header>
 *       <app-toolbar>
 *         <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
 *         <div main-title>App name</div>
 *       </app-toolbar>
 *     </app-header>
 * 
 *     main content
 * 
 *   </app-header-layout>
 * </app-drawer-layout>
 * 
 * Add the fullbleed attribute to app-drawer-layout to make it fit the size of its container:
 * <app-drawer-layout fullbleed>
 *   <app-drawer>
 *      drawer content
 *   </app-drawer>
 *   <div>
 *     main content
 *   </div>
 * </app-drawer-layout>
 * 
 * Styling
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * Custom property Description Default
--app-drawer-layout-content-transition Transition for the content container none
 */
@JsType(isNative=true)
public interface AppDrawerLayoutElement extends HTMLElement {

    @JsOverlay public static final String TAG = "app-drawer-layout";
    @JsOverlay public static final String SRC = "app-layout/app-layout.html";


    /**
     * Returns true if it is in narrow layout. This is useful if you need to show/hide
elements based on the layout.
     *
     * JavaScript Info:
     * @property narrow
     * @type Boolean
     * 
     */
    @JsProperty boolean getNarrow();
    /**
     * Returns true if it is in narrow layout. This is useful if you need to show/hide
elements based on the layout.
     *
     * JavaScript Info:
     * @property narrow
     * @type Boolean
     * 
     */
    @JsProperty void setNarrow(boolean value);

    /**
     * If true, the drawer will initially be opened when in narrow layout mode.
     *
     * JavaScript Info:
     * @property openedWhenNarrow
     * @type Boolean
     * 
     */
    @JsProperty boolean getOpenedWhenNarrow();
    /**
     * If true, the drawer will initially be opened when in narrow layout mode.
     *
     * JavaScript Info:
     * @property openedWhenNarrow
     * @type Boolean
     * 
     */
    @JsProperty void setOpenedWhenNarrow(boolean value);

    /**
     * If true, ignore responsiveWidth setting and force the narrow layout.
     *
     * JavaScript Info:
     * @property forceNarrow
     * @type Boolean
     * 
     */
    @JsProperty boolean getForceNarrow();
    /**
     * If true, ignore responsiveWidth setting and force the narrow layout.
     *
     * JavaScript Info:
     * @property forceNarrow
     * @type Boolean
     * 
     */
    @JsProperty void setForceNarrow(boolean value);

    /**
     * If the viewport’s width is smaller than this value, the panel will change to narrow
layout. In the mode the drawer will be closed.
     *
     * JavaScript Info:
     * @property responsiveWidth
     * @type String
     * 
     */
    @JsProperty String getResponsiveWidth();
    /**
     * If the viewport’s width is smaller than this value, the panel will change to narrow
layout. In the mode the drawer will be closed.
     *
     * JavaScript Info:
     * @property responsiveWidth
     * @type String
     * 
     */
    @JsProperty void setResponsiveWidth(String value);


    /**
     * Used to assign the closest resizable ancestor to this resizable
if the ancestor detects a request for notifications.
     *
     * JavaScript Info:
     * @method assignParentResizable
     * @param {} parentResizable  
     * @behavior VaadinSplitLayout
     * 
     */
    void assignParentResizable(Object parentResizable);

    /**
     * Used to remove a resizable descendant from the list of descendants
that should be notified of a resize change.
     *
     * JavaScript Info:
     * @method stopResizeNotificationsFor
     * @param {} target  
     * @behavior VaadinSplitLayout
     * 
     */
    void stopResizeNotificationsFor(Object target);

    /**
     * 
     *
     * JavaScript Info:
     * @method resetLayout
     * 
     * 
     */
    void resetLayout();

    /**
     * Can be called to manually notify a resizable and its descendant
resizables of a resize change.
     *
     * JavaScript Info:
     * @method notifyResize
     * @behavior VaadinSplitLayout
     * 
     */
    void notifyResize();

    /**
     * This method can be overridden to filter nested elements that should or
should not be notified by the current element. Return true if an element
should be notified, or false if it should not be notified.
     *
     * JavaScript Info:
     * @method resizerShouldNotify
     * @param {HTMLElement} element  
     * @behavior VaadinSplitLayout
     * @return {boolean}
     */
    boolean resizerShouldNotify(JavaScriptObject element);

}