gerasimvol / vue-faq-accordion Goto Github PK
View Code? Open in Web Editor NEW❓ Simple and smooth Vue.js accordion component. Perfect for your FAQ section
Home Page: https://www.npmjs.com/package/vue-faq-accordion
License: MIT License
❓ Simple and smooth Vue.js accordion component. Perfect for your FAQ section
Home Page: https://www.npmjs.com/package/vue-faq-accordion
License: MIT License
You did a great job, i really like it!
But it's still sketchy as a npm module. There is no real implementation, no how-to. You will get way more attention by improving this stuff. ;)
Thanks for the good vue component!
Hey! Using your wonderfull plugin for my project. I have a question, how can i change width of faq-wrapper? Thanks!
can you add content as v-html or any settings
First of all, thanks for this component, it's awesome!
I want to default open the first question in my tab. initialTab prop works fine, and initialQuestionIndex mostly works, EXCEPT when initialQuestionIndex = 0. In this case, nothing opens by default - expected behavior is the first question opens.
My Netlify build is failing bellow is the failed information, any idea what I am not doing wrong? looks like something with faq-accordion @gerasimvol
5:20:02 PM: Could not generate HTML for "/":
5:20:02 PM: ReferenceError: document is not defined
5:20:02 PM: at addStyle (node_modules/vue-faq-accordion/dist/vue-faq-accordion.esm.js:262:0)
5:20:02 PM: at assets/js/vendors~page--src--pages--index-vue.10463f7f.js:764:42
5:20:02 PM: at a.__vue_inject_styles__ (node_modules/vue-faq-accordion/dist/vue-faq-accordion.esm.js:411:0)
5:20:02 PM: at a.hook (node_modules/vue-faq-accordion/dist/vue-faq-accordion.esm.js:217:0)
5:20:02 PM: at Rt (/opt/build/repo/node_modules/vue/dist/vue.runtime.common.prod.js:6:11201)
5:20:02 PM: at Je (/opt/build/repo/node_modules/vue/dist/vue.runtime.common.prod.js:6:25232)
5:20:02 PM: at a.e._init (/opt/build/repo/node_modules/vue/dist/vue.runtime.common.prod.js:6:32637)
5:20:02 PM: at new a (/opt/build/repo/node_modules/vue/dist/vue.runtime.common.prod.js:6:30429)
5:20:02 PM: at Wi (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:66558)
5:20:02 PM: at oo (/opt/build/repo/node_modules/vue-server-renderer/build.prod.js:1:70788)
5:20:03 PM: error Command failed with exit code 1.
5:20:03 PM: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
5:20:03 PM:
5:20:03 PM: ────────────────────────────────────────────────────────────────
5:20:03 PM: "build.command" failed
5:20:03 PM: ────────────────────────────────────────────────────────────────
5:20:03 PM:
5:20:03 PM: Error message
5:20:03 PM: Command failed with exit code 1: yarn build
5:20:03 PM:
5:20:03 PM: Error location
5:20:03 PM: In Build command from Netlify app:
5:20:03 PM: yarn build
5:20:03 PM:
5:20:03 PM: Resolved config
5:20:03 PM: build:
5:20:03 PM: command: yarn build
5:20:03 PM: commandOrigin: ui
5:20:03 PM: publish: /opt/build/repo/dist
5:20:03 PM: publishOrigin: ui
5:20:03 PM: Caching artifacts
5:20:03 PM: Started saving node modules
5:20:03 PM: Finished saving node modules
5:20:03 PM: Started saving build plugins
5:20:03 PM: Finished saving build plugins
5:20:03 PM: Started saving yarn cache
5:20:07 PM: Finished saving yarn cache
5:20:07 PM: Started saving pip cache
5:20:07 PM: Finished saving pip cache
5:20:07 PM: Started saving emacs cask dependencies
5:20:07 PM: Finished saving emacs cask dependencies
5:20:07 PM: Started saving maven dependencies
5:20:07 PM: Finished saving maven dependencies
5:20:07 PM: Started saving boot dependencies
5:20:07 PM: Finished saving boot dependencies
5:20:07 PM: Started saving rust rustup cache
5:20:07 PM: Finished saving rust rustup cache
5:20:07 PM: Started saving go dependencies
5:20:07 PM: Finished saving go dependencies
5:20:09 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
5:20:09 PM: Creating deploy upload records
5:20:09 PM: Failing build: Failed to build site
5:20:09 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2
5:20:09 PM: Finished processing build request in 1m26.615298958s
Awesome library here. I am currently using this library in an application I am working on, please is it possible to style the title and values? like font-size, font-weight e.t.c
How can i set view to a particular tab and question when rendered.
I would like to control what tab and questions are shown via some props. changing those props should update the view.
Hi, thank you for this awesome vue-faq-accordion.
Is it possible to pass a list of components as properties?
Example:
export default { components: { VueFaqAccordion }, data () { return { myItems: [ { title: 'Title for a Component content', component: 'MyComponent1', category: 'Tab-1' }, { title: 'Title for a Component content', component: 'MyComponent2', category: 'Tab-1' }, { title: 'Title for a Component content', component: 'MyComponent3', category: 'Tab-2' }, { title: 'Title for a Component content', component: 'MyComponent4', category: 'Tab-2' } ] } } }
I think this component can be used for more things besides the frequently asked questions.
Hello @gerasimvol,
Really great work, I'm trying to change the Title colour for a specific item in accordion. This is not about changing colour during hovering. Just checking if can use v-if
for specif items and change the colour of that items' Title.
Thanks in advance.
How do I customize the open and close icons which are currently plus and times icons to chevron up and chevron down
Hye gerasimvol,
Very nice lib with the system of navbar, thanks !
I noticed that the content filled into value, can only be stringed and are placed inside a paragraph element.
Is there a way to place a video as a content or another component to display in the accordion ?
Thanks for your help.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.