# Tabs

Component with tab-related content.

WARNING

There may be an error related to SfTab removal (you can find the associated issue HERE). The vue-fragment library we use in SfTab is probably no longer maintained, because the fragments will be a native feature in Vue 3. Storefront UI will be rewritten to Vue 3 soon, this error should no longer occur in the future.

# Most common usage scenario

<template>
  <SfTabs
    :open-tab="openTab"
    :tabMaxContentHeight="tabMaxContentHeight"
    :tabShowText="tabShowText"
    :tabHideText="tabHideText"
  >
    <SfTab v-for="tab in tabs" :key="tab.title" :title="tab.title">
      {{ tab.content }}
    </SfTab>
  </SfTabs>
</template>
<script>
import { SfTabs } from "@storefront-ui/vue";
export default {
  components: {
    SfTabs,
  },
  data() {
    return {
      tabs: [
        {
          title: "Description",
          content:
            "The Karissa V-Neck Tee features a semi-fitted shape that's flattering for every figure. You can hit the gym with confidence while it hugs curves and hides common 'problem' areas. Find stunning women's cocktail dresses and party dresses. The Karissa V-Neck Tee features a semi-fitted shape that's flattering for every figure. You can hit the gym with confidence while it hugs curves and hides common 'problem' areas. Find stunning women's cocktail dresses and party dresses. The Karissa V-Neck Tee features a semi-fitted shape that's flattering for every figure. You can hit the gym with confidence while it hugs curves and hides common 'problem' areas. Find stunning women's cocktail dresses and party dresses. The Karissa V-Neck Tee features a semi-fitted shape that's flattering for every figure. You can hit the gym with confidence while it hugs curves and hides common 'problem' areas. Find stunning women's cocktail dresses and party dresses. The Karissa V-Neck Tee features a semi-fitted shape that's flattering for every figure. You can hit the gym with confidence while it hugs curves and hides common 'problem' areas. Find stunning women's cocktail dresses and party dresses.",
        },
        {
          title: "Read reviews",
          content:
            "The Larissa V-Neck Tee features a semi-fitted shape that's flattering for every figure. You can hit the gym with confidence while it hugs curves and hides common 'problem' areas. Find stunning women's cocktail dresses and party dresses.",
        },
        {
          title: "Additional Information",
          content:
            "The Marissa V-Neck Tee features a semi-fitted shape that's flattering for every figure. You can hit the gym with confidence while it hugs curves and hides common 'problem' areas. Find stunning women's cocktail dresses and party dresses.",
        },
      ],
      openTab: 1,
      tabMaxContentHeight: "6.25rem",
      tabShowText: "show",
      tabHideText: "hide",
    };
  },
};
</script>

# Props

  • openTab

    • Which tab should be open at the beginning
    • type: number
    • defaultValue: 1
  • tabMaxContentHeight

    • Max height of visible content
    • type: string
    • defaultValue: ""
  • tabShowText

    • Text for button showing content
    • type: string
    • defaultValue: "show"
  • tabHideText

    • Text for button hiding content
    • type: string
    • defaultValue: "hide"

# Slots

  • default
    • Default. Here you should pass your tabs

# Events

None.

# CSS modifiers

  • .sf-tabs__title--active

# CSS custom properties (variables)

  • --tabs-title-z-index
  • --tabs-title-display
  • --tabs-title-flex
  • --tabs-title-margin
  • --tabs-title-padding
  • --tabs-title-background
  • --tabs-title-border
  • --tabs-title-border-width
  • --tabs-title-color
  • --tabs-title-font
  • --tabs-title-font-weight
  • --tabs-title-font-size
  • --tabs-title-font-line-height
  • --tabs-title-font-family
  • --tabs-content-order
  • --tabs-content-border
  • --tabs-content-border-width
  • --tabs-content-color
  • --tabs-content-font
  • --tabs-content-font-weight
  • --tabs-content-font-size
  • --tabs-content-font-line-height
  • --tabs-content-font-family
  • --tabs-content-tab-padding
  • --tabs-chevron-display

# Overridden other components CSS variables

  • --tabs-title-border-color

You can override CSS variables values bound to this component.

# Internal components

# Tab

# Props

  • title
    • Tab title.
    • type: string
    • defaultValue: ""

# Slots

  • title

    • Title. Here you should pass a title tab
    • bindings: tabClick, isActive, title
  • default

    • Default. Here you should pass your tab content

# Events

None.

# CSS modifiers

None.

# CSS variables

None.

# Play with this component

See all available configurations and play with this component on Storybook.