gerasimvol / Vue Faq Accordion
Licence: mit
❓ Simple and smooth Vue.js accordion component. Perfect for your FAQ section
Stars: ✭ 69
Projects that are alternatives of or similar to Vue Faq Accordion
Vue Croppa
A simple straightforward customizable mobile-friendly image cropper for Vue 2.0.
Stars: ✭ 942 (+1265.22%)
Mutual labels: vue-component
Kokk
Create a beautiful doc from a markdown file. You can insert a vue component into the doc as well.
Stars: ✭ 54 (-21.74%)
Mutual labels: vue-component
Elementui Multiselect
基于element ui、vue的多选框,支持选项disabled,支持分页,输入框过滤,可显示或隐藏全选和清空项
Stars: ✭ 14 (-79.71%)
Mutual labels: vue-component
Vue Countto
It's a vue component that will count to a target number at a specified duration https://panjiachen.github.io/countTo/demo/
Stars: ✭ 954 (+1282.61%)
Mutual labels: vue-component
Vue Responsive Calendar
A responsive calendar component for Vue.js
Stars: ✭ 17 (-75.36%)
Mutual labels: vue-component
Vue Numeric Input
Number input component with controls
Stars: ✭ 63 (-8.7%)
Mutual labels: vue-component
Vue Social Sharing
A renderless Vue.js component for sharing links to social networks, compatible with SSR
Stars: ✭ 1,071 (+1452.17%)
Mutual labels: vue-component
Vue Echarts V3
Vue.js(v2.x+) component wrap for ECharts.js(v3.x+)
Stars: ✭ 884 (+1181.16%)
Mutual labels: vue-component
Vue Async Modal
Flexible modal component for Vue with ability of asynchronous lazy loading
Stars: ✭ 30 (-56.52%)
Mutual labels: vue-component
Vue Meeting Selector
This component is inspired from the meeting selector from doctolib with the power of Vuejs components.
Stars: ✭ 44 (-36.23%)
Mutual labels: vue-component
Serialized Editor
A Vue.js component for editing data that has been serialized in PHP
Stars: ✭ 54 (-21.74%)
Mutual labels: vue-component
V Distpicker
✨ A flexible, highly available district picker for picking provinces, cities and districts of China.
Stars: ✭ 919 (+1231.88%)
Mutual labels: vue-component
Navscroll Js
Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.
Stars: ✭ 41 (-40.58%)
Mutual labels: vue-component
Primevue
The Most Complete Vue UI Component Library
Stars: ✭ 1,085 (+1472.46%)
Mutual labels: vue-component
Ionic2accordion
This is a simple variant implementation of an accordion within ionic 2
Stars: ✭ 44 (-36.23%)
Mutual labels: accordion
vue-faq-accordion
🗃 Simple and smooth vue accordion. Perfect for your FAQ section.
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)
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].