993b40201c
* New FAQ, new renderer * Push blog stuff * Fix blog posts * Add tutorial to be rendered * Update documentation/content/blog/2023-03-09-zero-config-type-safety.md Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Update documentation/content/blog/2023-03-09-zero-config-type-safety.md Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Revamp a lot of renderer, make it (soft) compatible with sveltekit * Remove markdown types * Clean up faq +page * Document stuff * Make the options more explicity * chore(site-2): Restructure docs pt 2 (#8604) * Push * Update readme * Push * inor accessibility fix * minr stuff * Add prepare * Run prettier * Remove test script * pnpm update * Update sites/svelte.dev/src/routes/examples/[slug]/+page.svelte Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> * Update sites/svelte.dev/package.json Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com> --------- Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
2.6 KiB
| title |
|---|
| Component directives |
on:eventname
on:eventname={handler}
Components can emit events using createEventDispatcher, or by forwarding DOM events. Listening for component events looks the same as listening for DOM events:
<SomeComponent on:whatever={handler} />
As with DOM events, if the on: directive is used without a value, the component will forward the event, meaning that a consumer of the component can listen for it.
<SomeComponent on:whatever />
--style-props
--style-props="anycssvalue"
You can also pass styles as props to components for the purposes of theming, using CSS custom properties.
Svelte's implementation is essentially syntactic sugar for adding a wrapper element. This example:
<Slider bind:value min={0} --rail-color="black" --track-color="rgb(0, 0, 255)" />
Desugars to this:
<div style="display: contents; --rail-color: black; --track-color: rgb(0, 0, 255)">
<Slider bind:value min={0} max={100} />
</div>
Note: Since this is an extra <div>, beware that your CSS structure might accidentally target this. Be mindful of this added wrapper element when using this feature.
For SVG namespace, the example above desugars into using <g> instead:
<g style="--rail-color: black; --track-color: rgb(0, 0, 255)">
<Slider bind:value min={0} max={100} />
</g>
Note: Since this is an extra <g>, beware that your CSS structure might accidentally target this. Be mindful of this added wrapper element when using this feature.
Svelte's CSS Variables support allows for easily themeable components:
<!-- Slider.svelte -->
<style>
.potato-slider-rail {
background-color: var(--rail-color, var(--theme-color, 'purple'));
}
</style>
So you can set a high-level theme color:
/* global.css */
html {
--theme-color: black;
}
Or override it at the consumer level:
<Slider --rail-color="goldenrod" />
bind:property
bind:property={variable}
You can bind to component props using the same syntax as for elements.
<Keypad bind:value={pin} />
bind:this
bind:this={component_instance}
Components also support bind:this, allowing you to interact with component instances programmatically.
Note that we can't do
{cart.empty}sincecartisundefinedwhen the button is first rendered and throws an error.
<ShoppingCart bind:this={cart} />
<button on:click={() => cart.empty()}> Empty shopping cart </button>