介绍

本文档主要用于描述 ShadcnDrawer 组件的一些特性和用法。

用法

查看代码

<template>
  <ShadcnButton @click="defaultValue = !defaultValue" :dark="darkMode">Open</ShadcnButton>
  <ShadcnDrawer v-model="defaultValue" title="Title" :dark="darkMode">Content</ShadcnDrawer>
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

import { ref } from 'vue'

const defaultValue = ref(false)
</script>

可关闭 (closeable)

查看代码

<template>
  <ShadcnDrawer closable title="Title" :dark="darkMode">Content</ShadcnDrawer>
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

import { ref } from 'vue'

const defaultValue = ref(false)
</script>

背景关闭 (mask-closable)

查看代码

<template>
  <ShadcnDrawer v-model="defaultValue" mask-closable title="Title" :dark="darkMode">Content</ShadcnDrawer>
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

import { ref } from 'vue'

const defaultValue = ref(false)
</script>

位置 (position)

查看代码

<template>
  <ShadcnSpace :dark="darkMode">
    <ShadcnButton @click="topValue = !topValue" :dark="darkMode">Top</ShadcnButton>
    <ShadcnButton @click="buttomValue = !buttomValue" :dark="darkMode">Buttom</ShadcnButton>
    <ShadcnButton @click="leftValue = !leftValue" :dark="darkMode">Left</ShadcnButton>
    <ShadcnButton @click="rightValue = !rightValue" :dark="darkMode">Right</ShadcnButton>
  </ShadcnSpace>
  <ShadcnDrawer v-model="topValue" title="Top" position="top" :dark="darkMode" />
  <ShadcnDrawer v-model="buttomValue" title="Buttom" position="bottom" :dark="darkMode" />
  <ShadcnDrawer v-model="leftValue" title="Left" position="left" :dark="darkMode" />
  <ShadcnDrawer v-model="rightValue" title="Right" position="right" :dark="darkMode" />
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

import { ref } from 'vue'

const topValue = ref(false)
const buttomValue = ref(false)
const leftValue = ref(false)
const rightValue = ref(false)
</script>

宽度 (width) & 高度 (height)

查看代码

<template>
  <ShadcnButton @click="widthValue = !widthValue" :dark="darkMode">Width 400</ShadcnButton>
  <ShadcnButton @click="heightValue = !heightValue" :dark="darkMode">Height 400</ShadcnButton>
  <ShadcnDrawer v-model="widthValue" title="Width 400" width="400" :dark="darkMode" />
  <ShadcnDrawer v-model="heightValue" title="Height 400" position="top" height="400" :dark="darkMode" />
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

import { ref } from 'vue'

const widthValue = ref(false)
const heightValue = ref(false)
</script>

液态玻璃效果 (glass)

查看代码

<template>
    <ShadcnButton @click="drawer = !drawer">打开液态玻璃抽屉</ShadcnButton>
    <ShadcnDrawer v-model="drawer" glass title="液态玻璃效果" width="400px">
        <div class="space-y-4">
            <p class="text-sm text-gray-700">
                这是一个带有液态玻璃效果的抽屉组件。
            </p>
            <p class="text-sm text-gray-700">
                背景具有模糊和半透明特性，同时保持良好的可读性。
            </p>
        </div>
        <template #footer>
            <div class="flex gap-2 justify-end">
                <ShadcnButton @click="drawer = false">关闭</ShadcnButton>
                <ShadcnButton type="primary" @click="drawer = false">确定</ShadcnButton>
            </div>
        </template>
    </ShadcnDrawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const drawer = ref(false);
</script>

抽屉 (Drawer) 属性

抽屉 (Drawer) 事件

抽屉 (Drawer) 插槽