aperte s para abrir a busca
Storybook Storybook
v1.81.11

# CTabs

As tabs são uma forma de exibir mais informações usando menos espaço na janela.

# Simples

<c-tabs
  :active-index="0"
  :tabs="[
      {
        icon: 'book',
        label: 'First tab'
      },
      {
        icon: 'download',
        label: 'Second tab'
      }
    ]"
/>

# Alinhado na esquerda

<c-tabs
  align="left"
  :active-index="0"
  :tabs="[
      {
        icon: 'book',
        label: 'First tab'
      },
      {
        icon: 'download',
        label: 'Second tab'
      }
    ]"
/>

# CTabs integrado

What is Lorem Ipsum?

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure possimus quisquam id quaerat temporibus, dignissimos aspernatur earum ipsum beatae tempora molestiae, deserunt perferendis quibusdam molestias minima quis quos magnam sapiente! Officiis, quo praesentium. Totam minus eligendi placeat aut corporis repudiandae dolores sunt, vel error vitae, quaerat a? Tempora iure ducimus ratione, adipisci sunt, dolore ex reiciendis quasi expedita aliquam voluptate?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt non quisquam, modi vel minus obcaecati fugiat, suscipit repellendus fugit veniam ipsam autem, similique quidem dicta provident facere. In, quasi minus. Laudantium illo corrupti soluta, facere nesciunt qui. Beatae vero assumenda debitis facere, magnam optio. Sint, distinctio fugit ipsam minima voluptates iusto alias nisi blanditiis fuga non quibusdam, recusandae, eaque quod.

Eum, aspernatur odio soluta explicabo placeat eius quis. Sunt, expedita sapiente cumque quo animi laudantium consequuntur, corporis numquam magni, suscipit repudiandae explicabo unde dicta vel molestias quisquam quaerat magnam corrupti?

Where does it come from?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt non quisquam, modi vel minus obcaecati fugiat, suscipit repellendus fugit veniam ipsam autem, similique quidem dicta provident facere. In, quasi minus. Laudantium illo corrupti soluta, facere nesciunt qui. Beatae vero assumenda debitis facere, magnam optio. Sint, distinctio fugit ipsam minima voluptates iusto alias nisi blanditiis fuga non quibusdam, recusandae, eaque quod. Eum, aspernatur odio soluta explicabo placeat eius quis. Sunt, expedita sapiente cumque quo animi laudantium consequuntur, corporis numquam magni, suscipit repudiandae explicabo unde dicta vel molestias quisquam quaerat magnam corrupti?

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure possimus quisquam id quaerat temporibus, dignissimos aspernatur earum ipsum beatae tempora molestiae, deserunt perferendis quibusdam molestias minima quis quos magnam sapiente! Officiis, quo praesentium. Totam minus eligendi placeat aut corporis repudiandae dolores sunt, vel error vitae, quaerat a? Tempora iure ducimus ratione, adipisci sunt, dolore ex reiciendis quasi expedita aliquam voluptate?

<template>
  <div>
    <c-tabs
    :active-index="activeIndex"
    :tabs="[
        {
          icon: 'Heart',
          label: 'What is Lorem Ipsum?',
          handler: handleTabClicked
        },
        {
          icon: 'graph',
          label: 'Where does it come from?',
          handler: handleTabClicked
        }
      ]"
    />
    <div>
      <div v-show="activeIndex === 0">
        <h3 class="c-text-h3">What is Lorem Ipsum?</h3>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure possimus quisquam id quaerat temporibus, dignissimos aspernatur earum ipsum beatae tempora molestiae, deserunt perferendis quibusdam molestias minima quis quos magnam sapiente! Officiis, quo praesentium. Totam minus eligendi placeat aut corporis repudiandae dolores sunt, vel error vitae, quaerat a? Tempora iure ducimus ratione, adipisci sunt, dolore ex reiciendis quasi expedita aliquam voluptate?</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt non quisquam, modi vel minus obcaecati fugiat, suscipit repellendus fugit veniam ipsam autem, similique quidem dicta provident facere. In, quasi minus.
        Laudantium illo corrupti soluta, facere nesciunt qui. Beatae vero assumenda debitis facere, magnam optio. Sint, distinctio fugit ipsam minima voluptates iusto alias nisi blanditiis fuga non quibusdam, recusandae, eaque quod.</p>
        <p><strong>Eum, aspernatur odio soluta explicabo placeat eius quis. Sunt, expedita sapiente cumque quo animi laudantium consequuntur, corporis numquam magni, suscipit repudiandae explicabo unde dicta vel molestias quisquam quaerat magnam corrupti?</strong></p>
      </div>
      <div v-show="activeIndex === 1">
        <h3 class="c-text-h3">Where does it come from?</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt non quisquam, modi vel minus obcaecati fugiat, suscipit repellendus fugit veniam ipsam autem, similique quidem dicta provident facere. In, quasi minus. Laudantium illo corrupti soluta, facere nesciunt qui. Beatae vero assumenda debitis facere, magnam optio. Sint, distinctio fugit ipsam minima voluptates iusto alias nisi blanditiis fuga non quibusdam, recusandae, eaque quod. Eum, aspernatur odio soluta explicabo placeat eius quis. Sunt, expedita sapiente cumque quo animi laudantium consequuntur, corporis numquam magni, suscipit repudiandae explicabo unde dicta vel molestias quisquam quaerat magnam corrupti?</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Iure possimus quisquam id quaerat temporibus, dignissimos aspernatur earum ipsum beatae tempora molestiae, deserunt perferendis quibusdam molestias minima quis quos magnam sapiente! Officiis, quo praesentium. Totam minus eligendi placeat aut corporis repudiandae dolores sunt, vel error vitae, quaerat a? Tempora iure ducimus ratione, adipisci sunt, dolore ex reiciendis quasi expedita aliquam voluptate?</p>
      </div>
    </div>
  </div>
</template>

<script>
 module.exports = {
  data: () => ({
    activeIndex: 0
  }),
  methods: {
    handleTabClicked(tab, index) {
      this.activeIndex = index
    }
  }
 }
</script>

# Tabs API

Para utilizar o CTabs é preciso primeiro importar o componente.

import { CTabs } from '@estrategiahq/coruja-web-ui';
1

# Props

As props disponíveis para configurar o componente são:

NomeTipoDefaultDescrição
activeIndexnumber0Define a aba ativa.
tabsarray[]Array com os elementos da tab. Dentro do array é passado um objeto contendo os parametros: icon[string], label[string], handler[function] e iconFilled[boolean] que é opcional.
alignstringcenterDefine o alinhamento das tabs, podendo ser center ou left.

# Events

Eventos emitidos por esse componente:

NomeTipoDescrição
@clickfunctionEmitido quando uma tab é clicada, acompanha dois parametros: tab clicada e índice.