# Accordion

Accordion component. Can be set as one or multiple opened, with or without icon.

# Most common usage scenario

<template>
  <SfAccordion
    :open="open"
    :multiple="multiple"
    :show-chevron="showChevron"
    :transition="transition"
  >
    <SfAccordionItem
      v-for="accordion in accordions"
      :key="accordion.header"
      :header="accordion.header"
    >
      <SfList>
        <SfListItem v-for="item in accordion.items" :key="item.label">
          <SfMenuItem :label="item.label" :count="item.count" />
        </SfListItem>
      </SfList>
    </SfAccordionItem>
  </SfAccordion>
</template>
<script>
import { SfAccordion } from "@storefront-ui/vue";
import { SfList } from "@storefront-ui/vue";
import { SfMenuItem } from "@storefront-ui/vue";
export default {
  components: {
    SfAccordion,
    SfList,
    SfMenuItem,
  },
  data() {
    return {
      accordions: [
        {
          header: "Clothing",
          items: [
            { label: "All", count: "280" },
            { label: "Skirts", count: "11" },
            { label: "Dresses", count: "32" },
          ],
        },
        {
          header: "Accessories",
          items: [
            { label: "All", count: "80" },
            { label: "Belts", count: "101" },
            { label: "Bag", count: "2" },
          ],
        },
        {
          header: "Shoes",
          items: [
            { label: "All", count: "2" },
            { label: "Trainers", count: "22" },
            { label: "Sandals", count: "55" },
          ],
        },
      ],
      open: "Clothing",
      multiple: false,
      showChevron: false,
      transition: "fade",
    };
  },
};
</script>

# Props

  • open

    • Opens an accordion item based on title
    • type: string|array
    • defaultValue: ""
  • firstOpen

    • Opens the first accordion item if set to "true"
    • type: boolean
    • defaultValue: false
  • multiple

    • Allows to open multiple accordion items if set to "true"
    • type: boolean
    • defaultValue: false
  • transition

    • Overlay transition effect
    • type: string
    • defaultValue: "fade"
  • showChevron

    • type: boolean
    • defaultValue: true

# Slots

  • default
    • default slot to setup SfAccordionItem elements

# Events

None.

# CSS modifiers

  • .sf-accordion-item__header--open
  • .sf-accordion--has-chevron

# CSS custom properties (variables)

# Overridden other components CSS variables

  • --accordion-item-header-border-width
  • --accordion-item-header-color
  • --accordion-item-header-padding
  • --accordion-item-header-font
  • --h4-font-size
  • --accordion-item-header-font
  • --font-normal
  • --accordion-item-content-border-width
  • --accordion-item-content-padding
  • --accordion-item-chevron-display

You can override CSS variables values bound to this component.

# Internal components

# AccordionItem

# Props

  • header
    • type: string
    • defaultValue: ""

# Slots

  • header

    • bindings: header, isOpen, accordionClick, showChevron
  • default

# Events

None.

# CSS modifiers

None.

# CSS variables

None.

# Play with this component

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