Tab Based Navigation

The following code creates three buttons that toggle the output of tab1, tab2 and tab3 on or off. This effectively allows for switching between multiple tabs in your UI. Simply edit the tab1...3() functions to add your own content.

import { h, render } from "preact";
import { useState } from "preact/hooks";

const App = () => {
    const [activeTab, setActiveTab] = useState("tab1");

    function tab1() {
        return <label text="Tab1"></label>
    }

    function tab2() {
        return <label text="Tab2"></label>
    }

    function tab3() {
        return <label text="Tab3"></label>
    }

    return (
        <div class="w-full h-full justify-center items-center">
            <div class="w-full h-5/6 flex flex-row bg-white">
                {activeTab === "tab1" ?
                    tab1() : null}
                {activeTab === "tab2" ?
                    tab2() : null}
                {activeTab === "tab3" ?
                    tab3() : null}
            </div>
            <div class="w-full h-1/6 flex flex-row">
                <div class="flex-auto h-full"> <button class="h-full unity-text-element unity-button text-4xl" text="Tab 1" onClick={() => setActiveTab("tab1")}></button></div>
                <div class="flex-auto h-full"> <button class="h-full unity-text-element unity-button text-4xl" text="Tab 2" onClick={() => setActiveTab("tab2")}></button></div>
                <div class="flex-auto h-full"> <button class="h-full unity-text-element unity-button text-4xl" text="Tab 3" onClick={() => setActiveTab("tab3")}></button></div>
            </div>
        </div>
    )
}

render(<App />, document.body)