antd的typegraphy组件实现文本展开,收起功能
在Ant Design(antd)中,可以使用Typography.Text
组件结合ellipsis
属性实现文本的扩展和收起功能。以下是一个简单的例子:
import React, { useState } from 'react';
import { Typography, Button } from 'antd';
const { Text } = Typography;
const ExpandableText = ({ text }) => {
const [expanded, setExpanded] = useState(false);
return (
<div>
<Text ellipsis={!expanded} style={{ width: 200 }}>
{text}
</Text>
<Button onClick={() => setExpanded(!expanded)}>
{expanded ? '收起' : '展开'}
</Button>
</div>
);
};
export default ExpandableText;
在这个例子中,ExpandableText
组件接收一个text
属性,它是需要展示的文本内容。组件状态中有一个expanded
用来跟踪文本是否处于展开状态。通过点击按钮,可以切换expanded
状态,从而使得文本通过ellipsis
属性在超出指定宽度时显示为省略号或者显示全文。
评论已关闭