Elemental.Navigation.Tabs (elemental v0.3.2)

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

tab(assigns)

The primary component for each specific tab.

tabs(assigns)

The primary tabbed view component.

Functions

tab(assigns)

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 to false.

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.

tabs(assigns)

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 to nil.
  • box (:boolean) - Style the tabbed view in a box. Defaults to false.
  • lift (:boolean) - Style the tabbed view a lift style. Defaults to false.
  • border (:boolean) - Style tabs to have a bottom border. Defaults to false.
  • center (:boolean) - Center the tabs in the page. Defaults to false.
  • 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 of tab/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.