Tabs
A tabbed interface component with underlined style and CSS-only tab switching.
Examples
Basic Tabs
Simple tabs with text content demonstrating the underlined style
Home
Welcome to the home tab. This is a simple tab example with text content.
About
This is the about tab. Each tab can contain any HTML content.
Contact
Get in touch through the contact tab. Tab switching is done purely with CSS.
View Code
use leptos::prelude::*;
use mosaic_tiles::tabs::*;
#[component]
pub fn BasicExample() -> impl IntoView {
view! {
<Tabs>
<Tab name="basic-tabs" value="home" label="Home" checked=true>
<div class="space-y-2">
<h3 class="text-lg font-semibold">"Home"</h3>
<p>
"Welcome to the home tab. This is a simple tab example with text content."
</p>
</div>
</Tab>
<Tab name="basic-tabs" value="about" label="About">
<div class="space-y-2">
<h3 class="text-lg font-semibold">"About"</h3>
<p>"This is the about tab. Each tab can contain any HTML content."</p>
</div>
</Tab>
<Tab name="basic-tabs" value="contact" label="Contact">
<div class="space-y-2">
<h3 class="text-lg font-semibold">"Contact"</h3>
<p>
"Get in touch through the contact tab. Tab switching is done purely with CSS."
</p>
</div>
</Tab>
</Tabs>
}
}
Tabs with Icons
Tabs with icons displayed before labels
Search
Find what you're looking for with our powerful search feature.
View Code
use leptos::prelude::*;
use mosaic_tiles::icon::*;
use mosaic_tiles::tabs::*;
#[component]
pub fn WithIconsExample() -> impl IntoView {
view! {
<Tabs>
<Tab name="icon-tabs" value="search" label="Search" icon=IconSearch checked=true>
<div class="space-y-2">
<h3 class="text-lg font-semibold flex items-center gap-2">
<Icon icon=IconSearch class="w-5 h-5" />
"Search"
</h3>
<p>"Find what you're looking for with our powerful search feature."</p>
<div class="mt-4">
<input
type="text"
placeholder="Search..."
class="px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md w-full"
/>
</div>
</div>
</Tab>
<Tab name="icon-tabs" value="github" label="GitHub" icon=IconGitHub>
<div class="space-y-2">
<h3 class="text-lg font-semibold flex items-center gap-2">
<Icon icon=IconGitHub class="w-5 h-5" />
"GitHub"
</h3>
<p>"View our repositories and contribute to open source projects."</p>
<a
href="https://github.com"
class="inline-block mt-4 px-4 py-2 bg-gray-900 dark:bg-gray-700 text-white rounded-md hover:bg-gray-800 dark:hover:bg-gray-600"
>
"Visit GitHub"
</a>
</div>
</Tab>
<Tab name="icon-tabs" value="linkedin" label="LinkedIn" icon=IconLinkedIn>
<div class="space-y-2">
<h3 class="text-lg font-semibold flex items-center gap-2">
<Icon icon=IconLinkedIn class="w-5 h-5" />
"LinkedIn"
</h3>
<p>"Connect with us on LinkedIn for professional networking."</p>
<a
href="https://linkedin.com"
class="inline-block mt-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"
>
"Visit LinkedIn"
</a>
</div>
</Tab>
</Tabs>
}
}
Interactive Tabs
Tabs with reactive state and interactive components
View Code
use leptos::prelude::*;
use mosaic_tiles::tabs::*;
use crate::components::counter::Counter;
#[component]
pub fn InteractiveExample() -> impl IntoView {
view! {
<Tabs>
<Tab name="interactive-tabs" value="counter1" label="Counter 1" checked=true>
<div class="space-y-4">
<Counter />
</div>
</Tab>
<Tab name="interactive-tabs" value="counter2" label="Counter 2">
<div class="space-y-4">
<Counter />
</div>
</Tab>
<Tab name="interactive-tabs" value="counter3" label="Counter 3">
<div class="space-y-4">
<Counter />
</div>
</Tab>
</Tabs>
}
}
Multiple Tab Groups
Multiple independent tab groups on the same page
Navigation Tabs
Dashboard content - Overview of your account and activities.
Projects content - List of all your projects and their status.
Settings content - Configure your preferences and account settings.
Content Tabs
Overview section - High-level summary of the content.
Details section - In-depth information and specifications.
View Code
use leptos::prelude::*;
use mosaic_tiles::tabs::*;
#[component]
pub fn MultipleGroupsExample() -> impl IntoView {
view! {
<div class="space-y-8">
<div>
<h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
"Navigation Tabs"
</h4>
<Tabs>
<Tab name="nav-tabs" value="dashboard" label="Dashboard" checked=true>
<p>"Dashboard content - Overview of your account and activities."</p>
</Tab>
<Tab name="nav-tabs" value="projects" label="Projects">
<p>"Projects content - List of all your projects and their status."</p>
</Tab>
<Tab name="nav-tabs" value="settings" label="Settings">
<p>"Settings content - Configure your preferences and account settings."</p>
</Tab>
</Tabs>
</div>
<div>
<h4 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
"Content Tabs"
</h4>
<Tabs>
<Tab name="content-tabs" value="overview" label="Overview" checked=true>
<p>"Overview section - High-level summary of the content."</p>
</Tab>
<Tab name="content-tabs" value="details" label="Details">
<p>"Details section - In-depth information and specifications."</p>
</Tab>
</Tabs>
</div>
</div>
}
}
Anatomy
use leptos::prelude::*;
use mosaic_tiles::tabs::*;
#[component]
pub fn TabsAnatomy() -> impl IntoView {
view! {
<Tabs>
<Tab name="example-tabs" value="tab1" label="Tab 1" checked=true>
"Content for tab 1"
</Tab>
<Tab name="example-tabs" value="tab2" label="Tab 2">
"Content for tab 2"
</Tab>
</Tabs>
}
}
API Reference
Tabs
Container component for organizing tabs.
Uses CSS Grid layout to manage tab labels and panels.
| Attribute | Type | Default | Description |
|---|---|---|---|
| children | Option<Children> | None | Tab components to display |
Tab
Individual tab component with label and content panel.
Uses radio inputs for CSS-only tab switching. All tabs in a group must share the same name prop.
| Attribute | Type | Default | Description |
|---|---|---|---|
| name | String | required | Radio group name - must be the same for all tabs in a group |
| value | String | required | Unique identifier for this tab |
| label | String | required | The tab label text displayed in the tab button |
| icon | Option<IconData> | None | Optional icon to display before the label (requires icon feature) |
| checked | bool | false | Whether this tab is initially selected |
| children | Option<Children> | None | The content to display when this tab is active |