@kne/react-clamp v1.1.3

react-clamp

描述

处理文本省略号

安装

npm i --save @kne/react-clamp

概述

可以将字符串溢出部分作为省略号显示，可以支持展开收起操作

示例

示例代码

• 单行或者多行省略
• 展示单行或者多行省略
• clamp(@kne/react-clamp),space(antd/lib/space),divider(antd/lib/divider)

const {default: Clamp} = clamp;
const {default: Space} = space;
const {default: Divider} = divider;

const BaseExample = () => {
    return <Space direction="vertical">
        <div>单行省略:</div>
        <Clamp width={200}>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</Clamp>
        <Divider/>
        <div>多行省略:</div>
        <Clamp width={200} options={{clamp: 2}}>哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</Clamp>
    </Space>;
};

render(<BaseExample/>);

• 带有展开收起操作的情况
• 展示带有展开收起操作的情况，当字数可以完整显示则展开选项不出现，当字数超过时出现。
• clamp(@kne/react-clamp),space(antd/lib/space),input(antd/lib/input)

const {default: Clamp} = clamp;
const {default: Space} = space;
const {default: Input} = input;
const {useState} = React;

const BaseExample = () => {
    const [value, setValue] = useState("哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈");
    return <Space direction="vertical">
        <Input.TextArea value={value} onChange={(e)=>{
            setValue(e.target.value);
        }} autoSize/>
        <Clamp.Expand width={200} options={{clamp: 2}} text={value}>{({
                                                                          needExpand,
                                                                          isExpand,
                                                                          change,
                                                                          clampElement
                                                                      }) => {
            return <div>
                {clampElement}
                {needExpand ? <a onClick={() => change(!isExpand)}>{isExpand ? "收起" : "展开"}</a> : null}
            </div>;
        }}</Clamp.Expand>
    </Space>;
};

render(<BaseExample/>);

API

Clamp.Expand

其他参数参考Clamp，将会原样传给Clamp，注意：由于children参数被占用，只能通过text参数向Clamp传入内容