TechUI Docs

简中

EN

简中

EN

主题

类型面板 ​

👑首创

Typed 是 TechUI 视觉系统的原子容器。

它不包含具体的业务逻辑，而是封装了 TechUI 的核心色彩映射机制。上层组件（如 Attention, Dialog, Card）均调用它来实现统一的视觉风格。

核心概念 ​

使用 Typed 之前，请先理解 TechUI 的二维视觉坐标系：

  1. Type (语义): 决定颜色的色相（如 Primary 蓝, Danger 红）。
  2. Tone (色调): 决定颜色的层级变体。

色调系统 ​

TechUI 的色调系统并非简单地改变透明度，而是直接调用主题系统（Theme）中预定义的色阶变量。

这意味着 Weak, Base, Strong 等色调在主题中都有独立的颜色定义（例如 --primary-weak, --primary-base），从而保证了色彩在不同层级下的准确性和协调性。

色调 (Tone)变量映射示例视觉表现
Weak (淡)var(--primary-weak)浅色/辅助色。调用主题中定义的弱色变量，通常明度较高或饱和度较低。
Base (基)var(--primary-base)标准色。调用主题中定义的标准基础色变量。
Strong (强)var(--primary-strong)深色/强调色。调用主题中定义的强色变量，通常更加浓郁深沉。
StrongInvert (强反)(复合逻辑)背景强烈 + 文字反转。使用深色/高饱和背景，文字强制反白。
ExtremeInvert (极反)(特殊计算)极致反差。背景色经过特殊计算，旨在与当前环境产生最大反差。

外观模式 ​

通过 appearance 属性，可以彻底改变组件的渲染形态。

背景模式 (background) - 默认 ​

渲染完整的容器。支持透明度、模糊和阴影配置。

html
<template>
  <div class="demo-gap">
    <TuiTyped type="primary" tone="base">
      <h3>Base Tone</h3>
      <p>标准色调。</p>
    </TuiTyped>

    <TuiTyped type="primary" tone="strong">
      <h3>Strong Tone</h3>
      <p>更深、更强调的颜色。</p>
    </TuiTyped>
    
    <TuiTyped type="primary" tone="weak">
      <h3>Weak Tone</h3>
      <p>较浅的辅助颜色。</p>
    </TuiTyped>
  </div>
</template>

线条模式 (line) ​

仅渲染一条强调色线条，背景通常为透明。 配合 linePosition (top, right, bottom, left) 和 lineThickness 使用。

html
<template>
  <div class="demo-gap">
    <TuiTyped appearance="line" type="primary" linePosition="left" :lineThickness="4">
      <p>左侧高亮引用块</p>
    </TuiTyped>

    <TuiTyped appearance="line" type="success" linePosition="top" :lineThickness="2">
      <p>顶部状态指示条</p>
    </TuiTyped>
  </div>
</template>

文字模式 (text) ​

仅改变容器内部文字的颜色，去除所有背景和边框。 此时文字颜色会直接跟随 Tone 的设定（例如 tone="weak" 时文字颜色就是 --primary-weak）。

html
<TuiTyped appearance="text" type="info" tone="strong">
  这段文字使用的是 Info 类型的 Strong 变体颜色。
</TuiTyped>

视觉特效 ​

在 appearance="background" 模式下，支持更高级的视觉定制。

智能阴影 (Shadow) ​

通过 shadowColor 控制阴影的强度或策略。

  • 强度等级: weakest, weaker, weak (默认), base, strong, stronger, strongest.
  • 匹配模式: match. 阴影颜色会自动吸取当前 type 的颜色（例如红色面板产生红色光晕）。
html
<template>
  <TuiTyped type="default" hasShadow shadowColor="base">Base Shadow</TuiTyped>
  
  <TuiTyped type="primary" tone="strong" hasShadow shadowColor="match">
    Glowing Button Style
  </TuiTyped>
</template>

玻璃拟态 (Glassmorphism) ​

  • transparent: 开启背景半透明。
  • backgroundBlur: 开启背景高斯模糊（Backdrop Filter）。
html
<TuiTyped type="primary" tone="base" :transparent="true" :backgroundBlur="true">
  <p>背景后的内容会被模糊处理，呈现毛玻璃质感。</p>
</TuiTyped>

自定义颜色 ​

当预设的语义类型无法满足需求时，customColor 支持传入自定义值。

单色模式 ​

传入 CSS 颜色字符串。组件会自动计算该颜色的 Base, Strong, Invert 等所有变体。

html
<TuiTyped customColor="#722ed1" tone="strongInvert">
  Purple Strong Invert
</TuiTyped>

渐变/多色模式 ​

传入颜色数组。组件会根据外观模式应用渐变逻辑。

html
<TuiTyped :customColor="['#00c6fb', '#005bea']" tone="strong">
  Gradient Background
</TuiTyped>

API 参考 ​

Props ​

属性名类型默认值说明
appearanceString'background'核心外观。可选：background, line, text, none。
typeString'default'语义类型。可选：default, invert, primary, success, warning, danger, info, emphasis。
toneString'base'视觉色调。可选：weak, base, strong, strongInvert, extremeInvert。
customColorString/Arraynull自定义颜色。支持 CSS 颜色值或渐变数组。

背景参数 (appearance='background') ​

属性名类型默认值说明
transparentBooleanfalse是否开启半透明。
backgroundBlurBooleantrue是否开启背景模糊 (需配合 transparent)。
hasShadowBooleantrue是否显示阴影。
shadowColorString'weak'阴影策略。可选：weakest...strongest, match (匹配类型色)。

线条参数 (appearance='line') ​

属性名类型默认值说明
linePositionString'top'线条位置：top, right, bottom, left。
lineThicknessNumber-线条粗细 (px)。

Slots ​

插槽名说明
default容器内容。