Add: document level-1&2

docs/.vuepress/components/Tab.vue

@@ -0,0 +1,37 @@
+<template>
+  <div
+    class="tab-pane fade"
+    :id="tabID"
+    role="tabpanel"
+    :aria-labelledby="labelID"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+
+export default Vue.extend({
+  props: {
+    title: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      tabID: "",
+      labelID: ""
+    };
+  },
+  created() {
+    let tag =
+      "tab-" +
+      Math.random()
+        .toString(36)
+        .substring(2);
+    this.tabID = tag;
+    this.labelID = tag + "-" + "label";
+  }
+});
+</script>

docs/.vuepress/components/Tabs.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="container">
+    <nav>
+      <div class="nav nav-tabs" :id="tag" role="tablist">
+        <button
+          v-for="tab of children"
+          class="nav-link"
+          :id="tab.labelID"
+          data-bs-toggle="tab"
+          :data-bs-target="'#' + tab.tabID"
+          type="button"
+          role="tab"
+          :aria-controls="tab.tabID"
+          aria-selected="false"
+        >
+          {{ tab.title }}
+        </button>
+      </div>
+    </nav>
+    <div :id="tag + '-context'" class="tab-content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import { Tab } from "bootstrap";
+
+export default Vue.extend({
+  props: {
+    title: {
+      type: String
+    }
+  },
+  data() {
+    return {
+      children: []
+    };
+  },
+  created() {
+    this.children = this.$children;
+  },
+  mounted() {
+    this.$nextTick(function() {
+      let triggerEl = document.getElementById(this.children["0"].$data.labelID);
+      new Tab(triggerEl).show();
+    });
+  },
+  computed: {
+    tag: function() {
+      return "tabs-" + this.title;
+    }
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+@import "~bootstrap/scss/bootstrap";
+</style>