Appearance

目录

Text ​

文本展示控件。

样式 ​

除支持 通用布局样式 和 通用视图样式 以外，还支持以下样式：

属性名类型默认值说明示例
colorstring系统默认文本颜色color: '#000000'
fontFamilystring系统默认字体fontFamily: 'Times New Roman'
fontSizenumber|string16字体大小fontSize: 16 | '48px'
fontWeightstring'normal'字体粗细fontWeight: 'normal' | 'bold'
fontStylestring'normal'字体样式（斜体）fontStyle: 'normal' | 'italic'
textAlignstring'left'文本水平对齐方式textAlign: 'left' | 'center' | 'right'
textVerticalAlignstring'center'文本垂直对齐方式textVerticalAlign: 'top' | 'center' | 'bottom'
textDecorationstring'none'文本装饰（下划线等）textDecoration: 'none' | 'underline' | 'line-through'
textOverflowstring'ellipsis'文本内容超出控件时的省略样式textOverflow: 'clip' | 'ellipsis'
textLineClampnumber0（无限制）文本行数textLineClamp: 1
letterSpacingnumber0字间距（标准字体大小的倍数，单位是em）letterSpacing: 0.5
lineSpacingMultinumber1行间距（倍数）lineSpacingMulti: 1.2

属性 ​

除支持 通用视图属性 以外，还支持以下属性：

属性名类型默认值说明示例
textString普通文本内容this.text = "Hello Hummer!";
richTextString富文本内容详见下面 富文本属性 这一节
textCopyEnablebooleanfalse是否支持长按复制功能this.textCopyEnable = true;

富文本属性 ​

通过 this.richText = {富文本内容}; 或 this.richText = [{富文本内容1}, {富文本内容2}]; 这种格式支持。

当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'

示例 ​

js
let text = new Text();
text.style = {
    color: '#F0F0F0',
    textAlign: 'center',
    fontSize: 20,
};

// 普通文本
text.text = 'This is a text!';

// 富文本（场景1）
text.richText = {
    text: "xxxx",
    color: '#FF0000',
    fontSize: 20,
};

// 富文本（场景2）
text.richText = [
    {
        text: "1111",
        color: '#00FF00',
        fontSize: '40',
        href: 'http://www.baidu.com',
        hrefColor: '#0000FF',
    },
    {
        text: "2222", //相当于图片显示前的占位文本
        color: '#00FF00',
        fontSize: '16',
        image: "http://b-ssl.duitang.com/uploads/item/201503/08/20150308143143_wCVJF.jpeg",
        imageWidth: 100,
        imageHeight: 100,
        imageAlign: 'center',
    },
    {
        text: "3333",
        image: 'ic_loading',
        imageWidth: 20,
        imageHeight: 20,
        imageAlign: 'center',
        color: '#0000FF',
        fontSize: '10',
    }
];

// 富文本（场景3）
text.richText = [
    "1111",
    {
        text: "2222", //相当于图片显示前的占位文本
        color: '#00FF00',
        fontSize: '16',
        image: "http://b-ssl.duitang.com/uploads/item/201503/08/20150308143143_wCVJF.jpeg",
        imageWidth: 100,
        imageHeight: 100,
        imageAlign: 'center',
    },
    "3333"
];