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.w3wiki.net/wp-content/uploads/20221011144212/gfgcrop-300x148.png' ; function prev() { loc = 'https://media.w3wiki.net/wp-content/uploads/20221011144212/gfgcrop-300x148.png' ; } function next() { loc = 'https://media.w3wiki.net/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