TechUI Docs

简中

EN

简中

EN

主题

ScifiPanelDelta ​

⚡WASM 驱动
🏅原创

科幻面板-德尔塔 是 TechUI Scifi 面板系列中的轻量级角标索引组件。

不同于 A1、A2 占据整行宽度的标题栏，ScifiPanelA3 采用了极简的 “三角徽章 (Triangular Badge)” 设计语言。它巧妙地利用了面板的几何死角，将索引信息集成在一个紧凑的三角形区域内 ，从而实现了零垂直空间占用。

这种“小而美”的结构设计，使其成为高密度信息布局的最佳选择。它非常适合用于多模块序列化（如：01, 02, 03...）、排行榜单（如：No.1, Top）或状态标识（如：A区, B区），在不干扰主要内容展示的前提下，提供清晰、锐利的视觉索引。

当然，它同样继承了 TechUI 的几何变换引擎，支持通过配置将这个“三角角标”灵活部署在面板的任意四个角落，以适应不同的排版需求。

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

基础用法 ​

默认形态 ​

默认情况下，三角角标位于面板的左上角。

⚠️ 字符长度限制

由于三角形空间的物理限制，A3 严格限制标题文本的长度。建议仅放置 2-4 个字符（如 "01", "A", "No.1", "壹号"）。过长的文本将会直接溢出三角形区域，导致视觉崩坏。

vue
<template>
  <div style="width: 300px; height: 200px;">
    <ScifiPanelDelta title="01">
      <div class="module-content">
        模块一内容...
      </div>
    </ScifiPanelDelta>
  </div>
</template>

四角定位 ​

通过 rotate 属性，您可以将这个“三角徽章”放置在矩形的任意四个角落，非常适合做四宫格布局或对角线布局。

左上角 (Top-Left) ​

  • Default: 标准角标。
vue
<template>
  <ScifiPanelDelta title="01" />
</template>

右上角 (Top-Right) ​

  • Rotate Y: 沿 Y 轴镜像翻转。文字会自动纠正镜像，保持可读。
vue
<template>
  <ScifiPanelDelta title="02" rotate="y" />
</template>

左下角 (Bottom-Left) ​

  • Rotate X: 沿 X 轴镜像翻转，角标位于底部。
vue
<template>
  <ScifiPanelDelta title="03" rotate="x" />
</template>

右下角 (Bottom-Right) ​

  • Rotate Z: 中心旋转 180 度。
vue
<template>
  <ScifiPanelDelta title="04" rotate="z" />
</template>

CSS变量 ​

A3 的角标非常适合用来表达“等级”或“状态”。通过自定义 CSS 变量，您可以轻松制作出金牌、银牌或警示风格的面板。

案例：荣耀金榜风格 (Rank Gold) ​

这种风格适合用于排行榜的第一名或高优先级模块。

vue
<template>
  <ScifiPanelDelta 
    title="No.1" 
    className="panel-gold"
    :decorationColorAlt="true"
    :glow="true"
  >
    <div class="rank-content">
      <span class="score">98.5</span>
    </div>
  </ScifiPanelDelta>
</template>

<style lang="less">
/* 自定义金色荣耀风格 */
.panel-gold {
  /* 边框：金黄色 */
  --sf-panel-bd: #fbbf24;
  
  /* 背景：深金褐色半透明 */
  --sf-panel-bg: rgba(60, 40, 0, 0.8);
  
  /* 文字：亮金 */
  --sf-panel-fc: #fcd34d;
  
  /* 装饰/高亮：白色或极亮黄 */
  --sf-panel-hlite: #fffbeb;
  
  /* 发光：金色光晕 */
  --sf-panel-glow: #d97706;
}
</style>

视觉变体 ​

装饰配色 (Color Alt) ​

A3 的 decorationColorAlt 属性对视觉影响显著。

  • False (默认): 角标使用标准的主题色。
  • True: 角标使用变体色（通常是高亮色或辅助色），使序号更加醒目，与边框形成反差。
vue
<template>
  <div class="grid">
    <ScifiPanelDelta title="A" />

    <ScifiPanelDelta 
      title="B" 
      :decorationColorAlt="true" 
    />
  </div>
</template>

极简悬浮 (Minimal) ​

结合 borderd: false (隐藏边框) 和 backgroundOpacity，可以制作出仅保留角标的悬浮风格，适合作为图片的遮罩容器。

vue
<template>
  <ScifiPanelDelta 
    title="Img" 
    :borderd="false"
    :backgroundOpacity="0.4"
    :glow="true"
  >
    <img src="..." style="width:100%; height:100%; object-fit:cover;" />
  </ScifiPanelDelta>
</template>

API 参考 ​

Props ​

属性名说明类型默认值
title角标文字。⚠️ 仅限 2-4 个字符String—
rotate几何旋转。支持 'x', 'y', 'z'String—
decorationColorAlt高亮变体。是否启用角标的高亮配色Booleanfalse
decoration是否显示对角的装饰线条 (即没有角标的那个角)Booleantrue
borderWidth边框线条宽度 (px)Number—
borderd是否显示边框Booleantrue
backgroundOpacity背景不透明度 (0-1)Number—
glow是否开启外发光滤镜Booleanfalse
glowOpacity外发光强度Number—
scale整体缩放比例Number1
className自定义容器类名String—

CSS Variables ​

您可以在组件的父级或通过 className 覆盖以下变量，以控制组件的配色与外观。

变量名说明默认值参考
--sf-panel-bg面板背景填充色var(--scifi-bg)
--sf-panel-bgop背景不透明度var(--cpt-panel-bgop, 1)
--sf-panel-bd边框线条颜色var(--scifi-bd)
--sf-panel-bdw边框线条宽度var(--cpt-panel-bdw, 1px)
--sf-panel-fc标题文字颜色var(--scifi-fc)
--sf-panel-hlite高光颜色var(--scifi-hlite)
--sf-panel-focus焦点颜色var(--scifi-focus)
--sf-panel-glow内发光颜色var(--scifi-focus)
--sf-panel-glowop内发光不透明度var(--cpt-panel-glowop, .5)
--sf-panel-shadow容器阴影var(--shadow-weak)
--sf-panel-scale整体缩放比例var(--cpt-panel-scale)