radixの使い方　tab編

radixについて

radix Uiは、ReactやNext.jsで利用できるUIライブラリです。スタイリングは自分で行う方式なので自由度が高く、私的にお気に入りです。
この記事では、理論や技術的な話は置いといて、ざっくり使い方だけ書きます。
※スタイリングは、tailwindを使っています。

タブ

タブを押すと画面が切り替わる例のやつ。

コード

<Flex justify="center" className="w-60">
    <Tabs.Tabs>
        <Tabs.List>
            <Tabs.Trigger value="tab-A" className="bg-blue-200 mr-4">Tab A</Tabs.Trigger>
            <Tabs.Trigger value="tab-B" className="bg-red-200 mx-4">Tab B</Tabs.Trigger>
            <Tabs.Trigger value="tab-C" className="bg-yellow-200 ml-4">Tab C</Tabs.Trigger>
        </Tabs.List>
    
        <Tabs.Content value="tab-A">
            <div className="bg-blue-200">tab A</div>
        </Tabs.Content>
        <Tabs.Content value="tab-B">
            <div className="bg-red-200">tab B</div>
        </Tabs.Content>
        <Tabs.Content value="tab-C">
            <div className="bg-yellow-200">tab C</div>
        </Tabs.Content>
    </Tabs.Tabs>
</Flex>

ポイント
・<Tabs.Tabs>タブで全体を囲う