<div><!-- Using modifiers --><b-buttonv-b-toggle.collapse-2class="m-1">Toggle Collapse</b-button><!-- Using value --><b-buttonv-b-toggle="'collapse-2'"class="m-1">Toggle Collapse</b-button><!-- Element to collapse --><b-collapseid="collapse-2"><b-card>I am collapsible content!</b-card></b-collapse></div><!-- b-collapse-usage.vue -->
初始可见性(开始扩展)
要使 <b-collapse> 最初显示,请设置 visible 属性:
<div><b-buttonv-b-toggle.collapse-3class="m-1">Toggle Collapse</b-button><b-collapsevisibleid="collapse-3"><b-card>I should start open!</b-card></b-collapse></div><!-- b-collapse-visible.vue -->
<div><!-- Single button triggers two "<b-collapse>" components --><b-buttonv-b-toggle.collapse-a.collapse-b>Toggle Both Collapse A and B</b-button><!-- Elements to collapse --><b-collapseid="collapse-a"class="mt-2"><b-card>I am collapsible content A!</b-card></b-collapse><b-collapseid="collapse-b"class="mt-2"><b-card>I am collapsible content B!</b-card></b-collapse></div><!-- b-collapse-trigger-multiple.vue -->
<template><divrole="tablist"><b-cardno-bodyclass="mb-1"><b-card-headerheader-tag="header"class="p-1"role="tab"><b-buttonblockhref="#"v-b-toggle.accordion-1variant="info">Accordion 1</b-button></b-card-header><b-collapseid="accordion-1"visibleaccordion="my-accordion"role="tabpanel"><b-card-body><b-card-text>I start opened because <code>visible</code> is <code>true</code></b-card-text><b-card-text>{{ text }}</b-card-text></b-card-body></b-collapse></b-card><b-cardno-bodyclass="mb-1"><b-card-headerheader-tag="header"class="p-1"role="tab"><b-buttonblockhref="#"v-b-toggle.accordion-2variant="info">Accordion 2</b-button></b-card-header><b-collapseid="accordion-2"accordion="my-accordion"role="tabpanel"><b-card-body><b-card-text>{{ text }}</b-card-text></b-card-body></b-collapse></b-card><b-cardno-bodyclass="mb-1"><b-card-headerheader-tag="header"class="p-1"role="tab"><b-buttonblockhref="#"v-b-toggle.accordion-3variant="info">Accordion 3</b-button></b-card-header><b-collapseid="accordion-3"accordion="my-accordion"role="tabpanel"><b-card-body><b-card-text>{{ text }}</b-card-text></b-card-body></b-collapse></b-card></div></template><script>exportdefault {
data() {
return {
text: `
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon
tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore
wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
synth nesciunt you probably haven't heard of them accusamus labore VHS.
`
}
}
}
</script><!-- b-accordion.vue -->
<div><b-buttonv-b-toggle.my-collapse><spanclass="when-opened">Close</span><spanclass="when-closed">Open</span> My Collapse
</b-button><b-collapseid="my-collapse"><!-- Content here --></b-collapse></div>