Moon liveview storybook Moon Liveview Storybook

Tabs

Website
Moon Design System Website
HEX
View package HEX
GitHub
View repository GitHub

Tab panel 1

Tab panel 2

Attribute Type Documentation Default Value
cva_class :string
variant :string

Variant of the tabs
"tab"
size :string

Size of the tabs
"md"
Required id * :string

Id of the tabs
initial_tab :integer

Index of the initially selected tab
0
class :string

Additional classes for the tabs wrapper
""
rest :global

Additional attributes for the tabs wrapper
as :string

Element type for the tabs, can be ‘button’ or ‘link’
"button"
inner_block :slot

Default slot, to be used to enable more extensive customization
panel :slot

List of panels that can be used directly within the tabs wrapper

 
<.tabs_list {tabs}>
<:tab>Tab 1</:tab>
<:tab>Tab 2</:tab>
</.tabs_list>
<.tabs_panels {tabs}>
<:panel> <p class="text-primary">Tab panel 1</p></:panel>
<:panel><p class="text-primary">Tab panel 2</p></:panel>
</.tabs_panels>
tab :slot

List of tabs that can be used directly within the tabs wrapper
Show slot attributes Hide slot attributes
disabled :boolean

Tab is disabled, if true
rest :map

Additional attributes for the tab
as :string

Element type for the tab, can be ‘button’ or ‘link’
href :string

URL for the tab link
class :string

CSS classes for the tab
rel :string

Relationship between the current document and the linked document
target :string

Browsing context for the link

 
<.tabs_list {tabs}>
<:tab>Tab 1</:tab>
<:tab>Tab 2</:tab>
</.tabs_list>
<.tabs_panels {tabs}>
<:panel> <p class="text-primary">Tab panel 1</p></:panel>
<:panel><p class="text-primary">Tab panel 2</p></:panel>
</.tabs_panels>