Tabs

@import url("@uxf/ui/css/tabs.css");

import { Tabs } from "@uxf/ui/tabs";

function Example() {
    const [activeTab, setActiveTab] = useState("tab-1");
    
    return (
        <Tabs value={activeTab} onChange={setActiveTab}>
            <Tabs.Panel name="tab-1" label="Default panel">...</Tabs.Panel>
            <Tabs.Panel name="tab-2" label="Disabled panel" isDisabled>...</Tabs.Panel>
            <Tabs.Panel name="tab-3" label="Hidden panel" isHidden>...</Tabs.Panel>
            <Tabs.Panel name="tab-4" label="Always mounted panel" isAlwaysMounted>...</Tabs.Panel>
            <Tabs.Panel name="tab-5" label={({isActive}) => <div>custom button</div>}>...</Tabs.Panel>
        </Tabs>
    );
}

import {Tabs} from "@uxf/ui/tabs";

function Example() {
    const [activeTab, setActiveTab] = useState("tab-1");

    return (
        <div>
            <Tabs value={activeTab} onChange={setActiveTab}>
                <Tabs.Panel name="tab-1" label="Tab 1"/>
                <Tabs.Panel name="tab-2" label="Tab 2"/>
            </Tabs>
            <Tabs.PanelContent activeTab={activeTab} name="tab-1">
                Content outside the tabs
            </Tabs.PanelContent>
            <Tabs.PanelContent activeTab={activeTab} name="tab-2">
                Content outside the tabs
            </Tabs.PanelContent>
        </div>
    );
}