ScifiHeaderRazor

⚡WASM Powered

⭐Star

👑Pioneer

Scifi Header - Razor is a hardcore tactical header component in the TechUI Scifi series.

It abandons the streamlined dynamic design of A1 and instead adopts an aggressive design language of "Sharp Edge Cutting" and "Geometric Splicing".

Visually, it possesses laterally extending wings as sharp as razors and precise, tough angles. This design grants the component extreme structural tension and a sense of defense, making it highly suitable for scenarios requiring rigor, precision, and deterrence, such as Network Security Monitoring, National Defense Military Screens, or Industrial Control Systems.

Tip: This component can be invoked via ScifiHeaderA2 or its semantic alias ScifiHeaderRazor.

Basic Usage

Default Form (Default)

In the default style, A2 features sharp angles converging inward. The title content is passed through the default slot.

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

Appearance Variant (Decoration Alt)

A2 has excellent support for the decorationAlt property. When enabled, the decorative wings on both sides transform into a hollow line style, making it visually lighter and giving it a stronger "HUD (Head-Up Display)" feel.

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

Advanced Configuration

Flat Mode

By disabling the background gradient (gradientBackground: false) and enabling double variants (decorationAlt + decorationColorAlt), you can achieve a very clean, compact header bar suitable for embedding at the top of specific business modules.

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

Custom Styles

The component exposes a full set of CSS variables. You can easily modify the color scheme to match specific themes (such as a red warning theme) via a custom class name.

<template>
  <ScifiHeaderRazor className="sfh-danger">
    WARNING
  </ScifiHeaderRazor>
</template>

<style lang="less">
.sfh-danger {
  --sf-header-bg: #4a0000;      /* Dark red background */
  --sf-header-bg_alt: #ff0000;  /* Bright red auxiliary */
  --sf-header-bd: #ff4d4f;      /* Red border */
  --sf-header-fc: #ffffff;
  --sf-header-fc_alt: #eba447;
  --sf-header-glow: #ff0000;    /* Red glow */
  --sf-header-hlite: #b81f14;
  --sf-header-focus: #eba447;
}
</style>

Cyberpunk Style

By combining reverse gradient (gradientReverse) and outer glow (glow), you can instantly create a high-contrast Cyberpunk neon texture.

<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 Reference

Props

Property Name	Description	Type	Default	A2 Feature Remarks
width	Total header width (px). WASM will redraw paths based on this value	Number	null	Supports dynamic redrawing, maintaining sharp cutting edges.
decoration	Whether to show the decorative strip at the center bottom	Boolean	true	—
decorationAlt	Appearance variant	Boolean	false	Significant impact. Toggles between solid wings/hollow line wings.
decorationColorAlt	Whether to enable variant coloring for decorations	Boolean	false	—
gradientBackground	Whether to enable background gradient color	Boolean	true	—
gradientReverse	Whether to reverse the direction of the background gradient	Boolean	false	—
glow	Whether to enable SVG outer glow filter	Boolean	false	When enabled, sharp edges transform into a neon feel.
glowOpacity	Opacity of the outer glow (0-1)	Number	—	—
shadowType	Shadow mode: 'drop', 't3d', 'none'	String	'drop'	—
scale	Overall component scaling ratio	Number	1	—
className	Custom container class name	String	—	—

Slots

Slot Name	Description
default	Title text content

CSS Variables

Variable Name	Description	Default Reference
--sf-header-lh	Header line height / Base height	60px
--sf-header-ff	Font Family	Impact
--sf-header-bg	Main background color (Gradient start)	var(--scifi-header-bg)
--sf-header-bg_alt	Auxiliary background color (Gradient end)	var(--scifi-header-bg_alt)
--sf-header-bgop	Background opacity	var(--cpt-header-bgop, 1)
--sf-header-bd	Border line color	var(--scifi-bd)
--sf-header-bdw	Border line width	var(--scifi-bdw, 1px)
--sf-header-fc	Main text color	var(--scifi-header-fc)
--sf-header-fc_alt	Auxiliary text / Decoration element color	var(--scifi-header-fc_alt)
--sf-header-hlite	Highlight Color.	var(--scifi-header-hlite)
--sf-header-focus	Focus Color.	var(--scifi-header-focus)
--sf-header-glow	Inner glow color	var(--scifi-hlite)
--sf-header-glowop	Inner glow opacity	var(--cpt-header-glowop, var(--shadow-inset-op, .5))
--sf-header-shadow	Container shadow	var(--shadow-weak)
--sf-header-scale	Overall scaling ratio (CSS level)	var(--cpt-header-scale, 1)