Skip to content
On this page

Text 文字

让文字活起来

基本使用

type 属性可以配置不同的文字类型,展示不同的颜色状态

普通文字

主要文字

成功文字

危险文字

警告文字

开启

不同大小

size 属性可以配置不同大小的 text

主要文字

成功文字

危险文字

警告文字

开启

自定义颜色

如果你不喜欢 type 属性带了的不同颜色,你也可以使用 color 属性自定义你的 text 颜色

hello

自定义颜色的字体

开启

背景颜色

如果你希望文字带上背景颜色,你可以使用 background 属性自定义背景颜色

背景颜色

背景颜色

背景颜色

开启

文字独占一行

使用 block 属性可将文字显示为块状元素,独占一行

文字

文字

文字

开启

字间距

使用 spacing 属性自定义字间距

小间距

中等间距

大间距

开启

缩进量

使用 indent 属性规定文字块中首行文字的缩进

文字

文字

文字

开启

是否加粗

使用 bold 属性可将文字设置为粗体显示

未加粗文字

加粗的主要文字

加粗的成功文字

加粗的危险文字

开启

文字修饰

使用 decoration 属性规定添加到文字的修饰,例如:上划线(overline)中划线(line-through)下划线(underline)

标准文字

上划线

中划线

下划线

开启

内边距

使用 padding 属性可定义元素边框与元素内容之间的空间,即上下左右的内边距

上下左右相同的简写

上下、左右分别相同

分别定义上下左右

开启

省略文本

ellipsis 属性可以配置是否省略文本,需配合 width 属性使用,超出显示省略号

省略文字省略文字省略文字省略文字

开启

Attributes

参数说明类型可选值默认值
type类型FightingTypedefault primary success danger warningdefault
size文字大小string / number————
color文字颜色string————
background背景颜色string————
block是否独占一行boolean——false
spacing文字间距string / number————
line-height行高string / number————
indent首字符缩进量string / number————
bold文字是否以粗体显示boolean——false
decoration文字的修饰TextDecorationoverline line-through underline——
padding内边距string / number————
width宽度string / number————
ellipsis是否省略文本,需配合 width 宽度使用boolean————
center是否居中boolean——false

Slots

名称说明
defaulttext 的内容

Interface

组件导出以下类型定义:

ts
import type { TextInstance, TextProps, TextDecoration } from 'fighting-design'

TextDecoration

ts
type TextDecoration = 'overline' | 'line-through' | 'underline'

Contributors