1+ {
2+ "id" : " svelte"
3+ "title" : " এসভেল্ট"
4+ "slug" : " svelte"
5+ "description" : " এসভেল্ট (Svelte) হচ্ছে একটি জাভাস্ক্রিপ্ট ইউজার ইন্টারফেস তৈরির ফ্রেমওয়ার্ক, যেটি অন্যান্য UI ফ্রেমওয়ার্ক থেকে ভিন্ন, কেননা এটি ডেভলাপমেন্টের সময় আপনার কোডকে ব্রাউজারের জন্য তৈরি করে নেয়।"
6+ "colorPref" : " #333"
7+ "contents" : [
8+ {
9+ "title" : " শুরু"
10+ "items" : [
11+ {
12+ "definition" : " npx এর মাধ্যমে ইন্সটল করতে"
13+ "code" : " \n npx degit sveltejs/template awsome-svelte\n cd awsome-svelte\n npm install\n npm run dev"
14+ },
15+ {
16+ "definition" : " Git এর মাধ্যমে ইন্সটল"
17+ "code" : " \n git clone https://github.com/sveltejs/template.git awsome-svelte\n cd awsome-svelte\n npm install\n npm run dev"
18+ }
19+ ]
20+ },
21+ {
22+ "title" : " এসভেল্ট এর সাধারণ বিষয়াবলি"
23+ "items" : [
24+ {
25+ "definition" : " ভ্যারিয়েবল ডিক্লেয়ার"
26+ "code" : " <script> \n let name = 'world'; \n </script> \n <h1>Hello {name}!</h1>"
27+ },
28+ {
29+ "definition" : " ডায়ন্যামিক অ্যাট্রিবিউট"
30+ "code" : " <script> \n let src = 'tutorial/image.gif', widht='100', height='100'; \n </script> \n <img {src} {width} {height}>"
31+ },
32+ {
33+ "definition" : " কম্পোনেন্ট স্ট্যাইল"
34+ "code" : " \n <p>This is a paragraph.</p>\n <style>\n p{\n\t color: purple; \n } \n </style>"
35+ },
36+ {
37+ "definition" : " নেস্টেড কম্পোনেন্ট"
38+ "code" : [
39+ " \n //App.svelte \n <script>\n\t import ChildComponent from './Child.svelte'; \n </script> \n <h2>I'm Parent Component</h2> \n <ChildComponent/> \n "
40+ " \n //Child.svelte \n <h2>I'm Child Component</h2>"
41+ ]
42+ },
43+ {
44+ "definition" : " নেস্টেড কম্পোনেন্ট এ props পাঠানো"
45+ "code" : [
46+ " //App.svelte \n <script>\n import ChildComponent from './Child.svelte'; \n let title = 'I'm Child Component'; \n </script> \n <h2>I'm Parent Component</h2> \n <ChildComponent {title}/> \n "
47+ " \n //Child.svelte \n <script> \n export let title; \n </script> \n <h2>{title || 'Hello world'}</h2>"
48+ ]
49+ },
50+ {
51+ "definition" : " ডিফল্ট props"
52+ "code" : [
53+ " //App.svelte \n <script>\n import ChildComponent from './Child.svelte'; \n let title = 'I'm Child Component'; \n </script> \n <h2>I'm Parent Component</h2> \n "
54+ " <ChildComponent {title}/> \n <ChildComponent/> \n "
55+ " \n //Child.svelte \n <script> \n export let title = 'Hello world'; \n </script> \n <h2>{title}</h2>"
56+ ]
57+ },
58+ {
59+ "definition" : " ইভেন্ট হ্যান্ডেলার"
60+ "code" : [
61+ " <script> \n let count = 0; \n function incrementCount() { \n count += 1; \n } \n </script>\n "
62+ " <button on:click={incrementCount}> Clicked {count} {count === 1 ? 'time' : 'times'}</button>"
63+ ]
64+ },
65+ {
66+ "definition" : " রিয়্যাক্টিভ অ্যাসাইনমেন্ট"
67+ "code" : [
68+ " <script> \n let count = 0; \n $: doubled = count * 2; \n function incrementCount() { \n count += 1; \n } \n </script>\n "
69+ " <button on:click={incrementCount}> Clicked {count} {count === 1 ? 'time' : 'times'}</button>\n "
70+ " <p>{count} doubled is {doubled}</p>"
71+ ]
72+ },
73+ {
74+ "definition" : " রিয়্যাক্টিভ লজিক"
75+ "code" : [
76+ " <script>\n let x = 7;\n </script>\n "
77+ " {#if x > 10}\n <p>{x} is greater than 10</p> \n {:else if 5 > x}\n <p>{x} is less than 5</p> \n {:else}\n <p>{x} is between 5 and 10</p>\n {/if}\n "
78+ ]
79+ },
80+ {
81+ "definition" : " লজিক"
82+ "code" : [
83+ " <script> \n let count = 0; \n $: if (count >= 10) { \n alert(`count is dangerously high!`); \n count = 9; \n } \n function incrementCount() { \n count += 1; \n } \n </script>\n "
84+ " <button on:click={incrementCount}> Clicked {count} {count === 1 ? 'time' : 'times'}</button>\n "
85+ ]
86+ },
87+ {
88+ "definition" : " লুপ"
89+ "code" : [
90+ " <script> \n let cats = [ { id: 'J---aiyznGQ', name: 'Keyboard Cat' }, { id: 'z_AbfPXTKms', name: 'Maru' }, { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' } ]; \n </script> \n "
91+ " <h1>The Famous Cats of YouTube</h1>\n "
92+ " {#each cats as { id, name }, i} \n <div> \n <a target='_blank' href='https: //www.youtube.com/watch?v={id}'>{i + 1}: {name}</a> \n </div> \n {/each}"
93+ ]
94+ },
95+ {
96+ "definition" : " ডম ইভেন্ট হ্যান্ডেলার"
97+ "code" : [
98+ " <script> \n let m = { x: 0, y: 0 }; \n function handleMousemove(event) { \n m.x = event.clientX; \n m.y = event.clientY; \n } \n </script> \n "
99+ " <div on:mousemove={handleMousemove}> \n The mouse position is {m.x} x {m.y} \n </div> \n "
100+ " <style> \n div { \n width: 100%; \n height: 100%; \n } \n </style>"
101+ ]
102+ },
103+ {
104+ "definition" : " ইনলাইন ডম ইভেন্ট হ্যান্ডেলার"
105+ "code" : [
106+ " <script> \n let m = { x: 0, y: 0 }; \n </script> \n "
107+ " <div on:mousemove='{e => m = { x: e.clientX, y: e.clientY}}'> \n The mouse position is {m.x} x {m.y} \n </div> \n "
108+ " <style> \n div { \n width: 100%; \n height: 100%; \n } \n </style>"
109+ ]
110+ },
111+ {
112+ "definition" : " কম্পোনেন্ট ইভেন্টস"
113+ "code" : [
114+ " //App.svelte "
115+ " \n <script> \n import Inner from './Inner.svelte'; \n function handleMessage(event) { \n alert(event.detail.text); \n } \n </script> \n "
116+ " <Inner on:message={handleMessage}/>"
117+ " \n\n //Inner.svelte"
118+ " \n <script> \n import { createEventDispatcher } from 'svelte'; \n const dispatch = createEventDispatcher(); \n "
119+ " function sayHello() { \n dispatch('message', { \n\t text: 'Hello!'}); \n } \n </script> \n "
120+ " <button on:click={sayHello}> Click to say hello </button>"
121+ ]
122+ },
123+ {
124+ "definition" : " text/number/textarea input ফিল্ড বাইন্ডিং"
125+ "code" : [
126+ " <script> \n let name = 'world'; \n </script> \n "
127+ " <input bind:value={name}> \n "
128+ " <h1>Hello {name}!</h1>"
129+ ]
130+ },
131+ {
132+ "definition" : " checkbox বাইন্ডিং"
133+ "code" : [
134+ " <script> \n let yes = false; \n </script> \n "
135+ " <input type=checkbox checked={yes}> \n "
136+ ]
137+ }
138+ ]
139+ },
140+ {
141+ "title" : " লাইফসাইকেল হুক"
142+ "items" : [
143+ {
144+ "definition" : " onMount"
145+ "code" : [
146+ " <script> \n import { onMount } from 'svelte'; \n let photos = []; \n "
147+ " onMount(async () => { \n const res = await fetch(`https://jsonplaceholder.typicode.com/photos?_limit=20`); \n photos = await res.json(); \n }); \n "
148+ " </script>\n "
149+ " <h1>Photo album</h1>\n <div>{JSON.stringify(photos)}</div>"
150+ ]
151+ },
152+ {
153+ "definition" : " onDestroy"
154+ "code" : [
155+ " //App.svelte \n <script> \n import Timer from './Timer.svelte'; \n let open = true; \n let seconds = 0; \n const toggle = () => (open = !open); \n const handleTick = () => (seconds += 1); \n </script> \n "
156+ " <div> \n <button on:click={toggle}>{open ? 'Close' : 'Open'} Timer</button> \n <p>\n \t The Timer component has been open for \t {seconds} {seconds === 1 ? 'second' : 'seconds'} \n </p> \n {#if open} \n <Timer on:tick={handleTick}/> \n {/if} \n </div> \n\n "
157+ " \n //Timer.svelte \n <script> \n import { onInterval } from './utils.js'; \n export let callback; \n export let interval = 1000; \n onInterval(callback, interval); \n </script> \n "
158+ " \n <p> This component executes a callback every {interval } millisecond{interval === 1 ? '' : 's' } </p> \n "
159+ " //utils.js \n import { onDestroy } from 'svelte'; \n export function onInterval(callback, milliseconds) { \n const interval = setInterval(callback, milliseconds); \n onDestroy(() => { \n clearInterval(interval); \n }); \n } \n "
160+ ]
161+ },
162+ {
163+ "definition" : " beforeUpdate, afterUpdate"
164+ "code" : [
165+ " import { beforeUpdate, afterUpdate } from 'svelte';"
166+ ]
167+ },
168+ {
169+ "definition" : " tick"
170+ "code" : [
171+ " import { tick } from 'svelte';"
172+ ]
173+ }
174+ ]
175+ }
176+ ]
177+ }
0 commit comments