介绍

用于文本展示，支持颜色、大小、单行和多行省略等样式控制。

代码演示

基础使用

通过默认插槽传入要展示的文本内容。

<template>
  <s-text>这是一段默认样式的文本。</s-text>
</template>

文本颜色

通过 color 属性设置文本的颜色，支持 default、secondary、tertiary、fourth、primary、success、warning、danger。

<template>
  <s-text class="mx-2" color="default">default 默认文本颜色</s-text>
  <s-text class="mx-2" color="secondary">secondary 次要文本颜色</s-text>
  <s-text class="mx-2" color="tertiary">tertiary 三级文本颜色</s-text>
  <s-text class="mx-2" color="fourth">fourth 四级文本颜色</s-text>
  <s-text class="mx-2" color="primary">primary 主题文本颜色</s-text>
  <s-text class="mx-2" color="success">success 成功文本颜色</s-text>
  <s-text class="mx-2" color="warning">warning 警告文本颜色</s-text>
  <s-text class="mx-2" color="danger">danger 危险文本颜色</s-text>
</template>

文本大小

通过 size 属性设置文本的大小，支持 small、medium、large。

<template>
  <s-text class="mx-2" size="small">small 小号文本</s-text>
  <s-text class="mx-2" size="medium">medium 中号文本（默认）</s-text>
  <s-text class="mx-2" size="large">large 大号文本</s-text>
</template>

单行省略

通过 truncated 属性可以让超出容器宽度的文本显示省略号。需要配合设置容器宽度。

<template>
  <s-text truncated style="max-width: 200px">
    这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本，设置 truncated
    后会显示省略号。
  </s-text>
</template>

多行省略

通过 line-clamp 属性可以限制文本显示的行数，超出部分显示省略号。

<template>
  <s-text :line-clamp="2" style="max-width: 300px">
    这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本，设置 lineClamp
    为 2
    后，超出两行会显示省略号。这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本。
  </s-text>
</template>

自定义标签

通过 tag 属性可以指定渲染的 HTML 标签，默认为 span，可以设置为 p、div、h1 等。

<template>
  <s-space direction="vertical">
    <s-text>span</s-text>
    <s-text tag="p">This is a paragraph.</s-text>
    <s-text tag="b">Bold</s-text>
    <s-text tag="i">Italic</s-text>
    <s-text>
      This is
      <s-text tag="sub" size="small">subscript</s-text>
    </s-text>
    <s-text>
      This is
      <s-text tag="sup" size="small">superscript</s-text>
    </s-text>
    <s-text tag="ins">Inserted</s-text>
    <s-text tag="del">Deleted</s-text>
    <s-text tag="mark">Marked</s-text>
  </s-space>
</template>

API

TextProps

属性	描述	类型	默认值
color	文本颜色	default | secondary | tertiary | fourth | primary | success | warning | danger	default
size	文本大小	small | medium | large	medium
truncated	是否单行省略，超出容器宽度显示省略号	boolean	false
line-clamp	多行省略行数，设置后超出指定行数显示省略号	number	-
tag	渲染的 HTML 标签	string	span

TextSlots

插槽	描述	属性
default	自定义文本内容	-

主题定制

样式变量

CSS 变量	值
--s-text-font-size-sm	var(--s-font-size-sm)
--s-text-font-size	var(--s-font-size)
--s-text-font-size-lg	var(--s-font-size-lg)