docs(BTabs): Initial documentation (bootstrap-vue-next#2382)

dwgray · Nov 30, 2024 · 64f3534 · 64f3534
1 parent 158166e
commit 64f3534
Show file tree

Hide file tree

Showing 21 changed files with 568 additions and 4 deletions.
diff --git a/apps/docs/src/docs/components/demo/TabsActive.vue b/apps/docs/src/docs/components/demo/TabsActive.vue
@@ -0,0 +1,13 @@
+<template>
+  <!-- #region template -->
+  <BTabs
+    active-nav-item-class="font-weight-bold text-uppercase text-danger"
+    active-tab-class="font-weight-bold text-success"
+    content-class="mt-3"
+  >
+    <BTab title="First" active><p>I'm the first tab</p></BTab>
+    <BTab title="Second"><p>I'm the second tab</p></BTab>
+    <BTab title="Disabled" disabled><p>I'm a disabled tab!</p></BTab>
+  </BTabs>
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/components/demo/TabsAlignment.vue b/apps/docs/src/docs/components/demo/TabsAlignment.vue
@@ -0,0 +1,9 @@
+<template>
+  <!-- #region template -->
+  <BTabs content-class="mt-3" align="center">
+    <BTab title="First" active><p>I'm the first tab</p></BTab>
+    <BTab title="Second"><p>I'm the second tab</p></BTab>
+    <BTab title="Disabled" disabled><p>I'm a disabled tab!</p></BTab>
+  </BTabs>
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/components/demo/TabsBottom.vue b/apps/docs/src/docs/components/demo/TabsBottom.vue
@@ -0,0 +1,10 @@
+<template>
+  <!-- #region template -->
+  <BCard no-body>
+    <BTabs pills card end>
+      <BTab title="Tab 1" active><BCardText>Tab contents 1</BCardText></BTab>
+      <BTab title="Tab 2"><BCardText>Tab contents 2</BCardText></BTab>
+    </BTabs>
+  </BCard>
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/components/demo/TabsCards.vue b/apps/docs/src/docs/components/demo/TabsCards.vue
@@ -0,0 +1,14 @@
+<template>
+  <!-- #region template -->
+  <BCard no-body>
+    <BTabs card>
+      <BTab title="Tab 1" active>
+        <BCardText>Tab contents 1</BCardText>
+      </BTab>
+      <BTab title="Tab 2">
+        <BCardText>Tab contents 2</BCardText>
+      </BTab>
+    </BTabs>
+  </BCard>
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/components/demo/TabsCustom.vue b/apps/docs/src/docs/components/demo/TabsCustom.vue
@@ -0,0 +1,17 @@
+<template>
+  <!-- #region template -->
+  <BTabs>
+    <BTab active>
+      <template #title>
+        <BSpinner type="grow" small /> I'm <i>custom</i> <strong>title</strong>
+      </template>
+      <p class="p-3">Tab contents 1</p>
+    </BTab>
+
+    <BTab>
+      <template #title> <BSpinner type="border" small /> Tab 2 </template>
+      <p class="p-3">Tab contents 2</p>
+    </BTab>
+  </BTabs>
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/components/demo/TabsCustomLinks.vue b/apps/docs/src/docs/components/demo/TabsCustomLinks.vue
@@ -0,0 +1,21 @@
+<template>
+  <BCard no-body>
+    <BTabs v-model="tabIndex" card>
+      <BTab title="Tab 1" :title-link-class="linkClass[0]">Tab contents 1</BTab>
+      <BTab title="Tab 2" :title-link-class="linkClass[1]">Tab contents 2</BTab>
+      <BTab title="Tab 3" :title-link-class="linkClass[2]">Tab contents 3</BTab>
+    </BTabs>
+  </BCard>
+</template>
+
+<script setup lang="ts">
+import {computed, ref} from 'vue'
+
+const tabIndex = ref(0)
+
+const linkClass = computed(() =>
+  Array.from(Array(3).keys()).map((idx) =>
+    tabIndex.value === idx ? ['bg-primary', 'text-light'] : ['bg-light', 'text-info']
+  )
+)
+</script>
diff --git a/apps/docs/src/docs/components/demo/TabsDynamic.vue b/apps/docs/src/docs/components/demo/TabsDynamic.vue
@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <BCard no-body>
+      <BTabs card>
+        <!-- Render Tabs, supply a unique `key` to each tab -->
+        <BTab v-for="i in tabs" :key="'dyn-tab-' + i" :title="'Tab ' + i">
+          Tab contents {{ i }}
+          <BButton size="sm" variant="danger" class="float-right" @click="closeTab(i)">
+            Close tab
+          </BButton>
+        </BTab>
+
+        <!-- New Tab Button (Using tabs-end slot) -->
+        <template #tabs-end>
+          <BNavItem role="presentation" @click.prevent="newTab"><b>+</b></BNavItem>
+        </template>
+
+        <!-- Render this if no tabs -->
+        <template #empty>
+          <div class="text-center text-muted">
+            There are no open tabs<br />
+            Open a new tab using the <b>+</b> button above.
+          </div>
+        </template>
+      </BTabs>
+    </BCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const tabCounter = ref(0)
+const tabs = ref<number[]>([])
+
+const newTab = () => {
+  tabs.value.push(tabCounter.value++)
+}
+
+const closeTab = (i: number) => {
+  tabs.value = tabs.value.filter((tab) => tab !== i)
+}
+</script>
diff --git a/apps/docs/src/docs/components/demo/TabsEmpty.vue b/apps/docs/src/docs/components/demo/TabsEmpty.vue
@@ -0,0 +1,11 @@
+<template>
+  <!-- #region template -->
+  <BTabs>
+    <!-- Add your b-tab components here -->
+    <template #tabs-end>
+      <BNavItem href="#" role="presentation" @click="() => {}">Another tab</BNavItem>
+      <li role="presentation" class="nav-item align-self-center">Plain text</li>
+    </template>
+  </BTabs>
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/components/demo/TabsExternalControls.vue b/apps/docs/src/docs/components/demo/TabsExternalControls.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <!-- Tabs with card integration -->
+    <BCard no-body>
+      <BTabs v-model="tabIndex" small card>
+        <BTab title="General">I'm the first fading tab</BTab>
+        <BTab title="Edit profile">
+          I'm the second tab
+          <BCard>I'm the card in tab</BCard>
+        </BTab>
+        <BTab title="Premium Plan" disabled>Sibzamini!</BTab>
+        <BTab title="Info">I'm the last tab</BTab>
+      </BTabs>
+    </BCard>
+
+    <!-- Control buttons-->
+    <div class="text-center">
+      <BButtonGroup class="mt-2">
+        <BButton @click="tabIndex--">Previous</BButton>
+        <BButton @click="tabIndex++">Next</BButton>
+      </BButtonGroup>
+
+      <div class="text-muted">Current Tab: {{ tabIndex }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {ref} from 'vue'
+
+const tabIndex = ref(0)
+</script>
diff --git a/apps/docs/src/docs/components/demo/TabsFill.vue b/apps/docs/src/docs/components/demo/TabsFill.vue
@@ -0,0 +1,10 @@
+<template>
+  <!-- #region template -->
+  <BTabs content-class="mt-3" fill>
+    <BTab title="First" active><p>I'm the first tab</p></BTab>
+    <BTab title="Second"><p>I'm the second tab</p></BTab>
+    <BTab title="Very, very long title"><p>I'm the tab with the very, very long title</p></BTab>
+    <BTab title="Disabled" disabled><p>I'm a disabled tab!</p></BTab>
+  </BTabs>
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/components/demo/TabsJustified.vue b/apps/docs/src/docs/components/demo/TabsJustified.vue
@@ -0,0 +1,10 @@
+<template>
+  <!-- #region template -->
+  <BTabs content-class="mt-3" justified>
+    <BTab title="First" active><p>I'm the first tab</p></BTab>
+    <BTab title="Second"><p>I'm the second tab</p></BTab>
+    <BTab title="Very, very long title"><p>I'm the tab with the very, very long title</p></BTab>
+    <BTab title="Disabled" disabled><p>I'm a disabled tab!</p></BTab>
+  </BTabs>
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/components/demo/TabsLazy.vue b/apps/docs/src/docs/components/demo/TabsLazy.vue
@@ -0,0 +1,12 @@
+<template>
+  <!-- #region template -->
+  <BTabs content-class="mt-3">
+    <!-- This tabs content will always be mounted -->
+    <BTab title="Regular tab"><BAlert :model-value="true">I'm always mounted</BAlert></BTab>
+
+    <!-- This tabs content will not be mounted until the tab is shown -->
+    <!-- and will be un-mounted when hidden -->
+    <BTab title="Lazy tab" lazy><BAlert :model-value="true">I'm lazy mounted!</BAlert></BTab>
+  </BTabs>
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/components/demo/TabsLazyAll.vue b/apps/docs/src/docs/components/demo/TabsLazyAll.vue
@@ -0,0 +1,8 @@
+<template>
+  <!-- #region template -->
+  <BTabs content-class="mt-3" lazy>
+    <BTab title="Tab 1"><BAlert :model-value="true">I'm lazy mounted!</BAlert></BTab>
+    <BTab title="Tab 2"><BAlert :model-value="true">I'm lazy mounted too!</BAlert></BTab>
+  </BTabs>
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/components/demo/TabsOverview.vue b/apps/docs/src/docs/components/demo/TabsOverview.vue
@@ -0,0 +1,9 @@
+<template>
+  <!-- #region template -->
+  <BTabs content-class="mt-3">
+    <BTab title="First" active><p>I'm the first tab</p></BTab>
+    <BTab title="Second"><p>I'm the second tab</p></BTab>
+    <BTab title="Disabled" disabled><p>I'm a disabled tab!</p></BTab>
+  </BTabs>
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/components/demo/TabsPictures.vue b/apps/docs/src/docs/components/demo/TabsPictures.vue
@@ -0,0 +1,33 @@
+<template>
+  <!-- #region template -->
+  <BCard no-body>
+    <BTabs card>
+      <BTab no-body title="Picture 1">
+        <BCardImg bottom src="https://picsum.photos/600/200/?image=21" alt="Image 21" />
+        <BCardFooter>Picture 1 footer</BCardFooter>
+      </BTab>
+
+      <BTab no-body title="Picture 2">
+        <BCardImg bottom src="https://picsum.photos/600/200/?image=25" alt="Image 25" />
+        <BCardFooter>Picture 2 footer</BCardFooter>
+      </BTab>
+
+      <BTab no-body title="Picture 3">
+        <BCardImg bottom src="https://picsum.photos/600/200/?image=26" alt="Image 26" />
+        <BCardFooter>Picture 3 footer</BCardFooter>
+      </BTab>
+
+      <BTab title="Text">
+        <BCardTitle>This tab does not have the <code>no-body</code> prop set</BCardTitle>
+        <BCardText>
+          Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum
+          consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex
+          consectetur mollit voluptate est in duis laboris ad sit ipsum anim Lorem. Incididunt
+          veniam velit elit elit veniam Lorem aliqua quis ullamco deserunt sit enim elit aliqua esse
+          irure.
+        </BCardText>
+      </BTab>
+    </BTabs>
+  </BCard>
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/components/demo/TabsPills.vue b/apps/docs/src/docs/components/demo/TabsPills.vue
@@ -0,0 +1,10 @@
+<template>
+  <!-- #region template -->
+  <BCard no-body>
+    <BTabs pills card>
+      <BTab title="Tab 1" active><BCardText>Tab contents 1</BCardText></BTab>
+      <BTab title="Tab 2"><BCardText>Tab contents 2</BCardText></BTab>
+    </BTabs>
+  </BCard>
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/components/demo/TabsVertical.vue b/apps/docs/src/docs/components/demo/TabsVertical.vue
@@ -0,0 +1,11 @@
+<template>
+  <!-- #region template -->
+  <BCard no-body>
+    <BTabs pills card vertical>
+      <BTab title="Tab 1" active><BCardText>Tab contents 1</BCardText></BTab>
+      <BTab title="Tab 2"><BCardText>Tab contents 2</BCardText></BTab>
+      <BTab title="Tab 3"><BCardText>Tab contents 3</BCardText></BTab>
+    </BTabs>
+  </BCard>
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/components/demo/TabsVerticalEnd.vue b/apps/docs/src/docs/components/demo/TabsVerticalEnd.vue
@@ -0,0 +1,11 @@
+<template>
+  <!-- #region template -->
+  <BCard no-body>
+    <BTabs pills card vertical end>
+      <BTab title="Tab 1" active><BCardText>Tab contents 1</BCardText></BTab>
+      <BTab title="Tab 2"><BCardText>Tab contents 2</BCardText></BTab>
+      <BTab title="Tab 3"><BCardText>Tab contents 3</BCardText></BTab>
+    </BTabs>
+  </BCard>
+  <!-- #endregion template -->
+</template>
diff --git a/apps/docs/src/docs/components/demo/TabsVerticalWidth.vue b/apps/docs/src/docs/components/demo/TabsVerticalWidth.vue
@@ -0,0 +1,11 @@
+<template>
+  <!-- #region template -->
+  <BCard no-body>
+    <BTabs pills card vertical nav-wrapper-class="w-50">
+      <BTab title="Tab 1" active><BCardText>Tab contents 1</BCardText></BTab>
+      <BTab title="Tab 2"><BCardText>Tab contents 2</BCardText></BTab>
+      <BTab title="Tab 3"><BCardText>Tab contents 3</BCardText></BTab>
+    </BTabs>
+  </BCard>
+  <!-- #endregion template -->
+</template>