Lock Box
这是一个用于单行文本的容器组件,最初的需求源于表格的单元格内容过长引起的表格布局畸形。
用这个组件可以简单优雅地实现定宽,最小宽,最大宽以及自动保护内容不被挤压。
示例:
import LockBox from 'lock-box'; ... render() { return ( );}
API:
名称 | 说明 | 类型 | 默认值 |
---|---|---|---|
contents | 要显示的内容 | string |
'' |
lock | 锁定策略: (见下面示例) | string |
'auto' |
hint | 提示的位置:top, bottom, cover |
string |
'cover' |
附:
// 锁定策略lock = '[<|>|=]value';// 分为两部分// 第一部分为判定条件,值为 `<`, `>`或`=` // 第二部分限定值,如'auto' '100%' '100' // 自动锁定初始值lock = "auto"; // 保护内容始终被显示(不被换行,不被截断)lock = "100%"; // 使终显示n%的内容长度(上面功能的副产品,应用场景不明...)lock = "n%"; // 限定最小宽度lock = ">120"; // 限定最大宽度lock = "<120"; // 限定绝对宽度lock = "120";