Как правильно пользоваться панелью bootstrap - vue? - PullRequest
Новая
       34

Как правильно пользоваться панелью bootstrap - vue?

0 голосов
/ 17 марта 2020

Я пытаюсь перенести свой проект с vue -strap на bootstrap - vue. У меня проблемы с переносом панели . Текущий код vue -strap: 

<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>

search-form - это мой компонент. Как я понимаю, мне нужно использовать свертку bootstrap - vue (без фактического свертывания), как показано в документах . Но похоже, что каждый вариант кода, который я пробовал, не работал. Как правильно использовать панель vue - bootstrap?

1 Ответ

1 голос
/ 17 марта 2020

Ваш заголовок (кнопка, открывающая панель) состоит из: 

<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>

Компонент b-button имеет директиву vb-toggle. гармошка -2 и это называется компонент b-collapse с id = accordion-2 .

Внутри компонента b-card-body , вы можете передать свой компонент (как дети). Смотрите образец: 

<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>
...