Tab#

<Tabs> allow you to spread out your UI components into multiple pages, where only one page is shown at any given time. Every <Tab> inside represents a page with a label to select it. A user can interact with labels to bring the tab associated to it into view.

<Tabs mount=Mount::Once> <Tab name="tab-1" label="Tab 1".into_view()>"Content of tab 1"</Tab> <Tab name="tab-2" label="Tab 2".into_view()>"Content of tab 2"</Tab> <Tab name="tab-3" label="Tab 3".into_view()>"Content of tab 3"</Tab> </Tabs>

Tab 1

Tab 2

Tab 3

Content of tab 1

Reactivity#

Labels can be anything implementing Leptos's IntoView trait and are therefore as reactive as anything else.

let (bool, set_bool) = create_signal(false); view! { <Tabs mount=Mount::Once> <Tab name="tab-1" label=view! { "State: " {move || bool.get()}}> <Toggle state=bool on_toggle=move |s| set_bool.set(s) /> </Tab> <Tab name="tab-2" label="Tab 2"> "Content of tab 2" </Tab> </Tabs> }

State: false

Tab 2

Nesting#

Tabs can be nested just as one would expect.

<Tabs mount=Mount::Once> <Tab name="outer-1" label="Outer 1"> <Tabs> <Tab name="inner-1" label="Inner 1"> "This is a nested tab." </Tab> <Tab name="inner-2" label="Inner 2"> "This tah is nested as well." </Tab> </Tabs> </Tab> <Tab name="outer-2" label="Outer 2"></Tab> </Tabs>

Outer 1

Outer 2

Inner 1

Inner 2

This is a nested tab.

When are tabs rendered?#

You might have spotted a particular behavior in the above example. When switching to the "Inner 2" tab, then switching to "Outer 2" and back to "Outer 1", we still see "Inner 2" and not the default tab "Inner 1" again.

This is where the mount property comes into play. We had it set to Mount::Once in all of our examples. There are two variants to choose from:

Mount::Once
Tab content is rendered once. Tabs are simply hidden when not shown.
Mount::WhenShown
Tab content is rendered every time a tab is shown. The dom of the tab is unmounted when hidden. This means that there is only ever one tab in the final dom, not requiring any hiding-mechanism as in the Mount::Once case.