TechUI Docs

简中

EN

简中

EN

主题

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