jdyfe-test
v1.0.27
Published
a text node component
Downloads
2
Readme
jmr-text
a text node component
Features
- 可控制文字显示行数。
- 只显示1行文字时,默认不显示省略号。因为手机屏幕上的文字容器宽度通常都很小,省略号会占用过多的显示宽度。
Installation
npm i -S @jmfe/jmr-text
Usage
import React from 'react';
import ReactDOM from 'react-dom';
import '@jmfe/jmr-text';
ReactDOM.render(
<div>
<Text />
</div>,
container
);
API
| Name | Type | Default | Description | |-------------|----------------|----------------------------------------------|---------| | prefixCls | string | 'jmr-text' | 设置组件根节点及子节点的class前缀 | | className | string | | 为组件根DOM节点添加class | | numberOfLines | number | | 设置文字显示行数,超出部分用...代替(e.g. 1、2、3) | | style | object | { border: '0 solid black', position: 'relative',boxSizing: 'border-box',flexDirection: 'column',alignContent: 'flex-start',flexShrink: 0,fontSize: 12} | 设置根节点内联样式,可重写默认值
其次,jmr-text针对小字体在移动设备上偏移问题,做了适配,使得安卓机器和苹果手机不居中的问题得到解决。 详细问题描述参考cf文档:https://cf.jd.com/pages/viewpage.action?pageId=134824812 props type value needed isVerticalMiddle | type:boolean | value:true | required pixel | type:number | value:8/9/10/11 | required
isVerticalMiddle不传或者false,默认原有组件,传isVerticalMiddle为true必传pixel的值,同时小字体时,组件样式可以通过在组件里写className或者style,覆盖组件样式。
Development
npm install
npm start
Examples
npm start
and then go to http://localhost:8080
License
MIT
Todos
增加参数,实现垂直居中,参考cf地址:https://cf.jd.com/pages/viewpage.action?pageId=134824812 通常情况下字体去掉。 加判断设置了开关,必须传px和 fontSize pixel