介绍
本文档主要用于描述 ShadcnDrawer 组件的一些特性和用法。
用法
查看代码
vue
<template>
<ShadcnButton @click="defaultValue = !defaultValue">Open</ShadcnButton>
<ShadcnDrawer v-model="defaultValue" title="Title">Content</ShadcnDrawer>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const defaultValue = ref(false)
</script>可关闭 (closeable)
查看代码
vue
<template>
<ShadcnDrawer closable title="Title">Content</ShadcnDrawer>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const defaultValue = ref(false)
</script>背景关闭 (mask-closable)
查看代码
vue
<template>
<ShadcnDrawer v-model="defaultValue" mask-closable title="Title">Content</ShadcnDrawer>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const defaultValue = ref(false)
</script>位置 (position)
查看代码
vue
<template>
<ShadcnSpace>
<ShadcnButton @click="topValue = !topValue">Top</ShadcnButton>
<ShadcnButton @click="buttomValue = !buttomValue">Buttom</ShadcnButton>
<ShadcnButton @click="leftValue = !leftValue">Left</ShadcnButton>
<ShadcnButton @click="rightValue = !rightValue">Right</ShadcnButton>
</ShadcnSpace>
<ShadcnDrawer v-model="topValue" title="Top" position="top"/>
<ShadcnDrawer v-model="buttomValue" title="Buttom" position="bottom"/>
<ShadcnDrawer v-model="leftValue" title="Left" position="left"/>
<ShadcnDrawer v-model="rightValue" title="Right" position="right"/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const topValue = ref(false)
const buttomValue = ref(false)
const leftValue = ref(false)
const rightValue = ref(false)
</script>宽度 (width) & 高度 (height)
查看代码
vue
<template>
<ShadcnButton @click="widthValue = !widthValue">Width 400</ShadcnButton>
<ShadcnButton @click="heightValue = !heightValue">Height 400</ShadcnButton>
<ShadcnDrawer v-model="widthValue" title="Width 400" width="400"/>
<ShadcnDrawer v-model="heightValue" title="Height 400" position="top" height="400"/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const widthValue = ref(false)
const heightValue = ref(false)
</script>