Dioxus | 66 , Activ Tabs

Let’s implement active tabs in dioxus.

(**Youtube Video**)

In main.css :

.active {
  background-color: rgb(208, 255, 0);
}

We create a class active , just give it background color , so we can see which one is current active.

#[component]
fn About() -> Element {  
    let mut active = use_signal(|| 0);
    let fruits = vec!["apple", "banana", "orange"];
    rsx!(
        {
            fruits
                .iter()
                .enumerate()
                .map(|(index, fruit)| {
                    rsx! {
                        button {
                            class: if index == active() { "active" },
                            onclick: move |_| active.set(index),
                            "{fruit} "
                        }
                    }
                })
        }
        if active() == 0 {
            h1 { "hello from apple" }
        }
        if active() == 1 {
            h1 { "hello from banana" }
        }
        if active() == 2 {
            h1 { "hello from orange" }
        }
    )
}

We create mut state active , with initial value 0.

We create a vector fruit with three items.

We call iter method to create an iterator from vector fruit , then call enumerate method to add index number for each item , so when we call map method for this iterator , it will get a tuple , this tuple will contains each item with its index number ,start from 0, so first element in the tuple is index number ,second is item .

We add a conditional class , if the item’s index equal to the value from state active, so we give it class .active . We add onclick event , when we click it , it will set the item’s index number to the stateactive . So when we click the item , it will set its index to stateactive , so its index will equal to active’s value , this item will be active .

We also conditionally render some content based on active state’s value.