ScifiHeaderEcho

⚡WASM 驱动

👑首创

科技标头-回响 是 TechUI Scifi 系列中的流线型动感标题组件。

它的设计灵感源自 “飞行器机翼 (Aircraft Wings)” 与 “声波扩散 (Acoustic Echo)”。它的两侧装饰呈现出独特的向外延展与向上托举的层级形态，视觉上不仅具有强烈的空气动力学美感，更自带一种轻盈的悬浮感。

这种形态具有极强的视觉引导性。它就像一双展开的羽翼，能够自然地将用户的视线从顶部聚焦并向下引导至内容区域。非常适合用作 页面顶部的二级标题、长条形图表区块的抬头，或者任何需要强调流畅过渡而非强力分割的场景。

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

基础用法

默认形态 (Default)

默认状态下，A3 呈现出标准的飞翼结构。标题内容通过默认插槽传入。

vue

<template>
  <div class="box">
    <ScifiHeaderEcho>Flight Dynamics</ScifiHeaderEcho>
  </div>
</template>

外观切换 (Decoration Alt)

开启 decorationAlt 后，实心的翼尖部分会变为线条化的镂空结构，视觉重量减轻，更适合悬浮在复杂地图或 3D 场景之上。

vue

<template>
  <ScifiHeaderEcho :decorationAlt="true">
    Map Overlay
  </ScifiHeaderEcho>
</template>

半透明背景 (Background Opacity)

A3 支持通过 backgroundOpacity 精细控制背景色块的透明度，使其能够更好地融合进深色背景中。

vue

<template>
  <ScifiHeaderEcho 
    :scale="0.7"
    :backgroundOpacity="0.6"
    :decorationColorAlt="true"
  >
    Sub System
  </ScifiHeaderEcho>
</template>

进阶配置

自定义样式

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

vue

<template>
  <ScifiHeaderEcho className="sfh-danger">
    WARNING
  </ScifiHeaderEcho>
</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

属性名	说明	类型	默认值	A3 特性备注
width	标题总宽度 (px)。WASM 会根据此值重绘路径	`Number`	`null`	同样支持 WASM 动态重绘。
decoration	是否显示底部的装饰条	`Boolean`	`true`	—
decorationAlt	外观变体	`Boolean`	`false`	显著影响。将实心飞翼切换为线条镂空飞翼。
decorationColorAlt	是否启用装饰色的变体配色	`Boolean`	`false`	—
gradientBackground	是否启用背景渐变色	`Boolean`	`true`	—
gradientReverse	是否反转背景渐变的方向	`Boolean`	`false`	—
backgroundOpacity	背景不透明度	`Number`	`1`	0-1 之间的小数。A3 常用于半透明叠加场景。
glow	是否开启 SVG 外发光滤镜	`Boolean`	`false`	—
glowOpacity	外发光的不透明度 (0-1)	`Number`	—	—
shadowType	阴影模式：`'drop'`, `'t3d'`, `'none'`	`String`	`'drop'`	—
scale	组件整体缩放比例	`Number`	`1`	—
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)`

ScifiHeaderEcho ​

基础用法 ​

默认形态 (Default) ​

外观切换 (Decoration Alt) ​

半透明背景 (Background Opacity) ​

进阶配置 ​

自定义样式 ​

API 参考 ​

Props ​

Slots ​

CSS Variables ​