https://github.com/vdegenne/material-shell

https://github.com/vdegenne/material-shell

Last synced: about 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/vdegenne/material-shell
• Owner: vdegenne
• License: mit
• Created: 2023-12-29T17:09:03.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2024-02-28T14:50:48.000Z (10 months ago)
• Last Synced: 2024-04-30T02:02:34.105Z (8 months ago)
• Language: TypeScript
• Size: 283 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# material-shell

[![Published on npm](https://img.shields.io/npm/v/material-shell.svg?logo=npm)](https://www.npmjs.com/package/material-shell)

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-theme` local storage if it exists.

- 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.

[Playground Demo](https://lit.dev/playground/#gist=968e1e293ae512a70beddd516a85885c)

## Usage

### Install

```

npm add -D material-shell

```

### Importing styles and shell element

`index.html`:

```html

	

	

	

```

Notes:

- _Update `src` to 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_

### Slot your app

By default `` element will show a circular progress in the middle of the screen, _even if you slot a content_:

`index.html`:

```html

	

```

When your content is ready you can send an event to instruct the shell to show content:

```js

// 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:

```js

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)_

## License

MIT License