DEV.log

slots 본문

Svelte/tutorial

slots

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

<Box>
	<h2>Hello!</h2>
	<p>This is a box. It can contain anything.</p>
</Box>
<!-- Box.svelte -->
<div class="box">
	<slot>
	    <em>no content was provided</em></slot>
	</slot>
</div>

<style>
	.box {
		width: 300px;
		border: 1px solid #aaa;
		border-radius: 2px;
		box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
		padding: 1em;
		margin: 0 0 1em 0;
	}
</style>

 

https://svelte.dev/tutorial/slots

 

Component composition / Slots • Svelte Tutorial

Component composition / Slots 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 propsa.

svelte.dev

 

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

optional-slots  (0) 2022.02.01
named-slots  (0) 2022.02.01
slots  (0) 2022.02.01
classes  (0) 2022.02.01
custom-stores  (0) 2022.02.01
derived-stores  (0) 2022.02.01
0 Comments
댓글쓰기 폼