Установка mdbvue - Vue + Bootstrap Material Design

Категория: VueJS

Установка mdbvue - Vue + Bootstrap Material Design

npm i -S mdbvue
# + mdbvue@5.1.0

Подключаем файл стилей:

import 'mdbvue/build/css/mdb.css';

Далее подключаем компоненты по мере надобности.

MDBvue Tabs

Компоненты:

import Vue from 'vue';
import 'mdbvue/build/css/mdb.css';
//import 'mdbvue/src/components/Waves.css';

Vue.component('mdb-container', require('mdbvue/src/components/Container').default);
Vue.component('mdb-card', require('mdbvue/src/components/Card').default);
Vue.component('mdb-card-header', require('mdbvue/src/components/CardHeader').default);
Vue.component('mdb-card-body', require('mdbvue/src/components/CardBody').default);

Vue.component('mdb-tab', require('mdbvue/src/components/Tab').default);
Vue.component('mdb-tab-item', require('mdbvue/src/components/TabItem').default);
Vue.component('mdb-tab-content', require('mdbvue/src/components/TabContent').default);
Vue.component('mdb-tab-pane', require('mdbvue/src/components/TabPane').default);

Разметка:

<div class="row">
    <div class="col">
        <mdb-card class="text-center">
            <mdb-card-header style="border-bottom: none">
                <mdb-tab default class="card-header-tabs nav-justified">
                    <mdb-tab-item :active="active==0" @click.native.prevent="active=0"><h4 class="h5 mb-0">One Tab</h4></mdb-tab-item>
                    <mdb-tab-item :active="active==1" @click.native.prevent="active=1"><h4 class="h5 mb-0">Two Tab</h4></mdb-tab-item>
                </mdb-tab>
            </mdb-card-header>
            <mdb-card-body>
                <mdb-tab-content>
                    <mdb-tab-pane class="fade" key="show1" v-if="active==0">
                        One Tab Content
                    </mdb-tab-pane>
                    <mdb-tab-pane class="fade" key="show2" v-if="active==1">
                        Two Tab Content
                    </mdb-tab-pane>
                </mdb-tab-content>
            </mdb-card-body>
        </mdb-card>
    </div>
</div>
Примечание

При проблемах с разворачиванием контента могут понадобится дополнительные стили:

<style scoped>
    /* @bug Не устанавливается высота блока */
    .tab-pane { /*.tabset, .tab-content, .tabbable*/
        height: 100% !important;
    }
    .tab-pane.active { opacity: 1; }
</style>

#mdbvue

категория: VueJS