介绍

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

用法

查看代码

<template>
    <ShadcnTrend :value="10"  :dark="darkMode" />
    <ShadcnTrend :value="-10"  :dark="darkMode" />
</template>

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

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

</script>

反转 (reverse)

查看代码

<template>
    <ShadcnTrend :value="10" reverse  :dark="darkMode" />
    <ShadcnTrend :value="-10" reverse  :dark="darkMode" />
</template>

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

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

</script>

文本颜色 (text-color)

查看代码

<template>
    <ShadcnTrend :value="10" text-color :dark="darkMode" />
    <ShadcnTrend :value="-10" text-color :dark="darkMode" />
</template>

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

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

</script>

趋势 (Trend) 属性

趋势 (Trend) 插槽