Slidedown

The Slidedown component collapses/expands content areas to save space. Ideal for FAQ sections, configuration groups, and collapsible panels.

Basic Usage

The default slot is the always-visible header area. The #content slot is the expandable content. Use v-model to control the expanded state.

<TSlidedown v-model="isOpen">
  <span class="fw-semibold">Header</span>
  <template #content>
    <p>Expanded content.</p>
  </template>
</TSlidedown>

Borderless Mode

Set :border="false" to remove the border.

<TSlidedown :border="false">
  <span>Header</span>
  <template #content>...</template>
</TSlidedown>

Click Anywhere to Expand

Set click-anywhere-expand to allow expanding by clicking anywhere on the panel.

<TSlidedown click-anywhere-expand>
  <span>Header</span>
  <template #content>...</template>
</TSlidedown>

Hide Arrow

Set :arrow="false" to hide the bottom arrow indicator.

<TSlidedown :arrow="false">
  <span>Header</span>
  <template #content>...</template>
</TSlidedown>

Pre-toggle Intercept

Use the beforeToggle function to intercept toggle actions. Return false to prevent the toggle. Supports async functions for payment checks, permission validation, etc.

<TSlidedown :before-toggle="beforeExpand">
  <span>Paywalled Content</span>
  <template #content>
    <p>Content visible after payment check.</p>
  </template>
</TSlidedown>

<script setup>
async function beforeExpand(next) {
  if (!next) return true
  const res = await fetch('/api/check-payment')
  const data = await res.json()
  return data.paid
}
</script>

Custom Arrow

Use the #arrow scoped slot to fully customize the arrow area. It exposes expanded, loading and toggle for complete control.

<TSlidedown>
  <span>Advanced Settings</span>
  <template #content>...</template>
  <template #arrow="{ expanded }">
    <span class="badge">{{ expanded ? 'Collapse' : 'Expand' }}</span>
  </template>
</TSlidedown>

API

Props

Prop	Description	Type	Default
v-model	Expanded state	boolean	false
arrow	Show bottom arrow	boolean	true
border	Show border	boolean	true
clickAnywhereExpand	Click anywhere to expand	boolean	false
clickAnywhereCollapse	Click anywhere to collapse	boolean	false
beforeToggle	Pre-toggle hook, return false to prevent	(newValue: boolean) => boolean | Promise<boolean>	undefined

Slots

Slot	Description
default	Always-visible header area
content	Expandable content area
arrow	Custom arrow, scoped: { expanded: boolean, loading: boolean, toggle: () => void }