Home Components Tabs
Tabs
Overview Playground API
The tabs component is used to display multiple panels of content in a container.
Usage
First tab Second tab Disabled tab External link First content Second content 

<goat-tabs>
  <goat-tabs-list>
    <goat-tab>First tab</goat-tab>
    <goat-tab selected="true">Second tab</goat-tab>
    <goat-tab disabled>Disabled tab</goat-tab>
    <goat-tab href="https://shivajivarma.com">External link</goat-tab>
  </goat-tabs-list>

  <goat-tab-panel>
    <goat-text type="heading"> First content </goat-text>
  </goat-tab-panel>

  <goat-tab-panel>
    <goat-text type="heading"> Second content </goat-text>
  </goat-tab-panel>
</goat-tabs>
Contained Here are several predefined button styles, each serving its own semantic purpose.
First tab Second tab Disabled tab Last tab First content Second content Disabled Last content
First content Second content Disabled Last content First tab Second tab Disabled tab Last tab 

<goat-tabs type="contained">
  <goat-tabs-list>
    <goat-tab>First tab</goat-tab>
    <goat-tab selected="true">Second tab</goat-tab>
    <goat-tab disabled>Disabled tab</goat-tab>
    <goat-tab>Last tab</goat-tab>
  </goat-tabs-list>

  <goat-tab-panel class="layer-01">
    <goat-text type="heading"> First content </goat-text>
  </goat-tab-panel>

  <goat-tab-panel class="layer-01">
    <goat-text type="heading"> Second content </goat-text>
  </goat-tab-panel>

  <goat-tab-panel class="layer-01">
    <goat-text type="heading"> Disabled </goat-text>
  </goat-tab-panel>

  <goat-tab-panel class="layer-01">
    <goat-text type="heading"> Last content </goat-text>
  </goat-tab-panel>

</goat-tabs>

  <br>


  <goat-tabs type="contained-bottom">
    <goat-tab-panel class="layer-01">
      <goat-text type="heading"> First content </goat-text>
    </goat-tab-panel>

    <goat-tab-panel class="layer-01">
      <goat-text type="heading"> Second content </goat-text>
    </goat-tab-panel>

    <goat-tab-panel class="layer-01">
      <goat-text type="heading"> Disabled </goat-text>
    </goat-tab-panel>

    <goat-tab-panel class="layer-01">
      <goat-text type="heading"> Last content </goat-text>
    </goat-tab-panel>

    <goat-tabs-list>
      <goat-tab>First tab</goat-tab>
      <goat-tab selected="true">Second tab</goat-tab>
      <goat-tab disabled>Disabled tab</goat-tab>
      <goat-tab>Last tab</goat-tab>
    </goat-tabs-list>
  </goat-tabs>
Icons Here are several predefined button styles, each serving its own semantic purpose.
First tab Second tab Disabled tab Last tab First tab content Second tab content

Circle Email 

<goat-tabs>
  <goat-tabs-list>
    <goat-tab>First tab</goat-tab>
    <goat-tab selected="true">Second tab</goat-tab>
    <goat-tab disabled>Disabled tab</goat-tab>
    <goat-tab>Last tab</goat-tab>
  </goat-tabs-list>

  <goat-tab-panel>
    <goat-text type="heading"> First tab content </goat-text>
  </goat-tab-panel>

  <goat-tab-panel>
    <goat-text type="heading"> Second tab content </goat-text>
  </goat-tab-panel>
</goat-tabs>

<br>
<br>

<goat-tabs>
  <goat-tabs-list>
    <goat-tab icon="home"></goat-tab>
    <goat-tab icon="circle--solid" selected="true">Circle</goat-tab>
    <goat-tab disabled icon="email">Email</goat-tab>
    <goat-tab icon="star--filled"></goat-tab>
  </goat-tabs-list>
</goat-tabs>
Usage Contained Icons
Work in progress
Properties
Events
Methods
CSS Custom Properties
Previous Next