TechUI Docs

简中

EN

简中

EN

主题

TuiPanelZero ​

⭐明星组件
🏅原创

科技面板-起点 是 TechUI Scifi 面板系列中的轻量化纯 CSS 容器。

它是该系列中独树一帜的存在。与 ScifiPanel 家族基于 SVG/WASM 的复杂路径计算渲染不同，它完全由原生 CSS 绘制而成（利用 border, box-shadow, pseudo-elements 等特性）。

它拥有极低的渲染开销。它非常适合作为 高频渲染场景 的容器（如大规模列表项），或者用于包裹那些自带圆角的标准 UI 组件（如输入框、按钮组），在保持科技感外观的同时，确保了最佳的浏览器性能。

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

基础用法 ​

默认形态 ​

默认情况下，TuiPanelZero 呈现为一个带有微弱边框的矩形，四个角落带有加强的“L型”括弧装饰（Angle Brackets）。

vue
<template>
  <div style="width: 100%; height: 200px;">
    <TuiPanelZero>
      <div class="content">
        纯 CSS 渲染，高性能容器
      </div>
    </TuiPanelZero>
  </div>
</template>

视觉定制 ​

圆角设置 (Border Radius) ​

这是 TuiPanelZero 独有的特性。通过 borderRadius，您可以自由控制面板是硬朗的直角还是柔和的圆角。

  • 直角 (0): 接近 ScifiPanelB 系列的硬朗风格。
  • 圆角 (4px - 20px): 适合现代 UI 风格，可包裹卡片或按钮。
vue
<template>
  <div class="grid">
    <TuiPanelZero :borderRadius="0">
      <div class="p-4">Square Mode</div>
    </TuiPanelZero>

    <TuiPanelZero :borderRadius="12">
      <div class="p-4">Round Mode</div>
    </TuiPanelZero>
  </div>
</template>

角部括弧配置 (Angle Brackets) ​

TuiPanelZero 允许您精细控制四角“括弧”的几何形态。这些属性直接映射到 CSS 变量，调整非常灵活。

  • angleLength: 括弧臂的长度 (px)。
  • angleWeight: 括弧线条的粗细 (px)。
  • anglePosition: 括弧距离边框的偏移量 (px)。负值向外偏移，正值向内偏移。
vue
<template>
  <TuiPanelZero 
    :angleLength="20"
    :angleWeight="4" 
    :anglePosition="-2"
    :borderWidth="1"
  >
    <div class="p-4">Heavy Corners</div>
  </TuiPanelZero>
</template>

极简与发光 (Glow & Minimal) ​

  • decoration: 控制四角括弧的显示。设置为 false 时，仅保留基础边框。
  • borderd: 控制基础细边框的显示。
  • glow: 开启 CSS box-shadow 发光效果。
vue
<template>
  <TuiPanelZero 
    :decoration="false" 
    :borderd="false"
    :glow="true"
    :glowRange="15"
    :backgroundOpacity="0.8"
  >
    <div class="neon-text">PURE GLOW</div>
  </TuiPanelZero>
</template>

CSS变量 ​

TuiPanelZero 的配色系统非常直观。通过 className 覆盖对应的 --tui- 变量即可。

TuiPanelZero 暴露了非常详尽的 CSS 变量接口，允许您不仅修改颜色，还能直接通过 CSS 控制几何属性（如角标长度、圆角半径等），这在结合媒体查询做响应式布局时非常有用。

案例：极光青风格 (Aurora Style) ​

此案例展示了如何通过类名覆盖变量，定义一个带有强烈发光和自定义角标尺寸的风格。

vue
<template>
  <TuiPanelZero 
    className="panel-aurora"
    :borderRadius="8"
    :glow="true"
  >
    <div class="info">CSS MODULE</div>
  </TuiPanelZero>
</template>

<style lang="less">
.panel-aurora {
  /* --- 颜色定义 --- */
  --tui-panel-bd: #06b6d4;       /* 基础细边框颜色 */
  --tui-panel-hlite: #ffffff;    /* 四角括弧高亮色 */
  --tui-panel-bg: rgba(8, 51, 68, 0.8); /* 背景色 */
  --tui-panel-shadow: rgba(34, 211, 238, 0.6); /* 发光/阴影基色 */

  /* --- 几何微调 (可选，也可以通过 Props 传参) --- */
  --tui-panel-angle-length: 20px; /* 加长四角括弧 */
  --tui-panel-angle-weight: 3px;  /* 加粗四角括弧 */
  --tui-panel-glow-range: 15px;   /* 扩大发光范围 */
  --tui-panel-glow-op: 0.8;       /* 增强发光强度 */
}
</style>

API 参考 ​

由于是纯 CSS 组件，部分 SVG 专用属性（如 title, rotate, path 相关）在此组件中不生效。

Props (生效列表) ​

属性名说明类型默认值
borderRadius圆角半径。控制四角的圆润程度Number2
borderRadiusFix圆角修正。微调内部内容的裁切圆角Number0
angleLength角标长度。控制四角括弧的长短Number15
angleWeight角标粗细。控制四角括弧的线条宽度Number2
anglePosition角标位置。括弧距离边缘的偏移量Number-1
decoration是否显示四角的括弧装饰Booleantrue
borderd是否显示基础细边框Booleantrue
borderWidth基础边框的宽度Number1
backgroundOpacity背景颜色的不透明度 (0-1)Number1
backgroundBlur是否开启背景毛玻璃效果 (backdrop-filter)Booleanfalse
blurRange毛玻璃模糊半径 (px)Number3
glow是否开启外发光Booleanfalse
glowRange外发光扩散范围 (px)Number10
glowOpacity外发光透明度Number0.5
className自定义容器类名String—

CSS Variables ​

以下是 TuiPanelZero 支持的完整 CSS 变量清单。您可以在组件父级或通过 className 覆盖这些变量。

变量名说明默认值 / 依赖
--tui-panel-bd基础细边框的颜色var(--scifi-bd)
--tui-panel-bdw基础细边框的宽度1px
--tui-panel-bg面板背景颜色var(--scifi-bg)
--tui-panel-bgop背景不透明度 (Opacity)1
--tui-panel-bgblur背景毛玻璃模糊半径 (Backdrop Blur)3px
--tui-panel-angle-length四角括弧的臂长15px
--tui-panel-angle-weight四角括弧的线条粗细2px
--tui-panel-angle-position括弧距离边缘的偏移 (负值向外，正值向内)-1px
--tui-panel-bdra面板圆角半径 (Border Radius)2px
--tui-panel-bdrafix圆角修正值 (用于微调内部内容裁切)0px
--tui-panel-shadow阴影或外发光的颜色var(--shadow-weak)
--tui-panel-glow-range外发光 (Box Shadow) 的扩散范围10px
--tui-panel-glow-op外发光的不透明度0.5
--tui-panel-focus焦点状态颜色 (如组件支持 focus)var(--scifi-focus)
--tui-panel-scale整体缩放比例 (Transform Scale)—