oneao/workspace
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

20260720172840

Browse Source
This commit is contained in:
oneao committed 2026-07-20 17:28:47 +08:00
1 parent cda7f16d3a
commit 94207c77ff
3117 files changed
+201407 -1236
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/fms/.agents/skills/antdv-next/references/components/drawer/demo/_semantic.md
+54
View File
@@ -0,0 +1,54 @@
# _semantic
## Source
```vue
<script setup lang="ts">
import { computed } from 'vue'
import { SemanticPreview } from '@/components/semantic'
import { useComponentLocale } from '@/composables/use-locale'
import { locales } from '../locales'
const { t } = useComponentLocale(locales)
const semantics = computed(() => [
{ name: 'root', desc: t('root'), version: '1.0.0' },
{ name: 'mask', desc: t('mask'), version: '1.0.0' },
{ name: 'section', desc: t('section'), version: '1.0.0' },
{ name: 'header', desc: t('header'), version: '1.0.0' },
{ name: 'title', desc: t('title'), version: '1.0.0' },
{ name: 'extra', desc: t('extra'), version: '1.0.0' },
{ name: 'body', desc: t('body'), version: '1.0.0' },
{ name: 'footer', desc: t('footer'), version: '1.0.0' },
{ name: 'dragger', desc: t('dragger'), version: '1.0.0' },
{ name: 'close', desc: t('close'), version: '1.0.0' },
])
</script>
<template>
<SemanticPreview
component-name="Drawer"
:semantics="semantics"
>
<template #default="{ classes }">
<a-drawer
title="Title"
placement="right"
open
:get-container="false"
:size="300"
:resizable="{}"
:classes="classes"
>
<template #footer>
<a-typography-link>Footer</a-typography-link>
</template>
<template #extra>
<a-button>Cancel</a-button>
</template>
<p>Some contents...</p>
</a-drawer>
</template>
</SemanticPreview>
</template>
```
code/fms/.agents/skills/antdv-next/references/components/drawer/demo/basic-right.md
+33
View File
@@ -0,0 +1,33 @@
# Basic
## Description (en-US)
Basic drawer.
## Source
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'
const open = shallowRef(false)
function showDrawer() {
open.value = true
}
</script>
<template>
<a-button type="primary" @click="showDrawer">
Open
</a-button>
<a-drawer
v-model:open="open"
title="Basic Drawer"
:closable="{ 'aria-label': 'Close Button' }"
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-drawer>
</template>
```
code/fms/.agents/skills/antdv-next/references/components/drawer/demo/closable-placement.md
+37
View File
@@ -0,0 +1,37 @@
# Closable placement
## Description (en-US)
Drawer with closable placement, customize the close placement to the `end`, defaults to `start`.
## Source
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'
const open = shallowRef(false)
function showDrawer() {
open.value = true
}
function onClose() {
open.value = false
}
</script>
<template>
<a-button type="primary" @click="showDrawer">
Open
</a-button>
<a-drawer
v-model:open="open"
title="Drawer Closable Placement"
:closable="{ placement: 'end' }"
@close="onClose"
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Take a look at the top-right corner...</p>
</a-drawer>
</template>
```
code/fms/.agents/skills/antdv-next/references/components/drawer/demo/extra.md
+68
View File
@@ -0,0 +1,68 @@
# Extra Actions
## Description (en-US)
Extra actions should be placed at corner of drawer in Antdv Next, you can use `extra` prop for that.
## Source
```vue
<script setup lang="ts">
import type { DrawerProps } from 'antdv-next'
import { shallowRef } from 'vue'
const open = shallowRef(false)
const placement = shallowRef<DrawerProps['placement']>('right')
function showDrawer() {
open.value = true
}
function onClose() {
open.value = false
}
</script>
<template>
<a-space>
<a-radio-group v-model:value="placement">
<a-radio value="top">
top
</a-radio>
<a-radio value="right">
right
</a-radio>
<a-radio value="bottom">
bottom
</a-radio>
<a-radio value="left">
left
</a-radio>
</a-radio-group>
<a-button type="primary" @click="showDrawer">
Open
</a-button>
</a-space>
<a-drawer
v-model:open="open"
:size="500"
title="Drawer with extra actions"
:placement="placement"
@close="onClose"
>
<template #extra>
<a-space>
<a-button @click="onClose">
Cancel
</a-button>
<a-button type="primary" @click="onClose">
OK
</a-button>
</a-space>
</template>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-drawer>
</template>
```
code/fms/.agents/skills/antdv-next/references/components/drawer/demo/form-in-drawer.md
+159
View File
@@ -0,0 +1,159 @@
# Submit form in drawer
## Description (en-US)
Use a form in Drawer with a submit button.
## Source
```vue
<script setup lang="ts">
import { PlusOutlined } from '@antdv-next/icons'
import { reactive, ref } from 'vue'
const open = ref(false)
const formState = reactive({
name: '',
url: '',
owner: undefined as string | undefined,
type: undefined as string | undefined,
approver: undefined as string | undefined,
dateTime: undefined as any,
description: '',
})
const ownerOptions = [
{ label: 'Xiaoxiao Fu', value: 'xiao' },
{ label: 'Maomao Zhou', value: 'mao' },
]
const typeOptions = [
{ label: 'private', value: 'private' },
{ label: 'public', value: 'public' },
]
const approverOptions = [
{ label: 'Jack Ma', value: 'jack' },
{ label: 'Tom Liu', value: 'tom' },
]
</script>
<template>
<a-button type="primary" @click="open = true">
<template #icon>
<PlusOutlined />
</template>
New account
</a-button>
<a-drawer
v-model:open="open"
title="Create a new account"
:size="720"
:styles="{ body: { paddingBottom: '80px' } }"
@close="open = false"
>
<template #extra>
<a-space>
<a-button @click="open = false">
Cancel
</a-button>
<a-button type="primary" @click="open = false">
Submit
</a-button>
</a-space>
</template>
<a-form layout="vertical" :model="formState" :required-mark="false">
<a-row :gutter="16">
<a-col :span="12">
<a-form-item
name="name"
label="Name"
:rules="[{ required: true, message: 'Please enter user name' }]"
>
<a-input v-model:value="formState.name" placeholder="Please enter user name" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
name="url"
label="Url"
:rules="[{ required: true, message: 'Please enter url' }]"
>
<a-space-compact block>
<a-space-addon>http://</a-space-addon>
<a-input v-model:value="formState.url" placeholder="Please enter url" />
<a-space-addon>.com</a-space-addon>
</a-space-compact>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item
name="owner"
label="Owner"
:rules="[{ required: true, message: 'Please select an owner' }]"
>
<a-select
v-model:value="formState.owner"
placeholder="Please select an owner"
:options="ownerOptions"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
name="type"
label="Type"
:rules="[{ required: true, message: 'Please choose the type' }]"
>
<a-select
v-model:value="formState.type"
placeholder="Please choose the type"
:options="typeOptions"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="12">
<a-form-item
name="approver"
label="Approver"
:rules="[{ required: true, message: 'Please choose the approver' }]"
>
<a-select
v-model:value="formState.approver"
placeholder="Please choose the approver"
:options="approverOptions"
/>
</a-form-item>
</a-col>
<a-col :span="12">
<a-form-item
name="dateTime"
label="DateTime"
:rules="[{ required: true, message: 'Please choose the dateTime' }]"
>
<a-range-picker
v-model:value="formState.dateTime"
style="width: 100%"
:get-popup-container="(trigger) => trigger.parentElement || document.body"
/>
</a-form-item>
</a-col>
</a-row>
<a-row :gutter="16">
<a-col :span="24">
<a-form-item
name="description"
label="Description"
:rules="[{ required: true, message: 'please enter url description' }]"
>
<a-textarea v-model:value="formState.description" :rows="4" placeholder="please enter url description" />
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-drawer>
</template>
```
code/fms/.agents/skills/antdv-next/references/components/drawer/demo/loading.md
+51
View File
@@ -0,0 +1,51 @@
# Loading
## Description (en-US)
Set the loading status of Drawer.
## Source
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'
const open = shallowRef(false)
const loading = shallowRef(true)
function showLoading() {
open.value = true
loading.value = true
// Simple loading mock. You should add cleanup logic in real world.
setTimeout(() => {
loading.value = false
}, 2000)
}
</script>
<template>
<a-button type="primary" @click="showLoading">
Open Drawer
</a-button>
<a-drawer
v-model:open="open"
closable
destroy-on-hidden
placement="right"
:loading="loading"
>
<template #title>
<p class="m-0">
Loading Drawer
</p>
</template>
<a-button type="primary" style="margin-bottom: 16px" @click="showLoading">
Reload
</a-button>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-drawer>
</template>
```
code/fms/.agents/skills/antdv-next/references/components/drawer/demo/mask.md
+57
View File
@@ -0,0 +1,57 @@
# mask
## Description (en-US)
mask effect, default `blur`.
## Source
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'
type MaskType = 'blur' | 'dimmed' | 'none'
interface DrawerConfig {
type: MaskType
mask: boolean | { blur: boolean }
title: string
}
const drawerList: DrawerConfig[] = [
{ type: 'blur', mask: true, title: 'Default blur' },
{ type: 'dimmed', mask: { blur: false }, title: 'Dimmed mask' },
{ type: 'none', mask: false, title: 'No mask' },
]
const open = shallowRef<false | MaskType>(false)
function showDrawer(type: MaskType) {
open.value = type
}
function onClose() {
open.value = false
}
</script>
<template>
<a-space wrap>
<template v-for="item in drawerList" :key="item.type">
<a-button @click="showDrawer(item.type)">
{{ item.title }}
</a-button>
<a-drawer
:open="open === item.type"
title="Drawer blur"
placement="right"
:mask="item.mask"
@close="onClose"
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-drawer>
</template>
</a-space>
</template>
```
code/fms/.agents/skills/antdv-next/references/components/drawer/demo/multi-level-drawer.md
+58
View File
@@ -0,0 +1,58 @@
# Multi-level drawer
## Description (en-US)
Open a new drawer on top of an existing drawer to handle multi branch tasks.
## Source
```vue
<script setup lang="ts">
import { shallowRef } from 'vue'
const open = shallowRef(false)
const childrenDrawer = shallowRef(false)
function showDrawer() {
open.value = true
}
function onClose() {
open.value = false
}
function showChildrenDrawer() {
childrenDrawer.value = true
}
function onChildrenDrawerClose() {
childrenDrawer.value = false
}
</script>
<template>
<a-button type="primary" @click="showDrawer">
Open drawer
</a-button>
<a-drawer
v-model:open="open"
title="Multi-level drawer"
:size="520"
:closable="false"
@close="onClose"
>
<a-button type="primary" @click="showChildrenDrawer">
Two-level drawer
</a-button>
<a-drawer
v-model:open="childrenDrawer"
title="Two-level Drawer"
:size="320"
:closable="false"
@close="onChildrenDrawerClose"
>
This is two-level drawer
</a-drawer>
</a-drawer>
</template>
```
code/fms/.agents/skills/antdv-next/references/components/drawer/demo/placement.md
+58
View File
@@ -0,0 +1,58 @@
# Custom Placement
## Description (en-US)
The Drawer can appear from any edge of the screen.
## Source
```vue
<script setup lang="ts">
import type { DrawerProps } from 'antdv-next'
import { shallowRef } from 'vue'
const open = shallowRef(false)
const placement = shallowRef<DrawerProps['placement']>('left')
function showDrawer() {
open.value = true
}
function onClose() {
open.value = false
}
</script>
<template>
<a-space>
<a-radio-group v-model:value="placement">
<a-radio value="top">
top
</a-radio>
<a-radio value="right">
right
</a-radio>
<a-radio value="bottom">
bottom
</a-radio>
<a-radio value="left">
left
</a-radio>
</a-radio-group>
<a-button type="primary" @click="showDrawer">
Open
</a-button>
</a-space>
<a-drawer
v-model:open="open"
title="Basic Drawer"
:placement="placement"
:closable="false"
@close="onClose"
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-drawer>
</template>
```
code/fms/.agents/skills/antdv-next/references/components/drawer/demo/render-in-current.md
+53
View File
@@ -0,0 +1,53 @@
# Render in current dom
## Description (en-US)
Render in current dom. custom container, check `getContainer`.
> Note: `style` and `className` props are moved to Drawer panel in v5 which is aligned with Modal component. Original `style` and `className` props are replaced by `rootStyle` and `rootClass`.
> When `getContainer` returns a DOM node, you need to manually set `rootStyle` to `{ position: 'absolute' }`.
## Source
```vue
<script setup lang="ts">
import type { CSSProperties } from 'vue'
import { theme } from 'antdv-next'
import { computed, ref } from 'vue'
const { token } = theme.useToken()
const open = ref(false)
const containerStyle = computed<CSSProperties>(() => ({
position: 'relative',
height: '200px',
padding: '48px',
overflow: 'hidden',
background: token.value.colorFillAlter,
border: `1px solid ${token.value.colorBorderSecondary}`,
borderRadius: `${token.value.borderRadiusLG}px`,
}))
</script>
<template>
<div :style="containerStyle">
Render in this
<div style="margin-top: 16px">
<a-button type="primary" @click="open = true">
Open
</a-button>
</div>
<a-drawer
v-model:open="open"
title="Basic Drawer"
placement="right"
:closable="false"
:get-container="false"
@close="open = false"
>
<p>Some contents...</p>
</a-drawer>
</div>
</template>
```
code/fms/.agents/skills/antdv-next/references/components/drawer/demo/resizable.md
+59
View File
@@ -0,0 +1,59 @@
# Resizable
## Description (en-US)
Resizable drawer that allows users to adjust the drawer's width or height by dragging the edge.
## Source
```vue
<script setup lang="ts">
import type { DrawerProps, RadioChangeEvent } from 'antdv-next'
import { shallowRef } from 'vue'
const open = shallowRef(false)
const placement = shallowRef<DrawerProps['placement']>('right')
const size = shallowRef(256)
function onChange(e: RadioChangeEvent) {
size.value = 256
placement.value = e.target.value
}
function onClose() {
open.value = false
}
function onResize(newSize: number | string) {
if (typeof newSize === 'number')
size.value = newSize
}
</script>
<template>
<a-space style="margin-bottom: 16px">
<a-radio-group
v-model:value="placement"
:options="['top', 'right', 'bottom', 'left'].map((pos) => ({ label: pos, value: pos }))"
@change="onChange"
/>
<a-button type="primary" @click="() => open = true">
Open Drawer
</a-button>
</a-space>
<div>Current size: {{ size }}px</div>
<a-drawer
v-model:open="open"
title="Resizable Drawer"
:placement="placement"
:size="size"
:resizable="{
onResize,
}"
@close="onClose"
>
<p>Drag the edge to resize the drawer</p>
<p>Current size: {{ size }}px</p>
</a-drawer>
</template>
```
code/fms/.agents/skills/antdv-next/references/components/drawer/demo/size.md
+63
View File
@@ -0,0 +1,63 @@
# Preset size
## Description (en-US)
The default width (or height) of Drawer is `378px`, and there is a preset large size `736px`.
## Source
```vue
<script setup lang="ts">
import type { DrawerProps } from 'antdv-next'
import { shallowRef } from 'vue'
const open = shallowRef(false)
const size = shallowRef<DrawerProps['size']>('default')
function showDefaultDrawer() {
size.value = 'default'
open.value = true
}
function showLargeDrawer() {
size.value = 'large'
open.value = true
}
function onClose() {
open.value = false
}
</script>
<template>
<a-space>
<a-button type="primary" @click="showDefaultDrawer">
Open Default Size (378px)
</a-button>
<a-button type="primary" @click="showLargeDrawer">
Open Large Size (736px)
</a-button>
</a-space>
<a-drawer
v-model:open="open"
:title="`${size} Drawer`"
placement="right"
:size="size"
@close="onClose"
>
<template #extra>
<a-space>
<a-button @click="onClose">
Cancel
</a-button>
<a-button type="primary" @click="onClose">
OK
</a-button>
</a-space>
</template>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-drawer>
</template>
```
code/fms/.agents/skills/antdv-next/references/components/drawer/demo/style-class.md
+90
View File
@@ -0,0 +1,90 @@
# Custom semantic dom styling
## Description (en-US)
## Source
```vue
<script setup lang="ts">
import type { DrawerProps } from 'antdv-next'
import { theme } from 'antdv-next'
import { ref } from 'vue'
const { token } = theme.useToken()
const open = ref(false)
const openFn = ref(false)
const classes: DrawerProps['classes'] = {
header: 'demo-drawer-header',
body: 'demo-drawer-body',
}
const stylesObject: DrawerProps['styles'] = {
body: {
backgroundColor: '#f5f5f5',
},
footer: {
backgroundColor: '#fafafa',
},
}
const stylesFn: DrawerProps['styles'] = (info) => {
if (info?.props?.placement === 'right') {
return {
mask: {
backgroundColor: 'rgba(0, 0, 0, 0.2)',
},
wrapper: {
boxShadow: '0 8px 24px rgba(0, 0, 0, 0.15)',
},
}
}
return {}
}
</script>
<template>
<a-flex gap="middle">
<a-button @click="open = true">
Object Style
</a-button>
<a-button type="primary" @click="openFn = true">
Function Style
</a-button>
</a-flex>
<a-drawer
v-model:open="open"
title="Custom Style Drawer"
:classes="classes"
:styles="stylesObject"
@close="open = false"
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-drawer>
<a-drawer
v-model:open="openFn"
title="Custom Function Drawer"
:classes="classes"
:styles="stylesFn"
@close="openFn = false"
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</a-drawer>
</template>
<style scoped>
.demo-drawer-header {
border-bottom: 1px dashed v-bind('token.colorBorder');
}
.demo-drawer-body {
border-top: 1px dashed v-bind('token.colorBorder');
}
</style>
```
code/fms/.agents/skills/antdv-next/references/components/drawer/demo/user-profile.md
+236
View File
@@ -0,0 +1,236 @@
# Preview drawer
## Description (en-US)
Use Drawer to quickly preview details of an object, such as those in a list.
## Source
```vue
<script setup lang="ts">
import { defineComponent, h, ref } from 'vue'
const open = ref(false)
const users = [
{ id: 1, name: 'Lily', description: 'Progresser XTech' },
{ id: 2, name: 'Lily', description: 'Progresser XTech' },
]
const DescriptionItem = defineComponent({
name: 'DescriptionItem',
props: {
title: {
type: String,
required: true,
},
},
setup(props, { slots }) {
return () => h('div', { class: 'site-description-item-profile-wrapper' }, [
h('p', { class: 'site-description-item-profile-p-label' }, `${props.title}:`),
slots.default?.(),
])
},
})
</script>
<template>
<ul class="user-list">
<li v-for="item in users" :key="item.id" class="user-list-item">
<div class="user-meta">
<a-avatar src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
<div>
<a-typography-link href="https://ant.design/index-cn">
{{ item.name }}
</a-typography-link>
<div class="user-desc">
{{ item.description }}
</div>
</div>
</div>
<a-button type="link" @click="open = true">
View Profile
</a-button>
</li>
</ul>
<a-drawer
v-model:open="open"
:size="640"
placement="right"
:closable="false"
@close="open = false"
>
<p class="site-description-item-profile-p" style="margin-bottom: 24px;">
User Profile
</p>
<p class="site-description-item-profile-p">
Personal
</p>
<a-row>
<a-col :span="12">
<DescriptionItem title="Full Name">
Lily
</DescriptionItem>
</a-col>
<a-col :span="12">
<DescriptionItem title="Account">
AntDesign@example.com
</DescriptionItem>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<DescriptionItem title="City">
HangZhou
</DescriptionItem>
</a-col>
<a-col :span="12">
<DescriptionItem title="Country">
China
</DescriptionItem>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<DescriptionItem title="Birthday">
February 2, 1900
</DescriptionItem>
</a-col>
<a-col :span="12">
<DescriptionItem title="Website">
-
</DescriptionItem>
</a-col>
</a-row>
<a-row>
<a-col :span="24">
<DescriptionItem title="Message">
Make things as simple as possible but no simpler.
</DescriptionItem>
</a-col>
</a-row>
<a-divider />
<p class="site-description-item-profile-p">
Company
</p>
<a-row>
<a-col :span="12">
<DescriptionItem title="Position">
Programmer
</DescriptionItem>
</a-col>
<a-col :span="12">
<DescriptionItem title="Responsibilities">
Coding
</DescriptionItem>
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<DescriptionItem title="Department">
XTech
</DescriptionItem>
</a-col>
<a-col :span="12">
<DescriptionItem title="Supervisor">
<a href="https://ant.design">
Lin
</a>
</DescriptionItem>
</a-col>
</a-row>
<a-row>
<a-col :span="24">
<DescriptionItem title="Skills">
C / C ++, data structures, software engineering, operating systems, computer networks,
databases, compiler theory, computer architecture, Microcomputer Principle and Interface
Technology, Computer English, Java, ASP, etc.
</DescriptionItem>
</a-col>
</a-row>
<a-divider />
<p class="site-description-item-profile-p">
Contacts
</p>
<a-row>
<a-col :span="12">
<DescriptionItem title="Email">
AntDesign@example.com
</DescriptionItem>
</a-col>
<a-col :span="12">
<DescriptionItem title="Phone Number">
+86 181 0000 0000
</DescriptionItem>
</a-col>
</a-row>
<a-row>
<a-col :span="24">
<DescriptionItem title="Github">
<a href="http://github.com/ant-design/ant-design/" target="_blank" rel="noreferrer">
github.com/ant-design/ant-design/
</a>
</DescriptionItem>
</a-col>
</a-row>
</a-drawer>
</template>
<style scoped>
.user-list {
margin: 0;
padding: 0;
list-style: none;
border: 1px solid #f0f0f0;
border-radius: 6px;
}
.user-list-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
}
.user-list-item + .user-list-item {
border-top: 1px solid #f0f0f0;
}
.user-meta {
display: flex;
align-items: center;
gap: 12px;
}
.user-desc {
color: rgba(0, 0, 0, 0.45);
font-size: 12px;
}
.site-description-item-profile-wrapper {
margin-bottom: 7px;
color: rgba(0, 0, 0, 0.65);
font-size: 14px;
line-height: 1.5715;
}
.site-description-item-profile-p {
display: block;
margin-bottom: 16px;
color: rgba(0, 0, 0, 0.85);
font-size: 16px;
line-height: 1.5715;
}
.site-description-item-profile-p-label {
display: inline-block;
margin-inline-end: 8px;
color: rgba(0, 0, 0, 0.85);
}
</style>
```
code/fms/.agents/skills/antdv-next/references/components/drawer/docs.md
+105
View File
@@ -0,0 +1,105 @@
---
title: Drawer
description: A panel that slides out from the edge of the screen.
---
## When To Use
A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context.
- Use a Form to create or edit a set of information.
- Processing subtasks. When subtasks are too heavy for a Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
- When the same Form is needed in multiple places.
> Notes for developers
>
> The `loading` prop renders Skeleton in Drawer.
## Examples
## Demos
| Demo | Path |
| --- | --- |
| Basic | demo/basic-right.md |
| Custom Placement | demo/placement.md |
| Resizable | demo/resizable.md |
| Loading | demo/loading.md |
| Extra Actions | demo/extra.md |
| Render in current dom | demo/render-in-current.md |
| Submit form in drawer | demo/form-in-drawer.md |
| Preview drawer | demo/user-profile.md |
| Multi-level drawer | demo/multi-level-drawer.md |
| Preset size | demo/size.md |
| mask | demo/mask.md |
| Closable placement | demo/closable-placement.md |
| Custom semantic dom styling | demo/style-class.md |
## API
### Props
Common props ref：[Common props](../../docs/vue/common-props.md)
| Property | Description | Type | Default | Version | [Global Config](../config-provider/docs.md#component-config) |
| --- | --- | --- | --- | --- | --- |
| afterOpenChange | Callback after the animation ends when switching drawers | (open: boolean) => void | - | - | × |
| classes | Customize class for each semantic structure inside the Drawer component. Supports object or function. | DrawerClassNamesType | - | - | ✓ |
| closable | Whether to show a close button. The position can be configured with `placement` | boolean \| \{ closeIcon?: VueNode, disabled?: boolean, placement?: 'start' \| 'end' \} | true | - | ✓ |
| closeIcon | Custom close icon | VueNode | - | - | ✓ |
| ~~destroyOnClose~~ | Whether to unmount child components on closing drawer or not | boolean | false | - | × |
| destroyOnHidden | Whether to unmount child components on closing drawer or not | boolean | false | - | × |
| extra | Extra actions area at corner | VueNode | - | - | × |
| footer | The footer for Drawer | VueNode | - | - | × |
| forceRender | Pre-render Drawer component forcibly | boolean | false | - | × |
| getContainer | Mounted node and display window for Drawer | string \| HTMLElement \| (() => HTMLElement) \| false | document.body | - | × |
| keyboard | Whether support press esc to close | boolean | true | - | × |
| loading | Show the Skeleton | boolean | false | - | × |
| mask | Mask effect | MaskType | true | - | ✓ |
| maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not | boolean | true | - | × |
| placement | The placement of the Drawer | `top` \| `right` \| `bottom` \| `left` | `right` | - | × |
| push | Nested drawers push behavior | boolean \| \{ distance: string \| number \} | \{ distance: 180 \} | - | × |
| resizable | Enable resizable by dragging | boolean \| [ResizableConfig](#resizableconfig) | - | - | × |
| rootClass | Root container class | string | - | - | × |
| rootStyle | Style of wrapper element which contains mask | CSSProperties | - | - | × |
| size | Preset size of drawer, default `378px` and large `736px`, or a custom number | 'default' \| 'large' \| number | 'default' | - | × |
| styles | Customize inline style for each semantic structure inside the Drawer component. Supports object or function. | DrawerStylesType | - | - | ✓ |
| title | The title for Drawer | VueNode | - | - | × |
| open | Whether the Drawer dialog is visible or not, support `v-model:open` | boolean | false | - | × |
| zIndex | The `z-index` of the Drawer | number | 1000 | - | × |
### Events
| Event | Description | Type | Version |
| --- | --- | --- | --- |
| afterOpenChange | Callback after the animation ends when switching drawers | (open: boolean) => void | - |
| close | Callback when drawer is closed | (e: MouseEvent \| KeyboardEvent) => void | - |
| keydown | Keyboard keydown event | (e: KeyboardEvent) => void | - |
| keyup | Keyboard keyup event | (e: KeyboardEvent) => void | - |
| mouseenter | Mouse enter event | (e: MouseEvent) => void | - |
| mouseleave | Mouse leave event | (e: MouseEvent) => void | - |
| mouseover | Mouse over event | (e: MouseEvent) => void | - |
| click | Click event | (e: MouseEvent) => void | - |
### Slots
| Slot | Description | Type | Version |
| --- | --- | --- | --- |
| title | Title | () => any | - |
| footer | Footer | () => any | - |
| extra | Extra actions | () => any | - |
| closeIcon | Custom close icon | () => any | - |
| default | Drawer content | () => any | - |
## Types
### ResizableConfig
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| onResizeStart | Callback when resize starts | () => void | - | - |
| onResize | Callback during resizing | (size: number) => void | - | - |
| onResizeEnd | Callback when resize ends | () => void | - | - |
## Semantic DOM
| _semantic | demo/_semantic.md |
code/fms/.agents/skills/antdv-next/references/components/drawer/token.md
+29
View File
@@ -0,0 +1,29 @@
# drawer Token
Use these variables through `theme.components.Drawer`. This document lists definitions only and does not include values.
```vue
<a-config-provider
:theme="{
token: {
// Global token configuration
},
components: {
Drawer: {
// Token name: value
},
},
}"
>
...
</a-config-provider>
```
## Token List
| Token | Type | Description |
| --- | --- | --- |
| `zIndexPopup` | `number` | z-index of drawer |
| `footerPaddingBlock` | `number` | Vertical padding of footer |
| `footerPaddingInline` | `number` | Horizontal padding of footer |
| `draggerSize` | `number` | Size of resize handle |