profile
viewpoint

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.

sveltejs/svelte

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>
useful!
source:https://uonfu.com/
answerer
Demys Cota Demysdcl Snowmanlabs Curitiba, PR https://medium.com/@demysdcl System Analyst and full stack developer since 2013. | Javascript | Typescript | Kotlin | Python | Ruby | Dart | VueJS | SvelteJS | Node | Flutter |
Github User Rank List