TechUI Docs

简中

EN

简中

EN

主题

ScifiPanelTitleAlt ​

⚡WASM 驱动
🏅原创

科幻面板标题-变体 是 TechUI Scifi Panel Title 系列中的标准托架组件。

它是一款经典的水平延伸型标题组件，从视觉上看，它通过一条带有科技感折角的水平线条来承载标题文字，中央或侧边配有标志性的梯形卡扣 (Trapezoidal Tab) 结构。这种设计使其看起来像是一个用于固定数据模块的精密支架，而非单纯的文字标签。

它是 ScifiPanel 系列中最通用的标题组件，拥有极高的适配性：

  • 悬挂模式 (Suspension Mode)：置于面板顶部，作为标准的悬浮标题。
  • 支撑模式 (Support Mode)：置于面板底部，作为视觉基座。
  • 灵活对齐：支持左、中、右三种对齐方式，完美适应不同的排版需求。

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

基础用法 ​

默认形态 ​

默认情况下 (appearance="A")，A1 渲染为一个顶部底座型标题。 装饰线条位于文字下方，两端微微上翘，形成一个稳固的托架结构。标题默认居中显示。

vue
<template>
  <div class="panel-container">
    <ScifiPanelTitleAlt title="SYSTEM MONITOR" />
    
    <ScifiPanelTitleAlt 
      title="LONG RANGE SENSOR ARRAY DATA" 
      :fontSize="18"
    />
  </div>
</template>

外观变体 ​

A1 提供了两种针对不同垂直位置优化的底座风格。

模式对比 ​

  • Type A (默认): 顶部底座型 (Top Base)。

    • 特征: 装饰线条位于文字下方，呈“下划线托架”状。
    • 场景: 适用于面板顶部的标准标题。

  • Type B: 底部底座型 (Bottom Base)。

    • 特征: 装饰线条位于文字上方，呈“顶划线盖板”状（倒置结构）。
    • 场景: 适用于需要将标题放置在面板底部，或者作为顶部“吊顶”风格的装饰。
vue
<template>
  <div class="grid">
    <ScifiPanelTitleAlt appearance="A" title="TOP TITLE" />

    <ScifiPanelTitleAlt appearance="B" title="BOTTOM STYLE" />
  </div>
</template>

布局与定位 ​

A1 支持灵活的水平定位，能够适应左对齐、居中或右对齐的排版需求。

对齐方式 (Position) ​

通过 position 属性控制标题在父容器中的水平位置。

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

偏移微调 (Offset) ​

配合 offset 属性，可以调整标题距离左侧或右侧边缘的距离（单位 px）。

vue
<template>
  <ScifiPanelTitleAlt 
    title="SECTOR A" 
    position="left" 
    :offset="50"
  />

  <ScifiPanelTitleAlt 
    title="STATUS OK" 
    position="right" 
    :offset="50" 
  />
</template>

视觉定制 ​

装饰配色 (Color Alt) ​

  • decorationColorAlt: 交换高亮色与焦点色。
  • 默认情况下，文字和主要线条使用焦点色 (Focus)，高亮色 (Highlight) 用于点缀。
  • 开启后，配色反转，可用于制作醒目的“警告标题”。

缩放 (Scale) ​

通过 scale 属性可以整体缩放标题组件的大小（包含文字和图形），这是调整标题视觉权重的最佳方式。

vue
<template>
  <ScifiPanelTitleAlt 
    title="WARNING" 
    :scale="1.5"
    :decorationColorAlt="true"
  />
</template>

CSS变量 ​

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

案例：全息蓝风格 (Holo Blue) ​

此案例定义了一个发光感极强的全息蓝色标题。

vue
<template>
  <ScifiPanelTitleAlt 
    className="title-holo" 
    title="HOLO INTERFACE"
  />
</template>

<style lang="less">
.title-holo {
  /* 文字与主线条颜色 */
  --sf-panti-focus: #0ea5e9; /* 天蓝 */
  
  /* 装饰点缀颜色 */
  --sf-panti-hlite: #bae6fd; /* 亮白蓝 */
  
  /* 文字颜色 (通常跟随 focus，也可单独指定) */
  --sf-panti-fc: #e0f2fe;
  
  /* 字体大小与粗细 */
  --sf-panti-fz: 20px;
  --sf-panti-fw: bold;
}
</style>

变量字典 ​

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

变量名说明默认值
文字样式
--sf-panti-fc标题文字颜色var(--font-strong)
--sf-panti-fz文字大小var(--cpt-panti-fz)
--sf-panti-fw文字粗细var(--cpt-panti-fw)
--sf-panti-lh行高30px
图形样式
--sf-panti-focus主要线条颜色 (SVG Fill/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 属性。