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
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 |
|---|