TuiPanelTitleEave

🏅Original

TuiPanelTitleEave is a lightweight pure CSS title component within the TechUI Scifi Panel Title series.

Visually, it presents as a highlighted decorative line above the title text, covering the content like the eaves of a building. This lightweight construction requires no images or complex calculations, resulting in near-zero rendering overhead.

It is ideal for high-density data panels, small floating cards, or interface layouts pursuing a minimalist flat style. It maintains absolute interface clarity while providing the necessary visual hierarchy.

Tip: This component can be invoked via TuiPanelTitleA1 or its semantic alias TuiPanelTitleEave.

Basic Usage

Default Form

By default, A1 renders as a decorative horizontal bar above the text. The length of the bar is typically related to the text width or fixed, serving as a visual guide.

<template>
  <div class="card-container">
    <TuiPanelTitleEave title="BASIC INFO" />
    
    <ScifiPanelRanger>
      <TuiPanelTitleEave 
        title="DEVICE STATUS" 
        position="left"
        :offset="20"
      />
    </ScifiPanelRanger>
  </div>
</template>

Layout and Positioning

TuiPanelTitleEave relies heavily on the position attribute to determine its location at the edge of the parent container.

Alignment (Position)

• left: Title is displayed on the left; the decorative bar is typically in the top-left.
• right: Title is displayed on the right; the decorative bar is typically in the top-right.
• center: (Tui series focuses on edge decoration; specific behavior depends on CSS implementation, but left/right is recommended).

Offset Fine-tuning

Use the offset attribute to adjust the pixel distance of the title from the edge.

<template>
  <TuiPanelTitleEave 
    title="CONFIGURATION" 
    position="right" 
    :offset="40" 
  />
</template>

Visual

Decoration Color Alternation (Color Alt)

• decorationColorAlt: Swaps the highlight color and the focus color.
• Default (False): Text uses the primary color, and the decorative bar uses the highlight color.
• Enabled (True): Colors are swapped. The horizontal bar becomes the focus color, which can be used to indicate a "selected" or "active" state.

Font and Scale

• fontSize / fontWeight: The Tui series supports overriding the font styles defined by CSS variables directly via Props for quick adjustments.
• scale: Although it is a CSS component, it supports overall scaling via CSS Transform.

<template>
  <TuiPanelTitleEave 
    title="WARNING" 
    fontWeight="bold"
    :fontSize="18"
    :decorationColorAlt="true"
  />
</template>

Appearance

The TuiPanelTitle series uses a CSS variable system prefixed with --tui-panti-.

Case: Cyber Purple Style

This example defines a minimalist title with purple tones.

<template>
  <TuiPanelTitleEave 
    className="title-purple" 
    title="USER DATA"
  />
</template>

<style lang="less">
.title-purple {
  /* Text color */
  --tui-panti-fc: #e9d5ff; /* Light Purple */
  
  /* Decorative bar color (Highlight) */
  --tui-panti-hlite: #d8b4fe;
  
  /* Auxiliary/Focus color */
  --tui-panti-focus: #a855f7;
  
  /* Font settings */
  --tui-panti-fz: 16px;
  --tui-panti-fw: 600;
}
</style>

Variable Dictionary

Below are the primary CSS variables supported by TuiPanelTitleEave:

Variable Name	Description	Default Value
Text Styles
--tui-panti-fc	Title text color	var(--font-strong)
--tui-panti-fz	Font size	var(--cpt-panti-fz)
--tui-panti-fw	Font weight	var(--cpt-panti-fw)
--tui-panti-lh	Line height	30px
Decoration Styles
--tui-panti-hlite	Decorative bar color (Highlight)	var(--scifi-hlite)
--tui-panti-focus	Auxiliary color (Focus)	var(--scifi-focus)
--tui-panti-ofs	Default offset	10px
--tui-panti-scale	Component scale ratio	var(--cpt-panti-scale)

API Reference

Props

Property	Description	Type	Default Value
title	Title Content. The text string to display	String	—
position	Horizontal Position. 'left', 'right'	String	null
offset	Edge Offset. Pixel distance from the edge	Number	—
fontSize	Font size (px). Overrides styles directly	Number	—
fontWeight	Font weight. e.g., 'bold'	String	—
decorationColorAlt	Decorative Variant. Swaps highlight and focus colors	Boolean	false
scale	Scale Ratio. Overall scaling	Number	1
className	Custom class name	String	—

Slots

Slot Name	Description
default	Custom title content.