ADrawer

ADrawer is a side panel that slides in from the left or right edge of the viewport. Toggle it with v-model, choose an edge with position, and control the mask and scroll-locking behavior.

Import

import { Drawer } from '@any-design/anyui/vue';
// React:  import { Drawer } from '@any-design/anyui/react';
// Svelte: import { Drawer } from '@any-design/anyui/svelte';

Basic usage

Toggle with v-model; the slot renders the drawer body. Since the component has no built-in header, drop in your own title + close affordance inside the slot.

<template>
  <AButton @click="open = true">Open drawer</AButton>
  <ADrawer v-model="open" position="right">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
      <strong>Filters</strong>
      <AButton size="small" type="secondary" @click="open = false">Close</AButton>
    </div>
    <p>Refine your results here.</p>
  </ADrawer>
</template>

<script setup>
import { ref } from 'vue';
const open = ref(false);
</script>

Examples

Right side, custom width

position="right" docks the panel on the right; width accepts any CSS length.

<template>
  <AButton type="primary" @click="open = true">Account settings</AButton>
  <ADrawer v-model="open" position="right" width="420px">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
      <strong>Account settings</strong>
      <AButton size="small" type="secondary" @click="open = false">Close</AButton>
    </div>
    <AInput placeholder="Display name" />
    <div style="display:flex;justify-content:flex-end;margin-top:16px;">
      <AButton type="primary">Save</AButton>
    </div>
  </ADrawer>
</template>

<script setup>
import { ref } from 'vue';
const open = ref(false);
</script>

Without mask

Set with-mask="false" to keep the page interactive while the drawer is open.

<template>
  <AButton @click="open = true">Open without mask</AButton>
  <ADrawer v-model="open" position="right" :with-mask="false">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
      <strong>Unmasked</strong>
      <AButton size="small" type="secondary" @click="open = false">Close</AButton>
    </div>
    <p>The page behind stays usable.</p>
  </ADrawer>
</template>

<script setup>
import { ref } from 'vue';
const open = ref(false);
</script>

Glass background opacity

The drawer body has its own padding and scroll. Under the liquid-glass theme, set glass-opacity below 1 to mix the panel background with transparent — the backdrop blur then reads through the panel so the drawer looks like glass instead of an opaque sheet.

<template>
  <ADrawer v-model="open" position="right" width="360px" :glass-opacity="0.7">
    <strong>Settings</strong>
    <p>Toggle the Glass theme to see the blur show through.</p>
  </ADrawer>
</template>

<script setup>
import { ref } from 'vue';
const open = ref(false);
</script>

Props

Prop	Type	Default	Description
`modelValue`	Boolean	false	Visibility (`v-model`).
`position`	‘left’ \| ‘right’	‘left’	Edge the drawer slides from.
`width`	String \| Number	‘30%’	Drawer width.
`withMask`	Boolean	true	Show the overlay mask.
`appendToBody`	Boolean	true	Append to body.
`lockScroll`	Boolean	true	Lock body scroll while open.
`lockTarget`	String	‘document.body’	CSS selector of the element to lock (passed to querySelector).
`zIndex`	Number	100	z-index of the panel.
`maskZIndex`	Number	undefined	z-index of the mask.
`glassOpacity`	Number	1	Background opacity of the body (0–1). Below 1 mixes the surface color with transparent so the glass backdrop blur shows through.
`drawerClass / maskClass / bodyClass`	String	undefined	Extra class hooks.
`transitionName`	String	undefined	Override the transition name.

Events

Event	Payload	Description
`update:modelValue`	Boolean	Visibility change.

Slots

Slot	Props	Description
`default`	—	Drawer body.

ADrawer

ADrawer 是从视口左 / 右边缘滑入的侧边面板。通过 v-model 控制显隐，用 position 选择停靠边，并控制遮罩与滚动锁定行为。

引入

import { Drawer } from '@any-design/anyui/vue';
// React:  import { Drawer } from '@any-design/anyui/react';
// Svelte: import { Drawer } from '@any-design/anyui/svelte';

基础用法

通过 v-model 控制显隐，插槽即为抽屉主体。由于组件本身不内置头部，可在插槽内自行放标题与关闭按钮。

<template>
  <AButton @click="open = true">打开抽屉</AButton>
  <ADrawer v-model="open" position="right">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
      <strong>筛选</strong>
      <AButton size="small" type="secondary" @click="open = false">关闭</AButton>
    </div>
    <p>在这里精炼你的结果。</p>
  </ADrawer>
