Topics

SolidJS•4mo 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•4mo ago

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

war crime•4mo ago

I’m stumped trying to think of an implementation

bigmistqke•4mo 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 crime•4mo ago

basically

Solid is a declarative reactive Javascript library for creating user interfaces.

11KMembers

View on Discord

Want results from more Discord servers?

Add your server

More Posts

ReferenceError on something that should (and DO) existtl;dr: getting a reference error on an existing (declared and in scope) variable: ``` categories.tsx Can't find variable: themeI'm writing a solid + SUID + Tauri application, and I tried to start simple, by setting the applicat Uncaught TypeError: Cannot read properties of undefined (reading 'afterCreateSignal')Hello, I have currently an error on dev but not in production :SSR/SSG: How to share context between client and serverI am trying to implement a Design System of sorts using SolidJS (my prior experience is with React) api-routesI want to use solidstart. But my backend API is in a different programming language. I need to commu [h3] [unhandled] H3Error: Missing "./runtime/http-types" specifier in "vinxi" package``` import type {FetchEvent} from "@solidjs/start/server/types"; import {getHeader, setResponseStatu solid tagged template literalaI want to use solid with tagged template literals, now I want to have proper syntax highlighting and Lazy Loading make a blank page when component changeHi, I have an issue with Lazy Loading for solid-start. Actually, I have implement a switch compone Error "RequestEvent is missing." for cloudflare buildHi, I have updated to the latest 0.5.4 solid-start beta and started to see this error when building Blank array of documents from Firestore - createEffect(), createSignal()Hi all, I'm starting with web frameworks for the first time and chose SolidJS. I'm stuck... retrievi