Nutella Peanut-Butter Marshmallow

    rax-text
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.0 • Public • Published

    rax-text

    npm

    支持

    Web / Weex / 阿里小程序 / 微信小程序 / 字节跳动小程序

    描述

    Text 用于显示文本,在 web 中实际上是一个 span 标签而非 p 标签。

    安装

    $ npm install rax-text --save

    属性

    属性 类型 默认值 必填 描述 支持
    numberOfLines number 1 false 行数 browserweexminiAppquickApp miniApp
    selectable boolean false false 是否可选 miniApp
    space string false 以何种方式显示连续空格 miniApp
    decode boolean false 是否解码。为 true 时表示对文本内容进行解码,可解析的 HTML 实体字符有:  < > & '     miniApp

    示例

    import {createElement, render, Component} from 'rax';
    import DU from 'driver-universal';
    import View from 'rax-view';
    import Text from 'rax-text';
    
    const styles = {
      root: {
        width: 750,
        paddingTop: 20,
      },
      container: {
        padding: 20,
        borderStyle: 'solid',
        borderColor: '#dddddd',
        borderWidth: 1,
        marginLeft: 20,
        marginRight: 20,
        marginBottom: 10,
      },
      textBlock: {
        fontWeight: '500',
        color: 'blue',
      },
      logBox: {
        padding: 20,
        margin: 10,
        borderWidth: 1,
        borderColor: '#f0f0f0',
        backgroundColor: '#f9f9f9',
      },
    };
    
    class App extends Component {
      render() {
        return (
          <View style={styles.root}>
            <View style={{
              ...styles.container, ...{
                flexDirection: 'row',
                justifyContent: 'flex-start',
              }
            }}>
              <Text>text</Text>
              <Text style={{
                color: '#ff4200'
              }}>Mixing</Text>
            </View>
    
            <View style={styles.container}>
              <Text numberOfLines={1} style={{
                width: 300,
                textOverflow: 'ellipsis',
              }}>Single line of text exceeds truncated text</Text>
    
              <Text numberOfLines={2} style={{
                width: 300,
                textOverflow: 'ellipsis',
              }}>
              Multi-line text exceeds truncated text, exceeds truncated text, exceeds truncated text, exceeds truncated text</Text>
            </View>
    
            <View style={styles.container}>
              <Text style={{textDecoration: 'underline'}}>
              Text underline
              </Text>
              <Text style={{textDecorationLine: 'none'}}>
               no Underlined
              </Text>
              <Text style={{textDecoration: 'line-through'}}>
              Text strikethrough
              </Text>
            </View>
    
            <View style={styles.container}>
              <Text style={{lineHeight: '120rpx'}}>
              Line height 120rpx, multi-line text text folding effect Multi-line text text folding effect
              </Text>
            </View>
    
          </View>
        );
      }
    }
    
    render(<App/>, document.body, {driver: DU});

    Install

    npm i rax-text

    DownloadsWeekly Downloads

    515

    Version

    2.2.0

    License

    BSD-3-Clause

    Unpacked Size

    69.8 kB

    Total Files

    78

    Last publish

    Collaborators

    • zeroling
    • yuanyan
    • fyangstudio
    • answershuto
    • solojiang
    • recover758126
    • marc.hy
    • rax-publisher