Tabs
Aria
RTL
Tabs to allow users to navigate easily between views within the same context.
Each tab should contain content that is distinct from other tabs in a set for example, tabs can present different sections of news, different genres of music, or different themes of documents.

Anatomy
<Tabs> <Tabs.List> <Tabs.Tab>...</Tabs.Tab> <Tabs.Tab>...</Tabs.Tab> <Tabs.Tab>...</Tabs.Tab> </Tabs.List> <Tabs.Panels> <Tabs.Panel>...</Tabs.Panel> <Tabs.Panel>...</Tabs.Panel> <Tabs.Panel>...</Tabs.Panel> </Tabs.Panels> </Tabs>
Default
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book.
With pills
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book.
With segments
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
has been the industry's standard dummy text ever since the 1500s, when an unknown printer
took a galley of type and scrambled it to make a type specimen book.
Sizes
Custom selected
Moon.Design.Tabs.{Tab, Pill, Segment} properties
Name | Type | Required | Default | Description |
---|---|---|---|---|
default | slot | Yes | - | Content inside the tab |
class | css_class | No | - | additional css classes for the tab |
disabled | boolean | No | false | Is tab disabled |
Moon.Design.Tabs properties
Name | Type | Required | Default | Description |
---|---|---|---|---|
default | slot | Yes | - | Content near tablist |
class | css_class | No | - | additional css classes for the tab |
on_change | event | No | - | Event to happen when non-disabled tab is clicked |
selected | integer | No | 0 | Index of the selected tab |
Moon.Design.Tabs.List properties
Name | Type | Required | Default | Description |
---|---|---|---|---|
class | css_class | No | - | Additional css classes for the tablist |
size | sm | md | No | md | Size of tabs |
tab_titles | list | No | [] | List of tab titles. THe are rendered with tab_module. Only if no slot tabs assigned |
tab_module | atom | No | Moon.Design.Tabs.Tab | Module for rendering tabs from tab_titles |