Directory

← Back

hierarchical-view

Polymer-based web component for nested views

Author

Contributors

Rating

[ This description is mirrored from README.md at github.com/BrightspaceUI/hierarchical-view on 2019-05-10 ]

d2l-hierarchical-view

Published on webcomponents.org Bower version Build status

A Polymer-based web component and behavior for hierarchical views.

Installation

d2l-hierarchical-view can be installed from Bower:

bower install d2l-hierarchical-view

Usage

Include the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), then import the component or behavior.

Component

HTML

<head>
  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="../d2l-hierarchical-view/d2l-hierarchical-view.html">
</head>

Nest the d2l-hierarchical-view elements on your page.

<d2l-hierarchical-view id="view1">
  <div style="min-height: 200px;">
    <div class="buttons">
      <button onclick="showSubView('view2a');">view 2a</button>
      <button onclick="showSubView('view2b');">view 2b</button>
    </div>
    view 1
    <div class="info">min-height: 200</div>
    <div>
      <d2l-hierarchical-view id="view2a">
        <div style="min-height: 400px;">
          <div class="buttons">
            <button onclick="showParentView('view2a');">view 1 (parent)</button>
            <button onclick="showSubView('view3');">view 3</button>
          </div>
          view 2a
          <div class="info">min-height: 400</div>
          <d2l-hierarchical-view id="view3">
            <div style="min-height: 300px;">
              <div class="buttons">
                <button onclick="showParentView('view3');">view 2a (parent)</button>
              </div>
              view 3
              <div class="info">min-height: 300</div>
            </div>
          </d2l-hierarchical-view>
        </div>
      </d2l-hierarchical-view>
      <d2l-hierarchical-view id="view2b">
        <div style="min-height: 200px;">
          <div class="buttons">
            <button onclick="showParentView('view2b');">view 1 (parent)</button>
          </div>
          view 2b
          <div class="info">min-height: 200</div>
        </div>
      </d2l-hierarchical-view>
    </div>
  </div>
</d2l-hierarchical-view>

Methods

Use the show and hide methods on child views to control visibility:

// to show child (hiding parent)
child.show();

// to hide child (show parent)
child.hide();

Other helpful methods:

// get the currently active hierarchical view
view.getActiveView();

// get the root hierarchical view
view.getRootView();

// whether the specified hierarchical view is the active view
view.isActive();

// force resize of the hierarchical view (useful if initially not displayed when attached)
view.resize();

Events

The hierarchical views raise show/hide events when showing or hiding child views.

// triggered when child view will be shown (before animation begins)
view.addEventListener('d2l-hierarchical-view-show-start', () => { ... });

// triggered when child view is shown (when animation ends)
view.addEventListener('d2l-hierarchical-view-show-complete', () => { ... });

// triggered when child view will be hidden (before animation begins)
view.addEventListener('d2l-hierarchical-view-hide-start', () => { ... });

// triggered when child view is hidden (when animation ends)
view.addEventListener('d2l-hierarchical-view-hide-complete', () => { ... });

Behavior

To implement a custom hierarchical view component, import the d2l-hierarchical-view-behavior.html behavior, include the d2l-hierarchical-view-styles styles, and define a template containing the d2l-hierarchical-view-content class. For example, see d2l-hierarchical-view.

Developing, Testing and Contributing

After cloning the repo, run npm install to install dependencies.

If you don't have it already, install the Polymer CLI globally:

npm install -g polymer-cli

To start a local web server that hosts the demo page and tests:

polymer serve

To lint (eslint and Polymer lint):

npm run lint

To run unit tests locally using Polymer test:

polymer test --skip-plugin sauce

To lint AND run local unit tests:

npm test

Versioning

Commits and PR merges to master will automatically do a minor version bump which will:

  • Update the version in package.json
  • Add a tag matching the new version
  • Create a github release matching the new version

By using either [increment major] or [increment patch] notation inside your merge message, you can overwrite the default version upgrade of minor to the position of your choice.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

