feat: tabs content

CyanSalt · Jul 19, 2023 · 374469e · 374469e
1 parent 7b95cd4
commit 374469e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/docs/components/tabs.md b/docs/components/tabs.md
@@ -40,10 +40,24 @@ import { RTabs } from 'roughness'
 <RSpace overflow>
 <RTable
   :columns="['name', 'type', 'default', 'description']"
-  :rows="['graphics-options', 'model-value', 'reactions', 'tabs', '...']"
+  :rows="['content', 'graphics-options', 'model-value', 'reactions', 'tabs', '...']"
 >
   <template #body:*:name="{ row }">{{ row }}</template>
 
+  <template #body:content:type>
+
+  `boolean`
+
+  </template>
+  <template #body:content:default>
+
+  `true`
+
+  </template>
+  <template #body:content:description>
+    Whether to display the tabs content.
+  </template>
+
   <template #body:graphics-options:type>
 
   `import('roughjs/bin/core').Options`

diff --git a/src/tabs/index.vue b/src/tabs/index.vue
@@ -13,11 +13,13 @@ defineOptions({
 })
 
 const {
+  content = true,
   modelValue,
   tabs,
   reactions,
   graphicsOptions,
 } = defineProps<{
+  content?: boolean,
   modelValue?: Tab | undefined,
   tabs: T,
 } & GraphicsProps>()
@@ -81,7 +83,7 @@ function activate(tab: Tab) {
         </slot>
       </RTabAnchor>
     </RSpace>
-    <div class="r-tabs__content" role="tabpanel" aria-expanded="true">
+    <div v-if="content" class="r-tabs__content" role="tabpanel" aria-expanded="true">
       <slot v-if="internalModelValue" :name="`content:${internalModelValue}`" :tab="(internalModelValue as Tab)">
         <slot name="content:*" :tab="(internalModelValue as Tab)"></slot>
       </slot>