时间戳

首页 > 解决方案 > Blazor 自定义重新加载/连接丢失文本

blazor - Blazor 自定义重新加载/连接丢失文本

问题描述

我在 Blazor dotnet core 3.1 中编写应用程序，并希望在重新加载/丢失与服务器的连接时自定义默认文本以使用动画 svg 本地化文本，让用户知道它正在重新连接。

问题是我当前的版本没有隐藏文本，不知道如何或在哪里让它可见/不可见。

使用此链接：

https://docs.microsoft.com/de-de/aspnet/core/blazor/hosting-models?view=aspnetcore-3.1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
</head>
<body>
<div id="components-reconnect-modal" class="my-reconnect-modal components-reconnect-hide">
    <div class="show">
        <p>
            This is the message when attempting to connect to server
        </p>
    </div>
    <div class="failed">
        <p>
            This is the custom message when failing 
        </p>
    </div>
    <div class="refused">
        <p>
            This is the custom message when refused
        </p>
    </div>
</div>       
    <app>
        <component type="typeof(App)" render-mode="ServerPrerendered" />
    </app>    
    <script src="_framework/blazor.server.js"></script>
</body>
</html>

我的风格：

.components-reconnect-hide > div
{
    display: none;
}

.components-reconnect-show > div
{
    display: none;
}
.components-reconnect-show > .show
{
    display: block;
}

.components-reconnect-failed > div
{
    display: none;
}
.components-reconnect-failed > .failed
{
    display: block;
}

.components-reconnect-refused >div
{
    display: none;
}
.components-reconnect-refused > .refused
{
    display: block;
}

知道如何正确完成吗？

谢谢！

标签： blazor

解决方案

推荐阅读