Introduction to Svelte (2 of 3)
First, we need to set up Svelte. To set up VS Code and Svelte refer to Introduction to Svelte Part 1.
For this post, we’re going to cover three components, Header, Badge, and Button. The code for App.Svelte is below:
The <script> section has the component file import statements. Those statements expose the functionality of the components and allow them to be used in HTML. It also declares the local variables used in the App.svelte code along with their starting values, the variable values are declared with let statements which allow the code to change the values.
This section also declares a function which is named showBadge(). This function changes the value of the show variable By assigning show = !show the value is changed from its current value (true or false) and the ! operator makes it the opposite value. if show === true, it is changed to false. If show is false, it is changed to true. After the variable is changed, its value is checked. If true it changes the buttonText variable value to Hide otherwise it is changed to Show. The last thing the function does in increment the variable numberOfClicks through the use of the ++ operator.
The HTML section, unnamed, declares a Header component that we imported. In this instance, we are just using the default values. One thing to note. The Header component has a height CSS set to 4rem, or 64px. So for the main HTML element to display after the Header we setting the main padding-top: 4rem.
The next HTML element is a div that contains some text and a Badge component. The Badge component is bound to the variable numberOfClicks by virtue of the svelte binding operators {}, double curly braces. The div is followed by a <br /> which displays a blank line.
the last HTML element in main is another component named Button which was imported in the <script> tag. The Button on click handler is bound to the function showBadge by the property on:click={showBadge}. The text for the Button is bound by the interpolation of the statement {`${buttonText} Badge`}. The outer curly braces, {}, are svelte’s binding operator. This is followed by enclosing backticks, ``, which are the javascript interpolation operator followed by the javascript Template Literal placeholder ${}. The complete statement looks like this: {`${buttonText} Badge`}.
The last part of the Button is a svelte {#if}{/if} comparison of the show variable. If it evaluates to true, display another instance of the Badge component next to the text of the Button.
That’s the end of this blog. Introduction to Svelte Part 3 will cover the other four components.
For a more in-depth look at Svelte, you can take a look at Amazon Book Web Development for Seniors and Juniors
Until next time…
