TDivider / 分割线

Divider separates content sections with a horizontal line. Supports text labels, alignment, color, and compact mode. / 分割线用于分隔内容区块，支持居中文字、对齐方式、文字颜色和紧凑模式。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
text	string	—	Label text / 文字标签
position	'start' | 'center' | 'end'	—	Text alignment
color	TablerColor	—	Text color (text-*)
spaceless	boolean	false	Compact mode (reduced spacing) / 紧凑模式

Slots / 插槽

Slot	Description / 说明
default	Custom label content (overrides text prop) / 自定义标签

Basic Usage / 基础用法

<script setup lang="ts">
import { TDivider } from '@gulcc/tabler-vue'
</script>

<template>
  <TDivider />
  <TDivider text="Section / 区块" />
</template>

Advanced Usage / 进阶场景

<script setup lang="ts">
import { TDivider } from '@gulcc/tabler-vue'
</script>

<template>
  <!-- Aligned text / 文字对齐 -->
  <TDivider text="Left / 左侧" position="start" />
  <TDivider text="Center / 居中" position="center" />
  <TDivider text="Right / 右侧" position="end" />

  <!-- Colored text / 彩色文字 -->
  <TDivider text="Primary / 主色" color="primary" />
  <TDivider text="Success / 成功" color="success" />
  <TDivider text="Danger / 危险" color="danger" />

  <!-- Compact mode / 紧凑模式 -->
  <TDivider text="Compact / 紧凑" spaceless />

  <!-- Custom slot / 自定义插槽 -->
  <TDivider>
    <strong>Custom / 自定义</strong>
    <span class="text-secondary">subtitle</span>
  </TDivider>
</template>

Tips / 避坑指南

• Without text prop or default slot, renders a plain <hr> element
• With text content, renders a <div> with hr-text class and wraps text in a <span>
• spaceless reduces margin spacing — works for both plain and text dividers
• Text dividers without position default to centered alignment