vue-faq-accordion

    1.6.2 • Public • Published

    vue-faq-accordion

    npm npm

    🗃 Simple and smooth vue accordion. Perfect for your FAQ section.

    FAQ Section demo

    💡 Live demo here

    🛠 Install

    npm i vue-faq-accordion
    yarn add vue-faq-accordion

    🚀 Usage

    <template>
      <VueFaqAccordion 
        :items="myItems"
      />
    </template>
     
    <script>
    import VueFaqAccordion from 'vue-faq-accordion'
     
    export default {
      components: {
        VueFaqAccordion
      },
      data () {
        return {
          myItems: [
              {
                title: 'How many time zones are there in all?',
                value: 'Given a 24-hour day and 360 degrees of longitude around the Earth',
                category: 'Tab-1'
              },
              {
                title: 'How long is a day and year on Venus?',
                value: 'Venus takes 224.7 Earth days to complete one orbit around the Sun.',
                category: 'Tab-2'
              },
              {
                title: 'What animal smells like popcorn?',
                value: 'Binturongs smell like popcorn.',
                category: 'Tab-2'
              }
            ]
        }
      }
    }
    </script>

    ⚙ Props

    props: {
     
      /**
       * Array of items
       * Object style {questionProperty: string, answerProperty: string, tabName: string}
       * You can change object keys names using other props (questionProperty, answerProperty, tabName)
       */
      items: {
        type: Array,
        required: true
      },
     
      /**
       * Key name of object in items array for specifying title of question
       */
      questionProperty: {
        type: String,
        default: 'title'
      },
      
      /**
       * Key name of object in items array for specifying content text of open question
       */
      answerProperty: {
        type: String,
        default: 'value'
      },
      
      /**
       * Key name of object in items array for specifying navigation tab name
       */
      tabName: {
        type: String,
        default: 'category'
      },
      
     /**
      * Color for hover and active tab/question
      * possible format: 'red', '#F00', 'rgba(255, 0, 0, 1)'
      */
      activeColor: {
        type: String,
        default: '#D50000'
      },
      
      /**
       * Color for borders
       */
      borderColor: {
        type: String,
        default: '#9E9E9E'
      },
      
      /**
       * Color for fonts
       */
      fontColor: {
        type: String,
        default: '#000000'
      },
     
      /**
       * Opened by default tabName (category)
       */
      initialTab: {
        type: String,
        default: null
      },
     
      /**
       * Opened by default question
       * All closed by default
       */
      initialQuestionIndex: {
        type: Number,
        default: null
      }
      
    }

    🔥 Events

    Event Payload Description
    categorySelect { categoryIndex } Emitted on category change
    itemSelect { itemIndex } Emitted on item open

    📎 Slots

    You can define own item markup via slots:

    <VueFaqAccordion
      :items="myItems"
      v-slot="itemData"
    >
      <img :src="itemData.imageSrc">
    </VueFaqAccordion>
    • item data is available via scoped slot (v-slot="itemData")
    • don't add margins to this element (animation become choppy)

    Install

    npm i vue-faq-accordion

    DownloadsWeekly Downloads

    1,243

    Version

    1.6.2

    License

    MIT

    Unpacked Size

    546 kB

    Total Files

    17

    Last publish

    Collaborators

    • gerasim_vol