TechUI Docs

简中

EN

简中

EN

主题

ScifiHeaderPhantom ​

⚡WASM 驱动
👑首创

科技标头-幻影 是 TechUI Scifi 系列中的稳重扁平型标题组件。

它是全系列中视觉重心最低的一款。它采用了极度克制的 “基座支撑 (Base Support)” 与 “水平延伸 (Horizontal Extension)” 设计语言。

从视觉上看，它摒弃了繁复的纵向装饰，两侧的几何线条如同稳固的机翼水平展开，构建出一个坚实的视觉基座。这种低重心的设计使其非常适合作为 页面底部的通栏标题、次级模块的分割线，或者用于那些需要极度克制、绝不喧宾夺主的辅助性信息展示场景。

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

基础用法 ​

默认形态 (Default) ​

A4 的造型非常克制，像一个稳固的托盘。标题内容通过默认插槽传入。

vue
<template>
  <div class="box">
    <ScifiHeaderPhantom>Data Foundation</ScifiHeaderPhantom>
  </div>
</template>

极简风格 ​

结合 gradientBackground: false (关闭背景) 和 decoration: false (关闭装饰)，A4 可以退化为一条极具科技感的下划线标题，非常适合作为正文内容的分割头。

vue
<template>
  <ScifiHeaderPhantom 
    :width="600"
    :decoration="false"
    :gradientBackground="false"
    :glow="true"
  >
    Section 01
  </ScifiHeaderPhantom>
</template>

风格切换 (Reverse & ColorAlt) ​

尽管造型低调，但配合反向渐变和变体色，A4 也能呈现出醒目的警示状态，常用于底部状态栏的警告信息显示。

vue
<template>
  <ScifiHeaderPhantom 
    :gradientReverse="true"
    :decorationColorAlt="true"
    className="sfh-alert"
  >
    SYSTEM ALERT
  </ScifiHeaderPhantom>
</template>

进阶配置 ​

自定义样式 ​

组件暴露了全量的 CSS 变量，您可以通过自定义类名轻松修改配色以匹配特定主题（如红色警告主题）。

vue
<template>
  <ScifiHeaderPhantom className="sfh-danger">
    WARNING
  </ScifiHeaderPhantom>
</template>

<style lang="less">
.sfh-danger {
  --sf-header-bg: #4a0000;      /* 深红背景 */
  --sf-header-bg_alt: #ff0000;  /* 亮红辅助 */
  --sf-header-bd: #ff4d4f;      /* 红色边框 */
  --sf-header-fc: #ffffff;
  --sf-header-fc_alt: #eba447;
  --sf-header-glow: #ff0000;    /* 红色发光 */
  --sf-header-hlite: #b81f14;
  --sf-header-focus: #eba447;
}
</style>

API 参考 ​

Props ​

属性名说明类型默认值A4 特性备注
width标题总宽度 (px)。WASM 会根据此值重绘路径Numbernull扁平化比例在不同宽度下均能保持稳定。
decoration是否显示中央底部的装饰条Booleantrue关闭后可获得极简的下划线效果。
decorationAlt外观变体Booleanfalse—
decorationColorAlt是否启用装饰色的变体配色Booleanfalse—
gradientBackground是否启用背景渐变色Booleantrue建议在辅助展示场景下关闭。
gradientReverse是否反转背景渐变的方向Booleanfalse—
glow是否开启 SVG 外发光滤镜Booleanfalse—
glowOpacity外发光的不透明度 (0-1)Number——
shadowType阴影模式：'drop', 't3d', 'none'String'drop'—
scale组件整体缩放比例Number1由于 A4 较扁平，常配合 0.6-0.8 用作小标题。
className自定义容器类名String——

Slots ​

插槽名说明
default标题文本内容

CSS Variables ​

变量名说明默认值参考
--sf-header-lh标题行高 / 基准高度60px
--sf-header-ff字体族 (Font Family)Impact
--sf-header-bg主背景色 (渐变起始)var(--scifi-header-bg)
--sf-header-bg_alt辅助背景色 (渐变结束)var(--scifi-header-bg_alt)
--sf-header-bgop背景不透明度var(--cpt-header-bgop, 1)
--sf-header-bd边框线条颜色var(--scifi-bd)
--sf-header-bdw边框线条宽度var(--scifi-bdw, 1px)
--sf-header-fc主文字颜色var(--scifi-header-fc)
--sf-header-fc_alt辅助文字 / 装饰元素颜色var(--scifi-header-fc_alt)
--sf-header-hlite高光色var(--scifi-header-hlite)
--sf-header-focus焦点色var(--scifi-header-focus)
--sf-header-glow内发光颜色var(--scifi-hlite)
--sf-header-glowop内发光不透明度var(--cpt-header-glowop, var(--shadow-inset-op, .5))
--sf-header-shadow容器阴影var(--shadow-weak)
--sf-header-scale整体缩放比例 (CSS 层面)var(--cpt-header-scale, 1)