lunrtick / vue-bulma-accordion Goto Github PK

I'm trying to figure out how I can open and close an accordion using javascript. What's the code for this or does it even exist?

I am unable to set different background color to header, content and footer. Is this option not available or is there some way to achieve this?

Hello, it doesn't recognize my items when I use v-for. The Items get displayed but i cant open any of them.

My Error: Error:

There are only 0 AccordionItems, 1 is out of bounds. [indexing from 1]

My Code:
<BulmaAccordion dropdown initial-open-item="1" :icon="'custom'" :caretAnimation="{ duration: '.6s', timerFunc: 'ease-in-out' }" :slide="{ duration: '.9s', timerFunc: 'ease' }" > <BulmaAccordionItem v-for="(role, index) in roles" :key="index"> <div slot="title"> "Title" </div> <div slot="content"> "Content" </div> </BulmaAccordionItem> </BulmaAccordion>

Does anyone know what I'm doing wrong?

Hello,

Can you put an example on how to use :initialopenitem or :initialopenitems?

It's not working

Thanks,

Let's say I had something in the lines of this where only when showMembership is true, then the section with accordion will show. Well what happens is the accordion will show but always in a closed state. How I can force it to always show open?

<section class="accordions box notification is-info" v-show="showMembership">
  <bulma-accordion dropdown icon="plus-minus" :initial-open-items="[1]"> 
    <bulma-accordion-item>
      SOME CONTENT
    </bulma-accordion-item>
  </bulma-accordion>
</section>

<script>
export default {
  data: function() {
    return {
      showMembership: false
    };
    mounted() {
      this.$events.$on("someEvent", element => {
        this.showMembership = true;
      });
    }
  }
</script>

Is anyone else having issues where the slide is sliding underneat any content below the accordion?

Also the icon is not showing in Chrome

subj

Is it possible to remove the card-header-icon placeholder that appears to the right of the BulmaAccordionItem title?

Thanks for building this!

I've been trying to get this accordion to work with Gridsome but there seem to be some weird layout and stylistic bugs. I've also tried using the <ClientOnly> option in Gridsome but that doesn't work too.

Reproduction: CodeSandbox

Hi! First of all, thank you for this library. I've been using it for long before 0.4 and was working perfectly. I just updated to 0.4.7 and I'm getting "document is not defined" around this line: https://github.com/Lunrtick/vue-bulma-accordion/blob/master/dist/vue-bulma-accordion.umd.js#L283

I'm using this on Vuepress, which renders everything at build time using Node and obviously document object is not defined. A possible solution is wrapping bulma-accordion in <ClientOnly> so it doesn't render at build time, but then all the text shown in the accordion cannot be indexed by search engines. I guess this is related to Rollup but there should be a way to avoid calling undefined objects in SSR 🤔

Thanks!

I used the code included in the docs
<BulmaAccordion :icon="'custom'" :caret-animation="{ duration: '.6s', timerFunc: 'ease-in-out', }" :slide="{ duration: '.9s', timerFunc: 'ease', }" :initial-open-item="1" :dropdown="false" >

<BulmaAccordion :icon="'custom'" :caret-animation="{ duration: '.6s', timerFunc: 'ease-in-out', }" :slide="{ duration: '.9s', timerFunc: 'ease', }" :initial-open-item="2" :dropdown="false" > <!-- add as many of these items as you need - fill them with content via the slots --> <BulmaAccordionItem> <h4 slot="title">A title with content</h4> <i slot="icon" class="material-icons">more_vert</i> <p slot="content"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus eos illo expedita asperiores rem iure aliquid dolore, pariatur dignissimos, minima inventore? Minima voluptatum nulla, error omnis laboriosam voluptatibus rem aperiam. </p> </BulmaAccordionItem> <BulmaAccordionItem> <h4 slot="title">A title with content</h4> <i slot="icon" class="material-icons">more_vert</i> <p slot="content"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus eos illo expedita asperiores rem iure aliquid dolore, pariatur dignissimos, minima inventore? Minima voluptatum nulla, error omnis laboriosam voluptatibus rem aperiam. </p> </BulmaAccordionItem> </BulmaAccordion>

and the weird thing that I added only two items , but instead in the vue devtools i can see 3 items

so initialOpenItem is not working correctly and i had to give it 2 instead of 1 to be default opened

can you help me please ?

Hello!

So nice component!

Tell me, please. Can I hide a footer-block? Native and using standard abilities of the component?
Some option, like?

thanks :]

Hi, I'm using "vue-bulma-accordion": "^0.5.2", but the icon property doesn't appear on the accordion.

Everything else works just fine (slide animation and dropdown).

<bulma-accordion
  :slide="{ duration: '300ms', timerFunc: 'ease' }"
  :caret-animation="{ duration: '100ms', timerFunc: 'ease' }"
  dropdown
  :icon="'plus-minus'"
>
  <bulma-accordion-item>
    <p slot="title">Some Title</p>
    <p slot="content">Some Text</p>
  </bulma-accordion-item>
<bulma-accordion />

I've tried the default caret icon, plus-minus icon, using custom icon, but it doesn't render any icon.

I have no CSS classes overriding the component.

Am I the only one here with this bug?

I'm using "nuxt": "^2.14.1" with SSR. Some problems show up in the console, and disappears if I wrap everything in a <ClientOnly> tag, just like #9.

Hello again! 😉

Can I set open some DropdownItems, when Accordion component mounts?
For example, set open 1st 3rd item and set closed 2nd item?

omg, I forgot to star you :) .. now fix this

Hi,

I'm facing trouble in expanding the accordion on click. If I click on the accordion, no action takes place. It's working perfectly in my other component. Just not working in this component.

Here is the codepen of accordion not expanding:
https://codepen.io/mapkbalaji/pen/GePpOQ

Here is the codepen of accordion working:
https://codepen.io/mapkbalaji/pen/EMGVLK

I don't know the difference between these two, as they are the same but one is working and the other doesn't.

Thanks.

I can't use the component after the update to 0.4.*

It says:

Failed to compile. ./node_modules/vue-bulma-accordion/dist/vue-bulma-accordion.common.js
Module build failed: Error: ENOENT: no such file or directory, open '/src/node_modules/vue-bulma-accordion/dist/vue-bulma-accordion.common.js'

I use the following in my component:
import { BulmaAccordion, BulmaAccordionItem } from 'vue-bulma-accordion';

Am I doing something wrong?