DEV.log

slot-props 본문

Svelte/tutorial

slot-props

magnae2016 2022. 2. 1. 12:31
<!-- App.svelte -->
<script>
	import Hoverable from './Hoverable.svelte';
</script>

<Hoverable let:hovering={active}>
	<div class:active>
		{#if active}
			<p>I am being hovered upon.</p>
		{:else}
			<p>Hover over me!</p>
		{/if}
	</div>
</Hoverable>

<style>
	div {
		padding: 1em;
		margin: 0 0 1em 0;
		background-color: #eee;
	}

	.active {
		background-color: #ff3e00;
		color: white;
	}
</style>
<!-- Hoverable.svelte -->
<script>
	let hovering;

	function enter() {
		hovering = true;
	}

	function leave() {
		hovering = false;
	}
</script>

<div on:mouseenter={enter} on:mouseleave={leave}>
	<slot hovering={hovering}></slot>
</div>

 

https://svelte.dev/tutorial/slot-props

 

Component composition / Slot props • Svelte Tutorial

Component composition / Slot props a. Basicsb. Adding datac. Dynamic attributesd. Stylinge. Nested componentsf. HTML tagsg. Making an appa. Assignmentsb. Declarationsc. Statementsd. Updating arrays and objectsa. Declaring propsb. Default valuesc. Spread pr

svelte.dev

'Svelte > tutorial' 카테고리의 다른 글

sharing-code  (0) 2022.02.01
context-api  (0) 2022.02.01
slot-props  (0) 2022.02.01
optional-slots  (0) 2022.02.01
named-slots  (0) 2022.02.01
slots  (0) 2022.02.01
0 Comments
댓글쓰기 폼