CODEWITHSUNDEEP
javascriptvue.jsvuejs2bootstrap-vue
vesii
vesii

Reputation: 3128

How properly to use bootstrap-vue's panel?

I'm trying to migrate my project from vue-strap to bootstrap-vue. I have trouble to migrate panel. The current vue-strap code:

<div class="col-sm-3">
    <panel is-open type="info">
        <table slot="header"><th>Search:</th></table>
        <search-form :fieldList="fieldList" :customs-max-num="customsMaxNum" :data-types="dataTypes" />
    </panel>
</div>

The search-form is my component. As I understand, I need to use the collapse of bootstrap-vue (without actually collapsing), as shown in the docs. But it looks like every variant of code I tried, did not work. What is the proper way to use the vue-bootstrap's panel?

Upvotes: 0

Views: 875

Answers (1)

Lucas Sim&#245;es
Lucas Sim&#245;es

Reputation: 657

Your Header (button that opens the panel) is composed by:

<b-card-header header-tag="header" class="p-1" role="tab">
   <b-button block href="#" v-b-toggle.accordion-2 variant="info">Accordion 2</b-button>
</b-card-header>

The b-button component have a directive v-b-toggle.accordion-2 and it's call the b-collapse component with id = accordion-2.

Inside the component b-card-body, you can pass your component (like a children). See the sample:

<b-card no-body class="mb-1">
  <b-card-header header-tag="header" class="p-1" role="tab">
    <b-button block href="#" v-b-toggle.accordion-2 variant="info">Click Here</b-button>
  </b-card-header>
  <b-collapse id="accordion-2" accordion="my-accordion" role="tabpanel">
    <b-card-body>
      <search-form :fieldList="fieldList" :customs-max-num="customsMaxNum" :data-types="dataTypes" />
    </b-card-body>
  </b-collapse>
</b-card>

Upvotes: 1

Related Questions