2.9 KiB

Czysty Bezpośredni odnośnik Wina Historia

Svelte

Svelte plays nice with custom elements, so you can use Shoelace in your Svelte apps with ease.

Installation

To add Shoelace to your Svelte app, install the package from npm.

npm install @shoelace-style/shoelace

Next, include a theme and set the base path for icons and other assets. In this example, we'll import the light theme and use the CDN as a base path.

// main.js or main.ts
import '@shoelace-style/shoelace/dist/themes/light.css';
import { setBasePath } from '@shoelace-style/shoelace/dist/utilities/base-path';

setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@%VERSION%/%CDNDIR%/');

:::tip If you'd rather not use the CDN for assets, you can create a build task that copies node_modules/@shoelace-style/shoelace/dist/assets into a public folder in your app. Then you can point the base path to that folder instead. :::

Usage

QR code generator example

<h1>Live editing</h1>

<sl-input label="Message" value={message} oninput={event => message = event.target.value}></sl-input>

<sl-alert open>
  <sl-icon slot="icon" name="info-circle"></sl-icon>
  {message}
</sl-alert>

<script>
  import '@shoelace-style/shoelace/dist/components/alert/alert.js'
  import '@shoelace-style/shoelace/dist/components/input/input.js';

  let message = $state('')
</script>

Two-way Binding

One caveat is there's currently Svelte only supports bind:value directive in <input>, <textarea> and <select>, but you can still achieve two-way binding manually.

// ❌ These do not work
<sl-input bind:value="name"></sl-input>

<sl-select bind:value="job">
  <sl-option value="designer">Designer</sl-option>
  <sl-option value="developer">Developer</sl-option>
</sl-select>

// ✅ These are a bit longer, but work
<sl-input value={name} oninput={event => name = event.target.value}></sl-input>

<sl-select value={job} onsl-input={event => job = event.target.value}>
  <sl-option value="designer">Designer</sl-option>
  <sl-option value="developer">Developer</sl-option>
</sl-select>

:::tip Are you using Shoelace with Svelte? Help us improve this page! :::

Slots

Slots in Shoelace/web components are functionally the same as basic slots in Svelte. Slots can be assigned to elements using the slot attribute followed by the name of the slot it is being assigned to.

Here is an example:

<sl-drawer label="Drawer" placement="start" class="drawer-placement-start" bind:open={drawerIsOpen}>
  This drawer slides in from the start.
  <div slot="footer">
    <sl-button variant="primary" onclick={() => (drawerIsOpen = false)}>
      Close
    </sl-button>
  </div>
</sl-drawer>

2.9 KiB Czysty Bezpośredni odnośnik Wina Historia