← Back

hydrofoil-paper-shell

Material design shell for quick Hypermedia-driven applications

Author

Rating

Popularity

<100

hydrofoil-paper-shell

Name: hydrofoil-paper-shell
Availability: InStock
Author: hypermedia-app

A reusable material design application shell, implemented as a Polymer element. It composes Polymer's paper elements .

Installation

yarn add @hydrofoil/hydrofoil-paper-shell

To bundle with webpack, dynamic imports must also be enabled by adding @babel/plugin-syntax-dynamic-import.

Usage

The shell element itself is API-agnostic. It produces the app skeleton but does not load resources from the back-end. Please check the instructions of hydrofoil-shell

Extending

Here's a live hydrofoil-paper-shell-based application in action

There are a number of slots, as shown on the screenshots below, which can be used to extend the shell:

drawer-left
header
shell-ready
loader
toolbar-main
drawer-right

generic app

To add multiple toolbar, use code like <app-toolbar slot="drawer-left">. Above this is how the "Select Hydra API" dropdown is added to the page.

The slot shell-ready is only displayed initially, before any resource is loaded from the API.

The slot loader is used inside a full-scree overlay, displayed while executing a server request.

Helper elements

`<hydrofoil-resource-accordion>`

Implementation of HydrofoilMultiResourceView which displays only one element in stack of collapsible panels

`<hydrofoil-resource-tabs>`

Implementation of HydrofoilMultiResourceView which displays only one element inside <paper-tabs> element.

`<loading-overlay>`

Container for the loader slot. Displayed as full-screen overlay when the resource is being loaded.

`<hydrofoil-address-bar>`

Browser-like textbox, which can be used to manully type the resource identifier. Shown in the header slot above.

`<alcaeus-entrypoint-menu>`

Main menu, which displays paper-item element for Hydra entrypoint links

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

@hydrofoil/hydrofoil-shell#^0.1.0
@polymer/app-layout#^3.0.2
@polymer/decorators#^3.0.0
@polymer/iron-a11y-keys#^3.0.1
@polymer/iron-icon#^3.0.1
@polymer/iron-icons#^3.0.1
@polymer/iron-overlay-behavior#^3.0.2
@polymer/iron-pages#^3.0.1
@polymer/paper-icon-button#^3.0.1
@polymer/paper-input#^3.0.1
@polymer/paper-item#^3.0.1
@polymer/paper-listbox#^3.0.1
@polymer/paper-tabs#^3.0.1
@polymer/polymer#^3.1.0
paper-collapse-item#^4.0.5

Released: 2019-04-05
Maturity: IMPORTED
License: MIT License

Compatibility

Framework: Polymer 3.0+
Browser: Browser Independent

hydrofoil-paper-shell - Vaadin Add-on Directory

Material design shell for quick Hypermedia-driven applications

# hydrofoil-paper-shell A reusable [material design][mat] application shell, implemented as a [Polymer][Polymer] element. It composes Polymer's `paper` elements . [Polymer]: https://polymer-library.polymer-project.org [mat]: https://material.io ## Installation ``` yarn add @hydrofoil/hydrofoil-paper-shell ``` To bundle with webpack, dynamic imports must also be enabled by adding `@babel/plugin-syntax-dynamic-import`. ## Usage The shell element itself is API-agnostic. It produces the app skeleton but does not load resources from the back-end. Please check the instructions of [hydrofoil-shell](https://github.com/hypermedia-app/hydrofoil-shell#using-the-element) ### Extending Here's a live `hydrofoil-paper-shell`-based application in action There are a number of slots, as shown on the screenshots below, which can be used to extend the shell: 1. `drawer-left` 1. `header` 1. `shell-ready` 1. `loader` 1. `toolbar-main` 1. `drawer-right` ![generic app](https://github.com/hypermedia-app/hydrofoil-paper-shell/raw/master/assets/paper-shell.png) ![generic app](https://github.com/hypermedia-app/hydrofoil-paper-shell/raw/master/assets/drawer-right.png) To add multiple toolbar, use code like ``. Above this is how the "Select Hydra API" dropdown is added to the page. The slot `shell-ready` is only displayed initially, before any resource is loaded from the API. The slot `loader` is used inside a full-scree overlay, displayed while executing a server request. ## Helper elements ### `` Implementation of [HydrofoilMultiResourceView](https://github.com/hypermedia-app/hydrofoil-shell#hydrofoil-multi-resource-view) which displays only one element in stack of collapsible panels ### `` Implementation of [HydrofoilMultiResourceView](https://github.com/hypermedia-app/hydrofoil-shell#hydrofoil-multi-resource-view) which displays only one element inside `` element. ### `` Container for the `loader` slot. Displayed as full-screen overlay when the resource is being loaded. ### `` Browser-like textbox, which can be used to manully type the resource identifier. Shown in the `header` slot above. ### `` Main menu, which displays `paper-item` element for [Hydra entrypoint links](https://alcaeus.hydra.how/latest/api-documentation/entrypoint.html)

