Buefy (multiple) tabs as page slider

by jorgeluis

HTML

<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<div id="app" class="container">

  <b-tabs v-model="activeTab" class="is-borderless">
    <b-tab-item>

      <h2 class="title">
        Things
      </h2>
      <button class="button" @click="activeTab = 1">Re-order</button>


      <b-table
        :data="isEmpty ? [] : data"
        striped>

        <template slot-scope="props">
          <b-table-column field="id" label="Column 1">
              {{ props.row.id }}
          </b-table-column>

          <b-table-column field="first_name" label="Column 2">
              <a @click="activeTab = 2">{{ props.row.first_name }}</a>
          </b-table-column>

          <b-table-column field="last_name" label="Column 3">
              {{ props.row.last_name }}
          </b-table-column>

          <b-table-column field="date" label="Column 4" centered>
            {{ new Date(props.row.date).toLocaleDateString() }}
          </b-table-column>
        </template>

        <template slot="empty">
          <section class="section">
              <div class="content has-text-grey has-text-centered">
                  <p>
                      <b-icon
                          icon="emoticon-sad"
                          size="is-large">
                      </b-icon>
                  </p>
                  <p>Nothing here.</p>
              </div>
          </section>
        </template>

      </b-table>
    </b-tab-item>

    <b-tab-item>
      <h2 class="title">Re-Order Items</h2>
      <ul class="list">
        <li class="list-item">Column 1</li>
        <li class="list-item">Column 2</li>
        <li class="list-item">Column 3</li>
        <li class="list-item">Column 4</li>
      </ul>
      <button class="button" @click="activeTab = 0">Done</button>
    </b-tab-item>


    <b-tab-item>
      <button...

CSS

.is-borderless .tabs ul,
.is-borderless .tabs a {
  border: none;
}

JavaScript

const example = {
    data() {
        const data = [
            { 'id': 1, 'first_name': 'Jess', 'last_name': 'Simmons', 'date': '2016/10/15 13:43:27', 'gender': 'Male' },
            { 'id': 2, 'first_name': 'John', 'last_name': 'Jacobs', 'date': '2016/12/15 06:00:53', 'gender': 'Male' },
            { 'id': 3, 'first_name': 'Tina', 'last_name': 'Gilbert', 'date': '2016/04/26 06:26:28', 'gender': 'Female' },
            { 'id': 4, 'first_name': 'Clarence', 'last_name': 'Flores', 'date': '2016/04/10 10:28:46', 'gender': 'Male' },
            { 'id': 5, 'first_name': 'Anne', 'last_name': 'Lee', 'date': '2016/12/06 14:38:38', 'gender': 'Female' }
        ]

        return {
            data,
		        activeTab: 0,
            isEmpty: false
        }
    }
}

const app = new Vue(example)

app.$mount('#app')