View Shadcn UI

Appearance

介绍 ​


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

用法 ​

查看代码
vue
<template>
    <ShadcnButton @click="modal = true" :dark="darkMode">Click</ShadcnButton>
    <ShadcnModal v-model="modal" title="Modal Title" description="This is a modal description" :dark="darkMode">
        <div class="flex items-center justify-center h-32">Content</div>
    </ShadcnModal>
</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 modal = ref(false);
</script>

无标题 (no-title) ​

查看代码
vue
<template>
    <ShadcnButton @click="modal = true" :dark="darkMode">Click</ShadcnButton>
    <ShadcnModal v-model="modal" :dark="darkMode">
        <div class="flex items-center justify-center h-32">Content</div>
    </ShadcnModal>
</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 modal = ref(false);
</script>

标题 (title) ​

查看代码
vue
<template>
    <ShadcnButton @click="modal = true" :dark="darkMode">Click</ShadcnButton>
    <ShadcnModal v-model="modal" :dark="darkMode">
        <template #title>Custom Title</template>
        <div class="flex items-center justify-center h-32">Content</div>
    </ShadcnModal>
</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 modal = ref(false);
</script>
查看代码
vue
<template>
    <ShadcnButton @click="modal = true" :dark="darkMode">Click</ShadcnButton>
    <ShadcnModal v-model="modal" title="Custom Footer" :dark="darkMode">
        <div class="flex items-center justify-center h-32">Content</div>
        <template #footer>This is a footer</template>
    </ShadcnModal>
</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 modal = ref(false);
</script>

内容 (content) ​

查看代码
vue
<template>
    <ShadcnButton @click="modal = true" :dark="darkMode">Click</ShadcnButton>
    <ShadcnModal v-model="modal" title="Custom Content" :dark="darkMode">
        <template #content>Custom Content</template>
    </ShadcnModal>
</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 modal = ref(false);
</script>

宽度 (width) ​

查看代码
vue
<template>
    <ShadcnButton @click="modal = true" :dark="darkMode">Click</ShadcnButton>
    <ShadcnModal v-model="modal" title="Custom Width" width="200" :dark="darkMode">
        <div class="flex items-center justify-center h-32">Content</div>
    </ShadcnModal>
</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 modal = ref(false);
</script>

高度 (height) ​

查看代码
vue
<template>
    <ShadcnButton @click="modal = true" :dark="darkMode">Click</ShadcnButton>
    <ShadcnModal v-model="modal" title="Custom Height" height="200" :dark="darkMode">
        <div class="flex items-center justify-center h-32">Content</div>
    </ShadcnModal>
</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 modal = ref(false);
</script>

可关闭 (closeable) ​

查看代码
vue
<template>
    <ShadcnButton @click="closeableModal = true" :dark="darkMode">Closeable</ShadcnButton>
    <ShadcnModal v-model="closeableModal" title="Closeable" closable :dark="darkMode">
        <div class="flex items-center justify-center h-32">Content</div>
    </ShadcnModal>
    <ShadcnButton @click="noClosableModal = true" :dark="darkMode">No Closeable</ShadcnButton>
    <ShadcnModal v-model="noClosableModal" title="Not Closeable" :closable="false" :dark="darkMode">
        <div class="flex items-center justify-center h-32">Content</div>
    </ShadcnModal>
    <ShadcnButton @click="customClosableModal = true" :dark="darkMode">Custom Closable</ShadcnButton>
    <ShadcnModal v-model="customClosableModal" title="Custom Closable" :dark="darkMode">
        <template #close>Custom Close</template>
        <div class="flex items-center justify-center h-32">Content</div>
    </ShadcnModal>
</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 closeableModal = ref(false);
const noClosableModal = ref(false);
const customClosableModal = ref(false);
</script>

背景关闭 (mask-closable) ​

查看代码
vue
<template>
    <ShadcnButton @click="value = true" :dark="darkMode">Mask Closable</ShadcnButton>
    <ShadcnModal v-model="value" title="Mask Closable" :mask-closable="false" :dark="darkMode">
        <div class="flex items-center justify-center h-32">Content</div>
    </ShadcnModal>
</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 value = ref(false);
</script>

液态玻璃效果 (glass) ​

查看代码
vue
<template>
    <ShadcnButton @click="modal = true">打开液态玻璃效果 Modal</ShadcnButton>
    <ShadcnModal v-model="modal" glass title="液态玻璃效果" description="这是一个带有液态玻璃效果的模态框" width="500px">
        <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="modal = false">关闭</ShadcnButton>
                <ShadcnButton type="primary" @click="modal = false">确定</ShadcnButton>
            </div>
        </template>
    </ShadcnModal>
</template>

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

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

模态框 (Modal) 属性 ​

模态框 (Modal) 事件 ​

模态框 (Modal) 插槽 ​