如何正确使用bootstrap-vue的面板? [英] How properly to use bootstrap-vue's panel?
问题描述
我正在尝试将项目从vue-strap迁移到bootstrap-vue.我在迁移面板时遇到麻烦.当前的vue-strap代码:
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>
搜索表单
是我的组件.据我了解,我需要使用bootstrap-vue的折叠(实际上没有折叠),如文档.但是,看来我尝试过的每种代码变体都无法正常工作.使用vue-bootstrap面板的正确方法是什么?
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?
推荐答案
您的页眉(打开面板的按钮)由以下组成:
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>
b按钮组件具有指令 vb-toggle. accordion-2 ,其称为 b-collapse 组件,其中 id = accordion-2 .
The b-button component have a directive v-b-toggle.accordion-2 and it's call the b-collapse component with id = accordion-2.
在组件 b-card-body 内,您可以传递组件(像孩子一样).参见示例:
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>
这篇关于如何正确使用bootstrap-vue的面板?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!