Elemental.Navigation.Tabs (elemental v0.3.1)
Implements a tabbed view navigation built atop Daisy's tab component back by radio buttons. Slots are provided for consumers to pass their UI elements/pages for each tab.
Usage
<.tabs>
<.tab>
<:title>My tab</:title>
<div>
<%# whatever the content of the tab is %>
</div>
</.tab>
<.tab>
<:title>My second tab</:title>
<div>
<%# whatever the content of the tab is %>
</div>
</.tab>
</.tabs>
tabs/1
is the tabbed view component, which is the container
that will wrap your content and manage the transitions, and
tab/1
is the specific tab component which will take care
of rendering your tab and handling the internal radio
buttons used to select the active tab.
The name used for all tab/1
components must match for the behaviour
to work as expected as they're built on top of a radio group.
The default value of name is set to the same default name
used for
tabs/1
. tabs/1
will pass it's name as an argument to the inner
block to simplify changing it
<.tabs :let={tabs} name="foo-bar">
<%# tabs is now a variable holding the name passed to `tabs/1` %>
<.tab for={tabs}>
<:title>My tab</:title>
<div>
<%# whatever the content of the tab is %>
</div>
</.tab>
<.tab for={tabs}>
<:title>My second tab</:title>
<div>
<%# whatever the content of the tab is %>
</div>
</.tab>
</.tabs>
Summary
Functions
The primary component for each specific tab.
Attributes
for
(:string
) - The name of the tabbed grouped.This must match for tabs to behave correctly as it is set as the name of the underlying radio group.
Defaults to
"tabbed-view"
.selected
(:boolean
) - Whether the current tab is preselected. Defaults tofalse
.
Slots
title
(required) - The title of the tab, this will be wrapped in a<label>
element so be mindful what you set here.Accepts attributes:class
(:any
) - Additional CSS classes to label wrapping the title.
inner_block
(required) - The content of the actual tab, this will be later controlled based on which tab is currently selected.
The primary tabbed view component.
Attributes
name
(:string
) - The name of the tabbed view. Defaults to"tabbed-view"
.class
(:any
) - Additional CSS classes to add to the tabbed view. Defaults tonil
.box
(:boolean
) - Style the tabbed view in a box. Defaults tofalse
.lift
(:boolean
) - Style the tabbed view a lift style. Defaults tofalse
.border
(:boolean
) - Style tabs to have a bottom border. Defaults tofalse
.center
(:boolean
) - Center the tabs in the page. Defaults tofalse
.placement
(:string
) - Control the placement of the tabs relative to the content. Defaults to"top"
.size
(:string
) - Control the size of the tabs in the tabbed view.Must be one of"xs"
,"sm"
,"md"
,"lg"
, or"xl"
.
Slots
inner_block
(required) - The inner content of the tabbed view, this is expected to be made up oftab/1
components one for each tab you want.Under the hood the expectation is for a set of radio buttons linked together each bound to the content to display, the selected radio determines which tab is currently selected and showing.