TechUI Docs

简中

EN

简中

EN

主题

ScifiHeaderRazor ​

⚡WASM 驱动
⭐明星组件
👑首创

科技标头-剃刀 是 TechUI Scifi 系列中的硬核战术型标题组件。

它摒弃了 A1 的流线型动态设计，转而采用了极具攻击性的 “锋利切割 (Sharp Edge Cutting)” 与 “几何拼合 (Geometric Splicing)” 设计语言。

从视觉上看，它拥有如同剃刀般锐利的横向延伸翼与精密硬朗的折角。这种设计赋予了组件极强的结构张力与防御感，非常适合用于 网络安全监控、国防军事大屏 或 工业控制系统 等需要强调严谨、精确和威慑力的场景。

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

基础用法 ​

默认形态 (Default) ​

默认样式下，A2 拥有向内收敛的锐利边角。标题内容通过默认插槽传入。

vue
<template>
  <div class="box">
    <ScifiHeaderRazor>SECURITY CENTER</ScifiHeaderRazor>
  </div>
</template>

外观变体 (Decoration Alt) ​

A2 对 decorationAlt 属性有很好的支持。开启后，两侧的装饰翼会变为镂空线条样式，视觉上更加轻盈，具有更强的“HUD 平视显示器”风格。

vue
<template>
  <ScifiHeaderRazor :decorationAlt="true">
    HUD MODE
  </ScifiHeaderRazor>
</template>

进阶配置 ​

扁平模式 ​

通过关闭背景渐变 (gradientBackground: false) 并开启双重变体 (decorationAlt + decorationColorAlt)，可以获得一个非常干净、紧凑的标题栏，适合嵌入到具体的业务模块顶部。

vue
<template>
  <ScifiHeaderRazor 
    :gradientBackground="false"
    :decorationAlt="true"
    :decorationColorAlt="true"
    :scale="0.8"
  >
    Module Status
  </ScifiHeaderRazor>
</template>

自定义样式 ​

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

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

赛博朋克风格 ​

结合反向渐变 (gradientReverse) 和外发光 (glow)，可以瞬间营造出高对比度的赛博朋克霓虹质感。

vue
<template>
  <ScifiHeaderRazor 
    class="cyberpunk-style"
    :gradientReverse="true"
    :gradientBackground="false"
    :glow="true"
    :glowOpacity="0.8"
    shadowType="drop"
  >
    CYBERPUNK CITY
  </ScifiHeaderRazor>
</template>

<style lang='less'>
.cyberpunk-style{
  --sf-header-bg: #2e006b;
  --sf-header-bg_alt: #7000ff;
  --sf-header-bd: #230052;
  --sf-header-fc: #ffffff;
  --sf-header-fc_alt: #fcee0a;
  --sf-header-glow: #5fccff;
  --sf-header-hlite: #7000ff;
  --sf-header-focus: #fcee0a;
  --sf-header-shadow: #41008b;
}
</style>

API 参考 ​

Props ​

属性名说明类型默认值A2 特性备注
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—
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)