TechUI Docs

简中

EN

简中

EN

主题

ScifiPanelTitlePipe ​

⚡WASM 驱动
🏅原创

科幻面板标题-管线 是 TechUI Scifi Panel Title 系列中的侧向索引型组件。

从视觉上看，它在标题文字的侧翼（通常为左侧，支持配置为右侧）部署了一个高亮的能量光标或垂直管道。这种设计极大地减少了对水平空间的占用，如同书本侧边的索引标签一样，提供了清晰但不抢眼的视觉引导。

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

注意

此组件的设计逻辑基于侧边引导，因此不支持 position="center"。请务必指定 left 或 right。

基础用法 ​

默认形态 ​

默认情况下 (appearance="A")，A3 渲染为一个实心的垂直光条。 通常需要配合 position 属性将其放置在左侧或右侧。

vue
<template>
  <div class="panel-container">
    <ScifiPanelTitlePipe 
      title="SIDEBAR MENU" 
      position="left" 
    />
    
    <ScifiPanelTitlePipe 
      title="STATUS: ONLINE" 
      position="right" 
    />
  </div>
</template>

外观变体 ​

A3 提供了两种不同细节的竖条风格。

模式对比 ​

  • Type A (默认): 实心光条 (Solid)。

    • 特征: 单根较粗的实心竖条，视觉权重高，醒目。
    • 场景: 适合作为一级标题或重要状态指示。

  • Type B: 双线科技条 (Double/Tech)。

    • 特征: 由双细线或虚线构成的竖条，带有更丰富的机械细节。
    • 场景: 适合作为二级标题或需要精致感的 UI 模块。
vue
<template>
  <div class="list-group">
    <ScifiPanelTitlePipe appearance="A" title="MAIN QUEST" position="left" />

    <ScifiPanelTitlePipe appearance="B" title="SUB OBJECTIVE" position="left" />
  </div>
</template>

布局与定位 ​

A3 必须依附于边缘显示。

对齐方式 (Position) ​

  • left: 竖条位于文字左侧，整体左对齐。
  • right: 竖条位于文字右侧，整体右对齐。
  • center: (不支持)。

偏移微调 (Offset) ​

使用 offset 可以调整标题距离容器边缘的缩进距离。这在多层级菜单中非常有用，可以通过不同的 offset 来体现层级关系。

vue
<template>
  <div class="menu">
    <ScifiPanelTitlePipe title="SYSTEM" position="left" :offset="0" />
    
    <ScifiPanelTitlePipe title="LOGS" position="left" :offset="20" appearance="B" />
    
    <ScifiPanelTitlePipe title="ERROR" position="left" :offset="40" appearance="B" />
  </div>
</template>

视觉定制 ​

装饰配色 (Color Alt) ​

  • decorationColorAlt: 交换高亮色与焦点色。
  • 竖条的颜色会发生反转。例如，可以将默认的蓝色光条改为白色或亮色，用于表示“高亮选中”状态。

缩放 (Scale) ​

通过 scale 属性可以调整竖条的粗细和文字大小。

vue
<template>
  <ScifiPanelTitlePipe 
    title="ACTIVE" 
    position="right"
    :scale="1.5"
    :decorationColorAlt="true"
  />
</template>

CSS变量 ​

A3 的视觉核心在于竖条的颜色。

案例：琥珀警示风格 (Amber Alert) ​

此案例定义了一个琥珀色的侧边警示条。

vue
<template>
  <ScifiPanelTitlePipe 
    className="title-amber" 
    title="CAUTION" 
    position="left"
  />
</template>

<style lang="less">
.title-amber {
  /* 竖条颜色 */
  --sf-panti-focus: #f59e0b; /* 琥珀色 */
  
  /* 辅助装饰色 */
  --sf-panti-hlite: #fcd34d; /* 浅琥珀 */
  
  /* 文字颜色 */
  --sf-panti-fc: #fef3c7;
  
  /* 字号 */
  --sf-panti-fz: 16px;
}
</style>

变量字典 ​

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

变量名说明默认值
文字样式
--sf-panti-fc标题文字颜色var(--font-strong)
--sf-panti-fz文字大小var(--cpt-panti-fz)
图形样式
--sf-panti-focus竖条主要颜色var(--scifi-focus)
--sf-panti-hlite装饰细节颜色var(--scifi-hlite)
--sf-panti-scale组件缩放比例var(--cpt-panti-scale)

API 参考 ​

Props ​

属性名说明类型默认值
title标题内容。显示的文本字符串String"SCIFI HEADER"
appearance外观变体。'A'(实心), 'B'(双线)String'A'
position水平位置。'left', 'right' (不支持 center)String'left'
offset边距偏移。距离边缘的像素值Number—
scale缩放比例。整体放大缩小Number1
fontSize字体大小 (px)Number—
fontWeight字体粗细String—
decorationColorAlt装饰变体。交换高亮色与焦点色Booleanfalse
className自定义类名String—
width标题容器宽度 (px)Number—

Slots ​

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