Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

@hydrofoil/hydrofoil-paper-shell

0.2.0 • Public • Published

hydrofoil-paper-shell

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:

  1. drawer-left
  2. header
  3. shell-ready
  4. loader
  5. toolbar-main
  6. drawer-right

generic app 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

Keywords

none

Install

npm i @hydrofoil/hydrofoil-paper-shell

DownloadsWeekly Downloads

3

Version

0.2.0

License

MIT

Unpacked Size

57.1 kB

Total Files

25

Last publish

Collaborators

  • avatar