Text 文本

概述

Text 文本，用于包裹文本内容。

温馨提示

页面重置组件class样式时如果未生效，需在样式后加上 !important。 V2.3.0+ 支持

引入

以下介绍两种常用的引入方式。

第一种：在页面json文件中引入

{
  "navigationBarTitleText": "文本",
  "usingComponents": {
    "fui-text":"/components/firstui/fui-text/fui-text"
  }
}

第二种：在根目录app.json文件中全局引入

  "usingComponents": {
     "fui-text":"components/firstui/fui-text/fui-text"
  }

代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 text 属性设置文本内容，size 属性设置字体大小。

<fui-text text="{{text}}" size="{{28}}"></fui-text>

data: {
    text: 'First UI是一套超高性能、超高颜值的移动端UI综合解决方案，包含业内顶尖的组件库、强大的功能库、丰富精美的模板库，提供uni-app(完美支持nvue)、微信小程序、支付宝小程序等版本，兼顾高效率与高性能，让您的开发获得百倍提质提速！'
}

不同样式类型

通过 text 属性设置文本内容， type 属性设置样式类型。

<fui-text text="primary" type="primary"></fui-text>
<fui-text text="success" type="success"></fui-text>
<fui-text text="warning" type="warning"></fui-text>
<fui-text text="danger" type="danger"></fui-text>

自定义颜色/块状

通过 text 属性设置文本内容， color 属性设置字体颜色， block 属性设置是否为块状。

<fui-text text="block" color="brown" block></fui-text>

数据脱敏-姓名

通过 text 属性设置文本内容， text-type 属性设置文本类型， format 属性设置文本是否脱敏格式化。

<fui-text text="王小仙" text-type="name" format></fui-text>

Slots

插槽名称	说明
default	文本左侧自定义内容
right	文本右侧自定义内容

Props

属性名	类型	说明	默认值	其他说明
type	String	样式类型，可选值：primary，success， warning，danger，purple，gray，black	black	-
text	String	文本内容	-	-
size	Number, String	字体大小	32	-
unit	String	字体大小单位，可选值：rpx、px	rpx	-
color	String	字体颜色，设置值则type失效	-	-
fontWeight	String	字重	400	-
align	String	文本对齐方式，可选值：left、center、right	left	-
decoration	String	文本的修饰，可选值：none、 underline、line-through	none	-
lineHeight V1.7.0+	Boolean	是否将行高设置与字体大小一致	false	-
padding	String	文本padding值	0	-
block	Boolean	是否为块状	false	-
textType	String	文本类型，可选值：text、mobile、amount、name	text	-
format	Boolean	文本是否脱敏格式化，仅textType取值mobile、amount时有效	false	-
call	Boolean	点击时是否拨打电话，仅textType取值mobile时有效	false	-
userSelect	Boolean	文本是否可选	false	-
decode	Boolean	是否解码	false	-
highlight	Boolean	是否有点击效果	false	-
disable	Boolean	是否禁用点击	false	-
unShrink V1.9.5+	Boolean	flex布局下是否取消收缩，不被挤压	false	-
param	Number, String	自定义参数，点击事件中回传	-	-

Events

事件名	说明	回调参数
bind:click	点击文本时触发	event.detail = {   text:文本内容   param:自定义参数 }

示例预览