ScifiHeaderPhantom

⚡WASM Powered

👑Pioneer

Scifi Header - Phantom is a stable and flat header component in the TechUI Scifi series.

It features the lowest visual center of gravity in the entire series. It utilizes a highly restrained design language of "Base Support" and "Horizontal Extension".

Visually, it discards complex vertical decorations; the geometric lines on both sides extend horizontally like stable wings, constructing a solid visual base. This low-gravity design makes it ideal for full-width headers at the bottom of a page, dividers for secondary modules, or auxiliary information display scenarios that require extreme restraint without overshadowing the main content.

Tip: This component can be invoked via ScifiHeaderA4 or its semantic alias ScifiHeaderPhantom.

Basic Usage

Default Form (Default)

The styling of A4 is very restrained, appearing like a stable tray. Title content is passed through the default slot.

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

Minimalist Style

By combining gradientBackground: false (disable background) and decoration: false (disable decoration), A4 can transform into a tech-style underline header, perfect as a divider for body content.

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

Style Switching (Reverse & ColorAlt)

Despite its low-profile design, A4 can present a striking alert state when combined with reverse gradients and variant colors, often used for warning messages in bottom status bars.

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

Advanced Configuration

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

API Reference

Props

Property Name	Description	Type	Default	A4 Feature Remarks
width	Total header width (px). WASM redraws paths based on this value.	Number	null	The flat proportion remains stable across different widths.
decoration	Whether to show the decorative strip at the center bottom.	Boolean	true	Disable to achieve a minimalist underline effect.
decorationAlt	Appearance variant.	Boolean	false	—
decorationColorAlt	Whether to enable variant coloring for decorations.	Boolean	false	—
gradientBackground	Whether to enable background gradient color.	Boolean	true	Recommended to disable in auxiliary display scenarios.
gradientReverse	Whether to reverse the direction of the background gradient.	Boolean	false	—
glow	Whether to enable SVG outer glow filter.	Boolean	false	—
glowOpacity	Opacity of the outer glow (0-1).	Number	—	—
shadowType	Shadow mode: 'drop', 't3d', 'none'.	String	'drop'	—
scale	Overall component scaling ratio.	Number	1	As A4 is flatter, it is often used with 0.6-0.8 for sub-headers.
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	Outer 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)