kopia lustrzana https://github.com/shoelace-style/shoelace
Remove custom elements bundle
rodzic
44e4d34c3a
commit
f5e573647d
|
@ -1,39 +1,23 @@
|
||||||
# Installation
|
# 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
|
```html
|
||||||
<link rel="stylesheet" href="https://unpkg.com/@shoelace-style/shoelace@%VERSION%/dist/shoelace/shoelace.css">
|
<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>
|
<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)
|
Now you can [start using Shoelace 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)
|
|
||||||
|
|
||||||
## Local Installation
|
## 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
|
```sh
|
||||||
npm install @shoelace-style/shoelace
|
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.
|
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
|
```html
|
||||||
<link rel="stylesheet" href="/assets/shoelace/shoelace.css">
|
<link rel="stylesheet" href="/assets/shoelace/shoelace.css">
|
||||||
<script type="module" src="/assets/shoelace/shoelace.esm.js"></script>
|
<script type="module" src="/assets/shoelace/shoelace.esm.js"></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Custom Elements Bundle
|
Now you can [start using Shoelace components!](/getting-started/usage.md)
|
||||||
|
|
||||||
```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)
|
|
||||||
|
|
|
@ -18,9 +18,6 @@ export const config: Config = {
|
||||||
type: 'dist',
|
type: 'dist',
|
||||||
esmLoaderPath: '../loader'
|
esmLoaderPath: '../loader'
|
||||||
},
|
},
|
||||||
{
|
|
||||||
type: 'dist-custom-elements-bundle'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
type: 'docs-custom',
|
type: 'docs-custom',
|
||||||
generator: (docs: any) => {
|
generator: (docs: any) => {
|
||||||
|
|
Ładowanie…
Reference in New Issue