Ask questionsDynamically generated slots and context
Is your feature request related to a problem? Please describe. I am looking at Svelte and wondering if it would work for a project where we would have to build admin interface for a lot of data to display and manage while maintaining a large degree of reusability of visual elements. I don't see it working in Svelte3, so I am entering it here in hopes that it might drive some future decisions.
Describe the solution you'd like I'd like to be able to create a library of UI elements that would have standard baseline behavior but provide extensibility to fit all practical cases. For example, a table could provide ability to reorder columns or switch them on and off or resize them. Such behavior could be encapsulated in a custom component. At the same time the page component containing the table should be able to generate content for slots as necessary to meed business goals. I made a "make believe" version of the code at https://svelte.dev/repl/a6e3c2e49b2e43dd87a50430071463f6?version=3.9.1.
Describe alternatives you've considered I don't see any alternatives
How important is this feature to you? I think it is essential for admin interfaces and dashboards.
Additional context This is a paradigm we used on the server side in a classic MVC app we built before.
Answer
questions
Demysdcl
I have that component in Vue and I can't create it in Svelte, because doesn't have dynamic slots
<template>
<section>
<ul class="tabs">
<li
class="tab-header"
v-for="(tab, idx) in tabs"
:key="`tab-${idx}`"
@click="tabSelected = idx"
>
<slot :name="`header-${idx}`">{tab}</slot>
</li>
</ul>
<div class="tab-content">
<div
v-for="(tab, idx) in tabs"
:key="`content-${idx}`"
class="tab-internal"
>
<slot v-if="idx === tabSelected" :name="`tab-${idx}`">
Implement tab-{{ idx }}
</slot>
</div>
</div>
</section>
</template>
<script>
export default {
props: {
tabs: Array
},
data: () => ({
tabSelected: 0
})
};
</script>
Related questions