[英]How to toggle antd Typography.Paragraph ellipsis
I am using the <Typography.Paragraph>
component to display the description of some items in a list.我正在使用
<Typography.Paragraph>
组件来显示列表中某些项目的描述。 I want to limit the number of rows in the description to 2.我想将描述中的行数限制为 2。
Now I can use the ellipsis
prop for the <Typography.Paragraph>
to limit the description to only display 2 lines and set it to be expandable.现在我可以使用
<Typography.Paragraph>
的ellipsis
属性将描述限制为仅显示 2 行并将其设置为可扩展。 However, I cannot seem to find a way to collapse the text back to just 2 rows with an ellipsis (...)
但是,我似乎无法找到一种方法将文本折叠回仅有 2 行的省略号
(...)
This is a snippet of my current code.这是我当前代码的片段。
const listOfLongText = [.....];
listOfLongText.map((text,i) => {
<Paragraph ellipsis={{ rows: 2, expandable: true }}>
{text}
</Paragraph>
})
I know about the onExpand
callback for the ellipsis
prop of Paragraph
but not sure how to get the toggle between expand and collapse functionality using onExpand
我知道
Paragraph
的ellipsis
道具的onExpand
回调,但不确定如何使用onExpand
在展开和折叠功能之间进行切换
The <Typography.Paragraph>
API is defined here <Typography.Paragraph>
API 在这里定义
If you need more information, drop a comment and I will provide it.如果您需要更多信息,请发表评论,我会提供。
There is no such option in the current antd
version ( 3.23.4
).当前的
antd
版本( 3.23.4
)没有这个选项。
You need to control it via state for example:您需要通过 state 控制它,例如:
<Paragraph
ellipsis={{
rows: 3,
expandable: true,
onExpand: this.typoExpand
}}
>
Ant Design, a design language for background applications, is refined by Ant
UED Team. Ant Design, a design language for background applications, is
refined by Ant UED Team. Ant Design, a design language for background
applications, is refined by Ant UED Team. Ant Design, a design language for
background applications, is refined by Ant UED Team. Ant Design, a design
language for background applications, is refined by Ant UED Team. Ant Design,
a design language for background applications, is refined by Ant UED Team.
</Paragraph>;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.