Released
2019-01-23
Maturity
IMPORTED
License
Apache License 2.0

Compatibility

Framework
Polymer 2.0+
Polymer 1.0+ in 0.1.4
Browser
Browser Independent

hierarchical-view - Vaadin Add-on Directory

Polymer-based web component for nested views hierarchical-view - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/BrightspaceUI/hierarchical-view](https://github.com//BrightspaceUI/hierarchical-view/blob/v2.4.0/README.md) on 2019-05-10 ]** # d2l-hierarchical-view [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/BrightspaceUI/hierarchical-view) [![Bower version][bower-image]][bower-url] [![Build status][ci-image]][ci-url] A [Polymer](https://www.polymer-project.org/1.0/)-based web component and behavior for hierarchical views. ## Installation `d2l-hierarchical-view` can be installed from [Bower][bower-url]: ```shell bower install d2l-hierarchical-view ``` ## Usage Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), then import the component or behavior. ### Component #### HTML ```html ``` Nest the `d2l-hierarchical-view` elements on your page. ```html
view 1
min-height: 200
view 2a
min-height: 400
view 3
min-height: 300
view 2b
min-height: 200
``` #### Methods Use the `show` and `hide` methods on child views to control visibility: ```javascript // to show child (hiding parent) child.show(); // to hide child (show parent) child.hide(); ``` Other helpful methods: ```javascript // get the currently active hierarchical view view.getActiveView(); // get the root hierarchical view view.getRootView(); // whether the specified hierarchical view is the active view view.isActive(); // force resize of the hierarchical view (useful if initially not displayed when attached) view.resize(); ``` #### Events The hierarchical views raise show/hide events when showing or hiding child views. ```javascript // triggered when child view will be shown (before animation begins) view.addEventListener('d2l-hierarchical-view-show-start', () => { ... }); // triggered when child view is shown (when animation ends) view.addEventListener('d2l-hierarchical-view-show-complete', () => { ... }); // triggered when child view will be hidden (before animation begins) view.addEventListener('d2l-hierarchical-view-hide-start', () => { ... }); // triggered when child view is hidden (when animation ends) view.addEventListener('d2l-hierarchical-view-hide-complete', () => { ... }); ``` ### Behavior To implement a custom hierarchical view component, import the `d2l-hierarchical-view-behavior.html` behavior, include the `d2l-hierarchical-view-styles` styles, and define a template containing the `d2l-hierarchical-view-content` class. For example, see [d2l-hierarchical-view](https://github.com/Brightspace/d2l-hierarchical-view-ui/blob/master/d2l-hierarchical-view.html). ## Developing, Testing and Contributing After cloning the repo, run `npm install` to install dependencies. If you don't have it already, install the [Polymer CLI](https://www.polymer-project.org/2.0/docs/tools/polymer-cli) globally: ```shell npm install -g polymer-cli ``` To start a [local web server](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#serve) that hosts the demo page and tests: ```shell polymer serve ``` To lint ([eslint](http://eslint.org/) and [Polymer lint](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#lint)): ```shell npm run lint ``` To run unit tests locally using [Polymer test](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#tests): ```shell polymer test --skip-plugin sauce ``` To lint AND run local unit tests: ```shell npm test ``` [bower-url]: http://bower.io/search/?q=d2l-hierarchical-view [bower-image]: https://badge.fury.io/bo/d2l-hierarchical-view.svg [ci-url]: https://travis-ci.org/BrightspaceUI/hierarchical-view [ci-image]: https://travis-ci.org/BrightspaceUI/hierarchical-view.svg?branch=master ## Versioning Commits and PR merges to master will automatically do a minor version bump which will: * Update the version in `package.json` * Add a tag matching the new version * Create a github release matching the new version By using either **[increment major]** or **[increment patch]** notation inside your merge message, you can overwrite the default version upgrade of minor to the position of your choice.
Online