Hi,
Is it possible to have multiple component using sveltekit?
This question is similar to: Using named slots in Custom Components - #2 by faz
Is this already build or is there a alternative?
Hello @splat46!
Great news! Builder.io now supports named slots, so you should be able to use them within your custom components.
Example: Using Named Slots in Builder.io
In Builder.io, you can use the Slot component to define named slots within your custom Svelte components. Here’s an example of how you can achieve this:
Custom Component (Custom.svelte):
<script>
export let name;
export let address;
export let email;
</script>
<article class="contact-card">
<h2>
<slot name="name">
<span>{name || "Unknown name"}</span>
</slot>
</h2>
<div class="address">
<slot name="address">
<span>{address || "Unknown address"}</span>
</slot>
</div>
<div class="email">
<slot name="email">
<span>{email || "Unknown email"}</span>
</slot>
</div>
</article>
<style>
.contact-card {
width: 300px;
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 0 no-repeat;
background-size: 20px 20px;
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);
}
</style>
Usage in Builder.io (src/routes/[...catchall]/+page.svelte):
<script>
import { isPreviewing, Content } from "@builder.io/sdk-svelte";
import ContactCard from "$lib/components/custom.svelte";
export let data;
const canShowContent = data.content || isPreviewing();
</script>
<main>
<h1>Welcome to SvelteKit</h1>
<h2>Your Builder Content:</h2>
{#if canShowContent}
<div>Page Title: {data.content?.data?.title || "Unpublished"}</div>
<Content
model="page"
content={data.content}
apiKey="ad30f9a246614faaa6a03374f83554c9"
customComponents={[{
name: "ContactCard",
component: ContactCard,
inputs: [
{ name: "name", type: "text" },
{ name: "address", type: "text" },
{ name: "email", type: "email" }
]
}]}
/>
{:else}
Content Not Found
{/if}
</main>
By using the slot component with named slots, you can define default content and override it when needed. This setup should help you manage dynamic content in your Builder.io projects more effectively.
I hope this helps! If you have any questions or need further assistance, feel free to reach out.
Thanks,
Awesome, thank you for your fast reply!
