Components

Sheet 抽屉面板

用于资源详情、配置编辑和辅助操作的可访问模态侧栏,支持四个展开方向。

实例详情

默认从右侧展开;使用 header、默认和 footer 插槽构建详情工作流。

<Button @click="open = true">查看实例详情</Button>
<Sheet
  v-model:open="open"
  title="hkg-edge-07"
  description="运行中的边缘节点 · 香港"
  side="right"
  size="30rem"
>
  <InstanceDetails />
  <template #footer>
    <Button @click="open = false">保存配置</Button>
  </template>
</Sheet>

API 参考

属性类型默认值说明
v-model:openbooleanfalse受控展开状态。
side'left' | 'right' | 'top' | 'bottom''right'抽屉展开方向。
sizestring'28rem'左右抽屉的宽度,或上下抽屉的高度。
title / descriptionstring—默认头部文案。
trigger / header / footerslot—触发器和结构区域插槽。