FxText 文本

文本展示。不依赖任何 UI 框架，颜色走 @fx/styles 的 --color-* token，亮暗自动跟随。

基础用法

用 type 定义文本的语义色。

<template>
  <div class="row">
    <FxText>Default</FxText>
    <FxText type="primary">Primary</FxText>
    <FxText type="success">Success</FxText>
    <FxText type="info">Info</FxText>
    <FxText type="warning">Warning</FxText>
    <FxText type="danger">Danger</FxText>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
</style>

尺寸

size 设置额外尺寸：large / default / small。

<template>
  <div class="col">
    <FxText size="large">Large</FxText>
    <FxText size="default">Default</FxText>
    <FxText size="small">Small</FxText>
  </div>
</template>

<style scoped>
.col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
</style>

省略

truncated 在文本超出容器宽度时显示省略号；line-clamp 实现多行省略。溢出时自动补 title 原生提示。

<template>
  <div class="col">
    <div class="box">
      <FxText truncated>这是一段很长很长的文本，超出容器宽度会被截断并显示省略号</FxText>
    </div>
    <div class="box">
      <FxText :line-clamp="2">
        多行省略：第一行内容；第二行内容；第三行内容；第四行会被截断。
      </FxText>
    </div>
  </div>
</template>

<style scoped>
.col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.box {
  width: 240px;
}
</style>

自定义标签

tag 覆盖渲染的 HTML 元素。

<template>
  <div class="row">
    <FxText tag="div" type="primary">div 标签</FxText>
    <FxText tag="b" type="danger">b 标签（加粗）</FxText>
    <FxText tag="label" type="success">label 标签</FxText>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
</style>

混合内容

默认插槽可与图标、链接等混合渲染，颜色跟随。

<template>
  <div class="col">
    <FxText>
      <FxIcon name="ep:info-filled" /> 文本与图标混合，颜色跟随
    </FxText>
    <FxText type="primary">
      <a href="#" @click.prevent>链接式文本</a>
    </FxText>
  </div>
</template>

<style scoped>
.col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>

API

Attributes

属性	说明	类型	默认值
type	语义色类型	'primary' | 'success' | 'info' | 'warning' | 'danger' | ''	''
size	尺寸	'large' | 'default' | 'small' | ''	''
truncated	单行省略号	boolean	false
line-clamp	最大行数	number | string	—
tag	自定义元素标签	string	span

Slots

插槽名	说明
default	文本内容