bootstrap-vue/src/components/tabs/fixtures/tabs.html

BootstrapVue provides one of the most comprehensive implementations of Bootstrap 4 components and grid system for Vue.js and with extensive and automated WAI-ARIA accessibility markup.

<div id="app">

    <!-- Example #1 -->

    <!-- Tabs with card integration -->
    <b-card no-block>
        <b-tabs small card ref="tabs" v-model="tabIndex">
            <b-tab title="General">
                I'm the first fading tab
            </b-tab>
            <b-tab title="Edit profile">
                I'm the second tab
                <b-card>I'm the card in tab</b-card>
            </b-tab>
            <b-tab title="Premium Plan" disabled>
                Sibzamini!
            </b-tab>
        </b-tabs>

    </b-card>

    <!-- Control buttons-->
    <div class="text-center">
        <b-button-group class="mt-2">
            <b-btn @click="$refs.tabs.previousTab()">Previous</b-btn>
            <b-btn @click="$refs.tabs.nextTab()">Next</b-btn>
        </b-button-group>
        <br>
        <span class="text-muted">Current Tab: {{tabIndex}}</span>
    </div>

    <br><br>

    <!-- Example #2 -->

    <b-card no-block>
        <b-tabs card>
            <!-- Render Tabs -->
            <b-tab :title="`Tab ${i}`" v-for="i in tabs" :key="i">
                Tab Contents {{i}}
                <b-btn size="sm" variant="danger" class="float-right"
                       @click="()=>closeTab(i)">Close tab
                </b-btn>
            </b-tab>

            <!-- Newtab Button (Using tabs slot) -->
            <b-nav-item slot="tabs" @click.prevent="newTab" href="#">
                +
            </b-nav-item>

            <!-- Render this if no tabs -->
            <div slot="empty" class="text-center text-muted">
                There are no open tabs<br>
                Open a new tab using + button.
            </div>
        </b-tabs>
    </b-card>

</div>