View Shadcn UI

Appearance

介绍 ​


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

用法 ​

查看代码
vue
<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) ​

查看代码
vue
<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) ​

查看代码
vue
<template>
      <ShadcnText strong color="#18A058">#18A058</ShadcnText>
      <ShadcnText strong color="#F59E0B">#F59E0B</ShadcnText>
      <ShadcnText strong color="#EF4444">#EF4444</ShadcnText>
</template>

斜体 (italic) ​

查看代码
vue
<template>
      <ShadcnText italic color="#18A058">#18A058</ShadcnText>
      <ShadcnText italic color="#F59E0B">#F59E0B</ShadcnText>
      <ShadcnText italic color="#EF4444">#EF4444</ShadcnText>
</template>

下划线 (underline) ​

查看代码
vue
<template>
      <ShadcnText underline color="#18A058">#18A058</ShadcnText>
      <ShadcnText underline color="#F59E0B">#F59E0B</ShadcnText>
      <ShadcnText underline color="#EF4444">#EF4444</ShadcnText>
</template>

删除线 (deleted) ​

查看代码
vue
<template>
      <ShadcnText deleted color="#18A058">#18A058</ShadcnText>
      <ShadcnText deleted color="#F59E0B">#F59E0B</ShadcnText>
      <ShadcnText deleted color="#EF4444">#EF4444</ShadcnText>
</template>

类型 (type) ​

查看代码
vue
<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>

文本 (Text) 属性 ​

文本 (Text) 插槽 ​