SolidJS•10mo ago

Trying to simplify tab creation

I want to simply tab creation into 2 components: <TabGroup> which contains many <Tab> components. Each <Tab> has a name attribute that specifies the name of the tab displayed in the tab bar. The children of each <Tab> are content that are part of that specific tab. How can I implement this in Solid?

4 Replies

bigmistqke•10mo ago

if u show me an implementation i can give u my thoughts on it

war crimeOP•10mo ago

I’m stumped trying to think of an implementation

bigmistqke•10mo ago

mb something like

const tabs = [{name: 'tab1', ...}]
const [selectedTab, setSelectedTab] = createSignal()
return <>
  <For each={tabs}>
    {
       (tab) <button onClick={...}>{tab.name}</button>
    }
  </For>
  <Page tab={tabs.find(tab => tab.name === selectedTab)}/>
<>

const tabs = [{name: 'tab1', ...}]
const [selectedTab, setSelectedTab] = createSignal()
return <>
  <For each={tabs}>
    {
       (tab) <button onClick={...}>{tab.name}</button>
    }
  </For>
  <Page tab={tabs.find(tab => tab.name === selectedTab)}/>
<>

war crimeOP•10mo ago

basically

Gaming

Programming

Trying to simplify tab creation