TechUI Docs

简中

EN

简中

EN

主题

ScifiPanelTitleDuo ​

⚡WASM 驱动
🏅原创

科幻面板标题-二重 是 TechUI Scifi Panel Title 系列中的侧向约束型组件。

它采用了经典的 “双括弧 (Dual Brackets)” 设计语言。与 A1 强调的上下底座支撑不同，A2 专注于内容的 “左右边界界定”。

从视觉上看，它通过一对精密的机械括弧（支持直角或圆弧变体）将用户的视线强力聚焦于中央的文字之上。这种构造营造出一种强烈的 “数据标注 (Data Annotation)” 或 “战术锁定 (Target Lock)” 的视觉体验，仿佛系统正在对该区域进行实时追踪。

这种非侵入式的紧凑设计，使其极度适合悬浮在复杂的 3D 场景/地图之上，或者作为次级面板的标题。

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

基础用法 ​

默认形态 ​

默认情况下 (appearance="A")，A2 渲染为一对圆弧括弧。 括号紧贴文字两侧，线条柔和，带有微弱的科技装饰点。

vue
<template>
  <div class="panel-container">
    <ScifiPanelTitleDuo title="TARGET LOCKED" />
    
    <ScifiPanelPawn>
      <ScifiPanelTitleDuo 
        title="SYSTEM LOGS" 
        :fontSize="16"
        :offset="20"
      />
    </ScifiPanelPawn>
  </div>
</template>

外观变体 ​

A2 提供了两种风格迥异的括弧，分别对应不同的 UI 气质。

模式对比 ​

  • Type A (默认): 圆弧括弧 (Curved)。

    • 特征: 类似 ( Title ) 的曲线设计，线条流畅，视觉干扰小。
    • 场景: 适合 HUD 界面、空中悬浮标签或现代风格的面板。

  • Type B: 机械括弧 (Mechanical)。

    • 特征: 类似 [ Title ] 或 | Title | 的直角/折线设计，线条硬朗，带有机械切角。
    • 场景: 适合军事风格、重工业面板或强调“硬核”属性的模块。
vue
<template>
  <div class="grid">
    <ScifiPanelTitleDuo appearance="A" title="HUD MODE" />

    <ScifiPanelTitleDuo appearance="B" title="TACTICAL MODE" />
  </div>
</template>

布局与定位 ​

A2 同样支持灵活的水平定位，且由于其结构紧凑，非常适合放在面板的角落。

对齐方式 (Position) ​

通过 position 属性控制水平位置。

  • center (默认): 绝对居中。
  • left: 左对齐。
  • right: 右对齐。

偏移微调 (Offset) ​

括弧标题通常需要一点内边距来避免贴边太紧，使用 offset 可以轻松调整。

vue
<template>
  <ScifiPanelTitleDuo 
    title="UNIT 01" 
    position="left" 
    :offset="30"
    appearance="B"
  />

  <ScifiPanelTitleDuo 
    title="ONLINE" 
    position="right" 
    :offset="30" 
    appearance="B"
  />
</template>

视觉定制 ​

装饰配色 (Color Alt) ​

  • decorationColorAlt: 交换高亮色与焦点色。
  • 开启后，括号的颜色会反转。例如在默认主题下，括号可能由蓝变白，或者由暗变亮，适合作为“选中状态”的标题。

缩放 (Scale) ​

A2 的结构非常适合缩放。放大 scale 后，它可以用作画面的主标题（如“GAME OVER”或“MISSION START”）。

vue
<template>
  <ScifiPanelTitleDuo 
    title="WARNING" 
    :scale="2.0"
    :decorationColorAlt="true"
    appearance="B"
  />
</template>

CSS变量 ​

A2 的 CSS 变量与 A1 通用，但视觉重点在于括号的线条颜色。

案例：翡翠游侠风格 (Ranger Green) ​

此案例定义了一个绿色调的战术标题，模拟夜视仪界面的效果。

vue
<template>
  <ScifiPanelTitleDuo 
    className="title-ranger" 
    title="NIGHT VISION"
    appearance="B"
  />
</template>

<style lang="less">
.title-ranger {
  /* 主要线条颜色 (括号) */
  --sf-panti-focus: #22c55e; /* 纯绿 */
  
  /* 装饰点缀颜色 */
  --sf-panti-hlite: #4ade80; /* 荧光绿 */
  
  /* 文字颜色 */
  --sf-panti-fc: #86efac;    /* 浅绿 */
  
  /* 调整字号 */
  --sf-panti-fz: 18px;
}
</style>

变量字典 ​

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

变量名说明默认值
文字样式
--sf-panti-fc标题文字颜色var(--font-strong)
--sf-panti-fz文字大小var(--cpt-panti-fz)
--sf-panti-fw文字粗细var(--cpt-panti-fw)
图形样式
--sf-panti-focus括号线条颜色 (SVG Stroke)var(--scifi-focus)
--sf-panti-hlite装饰细节颜色var(--scifi-hlite)
--sf-panti-bgop背景不透明度1
--sf-panti-scale组件缩放比例var(--cpt-panti-scale)

API 参考 ​

Props ​

属性名说明类型默认值
title标题内容。显示的文本字符串String"SCIFI HEADER"
appearance外观变体。'A'(圆弧), 'B'(机械)String'A'
position水平位置。'center', 'left', 'right'String'center'
offset边距偏移。距离左/右边缘的像素值Number—
scale缩放比例。整体放大缩小Number1
fontSize字体大小 (px)。会覆盖 CSS 变量Number—
fontWeight字体粗细。如 'bold', '600'String—
decorationColorAlt装饰变体。交换高亮色与焦点色Booleanfalse
className自定义类名String—
width标题容器宽度 (px)。通常自动适应Number—

Slots ​

插槽名说明
default自定义标题内容（如需包含图标）。会覆盖 title 属性。