yarn add @hydrofoil/hydrofoil-paper-shell
To bundle with webpack, dynamic imports must also be enabled by adding
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
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:
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.
shell-ready is only displayed initially, before any resource is loaded from the API.
loader is used inside a full-scree overlay, displayed while executing a server request.
Implementation of HydrofoilMultiResourceView which displays only one element in stack of collapsible panels
Implementation of HydrofoilMultiResourceView
which displays only one element inside
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