介绍
本文档主要用于描述 ShadcnTag 组件的一些特性和用法。
用法
查看代码
vue
<template>
<ShadcnSpace wrap :dark="darkMode">
<ShadcnTag text="Text" :dark="darkMode" />
<ShadcnTag :dark="darkMode">Slot</ShadcnTag>
</ShadcnSpace>
</template>
<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'
const { isDark } = useData()
const darkMode = computed(() => isDark.value)
</script>类型 (type)
查看代码
vue
<template>
<ShadcnSpace wrap :dark="darkMode">
<ShadcnTag text="Text" :dark="darkMode" />
<ShadcnTag text="Text" type="primary" :dark="darkMode" />
<ShadcnTag text="Text" type="success" :dark="darkMode" />
<ShadcnTag text="Text" type="warning" :dark="darkMode" />
<ShadcnTag text="Text" type="error" :dark="darkMode" />
</ShadcnSpace>
</template>
<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'
const { isDark } = useData()
const darkMode = computed(() => isDark.value)
</script>边框 (border)
查看代码
vue
<template>
<ShadcnSpace wrap :dark="darkMode">
<ShadcnTag text="Text" border :dark="darkMode" />
<ShadcnTag text="Text" type="primary" border :dark="darkMode" />
<ShadcnTag text="Text" type="success" border :dark="darkMode" />
<ShadcnTag text="Text" type="warning" border :dark="darkMode" />
<ShadcnTag text="Text" type="error" border :dark="darkMode" />
</ShadcnSpace>
</template>
<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'
const { isDark } = useData()
const darkMode = computed(() => isDark.value)
</script>尺寸 (size)
查看代码
vue
<template>
<ShadcnSpace wrap :dark="darkMode">
<ShadcnTag text="Default Tag" size="default" :dark="darkMode" />
<ShadcnTag text="Medium Tag" size="medium" :dark="darkMode" />
<ShadcnTag text="Large Tag Width" size="large" :dark="darkMode" />
</ShadcnSpace>
</template>
<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'
const { isDark } = useData()
const darkMode = computed(() => isDark.value)
</script>可关闭 (closeable)
查看代码
vue
<template>
<ShadcnSpace wrap :dark="darkMode">
<ShadcnTag text="Default Tag" size="default" closable @on-close="console.log('on-close')" :dark="darkMode" />
<ShadcnTag text="Medium Tag" size="medium" closable :dark="darkMode" />
<ShadcnTag text="Large Tag Width" size="large" closable :dark="darkMode" />
</ShadcnSpace>
</template>
<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'
const { isDark } = useData()
const darkMode = computed(() => isDark.value)
</script>颜色 (color)
查看代码
vue
<template>
<ShadcnSpace wrap :dark="darkMode">
<ShadcnTag text="Default Tag" border color="#D35DD4" :dark="darkMode" />
<ShadcnTag text="Medium Tag" border color="#39604B" :dark="darkMode" />
<ShadcnTag text="Large Tag Width" border color="#301A65" :dark="darkMode" />
</ShadcnSpace>
</template>
<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'
const { isDark } = useData()
const darkMode = computed(() => isDark.value)
</script>