Tabs

A simple horizontal navigation tabs component


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam.

<Tabs id="tabs-example" boxed>

  <TabItem label="Pictures" icon="fas fa-image">
    Lorem ipsum dolor sit amet,
    <strong>consectetur</strong> adipiscing elit.
    Fusce id fermentum quam.
    <hr>
    <div class="buttons is-right">
      <Button color="success">Yes</Button>
      <Button color="danger">No</Button>
    </div>
  </TabItem>

  <TabItem label="Music" icon="fas fa-music">
    Fusce id fermentum quam. Proin sagittis,
    nibh id hendrerit imperdiet, elit
    <strong>sapien</strong> laoreet elit.
    <hr>
    <div class="buttons is-right">
      <Button color="info">Ok</Button>
      <Button color="warning">Maybe</Button>
    </div>
  </TabItem>

  <TabItem label="Videos" icon="fas fa-film">
    Lorem ipsum dolor sit amet.
  </TabItem>

</Tabs>

# Public API

Name Description Type Values Default
id Required. The id of the live component (required by LiveView for stateful components).

:string
expanded Make tab full width.

:boolean false
boxed Classic style with borders.

:boolean false


Tabs.TabItem

Defines a tab item for the parent tabs component


The tab item instance is automatically added to the parent's tabs slot.


# Public API

Name Description Type Values Default
label Item label.

:string ""
icon Item icon.

:string
disabled Item is disabled.

:boolean false
visible Item is visible.

:boolean true