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.

Tabs

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