Fighting DesignText 文字
让文字活起来
基本使用
type 属性可以配置不同的文字类型，展示不同的颜色状态
普通文字
主要文字
成功文字
危险文字
警告文字
开启
不同大小
size 属性可以配置不同大小的 text
主要文字
成功文字
危险文字
警告文字
开启
自定义颜色
如果你不喜欢 type 属性带了的不同颜色，你也可以使用 color 属性自定义你的 text 颜色
hello
自定义颜色的字体
开启
背景颜色
如果你希望文字带上背景颜色，你可以使用 background 属性自定义背景颜色
背景颜色
背景颜色
背景颜色
开启
文字独占一行
使用 block 属性可将文字显示为块状元素，独占一行
文字
文字
文字
开启
字间距
使用 spacing 属性自定义字间距
小间距
中等间距
大间距
开启
缩进量
使用 indent 属性规定文字块中首行文字的缩进
文字
文字
文字
开启
是否加粗
使用 bold 属性可将文字设置为粗体显示
未加粗文字
加粗的主要文字
加粗的成功文字
加粗的危险文字
开启
文字修饰
使用 decoration 属性规定添加到文字的修饰，例如：上划线（overline）、中划线（line-through）、下划线（underline）等
标准文字
上划线
中划线
下划线
开启
内边距
使用 padding 属性可定义元素边框与元素内容之间的空间，即上下左右的内边距
上下左右相同的简写
上下、左右分别相同
分别定义上下左右
开启
省略文本
ellipsis 属性可以配置是否省略文本，需配合 width 属性使用，超出显示省略号
省略文字省略文字省略文字省略文字
开启
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
type | 类型 | FightingType | default primary success danger warning | default |
size | 文字大小 | string / number | —— | —— |
color | 文字颜色 | string | —— | —— |
background | 背景颜色 | string | —— | —— |
block | 是否独占一行 | boolean | —— | false |
spacing | 文字间距 | string / number | —— | —— |
line-height | 行高 | string / number | —— | —— |
indent | 首字符缩进量 | string / number | —— | —— |
bold | 文字是否以粗体显示 | boolean | —— | false |
decoration | 文字的修饰 | TextDecoration | overline line-through underline | —— |
padding | 内边距 | string / number | —— | —— |
width | 宽度 | string / number | —— | —— |
ellipsis | 是否省略文本，需配合 width 宽度使用 | boolean | —— | —— |
center | 是否居中 | boolean | —— | false |
Slots
| 名称 | 说明 |
|---|---|
default | text 的内容 |
Interface
组件导出以下类型定义：
ts
import type { TextInstance, TextProps, TextDecoration } from 'fighting-design'TextDecoration
ts
type TextDecoration = 'overline' | 'line-through' | 'underline'