介绍

本文档主要用于描述 ShadcnText 组件的一些功能和用法。

用法

查看代码

<template>
    <ShadcnText color-type="default">Default</ShadcnText>
    <ShadcnText color-type="primary">Primary</ShadcnText>
    <ShadcnText color-type="success">Success</ShadcnText>
    <ShadcnText color-type="warning">Warning</ShadcnText>
    <ShadcnText color-type="error">Error</ShadcnText>
</template>

颜色 (color)

查看代码

<template>
      <ShadcnText color="#18A058">#18A058</ShadcnText>
      <ShadcnText color="#F59E0B">#F59E0B</ShadcnText>
      <ShadcnText color="#EF4444">#EF4444</ShadcnText>
      <ShadcnText color="rgba(43, 79, 81, 1)">rgba(43, 79, 81, 1)</ShadcnText>
      <ShadcnText color="rgba(43, 79, 81, 0.5)">rgba(43, 79, 81, 0.5)</ShadcnText>
      <ShadcnText color="rgba(43, 22, 81, 0.5)">rgba(43, 22, 81, 0.5)</ShadcnText>
      <ShadcnText color="red">red</ShadcnText>
      <ShadcnText color="blue">blue</ShadcnText>
      <ShadcnText color="green">green</ShadcnText>
</template>

粗体 (strong)

查看代码

<template>
      <ShadcnText strong color="#18A058">#18A058</ShadcnText>
      <ShadcnText strong color="#F59E0B">#F59E0B</ShadcnText>
      <ShadcnText strong color="#EF4444">#EF4444</ShadcnText>
</template>

斜体 (italic)

查看代码

<template>
      <ShadcnText italic color="#18A058">#18A058</ShadcnText>
      <ShadcnText italic color="#F59E0B">#F59E0B</ShadcnText>
      <ShadcnText italic color="#EF4444">#EF4444</ShadcnText>
</template>

下划线 (underline)

查看代码

<template>
      <ShadcnText underline color="#18A058">#18A058</ShadcnText>
      <ShadcnText underline color="#F59E0B">#F59E0B</ShadcnText>
      <ShadcnText underline color="#EF4444">#EF4444</ShadcnText>
</template>

删除线 (deleted)

查看代码

<template>
      <ShadcnText deleted color="#18A058">#18A058</ShadcnText>
      <ShadcnText deleted color="#F59E0B">#F59E0B</ShadcnText>
      <ShadcnText deleted color="#EF4444">#EF4444</ShadcnText>
</template>

类型 (type)

查看代码

<template>
    <div class="space-x-2">
        <ShadcnText type="code">Code</ShadcnText>
        <ShadcnText type="pre">Pre</ShadcnText>
        <ShadcnText type="p">P</ShadcnText>
        <ShadcnText type="small">Small</ShadcnText> 
        <ShadcnText type="h1">H1</ShadcnText>
        <ShadcnText type="h2">H2</ShadcnText>
        <ShadcnText type="h3">H3</ShadcnText>
        <ShadcnText type="h4">H4</ShadcnText>
        <ShadcnText type="h5">H5</ShadcnText>
        <ShadcnText type="h6">H6</ShadcnText>
        <ShadcnText type="label">Label</ShadcnText>
        <ShadcnText type="span">Span</ShadcnText>
    </div>
</template>

液态玻璃效果 (glass)

查看代码

<template>
    <div :class="['p-6 rounded-lg', darkMode ? 'bg-gradient-to-r from-purple-900 to-pink-900' : 'bg-gradient-to-r from-purple-400 to-pink-400']">
      <div :class="['p-8 rounded-lg', darkMode ? 'bg-gray-800/50' : 'bg-white/50']">
        <div class="space-y-4">
          <div>
            <h4 :class="['text-base font-semibold mb-2', darkMode ? 'text-gray-200' : 'text-gray-800']">标题样式</h4>
            <div class="space-y-2">
              <ShadcnText type="h3" background glass :dark="darkMode">这是一个H3标题</ShadcnText>
              <br/>
              <ShadcnText type="h5" background glass :dark="darkMode">这是一个H5标题</ShadcnText>
            </div>
          </div>
          <div>
            <h4 :class="['text-base font-semibold mb-2', darkMode ? 'text-gray-200' : 'text-gray-800']">文本样式</h4>
            <div class="space-y-2">
              <ShadcnText background glass :dark="darkMode" strong>加粗文本</ShadcnText>
              <br/>
              <ShadcnText background glass :dark="darkMode" italic>斜体文本</ShadcnText>
              <br/>
              <ShadcnText background glass :dark="darkMode" underline>下划线文本</ShadcnText>
            </div>
          </div>
          <div>
            <h4 :class="['text-base font-semibold mb-2', darkMode ? 'text-gray-200' : 'text-gray-800']">颜色类型</h4>
            <div class="space-y-2">
              <ShadcnText background glass :dark="darkMode" colorType="primary">主要颜色</ShadcnText>
              <br/>
              <ShadcnText background glass :dark="darkMode" colorType="success">成功颜色</ShadcnText>
              <br/>
              <ShadcnText background glass :dark="darkMode" colorType="warning">警告颜色</ShadcnText>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

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

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

文本 (Text) 属性

文本 (Text) 插槽