Svelte Building Components

Components: In svelte a web application is built up from components, a component is nothing but encapsulated, reusable block of code which wraps up HTML, CSS, and JS into a single file <filename>.svelte

components help in dividing our web page into smaller individual units, which can be called into App.svelte main file, by building components we can create a re-usable library of (HTML CSS JS) logical elements.

There are three main parts of a component, which comprises three sections:

• <script>: This part contains javascript code for controlling logic in components.
• <style>: This part contains styling information for the HTML elements inside the component. 
• Markup: This part contains actual HTML markup elements like text, buttons, lists, etc.

However one can follow any order as per convenience and Re-usability.

The Svelte compiler goes through the <style> section of every component and then it compiles them into the “public/build/bundle.css” file.

It also compiles the HTML markup and <script> section containing svelte js code of every component and stores the compiled native javascript code in “public/build/bundle.js”. It also adds the code in “src/main.js” to provide a reference to each component.

Syntax:

<script>
    write script here
</script>

<style>
    put your styling here
</style>

<div>
    put html elements here
</div>

Parameter description:

• <script></script> : This tag encapsulates script for the component , we can write arrow functions and javascript code here.
• <style></style> : This tag encapsulates styling CSS for the component , note CSS written inside component is scoped to elements inside that particular component only.
• <div></div> : We can use any HTML element here it is not bounded to div element.

Example 1: In this example, we will create a svelte component that will build a header for our web app, for convenience we are going to name our component “header.svelte”.

Javascript

<style>
    #header{
        background-color: black;
        color: white;
    }
    button{
        background-color: yellow;
    }
    button:hover{
        background-color:#00FF00;
        transform: scale(1.2);
    }
    #a{
        margin-left: 410px;
    }
</style>
<div id='header'>
    My-app
    <button id='a'>
        option-a
    </button>
    <button id='b'>
        option-b
    </button>
    <button id='c'>
        option-c
    </button>
</div>

Output:

Example 2: In this example, we are going to create another component, this component will contain dynamic image variables (props) and some wrap-up of (HTML CSS JS ), we will also add two buttons to trigger different images.

Javascript

<script>
    // here loc is exported as a prop which
    // can be dynamically changed from outside
    export let loc =
'https://media.geeksforgeeks.org/wp-content/uploads/20221011144212/gfgcrop-300x148.png';
    function prev() {
        loc =
'https://media.geeksforgeeks.org/wp-content/uploads/20221011144212/gfgcrop-300x148.png';
    }
    function next() {
        loc =
'https://media.geeksforgeeks.org/wp-content/uploads/20221011163934/pic1-300x147.png';
    }
</script>

<style>
    img {
        width: 800px;
    }

    #foot {
        height: 50px;
        width: 800px;
        background-color: aqua;
    }
</style>

<div>
    <img src="{loc}" alt="image">
</div>
<div id='foot'>
    <button on:click={prev}>PREV</button>
    <button on:click={next}>NEXT</button>
</div>

Output:

Reference: https://svelte.dev/tutorial/basics