TechUI Docs

简中

EN

简中

EN

主题

TuiPanelTitleEave ​

🏅原创

科幻面板标题-翼维 是 TechUI Scifi Panel Title 系列中的轻量化纯 CSS 标题组件。

从视觉上看，它表现为标题文字上方的一条高亮装饰线，如同建筑的飞檐一般覆盖在内容之上。这种轻盈的构造使其完全不需要依赖图片或复杂计算，渲染开销几乎为零。

它非常适合用于 高密度数据面板、小型悬浮卡片 或 追求极简扁平化风格 的界面布局，在提供必要视觉层级划分的同时，保持了界面的绝对清爽。

提示：该组件可以通过 TuiPanelTitleA1 或其语义化别名 TuiPanelTitleEave 进行调用。

基础用法 ​

默认形态 ​

默认情况下，A1 渲染为文字上方带有的一段装饰横条。 横条的长度通常与文字宽度相关或固定，起到视觉引导作用。

vue
<template>
  <div class="card-container">
    <TuiPanelTitleEave title="BASIC INFO" />
    
    <ScifiPanelRanger>
      <TuiPanelTitleEave 
        title="DEVICE STATUS" 
        position="left"
        :offset="20"
      />
    </ScifiPanelRanger>
  </div>
</template>

布局与定位 ​

TuiPanelTitleEave 高度依赖 position 属性来确定其在父容器边缘的位置。

对齐方式 (Position) ​

  • left: 标题靠左显示，装饰横条通常位于左上。
  • right: 标题靠右显示，装饰横条通常位于右上。
  • center: (通常 Tui 系列侧重边缘装饰，具体表现视 CSS 实现而定，建议以左右为主)。

偏移微调 (Offset) ​

使用 offset 属性调整标题距离边缘的像素距离。

vue
<template>
  <TuiPanelTitleEave 
    title="CONFIGURATION" 
    position="right" 
    :offset="40" 
  />
</template>

视觉定制 ​

装饰配色 (Color Alt) ​

  • decorationColorAlt: 交换高亮色与焦点色。
  • 默认 (False): 文字使用主色，装饰条使用高亮色。
  • 开启 (True): 颜色互换。横条变为焦点色，可能用于表示“选中”或“激活”状态。

字体与缩放 ​

  • fontSize / fontWeight: Tui 系列支持直接通过 Props 覆盖 CSS 变量定义的字体样式，方便快速调整。
  • scale: 虽然是 CSS 组件，但也支持通过 CSS Transform 进行整体缩放。
vue
<template>
  <TuiPanelTitleEave 
    title="WARNING" 
    fontWeight="bold"
    :fontSize="18"
    :decorationColorAlt="true"
  />
</template>

CSS变量 ​

TuiPanelTitle 系列使用以 --tui-panti- 为前缀的 CSS 变量系统。

案例：赛博紫风格 (Cyber Purple) ​

此案例定义了一个紫色调的极简标题。

vue
<template>
  <TuiPanelTitleEave 
    className="title-purple" 
    title="USER DATA"
  />
</template>

<style lang="less">
.title-purple {
  /* 文字颜色 */
  --tui-panti-fc: #e9d5ff; /* 浅紫 */
  
  /* 装饰横条颜色 (高亮) */
  --tui-panti-hlite: #d8b4fe;
  
  /* 辅助/焦点颜色 */
  --tui-panti-focus: #a855f7;
  
  /* 字体设置 */
  --tui-panti-fz: 16px;
  --tui-panti-fw: 600;
}
</style>

变量字典 ​

以下是 TuiPanelTitleEave 支持的主要 CSS 变量：

变量名说明默认值
文字样式
--tui-panti-fc标题文字颜色var(--font-strong)
--tui-panti-fz字体大小var(--cpt-panti-fz)
--tui-panti-fw字体粗细var(--cpt-panti-fw)
--tui-panti-lh行高30px
装饰样式
--tui-panti-hlite装饰横条颜色 (Highlight)var(--scifi-hlite)
--tui-panti-focus辅助颜色 (Focus)var(--scifi-focus)
--tui-panti-ofs默认偏移量10px
--tui-panti-scale组件缩放比例var(--cpt-panti-scale)

API 参考 ​

Props ​

属性名说明类型默认值
title标题内容。显示的文本字符串String—
position水平位置。'left', 'right'Stringnull
offset边距偏移。距离边缘的像素值Number—
fontSize字体大小 (px)。直接覆盖样式Number—
fontWeight字体粗细。如 'bold'String—
decorationColorAlt装饰变体。交换高亮色与焦点色Booleanfalse
scale缩放比例。整体缩放Number1
className自定义类名String—

Slots ​

插槽名说明
default自定义标题内容。