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

update docs

pull/526/head
Cory LaViska 2021-08-31 07:37:41 -04:00
rodzic f644454080
commit e4413dceee
1 zmienionych plików z 10 dodań i 8 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

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

@ -50,32 +50,34 @@ If you don't want to use the CDN, you can install Shoelace locally with the foll
npm install @shoelace-style/shoelace npm install @shoelace-style/shoelace
``` ```
It's up to you to make the source files available to your app. One way to do this is to create a route in your app called `/scripts/shoelace` that serves static files from `node_modules/@shoelace-style/shoelace`. It's up to you to make the source files available to your app. One way to do this is to create a route in your app called `/shoelace` that serves static files from `node_modules/@shoelace-style/shoelace`.
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.
```html ```html
<link rel="stylesheet" href="/scripts/shoelace/dist/themes/light.css"> <link rel="stylesheet" href="/shoelace/dist/themes/light.css">
<script type="module" src="/scripts/shoelace/dist/shoelace.js"></script> <script type="module" src="/shoelace/dist/shoelace.js"></script>
``` ```
Alternatively, [you can use a bundler](#bundling).
?> For clarity, the docs will usually show imports from `@shoelace-style/shoelace`. If you're not using a module resolver or bundler, you'll need to adjust these paths to point to the folder Shoelace is in. ?> For clarity, the docs will usually show imports from `@shoelace-style/shoelace`. If you're not using a module resolver or bundler, you'll need to adjust these paths to point to the folder Shoelace is in.
## Setting the Base Path ## Setting the Base Path
Some components rely on assets (icons, images, etc.) and Shoelace needs to know where they're located. For convenience, Shoelace will try to auto-detect the correct location based on the script you've loaded it from. This assumes assets are colocated with `shoelace.js` and will "just work" for most users. Some components rely on assets (icons, images, etc.) and Shoelace needs to know where they're located. For convenience, Shoelace will try to auto-detect the correct location based on the script you've loaded it from. This assumes assets are colocated with `shoelace.js` and will "just work" for most users.
However, if you're [cherry picking](#cherry-picking) or [bundling](#bundling) Shoelace, you'll need to set the base path. You can do this one of two ways. The following example assumes you're serving Shoelace's `dist` directory from `/scripts/shoelace`. However, if you're [cherry picking](#cherry-picking) or [bundling](#bundling) Shoelace, you'll need to set the base path. You can do this one of two ways.
```html ```html
<!-- Option 1: the data-shoelace attribute --> <!-- Option 1: the data-shoelace attribute -->
<script src="bundle.js" data-shoelace="/scripts/shoelace"></script> <script src="bundle.js" data-shoelace="/path/to/shoelace"></script>
<!-- Option 2: the setBasePath() method --> <!-- Option 2: the setBasePath() method -->
<script src="bundle.js"></script> <script src="bundle.js"></script>
<script type="module"> <script type="module">
import { setBasePath } from '/scripts/shoelace/dist/utilities/base-path.js'; import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path.js';
setBasePath('/scripts/shoelace'); setBasePath('/path/to/shoelace');
</script> </script>
``` ```
@ -93,7 +95,7 @@ Here's an example that loads only the button component. Again, if you're not usi
<!-- The base stylesheet is always required --> <!-- The base stylesheet is always required -->
<link rel="stylesheet" href="@shoelace-style/shoelace/dist/themes/light.css"> <link rel="stylesheet" href="@shoelace-style/shoelace/dist/themes/light.css">
<script type="module" data-shoelace="/scripts/shoelace"> <script type="module" data-shoelace="/path/to/shoelace">
import '@shoelace-style/shoelace/dist/components/button/button.js'; import '@shoelace-style/shoelace/dist/components/button/button.js';
// <sl-button> is ready to use! // <sl-button> is ready to use!