mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

Remove custom elements bundle

pull/100/head
Cory LaViska 2020-07-15 16:58:16 -04:00
rodzic 44e4d34c3a
commit f5e573647d
2 zmienionych plików z 7 dodań i 38 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

42
docs/getting-started/installation.md
Wyświetl plik

@ -1,39 +1,23 @@
# Installation
There are two ways to install Shoelace. Most users will prefer the simplicity of the lazy loader, but there are advanced options as well.
You can use Shoelace via CDN or by installing it locally.
## Lazy Loader (Recommended)
## CDN Installation (Recommended)
The easiest way to install Shoelace is with the lazy loader via CDN. A lightweight loader will be added to your page that registers components asynchronously as you use them. It's like magic. ✨
The easiest way to install Shoelace is with the CDN. A lightweight loader will be added to your page that registers components asynchronously as you use them. It's like magic. ✨
To install the lazy loader, add the following tags to your page.
Just add the following tags to your page.
```html
<link rel="stylesheet" href="https://unpkg.com/@shoelace-style/shoelace@%VERSION%/dist/shoelace/shoelace.css">
<script type="module" src="https://unpkg.com/@shoelace-style/shoelace@%VERSION%/dist/shoelace/shoelace.esm.js"></script>
```
Now you can [start using components!](/getting-started/usage.md)
## Custom Elements Bundle
Another way to consume the library is with the custom elements bundle. Compared to lazy loading, the initial load time will be slower, but all components will be available up front. This will prevent occasional display lags that can occur when using the lazy loader.
To install the custom elements bundle, add the following tags to your page.
```html
<link rel="stylesheet" href="https://unpkg.com/@shoelace-style/shoelace@%VERSION%/dist/shoelace/shoelace.css">
<script type="module">
import { defineCustomElements } from 'https://unpkg.com/@shoelace-style/shoelace@%VERSION%/dist/custom-elements/index.mjs';
defineCustomElements();
</script>
```
Now you can [start using components!](/getting-started/usage.md)
Now you can [start using Shoelace components!](/getting-started/usage.md)
## Local Installation
If you don't want to use the CDN, you can install Shoelace locally using the following command.
If you don't want to use the CDN, you can install Shoelace locally with the following command.
```sh
npm install @shoelace-style/shoelace
@ -43,21 +27,9 @@ It's up to you to make the source files available to your app. One way to do thi
Once you've done that, add the following tags to your page. Make sure to update `href` and `src` so they point to the route you created.
### Lazy Loader
```html
<link rel="stylesheet" href="/assets/shoelace/shoelace.css">
<script type="module" src="/assets/shoelace/shoelace.esm.js"></script>
```
### Custom Elements Bundle
```html
<link rel="stylesheet" href="/assets/shoelace/shoelace.css">
<script type="module">
import { defineCustomElements } from '/assets/shoelace/dist/custom-elements/index.mjs';
defineCustomElements();
</script>
```
Now you can [start using components!](/getting-started/usage.md)
Now you can [start using Shoelace components!](/getting-started/usage.md)

3
stencil.config.ts
Wyświetl plik

@ -18,9 +18,6 @@ export const config: Config = {
type: 'dist',
esmLoaderPath: '../loader'
},
{
type: 'dist-custom-elements-bundle'
},
{
type: 'docs-custom',
generator: (docs: any) => {