TechUI Docs

简中

EN

简中

EN

主题

PanelTitle 面板标题综述 ​

TechUI Panel Title 是专为 ScifiPanel 系列打造的配套标题组件库。

在科幻或数据大屏界面中，标题不仅仅是文字，更是视觉层级划分的关键。本组件库提供了两种不同技术路线的标题方案，分别对应“重型科幻”与“轻量化扁平”两种风格，均支持灵活的定位与缩放。

系列对比 ​

为了满足不同的性能与视觉需求，我们将标题组件分为两个子系列：

Scifi 系列 (重型科幻) ​

技术核心： SVG · 风格： Hardcore · Textured

  • 渲染方式: 基于 SVG 矢量绘制，拥有复杂的几何结构、切角和流光细节。
  • 适用场景: 主面板标题、HUD 核心数据标注、需要强烈视觉冲击力的模块。
  • 优点: 细节丰富，放大不失真，支持复杂的括弧与底座形态。
  • 前缀: ScifiPanelTitle...

Tui 系列 (轻量极简) ​

技术核心： CSS · 风格： Flat · Performance

  • 渲染方式: 纯 CSS + HTML 绘制，体积极小，渲染开销几乎为零。
  • 适用场景: 密集列表的表头、次级信息卡片、移动端或低性能要求的环境。
  • 优点: 极其轻量，便于通过 CSS 覆盖样式，适合大批量渲染。
  • 前缀: TuiPanelTitle...

关于命名与别名 ​

为了平衡开发稳定性与代码可读性，TechUI Scifi 面板标题组件库采用了双重命名策略。每个组件都拥有一个固定的原始序列名和一个语义化的别名。

  • 原始序列名 (Fixed Serial Name)
    • 例如：ScifiPanelA1、TuiPanelTitleA2
    • 这是组件的底层物理 ID，由“前缀+类别+序列号”组成。它是永久固定且不可变更的，适合底层封装或自动化工具使用。
  • 语义化别名 (Semantic Alias)
    • 例如：ScifiPanelAlt、TuiPanelTitleRod
    • 这是基于外观风格或设计隐喻命名的快捷方式（例如：Alt/变体、Rod/标杆），旨在提高业务代码的可读性，推荐在日常开发中使用。

注意：随着设计语言的演进，个别别名可能会在后期版本中进行语义微调或更名。虽然我们会尽量保持兼容，但在跨大版本升级时请留意相关变更日志。

组件家族 ​

Scifi 系列 (SVG) ​

组件名关键词描述
ScifiPanelTitleAltBase Horizontal标准底座型。带有上下托架或盖板，适合作为面板的主标题。
ScifiPanelTitleDuoBrackets Focus括弧包裹型。左右两侧带有圆弧或机械括弧，强调“锁定”感，适合 HUD。
ScifiPanelTitlePipeSide Vertical侧边竖条型。垂直的实心或双线指示条，仅支持侧边停靠，适合列表头。

Tui 系列 (CSS) ​

组件名关键词描述
TuiPanelTitleEaveBar Minimal极简横条。文字上方的一条装饰线，扁平化设计的首选。
TuiPanelTitleRodPill Side侧边短竖条。文字旁边的胶囊状指示器，占用空间极小。

通用 API 速查 ​

无论是 Scifi 还是 Tui 系列，它们都共享一套标准化的 Props 定义，确保开发体验的一致性。

属性名说明默认值
title标题内容。显示的文本"SCIFI HEADER"
position水平位置。'center', 'left', 'right'null
offset边距偏移。距离边缘的像素值 (px)—
scale缩放比例。整体放大/缩小标题组件1
fontSize字体大小。直接覆盖默认样式—
appearance外观变体。不同组件支持 'A', 'B' 等变体'A'
decorationColorAlt配色反转。交换高亮色与焦点色false

快速上手 ​

通常，我们将 Title 组件放置在 ScifiPanel 内部，并通过 position 和 offset 调整其位置，使其看起来像是“镶嵌”在面板边框上。

vue
<script setup>
import { ScifiPanelPawn } from '@techui/scifi-panel'
import { ScifiPanelTitleAlt, TuiPanelTitleRod } from '@techui/panel-title'
</script>

<template>
  <div class="dashboard">
    
    <ScifiPanelPawn>
      <ScifiPanelTitleAlt 
        title="MAIN SYSTEM" 
        position="center" 
        :scale="1.2"
      />
      <div class="content">...</div>
    </ScifiPanelPawn>

    <ScifiPanelPawn>
      <TuiPanelTitleRod 
        title="Log Entry 01" 
        position="left" 
        :offset="20"
      />
      <div class="list">...</div>
    </ScifiPanelPawn>

  </div>
</template>

CSS变量系统 ​

两大系列分别使用不同的 CSS 变量前缀，互不干扰。

Scifi 系列变量 ​

主要控制 SVG 的填充与描边。

css
.my-scifi-title {
  --sf-panti-focus: #0ea5e9;  /* 主色 (SVG Stroke/Fill) */
  --sf-panti-hlite: #bae6fd;  /* 装饰色 */
  --sf-panti-fc: #e0f2fe;     /* 文字颜色 */
}

Tui 系列变量 ​

主要控制 CSS 边框与背景。

css
.my-tui-title {
  --tui-panti-focus: #10b981; /* 主色 */
  --tui-panti-hlite: #34d399; /* 高亮色 */
  --tui-panti-fc: #ecfdf5;    /* 文字颜色 */
}