LabelText 标签文本

用于展示标签和文本的左右布局，常用于表单详情页、数据展示等场景。

基础用法

使用 label 和 text 属性展示简单的标签文本。

基础用法

姓名

张三

邮箱

zhangsan@example.com

手机

138****8888

<template>
  <div class="space-y-4">
    <hx-label-text label="姓名" text="张三" />
    <hx-label-text label="邮箱" text="zhangsan@example.com" />
    <hx-label-text label="手机" text="138****8888" />
  </div>
</template>

<script setup lang="ts">
import { HxLabelText as LabelText } from "@whhx/ui"
</script>

尺寸

通过 size 属性设置尺寸大小。

small / default / large

Small

小号尺寸效果

Default

默认尺寸效果

Large

大号尺寸效果

<template>
  <div class="space-y-4">
    <hx-label-text label="Small" text="小号尺寸效果" size="small" />
    <hx-label-text label="Default" text="默认尺寸效果" size="default" />
    <hx-label-text label="Large" text="大号尺寸效果" size="large" />
  </div>
</template>

<script setup lang="ts">
import { HxLabelText as LabelText } from "@whhx/ui"
</script>

固定宽度

通过 label-width 设置标签宽度。

设置固定宽度，如 100px 或百分比

固定100px

固定100像素宽度

固定120px文字

固定120像素宽度示例

百分比

使用50%宽度

<template>
  <div class="space-y-4">
    <hx-label-text label="固定100px" text="固定100像素宽度" :label-width="100" />
    <hx-label-text label="固定120px文字" text="固定120像素宽度示例" :label-width="120" label-align="center" />
    <hx-label-text label="百分比" text="使用50%宽度" label-width="50%" />
  </div>
</template>

<script setup lang="ts">
import { HxLabelText as LabelText } from "@whhx/ui"
</script>

文本行数限制

通过 text-line 限制文本显示行数，超出部分省略。

设置文本行数限制

不限行数

这是一段较长的文本，不限制行数，可以完整显示所有内容

限制1行

这是一段较长的文本，超过1行会被截断显示省略号

限制2行

这是一段较长的文本，超过2行会被截断显示省略号，这是一段较长的文本

限制3行

这是一段较长的文本，超过3行会被截断显示省略号，这是一段较长的文本，超过3行会被截断显示省略号，这是一段较长的文本

<template>
  <div class="space-y-4 w-64">
    <hx-label-text label="不限行数" text="这是一段较长的文本，不限制行数，可以完整显示所有内容" />
    <hx-label-text label="限制1行" text="这是一段较长的文本，超过1行会被截断显示省略号" :text-line="1" />
    <hx-label-text label="限制2行" text="这是一段较长的文本，超过2行会被截断显示省略号，这是一段较长的文本" :text-line="2" />
    <hx-label-text label="限制3行" text="这是一段较长的文本，超过3行会被截断显示省略号，这是一段较长的文本，超过3行会被截断显示省略号，这是一段较长的文本" :text-line="3" align="start" />
  </div>
</template>

<script setup lang="ts">
import { HxLabelText as LabelText } from "@whhx/ui"
</script>

自定义对齐

通过 align 和 label-align 设置对齐方式。

align-items 对齐 / label 文本对齐

居中对齐

内容居中显示

左对齐

内容左对齐显示

右对齐

内容右对齐显示

标签右对齐

标签文字右对齐

<template>
  <div class="space-y-4">
    <hx-label-text label="居中对齐" text="内容居中显示" align="center" />
    <hx-label-text label="左对齐" text="内容左对齐显示" align="start" />
    <hx-label-text label="右对齐" text="内容右对齐显示" align="end" />
    <hx-label-text label="标签右对齐" text="标签文字右对齐" :label-width="100" label-align="right" />
  </div>
</template>

<script setup lang="ts">
import { HxLabelText as LabelText } from "@whhx/ui"
</script>

插槽使用

使用默认插槽自定义文本内容。

通过插槽插入富文本或自定义内容

富文本

红色 蓝色文本

带图标

操作成功

HTML内容

点击链接

<template>
  <div class="space-y-4">
    <hx-label-text label="富文本" text="使用插槽插入自定义内容">
      <span class="text-red-500">红色</span> <span class="text-blue-500">蓝色</span>文本
    </hx-label-text>
    <hx-label-text label="带图标" text="带图标的内容">
      <hx-icon type="iconify" name="ep:check" class="text-green-500 mr-1" />
      操作成功
    </hx-label-text>
    <hx-label-text label="HTML内容" text="支持HTML内容">
      <a href="#" class="text-blue-500 hover:underline">点击链接</a>
    </hx-label-text>
  </div>
</template>

<script setup lang="ts">
import { HxLabelText as LabelText } from "@whhx/ui"
</script>

API

Props

参数	说明	类型	默认值
label	标签文本	string	-
text	展示文本（插槽优先）	string	-
size	尺寸	'small' | 'default' | 'large'	'default'
align	Flex 交叉轴对齐方式	AlignType	'center'
label-width	标签宽度	string | number	'auto'
label-align	标签水平对齐方式	'left' | 'center' | 'right'	'left'
label-wrap	标签是否换行	boolean	false
text-wrap	文本是否换行	boolean	true
text-line	文本显示行数（0=不限制）	number	0

AlignType

type AlignType = 'start' | 'center' | 'end' | 'stretch' | 'baseline'

Slots

插槽名	说明
default	自定义文本内容（优先于 text 属性）