Svelte – DOM Event Forwading

---

Hello guysss… welcome back to our channel … lanjut lagi ke Svelte tentang materi selanjutnya untuk project kita… kita gass aja lansung yakann…

pertama buat file dulu components/button/CustomButtonComp.svelte

<button on:click>
	Click me
</button>

<style>
	button {
		height: 4rem;
		width: 8rem;
		background-color: #aaa;
		border-color: #f1c40f;
		color: #f1c40f;
		font-size: 1.25rem;
		background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
		background-position: 100%;
		background-size: 400%;
		transition: background 300ms ease-in-out;
	}
	button:hover {
		background-position: 0;
		color: #aaa;
	}
</style>

kemudian buat file kembali components/CustomButton.svelte

<script>
	import CustomButtonComp from './button/CustomButtonComp.svelte';

	function handleClick() {
		alert('clicked');
	}
</script>

<CustomButtonComp on:click={handleClick}/>

dan import kedalam App.svelte kita sehingga menjadi seperti ini :

<script>
	
	import Counter from './components/Counter.svelte'
	import Toggle from './components/Toggle.svelte'
	import Img from './components/Img.svelte'
	import String from './components/String.svelte'
	import Statement from './components/Statement.svelte'
	import Condition from './components/Condition.svelte';
	import Nested from './components/Nested.svelte';
	import Info from './components/Info.svelte';
	import IfLogin from './components/IfLogin.svelte'
	import Comparison from './components/Comparison.svelte'
	import EachYoutube from './components/EachYoutube.svelte'
	import KeyEachThing from './components/KeyEachThing.svelte'
	import GenerateNumber from './components/GenerateNumber.svelte';
	import MouseMove from './components/MouseMove.svelte'
	import MouseMoveInlineHandler from './components/MouseMoveInlineHandler.svelte';
	import EventModifier from './components/EventModifier.svelte';
	import AlertCompEvent from './components/AlertCompEvents.svelte'
	import AlertEventForwarding from './components/AlertEventForwarding.svelte';
	import CustomButtonComp from './components/CustomButton.svelte'

	export let name;

	const pkg = {
		name: 'svelte',
		version: 3,
		speed: 'blazing',
		website: 'https://svelte.dev'
	};
</script>

<main>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
	<Counter />
	<Toggle />
	<Img />
	<String />
	<Statement />
	<Condition />
	<Nested answer={42}/>
	<Nested/>
	<Info {...pkg}/>
	<IfLogin />
	<Comparison />
	<EachYoutube />
	<KeyEachThing />
	<GenerateNumber />
	<MouseMove />
	<MouseMoveInlineHandler />
	<EventModifier />
	<AlertCompEvent />
	<AlertEventForwarding />
	<CustomButtonComp />

</main>

<link href="https://fonts.googleapis.com/css?family=Overpass:100,400" rel="stylesheet">

resultnya :

Okay done.. berikut link githubnya ada disini … see you on next post ya…