繁体   English   中英

如何切换antd Typography.Paragraph ellipsis

[英]How to toggle antd Typography.Paragraph ellipsis

我正在使用<Typography.Paragraph>组件来显示列表中某些项目的描述。 我想将描述中的行数限制为 2。

现在我可以使用<Typography.Paragraph>ellipsis属性将描述限制为仅显示 2 行并将其设置为可扩展。 但是,我似乎无法找到一种方法将文本折叠回仅有 2 行的省略号(...)

这是我当前代码的片段。

const listOfLongText = [.....];

listOfLongText.map((text,i) => {
    <Paragraph ellipsis={{ rows: 2, expandable: true }}> 
        {text}
    </Paragraph>
})

我知道Paragraphellipsis道具的onExpand回调,但不确定如何使用onExpand在展开和折叠功能之间进行切换

<Typography.Paragraph> API 在这里定义


如果您需要更多信息,请发表评论,我会提供。

当前的antd版本( 3.23.4 )没有这个选项。

您需要通过 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>;

编辑 Q-58151314-ExpandEllipsis

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM