iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
0
Modern Web

前端工程的另一個選擇 Svelte 系列 第 15

DAY15- named slots 命名插座

  • 分享至 

  • xImage
  •  

named slots 子節點就是放這裡

named slots 是什麼呢,還記得昨天跟大家分享如何使用 slot 來製作複合式的元件,但是大家應該會問如果有多個 slot。那要怎麼決定哪個內容要放哪裡,這個答案就是今天要分享的內容。

本文同步放置於此

需求是什麼

在介紹命名插座之前我想請大家先看看下面的例子,簡單描述一下就是我們有兩個元件,分別為App.svelte跟ContactCard.svelte,其中App.svelte的功用在於使用ContactCard並呈現聯絡人的資訊,如下所示。

<script>
	import ContactCard from './ContactCard.svelte';
</script>

<ContactCard>
	<span slot="name">
		P. Sherman
	</span>

	<span slot="address">
		42 Wallaby Way<br>
		Sydney
	</span>
</ContactCard>

而ContactCard.svelte的功能就在於定義聯絡簿的樣式,相關內容如下。

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

	h2 {
		padding: 0 0 0.2em 0;
		margin: 0 0 1em 0;
		border-bottom: 1px solid #ff3e00
	}

	.address, .email {
		padding: 0 0 0 1.5em;
		background:  0 50% no-repeat;
		background-size: 1em 1em;
		margin: 0 0 0.5em 0;
		line-height: 1.2;
	}

	.address { background-image: url(tutorial/icons/map-marker.svg) }
	.email   { background-image: url(tutorial/icons/email.svg) }
	.missing { color: #999 }
</style>

<article class="contact-card">
	<h2>
		<slot>
			<span class="missing">Unknown name</span>
		</slot>
	</h2>

	<div class="address">
		<slot>
			<span class="missing">Unknown address</span>
		</slot>
	</div>

	<div class="email">
		<slot>
			<span class="missing">Unknown email</span>
		</slot>
	</div>
</article>

好了,基本設定介紹完了,現在要做的是將把對應的內容填到對的位置,這該怎麼處理呢?

named slots 命名插座

所以今天的內容就是要把對應的內容填到對的位置上,在App.svelte內我們有設定屬性slot="name"跟slot="address"這就是要指定到對應的slot的屬性,接下來我們將ContactCard.svelte的html內容修改如下。

<article class="contact-card">
	<h2>
		<slot name="name">
			<span class="missing">Unknown name</span>
		</slot>
	</h2>

	<div class="address">
		<slot name="address">
			<span class="missing">Unknown address</span>
		</slot>
	</div>

	<div class="email">
		<slot name="email">
			<span class="missing">Unknown email</span>
		</slot>
	</div>
</article>

這樣一來就可以將命名為slot="name"對應到slot name="name",命名為slot="address"的對應到slot name="address"了,然後昨天提到的預設內容,因為email沒有對應到所以就顯示預設內容了。

小結

今天更進一步介紹命名插座,可以將子節點要指定到元件的特定位置給予一個名子,這樣就可以決定甚麼子節點要放在甚麼位置了。


上一篇
DAY14- slot 複合式元件
下一篇
DAY16- 插座的屬性
系列文
前端工程的另一個選擇 Svelte 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言