After exploring the Vue-Bootstrap panel in my previous question, I implemented the following code snippet to generate a panel:
<b-card no-body class="mb-1">
<b-card-header header-tag="header" class="p-1" role="tab">
<b-button block disabled href="#" v-b-toggle.accordion-1 variant="info">Search:</b-button>
</b-card-header>
<b-collapse id="accordion-1" visible 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>
While I managed to create a basic header with a button, I now wish to make it more complex. Specifically, I aim to replicate the design of this header:
https://i.sstatic.net/JWnTE.png
The image above showcases a header with both a title and a button. If I were to follow my previous approach, the text and the button would be displayed on the same line. This arrangement does not seem ideal. Here's what I currently have:
<b-card no-body class="mb-1">
<b-card-header header-tag="header" class="p-1" role="tab">
<div class="title align-left" height="100px">
<button class="pull-right btn btn-info" @click="goBack()">Go Back</button>
<strong>Data run:</strong>
{{ title() }} <br> {{ subtitle() }}
</div>
</b-card-header>
<!-- BODY -->
</b-card>
Here is how it appears currently:
https://i.sstatic.net/zIBQ2.png
How can I go about creating a panel with such a header?