Directives de composant

Modifier cette page sur Github

on:eventnamepermalink

on:eventname={handler}

Les composants peuvent émettre des évènements en utilisant createEventDispatcher, ou en relayant les évènements DOM. Il est possible d'écouter des évènements de composant de la même manière que pour des évènements DOM :

<UnComposant on:peuimporte={handler} />

Comme pour les évènements DOM, si la direction on: est utilisée sans valeur, le composant va relayer l'évènement, ce qui permet au parent du composant de l'écouter.

<UnComposant on:peuimporte />

--style-propspermalink

--style-props="anycssvalue"

Vous pouvez aussi passer des props de style aux composants en utilisant les propriétés CSS personnalisées. Cela permet notamment d'appliquer des thèmes.

Cette fonctionnalité est principalement du sucre syntaxique, que Svelte va transformer pour entourer l'élément, comme dans cet exemple :

<Slider
  bind:value
  min={0}
  --rail-color="black"
  --track-color="rgb(0, 0, 255)"
/>

Qui va générer :

<div style="display: contents; --rail-color: black; --track-color: rgb(0, 0, 255)">
  <Slider
  bind:value
  min={0}
  max={100}
  />
</div>

Note: Faites attention, cette syntaxe ajoute une <div> à votre markup, qui pourra être ciblée accidentellement par votre CSS. Ayez conscience de cet ajout d'élément lorsque vous utilisez cette fonctionnalité.

Dans le namespace SVG, l'exemple ci-dessus va générer un <g> à la place d'une <div> :

<g style="--rail-color: black; --track-color: rgb(0, 0, 255)">
  <Slider
  bind:value
  min={0}
  max={100}
  />
</g>

Note: Faites attention, cette syntaxe ajoute un <g> à votre markup, qui pourra être ciblé accidentellement par votre CSS. Ayez conscience de cet ajout d'élément lorsque vous utilisez cette fonctionnalité.

Le support des variables CSS dans Svelte permet d'appliquer des thèmes aux composants de manière simple :

<!-- Slider.svelte -->
<style>
  .potato-slider-rail {
  background-color: var(--rail-color, var(--theme-color, 'purple'));
  }
</style>

Vous pouvez alors définir une couleur de thème à plus haut niveau :

/* global.css */
html {
  --theme-color: black;
}

Ou l'écraser au niveau de l'instantiation du composant :

<Slider --rail-color="goldenrod"/>

bind:propertypermalink

bind:property={variable}

Vous pouvez lier des props de composant en utilisant la même syntaxe que pour les éléments.

<Keypad bind:value={pin}/>

bind:thispermalink

bind:this={component_instance}

Les composants permettent aussi bind:this, permettant d'interagir avec les instances de composant programmatiquement.

Notez qu'on ne peut pas écrire {cart.empty} puisque cart est undefined quand le bouton est rendu la première fois, ce qui provoquerait une erreur

<ShoppingCart bind:this={cart}/>

<button on:click={() => cart.empty()}> Caddie vide </button>