31:T53c,tabbedPane = ({ prompt: "create a function that takes a dictionary of views and create a new view that is a tabbed pane that switches between them", time: 1716923511020, comment: "Function to create a tabbed pane view from a dictionary of views" } && function tabbedPane(viewDict) { const tabNames = Object.keys(viewDict); const container = view`

${tabNames.map( (name, i) => htl.html`` )}

${[ "...", Object.fromEntries( tabNames.map((name, i) => [ name, view`

${["...", viewDict[name]]}

` ]) ) ]}

`; function switchTab(index) { container.querySelectorAll(":scope > .tabs > .tab").forEach((tab, i) => { tab.classList.toggle("active", i === index); }); container .querySelectorAll(":scope > .tab-content > .tab-panel") .forEach((panel, i) => { panel.style.display = i === index ? "block" : "none"; }); } return container; })32:[] 2f:{"title":"Tabbed Pane View","cells":[{"id":0,"value":"# Tabbed Pane View\n\nTurn a dictionary of views into a tabbed composite view\n\n```js\nimport {tabbedPane} from '@tomlarkworthy/tabbed-pane-view'\n```","pinned":false,"hidden":false,"mode":"md"},{"id":2273,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":2275,"value":"viewof controls = tabbedPane({\n left: Inputs.range([0, 1]),\n right: Inputs.range([0, 10]),\n nested: tabbedPane({\n text: Inputs.text(),\n textarea: Inputs.textarea()\n })\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2299,"value":"## Backdrivable","pinned":false,"hidden":false,"mode":"md"},{"id":2291,"value":"Inputs.bind(Inputs.range(), viewof controls.left)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2296,"value":"Inputs.bind(Inputs.range([0, 10]), viewof controls.right)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2270,"value":"import { view } from \"@tomlarkworthy/view\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}