TOffcanvas / 抽屉

Offcanvas displays a side-drawer panel for secondary content or navigation. Supports four directions, backdrop control, ESC close, and Teleport rendering. / 抽屉从屏幕侧边弹出展示辅助内容或导航，支持四个方向、遮罩层控制、ESC 关闭和 Teleport 渲染。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
`modelValue`	`boolean`	`false`	v-model visibility
`placement`	`'start' \| 'end' \| 'top' \| 'bottom'`	`'end'`	Direction / 弹出方向
`title`	`string`	—	Panel title
`closable`	`boolean`	`true`	Show close button
`closeOnBackdrop`	`boolean \| 'static'`	`true`	Close on backdrop click
`closeOnEsc`	`boolean`	`true`	Close on ESC key
`backdrop`	`boolean`	`true`	Show backdrop overlay
`scroll`	`boolean`	`false`	Allow body scroll while open
`teleportTo`	`string`	`'body'`	Teleport target

Events / 事件

Event	Description / 说明
`@update:modelValue`	v-model update
`@open`	Before open / 打开前
`@close`	Before close / 关闭前
`@opened`	After open animation
`@closed`	After close animation

Slots / 插槽

Slot	Description / 说明
`default`	Main body content / 主体内容
`header`	Custom header (overrides default)
`title`	Custom title content

Basic Usage / 基础用法

vue

<script setup lang="ts">
import { TOffcanvas } from '@gulcc/tabler-vue'

const visible = ref(false)
</script>

<template>
  <TButton @click="visible = true">Open / 打开抽屉</TButton>

  <TOffcanvas v-model="visible" title="Panel / 面板">
    <p>Offcanvas content / 抽屉内容</p>
  </TOffcanvas>
</template>

Advanced Usage / 进阶场景

vue

<script setup lang="ts">
import { TOffcanvas } from '@gulcc/tabler-vue'
</script>

<template>
  <!-- Four directions / 四个方向 -->
  <TOffcanvas v-model="startVisible" placement="start" title="Left / 左侧" />
  <TOffcanvas v-model="endVisible" placement="end" title="Right / 右侧" />
  <TOffcanvas v-model="topVisible" placement="top" title="Top / 顶部" />
  <TOffcanvas v-model="bottomVisible" placement="bottom" title="Bottom / 底部" />

  <!-- Static backdrop (click won't close) / 静态遮罩 -->
  <TOffcanvas v-model="visible" title="Static / 静态" close-on-backdrop="static">
    Click outside won't close / 点击外部不会关闭
  </TOffcanvas>

  <!-- No backdrop / 无遮罩 -->
  <TOffcanvas v-model="visible" title="No Backdrop / 无遮罩" :backdrop="false">
    Content / 内容
  </TOffcanvas>

  <!-- Allow body scroll / 允许页面滚动 -->
  <TOffcanvas v-model="visible" title="Scrollable / 可滚动" :scroll="true">
    Content / 内容
  </TOffcanvas>

  <!-- Custom header / 自定义头部 -->
  <TOffcanvas v-model="visible">
    <template #header>
      <div class="d-flex align-items-center gap-2">
        <strong>Custom / 自定义</strong>
        <TBadge color="blue">New / 新</TBadge>
      </div>
    </template>
    Body content / 主体内容
  </TOffcanvas>
</template>

Tips / 避坑指南

Must use v-model to control visibility — directly modifying modelValue won't work
Defaults to Teleport to <body> — be aware of z-index stacking context
closeOnBackdrop="static" prevents closing on backdrop click (useful for forms with unsaved data)
When scroll={false} (default), body scroll is locked while offcanvas is open — set to true to allow scrolling
placement="start" opens from left; "end" from right; "top" from top; "bottom" from bottom

TOffcanvas / 抽屉 ​

Props / 属性 ​

Events / 事件 ​

Slots / 插槽 ​

Basic Usage / 基础用法 ​

Advanced Usage / 进阶场景 ​