Appearance

目录

<text> ​

<text>是Tenon中用于文本渲染的组件

WARNING

  • <text>标签仅支持文本，不支持嵌套子组件

  • <text>标签在 Tenon 中仍然是块级元素

属性 ​

属性名类型默认值说明
richTextArray<RichText>[]待渲染的富文本

RichText 对象如下所示 ​

TIP

当image属性和text属性都存在时，如果image是本地图片，会被直接显示，text会被忽略；如果image是网络图片，会首先显示text的属性值，当图片下载完成后，text将会被图片替换；如果网络图片下载失败，将一直显示text的属性值。

属性名类型默认值说明示例
colorstring系统默认文本颜色color: '#000000'
backgroundColorstring系统默认背景颜色color: '#FF0000'
fontFamilystring系统默认字体fontFamily: 'Times New Roman'
fontSizenumber|string16字体大小fontSize: 16 | '48px'
fontWeightstring'normal'字体粗细fontWeight: 'normal' | 'bold'
fontStylestring'normal'字体样式（斜体）fontWeight: 'normal' | 'italic'
textDecorationstring'none'文本装饰（下划线等）textDecoration: 'none' | 'underline' | 'line-through'
imagestring图片资源（支持本地和远程图片）image: 'http://xxx/test.jpg'
imageWidthnumber|string原始图片宽度图片宽度imageWidth: 100 | '100px'
imageHeightnumber|string原始图片高度图片高度imageHeight: 100 | '100px'
imageAlignstring'baseline'图片和文字的对齐方式imageAlign: 'baseline' | 'top' | 'center' | 'bottom'
hrefstring网址链接href: 'http://hummer.didi.cn'
hrefColorstring系统默认网址链接的文字颜色hrefColor: '#0000FF'

样式 ​

通用样式，可参考样式介绍

专属样式如下所示：

属性名类型默认值说明示例
colorString系统默认文本颜色color: '#000000'
font-familyString系统默认字体font-family: 'Times New Roman'
font-sizeNumber | String16字体大小font-size: 16 | '48px'
font-weightString'normal'字体粗细font-weight: 'normal' | 'bold'
font-styleString'normal'字体样式（斜体）font-style: 'normal' | 'italic'
text-alignString'left'文本对齐方式text-align: 'left' | 'center' | 'right'
text-decorationString'none'文本装饰（下划线等）text-decoration: 'none' | 'underline' | 'line-through'
text-overflowString'ellipsis'文本内容超出控件时的省略样式text-overflow: 'clip' | 'ellipsis'
text-line-clampNumber0文本行数text-line-clamp: 1 //单行显示
text-line-clamp: 0 //不限制行数（默认）
letter-spacingNumber0字间距（标准字体大小的倍数，单位是em）letter-spacing: 0.5
line-spacing-multiNumber1行间距（倍数）line-spacing-multi: 1.2

事件 ​

通用事件，可参考事件介绍

示例 ​


Tenon Vue ​

html
<!-- App.vue -->
<template>
  <view>
    <text>Hello World!</text>
  </view>
</template>
<script>
  export default{}
</script>

更多用法，可参考Tenon Vue 官方示例。

Tenon React ​

jsx
import React from "react"

import Tenon from "@hummer/tenon-react"

function TextApp() {
  return (
    <text>
      Hello Tenon React!
    </text>
  );
}

Tenon.render(<TextApp />)

更多用法，可参考Tenon React 官方示例。