Tab Group
Tab groups organize content into a container that shows one section at a time.
Tab groups make use of tabs and tab panels. Each panel should have a name that's unique within the tab group, and tabs should have a panel attribute that points to the respective panel's name.
TabGroup()( Tab(_.panel := "general")( "General" ), Tab(_.panel := "custom")( "Custom" ), Tab(_.panel := "advanced")( "Advanced" ), Tab(_.panel := "disabled", _.disabled := true)( "Disabled" ), TabPanel(_.name := "general")( "This is the general tab panel." ), TabPanel(_.name := "custom")( "This is the custom tab panel." ), TabPanel(_.name := "advanced")( "This is the advanced tab panel." ), TabPanel(_.name := "disabled")( disabled := true, "This is the disabled tab panel." ))Examples
Setting the Active Tab
To make a tab active, set the active attribute to the name of the appropriate panel.
TabGroup(_.active := "advanced")( Tab(_.panel := "general")("General"), Tab(_.panel := "custom")("Custom"), Tab(_.panel := "advanced")("Advanced"), TabPanel(_.name := "general")("This is the general tab panel."), TabPanel(_.name := "custom")("This is the custom tab panel."), TabPanel(_.name := "advanced")("This is the advanced tab panel."))Tabs on Bottom
Tabs can be shown on the bottom by setting placement to bottom.
TabGroup(_.placement.bottom)( Tab(_.panel := "general")("General"), Tab(_.panel := "custom")("Custom"), Tab(_.panel := "advanced")("Advanced"), Tab(_.panel := "disabled", _.disabled := true)("Disabled"), TabPanel(_.name := "general")("This is the general tab panel."), TabPanel(_.name := "custom")("This is the custom tab panel."), TabPanel(_.name := "advanced")("This is the advanced tab panel."), TabPanel(_.name := "disabled")("This is a disabled tab panel."))Tabs on Start
Tabs can be shown on the starting side by setting placement to start.
TabGroup(_.placement.start)( Tab(_.panel := "general")("General"), Tab(_.panel := "custom")("Custom"), Tab(_.panel := "advanced")("Advanced"), Tab(_.panel := "disabled", _.disabled := true)("Disabled"), TabPanel(_.name := "general")("This is the general tab panel."), TabPanel(_.name := "custom")("This is the custom tab panel."), TabPanel(_.name := "advanced")("This is the advanced tab panel."), TabPanel(_.name := "disabled")("This is a disabled tab panel."))Tabs on End
Tabs can be shown on the ending side by setting placement to end.
TabGroup(_.placement.end)( Tab(_.panel := "general")("General"), Tab(_.panel := "custom")("Custom"), Tab(_.panel := "advanced")("Advanced"), Tab(_.panel := "disabled", _.disabled := true)("Disabled"), TabPanel(_.name := "general")("This is the general tab panel."), TabPanel(_.name := "custom")("This is the custom tab panel."), TabPanel(_.name := "advanced")("This is the advanced tab panel."), TabPanel(_.name := "disabled")("This is a disabled tab panel."))Scrolling Tabs
When there are more tabs than horizontal space allows, the nav will be scrollable.
TabGroup()( Tab(_.panel := "tab-1")("Tab 1"), Tab(_.panel := "tab-2")("Tab 2"), Tab(_.panel := "tab-3")("Tab 3"), Tab(_.panel := "tab-4")("Tab 4"), Tab(_.panel := "tab-5")("Tab 5"), Tab(_.panel := "tab-6")("Tab 6"), Tab(_.panel := "tab-7")("Tab 7"), Tab(_.panel := "tab-8")("Tab 8"), Tab(_.panel := "tab-9")("Tab 9"), Tab(_.panel := "tab-10")("Tab 10"), Tab(_.panel := "tab-11")("Tab 11"), Tab(_.panel := "tab-12")("Tab 12"), Tab(_.panel := "tab-13")("Tab 13"), Tab(_.panel := "tab-14")("Tab 14"), Tab(_.panel := "tab-15")("Tab 15"), Tab(_.panel := "tab-16")("Tab 16"), Tab(_.panel := "tab-17")("Tab 17"), Tab(_.panel := "tab-18")("Tab 18"), Tab(_.panel := "tab-19")("Tab 19"), Tab(_.panel := "tab-20")("Tab 20"), TabPanel(_.name := "tab-1")("Tab panel 1"), TabPanel(_.name := "tab-2")("Tab panel 2"), TabPanel(_.name := "tab-3")("Tab panel 3"), TabPanel(_.name := "tab-4")("Tab panel 4"), TabPanel(_.name := "tab-5")("Tab panel 5"), TabPanel(_.name := "tab-6")("Tab panel 6"), TabPanel(_.name := "tab-7")("Tab panel 7"), TabPanel(_.name := "tab-8")("Tab panel 8"), TabPanel(_.name := "tab-9")("Tab panel 9"), TabPanel(_.name := "tab-10")("Tab panel 10"), TabPanel(_.name := "tab-11")("Tab panel 11"), TabPanel(_.name := "tab-12")("Tab panel 12"), TabPanel(_.name := "tab-13")("Tab panel 13"), TabPanel(_.name := "tab-14")("Tab panel 14"), TabPanel(_.name := "tab-15")("Tab panel 15"), TabPanel(_.name := "tab-16")("Tab panel 16"), TabPanel(_.name := "tab-17")("Tab panel 17"), TabPanel(_.name := "tab-18")("Tab panel 18"), TabPanel(_.name := "tab-19")("Tab panel 19"), TabPanel(_.name := "tab-20")("Tab panel 20"))Manual Activation
When focused, keyboard users can press [[Left]] or [[Right]] to select the desired tab. By default, the corresponding tab panel will be shown immediately (automatic activation). You can change this behavior by setting activation="manual" which will require the user to press [[Space]] or [[Enter]] before showing the tab panel (manual activation).
TabGroup(_.activation.manual)( Tab(_.panel := "general")("General"), Tab(_.panel := "custom")("Custom"), Tab(_.panel := "advanced")("Advanced"), Tab(_.panel := "disabled", _.disabled := true)("Disabled"), TabPanel(_.name := "general")("This is the general tab panel."), TabPanel(_.name := "custom")("This is the custom tab panel."), TabPanel(_.name := "advanced")("This is the advanced tab panel."), TabPanel(_.name := "disabled")("This is a disabled tab panel."))