# Text 文本

用于显示文字,封装 text 文本组件,为兼容各端并快速实现文本的样式的处理。

# 基本使用

通过 <n-text> 形式调用,设置 text 参数即可

<template>
	<view>
		<n-text text="明月几时有?把酒问青天。不知天上宫阙,今夕是何年。"></n-text>
	</view>
</template>

# 超出行显示省略号

设置参数 lines 超出行数省略即可

<template>
	<view>
		<n-text lines="2" text="明月几时有?把酒问青天。不知天上宫阙,今夕是何年。我欲乘风归去,又恐琼楼玉宇,高处不胜寒。起舞弄清影,何似在人间。"></n-text>
	</view>
</template>

# 文本样式

通过 size 参数来设置文本字号, color 参数设置文本颜色,文本颜色可以是内置的Color 色彩(例如:$theme-6),也可自定义(例如:#1890ff)

<!-- 内置Color 色彩 -->
<n-text size="32" color="$theme-6" text="明月几时有?把酒问青天。不知天上宫阙,今夕是何年。"></n-text>
<!-- 自定义颜色 -->
<n-text size="32" color="#1890ff" text="明月几时有?把酒问青天。不知天上宫阙,今夕是何年。"></n-text>

# 文本位置

设置 align 参数来调整文本显示的位置

  • left : 左侧
  • center : 居中
  • right : 右侧
<template>
	<view>
		<n-text align="center" text="明月几时有?把酒问青天。"></n-text>
	</view>
</template>

# 文本装饰

设置 decoration 参数来装饰文本内容

  • none : 默认值,定义标准的文本。
  • line-through : 定义穿过文本下的一条线
  • underline : 定义文本下的一条线
<template>
	<view>
		<n-text decoration="line-through" text="明月几时有?把酒问青天。"></n-text>
	</view>
</template>

# API

# Attribute 参数

参数 说明 类型 可选值 默认值
text 文本内容 String, Number - -
size 文本字号 String, Number - 30
color 文本颜色 String - $gray-13
lines 超出行省略 String, Number - -
align 文本位置 String left、center、right left
leading 行高 String, Number - -
weight 文本加粗 Boolean true false
decoration 文本修饰 String none、line-through、underline none
width 文本宽度 String, Number - -
margin 外边距,空格分割字符串形式简写,默认单位rpx。例如:"12" 、 "12 24"。 String - -
style-custom 组件自定义样式,同 css 样式。注意带’-‘连接符的属性需要使用小驼峰写法如:backgroundColor:red Object - -

# Event 事件

事件名 说明
1.0.6 @click 点击事件