TechUI Docs

简中

EN

简中

EN

主题

TuiPanelTitleRod ​

🏅原创

科幻面板标题-标杆 是 TechUI Scifi Panel Title 系列中的轻量级侧向指示组件。

从视觉上看，它在标题文字的一侧（通常为左侧）部署了一个醒目的圆角垂直短条。这个设计虽然简单，但能起到极强的视觉对齐与强调作用。

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

基础用法 ​

默认形态 ​

默认情况下，A2 渲染为文字旁边的垂直短条。 这种设计占用空间极小，且垂直方向的引导感强。

vue
<template>
  <div class="list-item">
    <TuiPanelTitleRod title="SIDE ITEM" />
    
    <ScifiPanelRanger>
      <TuiPanelTitleRod 
        title="MODULE STATUS" 
        position="left"
        :offset="15"
      />
    </ScifiPanelRanger>
  </div>
</template>

布局与定位 ​

TuiPanelTitleRod 必须依附于边缘或文字的一侧显示。

对齐方式 (Position) ​

  • left: 竖条位于文字左侧，标题整体靠左对齐。
  • right: 竖条位于文字右侧，标题整体靠右对齐。

偏移微调 (Offset) ​

使用 offset 属性可以调整标题组件距离父容器边缘的距离。

vue
<template>
  <TuiPanelTitleRod 
    title="ONLINE" 
    position="right" 
    :offset="20" 
  />
</template>

视觉定制 ​

装饰配色 (Color Alt) ​

  • decorationColorAlt: 交换高亮色与焦点色。
  • 默认 (False): 竖条使用高亮色 (Highlight)。
  • 开启 (True): 竖条使用焦点色 (Focus)。可用于区分列表中的“选中项”与“普通项”。

字体与缩放 ​

支持通过 Props 直接调整字体样式，或使用 scale 进行整体缩放。

vue
<template>
  <TuiPanelTitleRod 
    title="ACTIVE TASK" 
    fontWeight="bold"
    :scale="1.2"
    :decorationColorAlt="true"
  />
</template>

CSS变量 ​

TuiPanelTitleRod 使用与 A1 相同的 --tui-panti- 变量前缀，但在 A2 中主要影响竖条的颜色。

案例：翡翠指示器 (Emerald Pill) ​

此案例定义了一个绿色的侧边指示条。

vue
<template>
  <TuiPanelTitleRod 
    className="title-emerald" 
    title="SYSTEM OK"
  />
</template>

<style lang="less">
.title-emerald {
  /* 文字颜色 */
  --tui-panti-fc: #dcfce7; /* 浅绿 */
  
  /* 竖条颜色 (高亮) */
  --tui-panti-hlite: #4ade80; /* 翡翠绿 */
  
  /* 辅助颜色 */
  --tui-panti-focus: #166534;
  
  /* 字体设置 */
  --tui-panti-fz: 14px;
}
</style>

变量字典 ​

以下是 TuiPanelTitleRod 支持的主要 CSS 变量：

变量名说明默认值
文字样式
--tui-panti-fc标题文字颜色var(--font-strong)
--tui-panti-fz字体大小var(--cpt-panti-fz)
--tui-panti-fw字体粗细var(--cpt-panti-fw)
装饰样式
--tui-panti-hlite竖条颜色 (Highlight)var(--scifi-hlite)
--tui-panti-focus辅助颜色 (Focus)var(--scifi-focus)
--tui-panti-ofs默认偏移量10px
--tui-panti-scale组件缩放比例var(--cpt-panti-scale)

API 参考 ​

Props ​

属性名说明类型默认值
title标题内容。显示的文本字符串String—
position水平位置。'left', 'right'Stringnull
offset边距偏移。距离边缘的像素值Number—
fontSize字体大小 (px)Number—
fontWeight字体粗细String—
decorationColorAlt装饰变体。交换高亮色与焦点色Booleanfalse
scale缩放比例。整体缩放Number1
className自定义类名String—

Slots ​

插槽名说明
default自定义标题内容。