Создание сложной панели с использованием Bootstrap - Vue - PullRequest
Новая
       25

Создание сложной панели с использованием Bootstrap - Vue

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

Основываясь на моем предыдущем вопросе о Vue - Bootstrap панели Я начал использовать следующий код для создания панели: 


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

Как видите, я кнопка в качестве заголовка. Но что, если я хочу сделать что-то более сложное? Например, я хочу создать следующий заголовок:

enter image description here

Как видите, этот заголовок содержит заголовок и кнопку. Если я сделаю это, как раньше, у меня будет кнопка и текст на кнопке? Не чувствует себя хорошо. Что у меня сейчас есть: 

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

Как это выглядит:

enter image description here

Как создать такую ​​панель?

1 Ответ

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

Вы можете добиться этого, используя display: flex в заголовке. Добавьте класс d-flex к заголовку и оберните вашу кнопку в div и присвойте ему класс ml-auto, этот класс применяет стиль margin-left: auto;

Использование margin-left: auto внутри display:flex заполнит пустое пространство с полем, подталкивая содержимое в обратном направлении. 

<b-card no-body class="mb-1">
  <b-card-header header-tag="header" role="tab" class="d-flex">
    <div class="title align-left" height="100px">
      <strong>Data run:</strong> Title<br> 
      Subtitle
    </div>
    <div class="ml-auto">
      <button class="btn btn-info">Go Back</button>
    </div>
  </b-card-header>
</b-card>


new Vue({
  el: "#app"
});
<link href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="//unpkg.com/bootstrap-vue@2.7.0/dist/bootstrap-vue.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.7.0/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-card no-body class="mb-1">
    <b-card-header header-tag="header" role="tab" class="d-flex">
      <div class="title align-left" height="100px">
        <strong>Data run:</strong> Title<br> 
        Subtitle
      </div>
      <div class="ml-auto">
        <button class="btn btn-info">Go Back</button>
      </div>
    </b-card-header>
  </b-card>
</div>
...