View on GitHub
View on NPM

hydrofoil-paper-shell version 0.1.0
### Dependencies * @hydrofoil/alcaeus-loader#git+https://github.com/hypermedia-app/alcaeus-loader.git * @hydrofoil/hydrofoil-shell#git+https://github.com/hypermedia-app/hydrofoil-shell.git * @polymer/app-layout#^3.0.2 * @polymer/decorators#^3.0.0 * @polymer/iron-a11y-keys#^3.0.1 * @polymer/iron-icon#^3.0.1 * @polymer/iron-icons#^3.0.1 * @polymer/iron-overlay-behavior#^3.0.2 * @polymer/iron-pages#^3.0.1 * @polymer/paper-icon-button#^3.0.1 * @polymer/paper-input#^3.0.1 * @polymer/paper-item#^3.0.1 * @polymer/paper-listbox#^3.0.1 * @polymer/paper-tabs#^3.0.1 * @polymer/polymer#^3.1.0 * paper-collapse-item#^4.0.5

hydrofoil-paper-shell version 0.1.1
### Dependencies * @hydrofoil/hydrofoil-shell#^0.1.0 * @polymer/app-layout#^3.0.2 * @polymer/decorators#^3.0.0 * @polymer/iron-a11y-keys#^3.0.1 * @polymer/iron-icon#^3.0.1 * @polymer/iron-icons#^3.0.1 * @polymer/iron-overlay-behavior#^3.0.2 * @polymer/iron-pages#^3.0.1 * @polymer/paper-icon-button#^3.0.1 * @polymer/paper-input#^3.0.1 * @polymer/paper-item#^3.0.1 * @polymer/paper-listbox#^3.0.1 * @polymer/paper-tabs#^3.0.1 * @polymer/polymer#^3.1.0 * alcaeus#^0.4.6 * paper-collapse-item#^4.0.5

hydrofoil-paper-shell version 0.1.2
### Dependencies * @hydrofoil/hydrofoil-shell#^0.1.0 * @polymer/app-layout#^3.0.2 * @polymer/decorators#^3.0.0 * @polymer/iron-a11y-keys#^3.0.1 * @polymer/iron-icon#^3.0.1 * @polymer/iron-icons#^3.0.1 * @polymer/iron-overlay-behavior#^3.0.2 * @polymer/iron-pages#^3.0.1 * @polymer/paper-icon-button#^3.0.1 * @polymer/paper-input#^3.0.1 * @polymer/paper-item#^3.0.1 * @polymer/paper-listbox#^3.0.1 * @polymer/paper-tabs#^3.0.1 * @polymer/polymer#^3.1.0 * paper-collapse-item#^4.0.5

hydrofoil-paper-shell version 0.1.3
### Dependencies * @hydrofoil/hydrofoil-shell#^0.1.0 * @polymer/app-layout#^3.0.2 * @polymer/decorators#^3.0.0 * @polymer/iron-a11y-keys#^3.0.1 * @polymer/iron-icon#^3.0.1 * @polymer/iron-icons#^3.0.1 * @polymer/iron-overlay-behavior#^3.0.2 * @polymer/iron-pages#^3.0.1 * @polymer/paper-icon-button#^3.0.1 * @polymer/paper-input#^3.0.1 * @polymer/paper-item#^3.0.1 * @polymer/paper-listbox#^3.0.1 * @polymer/paper-tabs#^3.0.1 * @polymer/polymer#^3.1.0 * paper-collapse-item#^4.0.5

Directory