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