[英]ellipsis in server side blazor
如何在服务器端 blazor 中获得省略号? 因此,如果显示的文本长度为 200 个字符,则要求截断并显示“显示更多”链接,但如果用户决定单击“显示更多”,则渲染整个文本。
笔记:
我是 blazor 的新手,但做了一些研究,但未能找到一些东西。
这是我创建的一个快速组件,您可以使用它。
演示: https : //blazorfiddle.com/s/yxnf021e
<div>
@GetDisplayText()
@if (CanBeExpanded)
{
@if (IsExpanded)
{
<a @onclick="@(() => { IsExpanded = false; })" style="font-style: initial; font-size: 0.7em; color: dimgray; cursor: pointer;">Show less</a>
}
else
{
<a @onclick="@(() => { IsExpanded = true; })" style="font-style: initial; font-size: 0.7em; color: dimgray; cursor: pointer;">Show more</a>
}
}
</div>
@code {
[Parameter] public string Text { get; set; }
[Parameter] public int MaxCharacters { get; set; } = 200;
public bool IsExpanded { get; set; }
public bool CanBeExpanded => Text.Length > MaxCharacters;
public string GetDisplayText()
{
return IsExpanded ? Text : Truncate(Text, MaxCharacters);
}
public string Truncate(string value, int maxChars)
{
return value.Length <= maxChars ? value : value.Substring(0, maxChars) + "...";
}
}
用法:
<Component Text="SomeLongTextString"></Component>
// or if you want to change the max characters:
<Component Text="SomeLongTextString" MaxCharacters="350"></Component>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.