Tabs

Navigation

Navigation tabs for switching views — container with active/inactive states.

Preview

Usage

tabs.rs

use floe_ui::components::tabs;

"text-zinc-500">// Create a tab list with individual tabs
let tab_list = tabs::list(
    [
        tabs::tab("Account", self.active_tab == 0, Message::SetTab(0), &tokens),
        tabs::tab("Password", self.active_tab == 1, Message::SetTab(1), &tokens),
        tabs::tab("Settings", self.active_tab == 2, Message::SetTab(2), &tokens),
    ],
    &tokens,
);

API Reference

Props / Parameters

Name	Type	Default	Description
label	&str	—	Tab label text
is_active	bool	—	Whether this tab is currently active
on_press	Message	—	Message sent when tab is clicked
tokens	&DesignTokens	—	Design tokens for theming

Style Functions

tab_list_style(tokens)

tab_active_style(tokens)

tab_inactive_style(tokens)

Style functions return closures compatible with Iced's .style() method.

Builder Functions

list(tabs, tokens)

tab(label, is_active, on_press, tokens)

Builder functions return pre-configured Iced widgets ready for use.

Source: floe-ui/src/components/tabs.rs