Shell element for material app.
Its utility revolves around these principles:
- It should be the first script/element to be fetched to avoid FOUC (in non-SSR environment)
- The element loads default material styles (tokens)
- or load the tokens saved in
material-themelocal storage if it exists.
- or load the tokens saved in
- Your app can be slotted inside the element.
- The element shows a circular progress by default, you can use helper functions to toggle loading/showing content.
npm add -D material-shell
index.html:
<head>
<script src="./node_modules/material-shell/material-styles.js"></script>
<script src="./node_modules/material-shell/material-shell.js"></script>
</head>
<body>
<material-shell></material-shell>
</body>Notes:
- Update
srcto wherever the scripts are located, they should be included during your building process - The scripts are minified for fast loading
- You can load these scripts from a CDN
By default <material-shell> element will show a circular progress in the middle of the screen, even if you slot a content:
index.html:
<material-shell>
<my-material-app-or-whatever></my-material-app-or-whatever>
</material-shell>When your content is ready you can send an event to instruct the shell to show content:
// Somewhere in your app when content is ready
myApp.dispatchEvent(
new Event('material-loading-off', {composed: true, bubbles: true})
);But that's tedious, instead you can use a helper function:
import {materialShellLoadingOff} from 'material-shell';
// Somewhere in your app...
materialShellLoadingOff.call(this);(There is also materialShellLoadingOn in case you want to hide the content again)
MIT License
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent