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

Wizard

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.
Tabs props
Name Type Required Default Description
id string Yes - The id of the live component (required by LiveView for stateful components).
testid string No - Id attribute for DOM element
class css_class No "justify-around gap-2" Additional Tailwind classes
selected integer No 0 Index of seleted tab
on_change event No - Event to happen when non-disabled tab is clicked
header slot Yes - Tab header slot
content slot No - Tab content slot
default slot No - Default slot
Tabs.List props
Name Type Required Default Description
id string No - Id attribute for DOM element
testid string No - Data-testid attribute for DOM element
class css_class No - Additional Tailwind classes
size sm | md No "md" Size of tabs
selected integer No - Will be got from Tabs in most cases
value integer No - Value of the tab
tab_titles list No [] List of tab titles. They are rendered with tab_module. Only if no slot tabs assigned
tab_module atom No Moon.Design.Tabs.Tab List of tab titles. THe are rendered with tab_module. Only if no slot tabs assigned
on_change event No - Event to happen when non-disabled tab is clicked
tabs slot No - Tabs slot
default slot No - Default slot
tab_title slot No - Slot for redering tab title when tab_tiltles given
Tabs.Link props
Name Type Required Default Description
id string No - Id attribute for DOM element
href string Yes - Href for the link
disabled boolean No false If true, the tab is disabled
class css_class No - Additional Tailwind classes
testid string No - Data-testid attribute for DOM element
unselected_class css_class No "after:scale-x-0 text-bulma" Additional Tailwind classes for unselected tab
selected_class css_class No "after:scale-x-100 text-piccolo" Additional Tailwind classes for selected tab
tabindex integer No - Will be got from Tabs.List in most cases
is_selected boolean No - If tab is selected
size sm | md No - Will be got from Tabs.List in most cases
attrs any No [] Attributes for the link
default slot Yes - Content inside the tab
Tabs.Pill props
Name Type Required Default Description
id string No - Id attribute for DOM element
testid string No - Data-testid attribute for DOM element
class css_class No - Additional Tailwind classes
disabled boolean No false If true, the tab is disabled
unselected_class css_class No "" Additional Tailwind classes for unselected tab
selected_class css_class No "bg-goku" Additional Tailwind classes for selected tab
tabindex integer No - Will be got from Tabs.List in most cases
is_selected boolean No - Will be got from Tabs.List in most cases
size sm | md No - Will be got from Tabs.List in most cases
on_change event No - Will be got from Tabs in most cases
default slot Yes - Content inside the tab
Tabs.Segment props
Name Type Required Default Description
id string No - Id attribute for DOM element
testid string No - Data-testid attribute for DOM element
class css_class No - Additional Tailwind classes
disabled boolean No false If true, the tab is disabled
unselected_class css_class No "" Additional Tailwind classes for unselected tab
selected_class css_class No "bg-goku" Additional Tailwind classes for selected tab
tabindex integer No - Will be got from Tabs.List in most cases
is_selected boolean No - Will be got from Tabs.List in most cases
size sm | md No - Will be got from Tabs.List in most cases
on_change event No - Will be got from Tabs in most cases
default slot Yes - Content inside the tab
Elixir.Moon.Parts.Wizard.Step props
Name Type Required Default Description
id string No - Id attribute for DOM element
disabled boolean No false if true, the tab is disabled
class css_class No - Additional Tailwind classes
testid string No - Data-testid attribute for DOM element
unselected_class css_class No "text-beerus" Additional Tailwind classes for unselected tab
selected_class css_class No "text-roshi" Additional Tailwind classes for selected tab
icon_bg_class css_class No "bg-goku" Additional Tailwind classes for step icon background
line_class css_class No - Additional Tailwind classes for step line
title_class css_class No - Additional Tailwind classes for step title
tabindex integer No - Will be got from Tabs.List in most cases
is_selected boolean No - Will be got from Tabs.List in most cases
on_change event No - Will be got from Tabs in most cases
selected integer No - Will be got from Tabs.List in most cases
is_last boolean No - Will be got from Tabs.List in most cases
default slot No - Content inside the tab
Tabs.Tab props
Name Type Required Default Description
id string No - Id attribute for DOM element
disabled boolean No false If true, the tab is disabled
class css_class No - Additional Tailwind classes
testid string No - Data-testid attribute for DOM element
unselected_class css_class No "after:scale-x-0 text-bulma" Additional Tailwind classes for unselected tab
selected_class css_class No "after:scale-x-100 text-piccolo" Additional Tailwind classes for selected tab
tabindex integer No - Will be got from Tabs.List in most cases
is_selected boolean No - Will be got from Tabs.List in most cases
size sm | md No - Will be got from Tabs.List in most cases
on_change event No - Will be got from Tabs in most cases
default slot Yes - Default slot
Tabs.Panels props
Name Type Required Default Description
id string No - Id attribute for DOM element
testid string No - Data-testid attribute for DOM element
class css_class No - Additional Tailwind classes
selected integer No - Will be got from Tabs in most cases
panels slot Yes - Panels slot
Tabs.Panel props
Name Type Required Default Description