</template>

<script setup>
import { ref } from 'vue';
const open = ref(false);
</script>

示例

右侧、自定义宽度

position="right" 让面板停靠在右侧；width 接受任意 CSS 长度。

<template>
  <AButton type="primary" @click="open = true">账户设置</AButton>
  <ADrawer v-model="open" position="right" width="420px">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
      <strong>账户设置</strong>
      <AButton size="small" type="secondary" @click="open = false">关闭</AButton>
    </div>
    <AInput placeholder="显示名" />
    <div style="display:flex;justify-content:flex-end;margin-top:16px;">
      <AButton type="primary">保存</AButton>
    </div>
  </ADrawer>
</template>

<script setup>
import { ref } from 'vue';
const open = ref(false);
</script>

无遮罩

设置 with-mask="false" 可在抽屉打开时保持页面可交互。

<template>
  <AButton @click="open = true">无遮罩打开</AButton>
  <ADrawer v-model="open" position="right" :with-mask="false">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
      <strong>无遮罩</strong>
      <AButton size="small" type="secondary" @click="open = false">关闭</AButton>
    </div>
    <p>背后的页面仍可操作。</p>
  </ADrawer>
</template>

<script setup>
import { ref } from 'vue';
const open = ref(false);
</script>

玻璃背景不透明度

抽屉主体自带内边距与滚动。在液态玻璃主题下，将 glass-opacity 设为小于 1 的值，面板背景会与透明色混合，背后的模糊即可透出，抽屉呈现玻璃质感而非不透明面板。

<template>
  <ADrawer v-model="open" position="right" width="360px" :glass-opacity="0.7">
    <strong>设置</strong>
    <p>切换玻璃主题即可看到背景模糊透出的效果。</p>
  </ADrawer>
</template>

<script setup>
import { ref } from 'vue';
const open = ref(false);
</script>

属性

属性	类型	默认值	说明
`modelValue`	Boolean	false	是否可见（`v-model`）。
`position`	‘left’ \| ‘right’	‘left’	抽屉滑出的边缘。
`width`	String \| Number	‘30%’	宽度。
`withMask`	Boolean	true	显示遮罩。
`appendToBody`	Boolean	true	挂载到 body。
`lockScroll`	Boolean	true	打开时锁定滚动。
`lockTarget`	String	‘document.body’	锁定元素的 CSS 选择器（传给 querySelector）。
`zIndex`	Number	100	面板的 z-index。
`maskZIndex`	Number	undefined	遮罩的 z-index。
`glassOpacity`	Number	1	面板背景不透明度（0–1）。小于 1 时将背景色与透明色混合，玻璃背景模糊可透出。
`drawerClass / maskClass / bodyClass`	String	undefined	额外的类名钩子。
`transitionName`	String	undefined	覆盖过渡名。

事件

事件	载荷	说明
`update:modelValue`	Boolean	可见性变化。

插槽

插槽	作用域参数	说明
`default`	—	抽屉内容。

Open drawer

Account settings

Open without mask

<!-- Demo 1 -->
<template>
  <AButton @click="open = true">Open drawer</AButton>
  <ADrawer v-model="open" position="right">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
      <strong>Filters</strong>
      <AButton size="small" type="secondary" @click="open = false">Close</AButton>
    </div>
    <p>Refine your results here.</p>
  </ADrawer>
</template>

<script setup>
import { ref } from 'vue';
const open = ref(false);
</script>

<!-- Demo 2 -->
<template>
  <AButton type="primary" @click="open = true">Account settings</AButton>
  <ADrawer v-model="open" position="right" width="420px">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
      <strong>Account settings</strong>
      <AButton size="small" type="secondary" @click="open = false">Close</AButton>
    </div>
    <AInput placeholder="Display name" />
    <div style="display:flex;justify-content:flex-end;margin-top:16px;">
      <AButton type="primary">Save</AButton>
    </div>
  </ADrawer>
</template>

<script setup>
import { ref } from 'vue';
const open = ref(false);
</script>

<!-- Demo 3 -->
<template>
  <AButton @click="open = true">Open without mask</AButton>
  <ADrawer v-model="open" position="right" :with-mask="false">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
      <strong>Unmasked</strong>
      <AButton size="small" type="secondary" @click="open = false">Close</AButton>
    </div>
    <p>The page behind stays usable.</p>
  </ADrawer>
</template>

<script setup>
import { ref } from 'vue';
const open = ref(false);
</script>