Struct TabListProps 

pub struct TabListProps {
    pub active: Signal<usize>,
    pub tabs: Vec<TabDef>,
    pub pills: bool,
    pub fill: bool,
    pub justified: bool,
    pub class: String,
    pub content_class: String,
}

Bootstrap Tabs component — signal-driven, no JavaScript.

Produces pixel-perfect Bootstrap 5.3 HTML with separated <ul class="nav nav-tabs"> and <div class="tab-content"> areas. This is the recommended component for tabs.

Bootstrap HTML → Dioxus

<!-- Bootstrap HTML -->
<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item"><button class="nav-link active">Home</button></li>
  <li class="nav-item"><button class="nav-link">Profile</button></li>
</ul>
<div class="tab-content border border-top-0 rounded-bottom p-3">
  <div class="tab-pane fade show active">Home content</div>
  <div class="tab-pane fade">Profile content</div>
</div>

use dioxus_bootstrap_css::tabs::TabDef;

let active = use_signal(|| 0usize);
rsx! {
    TabList {
        active: active,
        content_class: "border border-top-0 rounded-bottom p-3",
        tabs: vec![
            TabDef { label: "Home".into(), icon: Some("house".into()),
                content: rsx! { p { "Home content" } } },
            TabDef { label: "Profile".into(), icon: Some("person".into()),
                content: rsx! { p { "Profile content" } } },
        ],
    }
}

Props

• active — Signal<usize> controlling active tab index
• tabs — Vec<TabDef> defining each tab’s label, icon, and content
• pills — pill style instead of tabs
• fill — fill available width
• justified — equal-width items
• content_class — additional CSS classes for the tab-content div (e.g., "border border-top-0 rounded-bottom p-3" for standard Bootstrap bordered tabs)

Fields

active: Signal<usize>

Signal controlling the active tab index.

tabs: Vec<TabDef>

Tab definitions.

pills: bool

Use pill style.

fill: bool

Fill available width.

justified: bool

Justify items equally.

class: String

Additional CSS classes for the nav.

content_class: String

Additional CSS classes for the tab content area.

Implementations

impl TabListProps

pub fn builder() -> TabListPropsBuilder<((), (), (), (), (), (), ())>

Create a builder for building TabListProps. On the builder, call .active(...), .tabs(...), .pills(...)(optional), .fill(...)(optional), .justified(...)(optional), .class(...)(optional), .content_class(...)(optional) to set the values of the fields. Finally, call .build() to create the instance of TabListProps.

Trait Implementations

impl Clone for TabListProps

fn clone(&self) -> TabListProps

Returns a duplicate of the value.

fn clone_from(&mut self, source: &Self)

Performs copy-assignment from source.

impl PartialEq for TabListProps

fn eq(&self, other: &TabListProps) -> bool

Tests for self and other values to be equal, and is used by ==.

fn ne(&self, other: &Rhs) -> bool

Tests for !=. The default implementation is almost always sufficient, and should not be overridden without very good reason.

impl Properties for TabListProps

where Self: Clone,

type Builder = TabListPropsBuilder<((), (), (), (), (), (), ())>

The type of the builder for this component. Used to create “in-progress” versions of the props.

fn builder() -> Self::Builder

Create a builder for this component.

fn memoize(&mut self, new: &Self) -> bool

Make the old props equal to the new props. Return if the props were equal and should be memoized.

fn into_vcomponent<M>( self, render_fn: impl ComponentFunction<Self, M>, ) -> VComponent

where M: 'static,

Create a component from the props.

impl StructuralPartialEq for TabListProps