lock-box

1.0.2 • Public • Published

Lock Box


这是一个用于单行文本的容器组件,最初的需求源于表格的单元格内容过长引起的表格布局畸形。

用这个组件可以简单优雅地实现定宽,最小宽,最大宽以及自动保护内容不被挤压。

示例:

import LockBox from 'lock-box';
 
...
 
render() {
    return (
        <div class="outer">
            <LockBox contents="Hello box!" lock="auto" hint="top" />
            <LockBox contents="I'm looooooooooooooooooooong text..." lock="<300" />
            <LockBox contents="I'm protected .........." lock="100%" />
        </div>
    );
}

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";

Readme

Keywords

none

Package Sidebar

Install

npm i lock-box

Weekly Downloads

1

Version

1.0.2

License

ISC

Last publish

Collaborators

  • chengxiao