Solstice

Tabs

Tabs Lorem ipsum dolor, sit amet consectetur adipisicing elit. Earum eos provident praesentium ipsum sed aperiam aliquam quibusdam voluptatem corrupti, reprehenderit illum. Nobis quia incidunt non officia nihil id perferendis molestiae?

APG: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/

Standard (w/ variants)

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta quidem sunt, voluptas iure laborum est nesciunt perspiciatis corporis, ducimus perferendis nihil unde illum asperiores doloribus vitae velit quod, voluptate aperiam?

First... Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatum quaerat fuga ad quo facere, beatae odit at mollitia reiciendis harum nostrum dolorum eum dolor corporis doloremque architecto accusantium? Quibusdam, vitae?

Second... Lorem ipsum dolor, sit amet consectetur adipisicing elit. Tempore, provident quas molestias dicta exercitationem nihil odit. Itaque qui minima sequi, reprehenderit veritatis, cum perspiciatis ad neque architecto repellat consequuntur repudiandae!

Third... Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem quam, beatae perferendis dolore ratione doloremque, voluptates aut, ullam illum esse sequi blanditiis pariatur delectus saepe molestias necessitatibus cupiditate maxime voluptatem.

VUE
<STabsList :tabs-id="'example'">
  <template #items>
    <STabsItem :tabs-id="'example'" :panel-id="'first'" :active-tab="true">
      First
    </STabsItem>
    <STabsItem :tabs-id="'example'" :panel-id="'second'">
    Second
    </STabsItem>
    <STabsItem :tabs-id="'example'" :panel-id="'third'">
    Third
    </STabsItem>
  </template>
</STabsList>

<STabsDisplay :tabs-id="'example'"
  <template #panels>
    <STabsPanel :panel-id="'first'" :active-panel="true">
      first ...
    </STabsPanel>
    <STabsPanel :panel-id="'second'">
      second ...
    </STabsPanel>
    <STabsPanel :panel-id="'third'">
      third ...
    </STabsPanel>
  </template>
</STabsDisplay>
Last updated